【OAuth】前后端分离的场景下,如何实现第三方登录

技术栈

前端:vue.js+vue-router+axios

后端:laravel+passport

第三方登录后端API(以Github为例)

跳转api:domain/api/oauth/github
回调api:domain/api/oauth/github/callback


在前后端分离的情况下,实现第三方登录,我遇到了以下情况:

  • 登录页面有个第三方登录的按钮,链接到 domain/api/oauth/github,跳转到Github的授权页面。
  • 授权成功后回调到 domain/api/oauth/github/callback,然后储存用户数据,生成 access_token我现在的问题就是前端如何获取该 access_token

以下就叙述如何解决该问题。

我目前的解决方法是后端重定向至前台的一个临时页面,在该临时页面的路由的查询字符串中夹带 access_token,如:http://www.dragonflyxd.com/auth/key?token=$token

临时页面内容具体如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<template lang="html">
</template>
<script>
import c from '@/common/js'
import { mapGetters, mapMutations, mapActions } from 'vuex'
export default {
name: 'authKey',
computed: {
...mapGetters([
'isLogined'
])
},
created() {
if (this.isLogined) {
// 登录过的用户,跳转到首页
c.logged()
} else {
// 获取 access_token
const token = this.$router.currentRoute.query.token
this.successLogin(token)
}
},
methods: {
// 成功登录后的操作
successLogin(token) {
// 存储 ACCESS_TOKEN 进 localstorage
window.localStorage.setItem('ACCESS_TOKEN', token)
// 更改登录状态
this.CHECKOUT_LOGIN_STATUS()
// 加载个人信息
this.loadProfile()
// 跳转到首页
this.$router.replace('/')
},
...mapMutations([
'TOGGLE_LOADING_STATUS',
'CHECKOUT_LOGIN_STATUS'
]),
...mapActions([
'loadProfile'
])
}
}
</script>
<style lang="stylus">
</style>