三方登录流程，为什么要使用三方登录（详细代码）

一. 三方登录介绍

1、三方登录流程（以微博为例）

1）前端获取认证code

• 在Vue页面加载时动态发送请求获取微博授权url
• django收到请求的url后，通过微博应用ID(client_id)和回调地址(redirect_uri)动态生成授权url返回给Vue 当用户点击上面的url进行扫码，授权成功会跳转我们的回调界面并附加code参数
• Vue获取到微博返回的code后，会将code发送给django后端(上面的redirect_uri)

2）获取微博access_token

• 后端获取code后，结合client_id、client_secret、redirect_uri参数进行传递,获取微博access_token

3）获取微博用户基本信息并保存到数据库

• 使用获得的access_token调用获取用户基本信息的接口，获取用户第三方平台的基本信息
• 用户基本信息保存到数据库，然后关联本地用户，然后将用户信息返回给前端

4）生成token给Vue

• django后端借助微博认证成功后，可以使用JWT生成token，返回给Vue
• Vue将token存储到localStorage中，以便用户访问其他页面进行身份验证

2、oauth认证原理

• OAuth是一个开放标准，允许用户让第三方应用访问该用户在某一网站上存储的私密的资源，而无需将用户名和密码提供给第三方应用。
• OAuth允许用户提供一个令牌，而不是用户名和密码来访问他们存放在特定服务提供者的数据。
• 这个code如果能出三方换取到数据就证明这个用户是三方真实的用户

3、为什么使用三方登录

• 服务方希望用户注册, 而用户懒得填注册时的各种信息(主要是为了保证用户的唯一性,各种用户名已占用,密码格式限制).
• 而像微信, QQ, 微博等几乎每个人都会安装的应用中用户肯定会在其中某一个应用中已经注册过，证明该用户在已经注册的应用中的唯一性.
• 第三方登录的实质就是在授权时获得第三方应用提供的代表了用户在第三方应用中的唯一性的openid.并将openid储存在第三方服务控制的本地储存.

4、第三方登录与本地登录的关联（三种情况）

1）情况1: 本地未登录，第一次登录第三方

• 此时相当于注册，直接把第三方信息拉取来并注册成本地用户就可以了，并建立本地用户与第三方用户（openid）的绑定关系

2）情况2：本地未登录，再次登录第三方

• 此时用户已注册，获取到openid后直接找出对应的本地用户即可

3）情况3：本地登录，并绑定第三方

• 这个只要将获取到的openid绑定到本地用户就可以了

二. 微博申请应用

微博申请应用参考：https://cloud.tencent.com/developer/article/1441425
官方微博接入文档：https://open.weibo.com/wiki/Connect/login

1、前端Vue

• vue init webpack webssh
• npm install --save axios

src\router\index.js 添加路由：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/components/Login'
import WeiboCallback from '@/components/WeiboCallback'
import UserBind from '@/components/UserBind'

Vue.use(Router)

export default new Router({
   
  mode: 'history',
  routes: [
    {
    path: '/', name: 'HelloWorld', component: HelloWorld },
    {
    path: '/login', name: 'Login', component: Login },  // 登录页面
    {
    path: '/weibo_callback', name: 'WeiboCallback', component: WeiboCallback },  // 通过空页面发送code给后端
    {
    path: '/userbind', name: 'UserBind', component: UserBind },  // 将本地用户与第三方用户绑定
  ]
})

src\components\Login.vue 登录页面：

<template>
  <div>
    <a :href="weibo_url" class="weibo_login">微博</a>
  </div>
</template>

<style>

</style>

<script>
  import axios from "axios";
  export default {
   
    data: function(){
   
      return {
   
        weibo_url: ''  // 动态从后端获取的微博扫码URL
      }
    },
    mounted(){
   
      this.get_weibo_url()
    },
    methods: {
   
      get_weibo_url: function(){
   
        // http://127.0.0.1:8000/api/weibo_url/
        axios({
   
          url: 'http://127.0.0.1:8000/api/weibo_url/',
          method: 'get'
        }).then(res=>{
   
          this.weibo_url = res.data.weibo_url
        })
      }
    }
  };
</script>

src\components\WeiboCallback.vue 通过空页面发送code给后端：

<template>
    <p>跳转中....</p>
</template>


<script>
import axios from 'axios'
export default {
   
    mounted(){
   
        this.get_code()
    },
    methods: {
   
        get_code: function(){
   
            let code = this.$route.query.code  // 获取微博的验证code
            console.log(code)
            axios({
   
                url:'http://127.0.0.1:8000/api/weibo_back/?code=' + code,
                method: 'get'
            }).then(res=>{
   
                console.log(res)
                if (res.data.code == 200) {
   
                    console.log('成功')
                    localStorage.username = res.data.username
                    localStorage.user_id = res.data.u