H5W3
当前位置:H5W3 > 其他技术问题 > 正文

单页应用,如何做第三方登录?

前端依靠vue.js+vue-router将前台页面做成单页应用,后端laravel仅提供接口。


后端第三方登录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

回答:

我是这样做的:
我是写了一个处理后端返回的页面key
后端处理完之后,把access_token放在url的query中并跳转到key页面:

//key.vue
<template>
</template>

<script>
    export default {
        name: 'key',
        beforeCreate() {
            ...
            window.localStorage.access_token = this.$route.query.key
            this.$router.replace({
                name:'home'
            })
            ...
       }
    }
</script>

<style>

回答:

调用github public api的case我做过。

类似的,你的架构是 browser(SPA) -> laravel -> github

所以accesstoken这么能放在浏览器端呢。。。。

SPA,每次index.html加载的时候去你的自己的laravel请求下当前用户是否登录(laravel通过seesion来判断是否登录,而如果用户登录过accesstoken也是存放在laravel端[可能是一个sessionid 和 accesstoken的map])

每次你希望访问github的api,你都是先去请求laravel,laravel作为一个proxy,再捎上你的accesstoken去请求github api的。

本文地址:H5W3 » 单页应用,如何做第三方登录?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址