基于Vue实现微博三方登录流程解析

简介

本篇攻略旨在讲解如何在Vue项目中集成微博三方登录功能，这将涉及到与微博开放平台的授权交互过程。本文所讲解的示例基于Vue.js 2.0框架及axios插件。

准备工作

在开始之前，需要先准备好以下工作：

• 微博开发者账号及应用信息（包括App Key、App Secret、回调地址等）
• Vue项目基础结构
• 安装axios插件
• 将微博开放平台的SDK文件复制到项目中

获取授权Code

首先，为了能够获取用户授权，我们需要在前端页面中创建“登录”按钮，并且在点击该按钮时跳转到微博开放平台的授权页。在授权页中，用户可以选择授权应用的相关权限。

接下来是示例HTML代码：

<template>
  <div>
    <button @click="handleWeiboLogin">微博登录</button>
  </div>
</template>

在点击按钮后，我们需要通过axios来请求微博开放平台的授权接口，以获取用户的授权Code。

import axios from 'axios'

export default {
  methods: {
    handleWeiboLogin () {
      window.location.href = `https://api.weibo.com/oauth2/authorize?client_id=${APP_KEY}&response_type=code&redirect_uri=${REDIRECT_URI}`
    }
  }
}

其中，APP_KEY为在微博开发者账号中申请的开发应用的App Key，REDIRECT_URI为在微博开发者账号中设置的应用回调地址。

获取AccessToken

在获取到用户的授权Code后，我们需要将该Code传回后端，并在后端中通过请求微博开放平台的AccessToken接口，获取到用户的AccessToken。

示例代码如下：

import axios from 'axios'

export default {
  methods: {
    async handleWeiboLogin () {
      const code = await this.getAuthCode()
      const token = await this.getAccessToken(code)
      console.log(token)
    },
    async getAuthCode () {
      return new Promise((resolve, reject) => {
        const url = `https://api.weibo.com/oauth2/authorize?client_id=${APP_KEY}&response_type=code&redirect_uri=${REDIRECT_URI}`
        window.location.href = url 
        window.onfocus = () => {
          const code = new URLSearchParams(window.location.search).get('code')
          if (code) {
            resolve(code)
          }
          else {
            reject('获取授权Code失败')
          }
        }
      })
    },
    async getAccessToken (code) {
      try {
        const res = await axios.post(`https://api.weibo.com/oauth2/access_token?client_id=${APP_KEY}&client_secret=${APP_SECRET}&grant_type=authorization_code&code=${code}&redirect_uri=${REDIRECT_URI}`)
        return res.data.access_token
      } catch (err) {
        console.log(err)
        throw new Error('获取AccessToken失败')
      }
    }
  }
}

其中，getAuthCode()方法用于获取授权Code，getAccessToken()方法用于根据Code获取到AccessToken。window.location.href用于跳转到微博开放平台的授权页面，window.onfocus用于监听页面的获取焦点事件，以便在用户完成授权之后获取到Code。

示例说明

在得到用户的AccessToken之后，我们可以用它来调用一些需要授权才能调用的接口，例如获取用户信息、发微博等。

示例代码如下：

import axios from 'axios'

export default {
  methods: {
    async handleWeiboLogin () {
      const code = await this.getAuthCode()
      const token = await this.getAccessToken(code)
      const userInfo = await this.getUserInfo(token)
      console.log(userInfo)
    },
    async getAuthCode () {
      // ...
    },
    async getAccessToken (code) {
      // ...
    },
    async getUserInfo (token) {
      try {
        const res = await axios.get(`https://api.weibo.com/2/users/show.json?access_token=${token}`)
        return res.data
      } catch (err) {
        console.log(err)
        throw new Error('获取用户信息失败')
      }
    }
  }
}

其中，getUserInfo()方法用于获取当前用户的微博账号信息。在该方法中，我们将用户的AccessToken作为参数传入，在请求微博开放平台的用户信息接口时，将AccessToken作为请求参数传入。在请求完成后，我们将得到一个表示用户信息的JSON对象。