OAuth2.0实现第三方登录(qq)-前端

前言

市面上大多系统都接入了qq,微信第三方登录, 使用OAuth2.0实现第三方登录(qq登录),这项技术需要去qq互联申请appid和appkey.本篇第三方由后端去接入,前端配合去实现.

开发环境

• 前端采用vue去配合实现,提前下载好nodejs , vue脚手架
• 一个已经搭建好的OAuth2.0第三方(由后端去搭建) , 并确定好重定向的地址

OAuth2.0的授权流程

官方流程

• 前端根据第三方地址跳转到第三方(地址就是后端搭建好的地址)
• 用户同意授权后,认证服务器将Authorization Code经由用户给到客户端
• 客户端使用Authorization Code + redirect_url 向认证服务器获取Access Token
• 客户端使用令牌(Access Token),去获取对应用户身份的OpenID
• 使用OpenID和Access Token去调用获取用户信息的接口来获取数据
  (本次项目流程由于qq和内部账号绑定,客户端直接使用令牌向资源服务器获取用户信息)

前端实现

1. 第三方处理: 用户给予客户端授权后换取一个code，然后会跳到一个授权页面（认证服务器），这个授权有客户端id（client_id）、授权模式、授权权限、重定向等拿着信息去认证服务器换取一个访问令牌（token），最后拿着令牌去资源服务器请求资源.
2. 前端获取令牌去访问资源服务器获取用户信息

具体实现

所遇问题: 第三方返回的令牌无法立即获取存储,进行跳转
解决方案: 加一个中间页,后端重定向到中间页 , 由中间页进行判断和存储令牌,从而实现页面跳转实现登录

1.创建好中间页,路由文件配置,并打开history模式

// 打开history模式是可以配合第三方(同源) , 而hash模式只能配合与当前url同文档的url
const createRouter = () => new Router({
  mode: 'history',  // 打开history
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

2. permission.js

 // 路由守卫白名单,没有token也能跳转到该页面
   const whiteList = ['/login', 'middlepage']

3. middlepage,vue

  created(){
      // 返回的token在url地址后面 , 可以使用 this.$route.query 去获取想要的参数
     if(this.$route.query.access_token){
         // 如果有就将其存储在vuex里
         this.$store.dispatch("Login",this.$router.query.access_token).then(()=>{
            this.$router.push({path:"/"})
         })
     } else {
        this.$router.push({path:"/"});  
     }
  }

4. 存储在vuex后记得将token 加载请求头再去发送请求

// getToken 引入的获取token的方法
service.interceptors.request.use(
  config => {
    if (store.getters.token) {
      config.headers['token'] = getToken()
    }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

---

初学的vue的小伙伴如果不清楚目录,可以下载 vue-element-admin空项目来了解项目的基本配置.

学习到的伙伴记得点赞哦, 谢谢啦~