web 端三方登录及支付（二）微信三方登录

大体思路为

1.跳转到微信页面展示二维码
2.用户授权登录，回调带回code参数。
3.通过code获取access_token。
4.通过 access_token、openid 请求用户信息。
5.拿到用户信息去自己的项目里进行注册请求

话不多说，先说点题外话

微信有两个平台，微信开放平台跟公众平台，很容易混淆。

这里先简单介绍一下，两个平台的区别。

1. 微信公众平台是给编辑用的，微信开放平台是给技术用的。

2. 微信公众平台用于管理、开放微信公众号（包括订阅号、服务号、企业号），简单的说就是微信公众号的后台运营、管理系统。

微信开放平台主要面对移动应用 / 网站应用开发者，为其提供微信登录、分享、支付等相关权限和服务

由于做的是 web端的微信登录，选择微信开放平台下面的网站应用，登录方式是 ‘扫码登录’

image

创建网站应用时，应用官网地址、网站信息登记表扫描件、网站应用图片。需要提前准备好！
对接微信登录时，需要用到 3 个参数 AppSecret、AppID（应用详情里）、授权回调域（应用详情里）

AppSecret：每一个开放平台账号，会有一个 AppSecret，在创建开放平台账号时得到。这一个开放平台账号下的所有应用（移动应用、网站应用等）都对应这一个AppSecret。如果忘记，可以在应用详情里进行重置。

AppID：每一个应用都有自己的 AppID,在应用详情里可以查看。

授权回调域：即微信扫完码后，回调的地址。

本地开发时授权回调域为本地地址如 localhost:8080 。 redirect_uri 可以为 localhost:8080/xxx (单页应用可以是路由地址，多页应用可以是 html 文件)。

生产环境时授权回调域为正式地址如 www.xxx.com 。redirect_uri 可以为 www.xxx.com/xxx。

image

下面开始正式的开发流程

（文档地址先贴为敬微信登录文档）

1. 跳转到微信页面，进行扫码

注意事项 redirect_uri 需要进行转码、redirect_uri 需要是授权回调域下的地址。
URL += '&state=wechat' state为自定义参数，可以根据自己需要拟定。state会在下一步扫码成功后带在回调的地址上

loginByWeChat() {
    let URL = 'https://open.weixin.qq.com/connect/qrconnect?'
    URL += 'response_type=code'
    URL += `&appid=${WechatInfo.pro.appid}`
    URL += `&redirect_uri=${encodeURIComponent(WechatInfo.pro.redirect_uri)}`
    URL += '&scope=snsapi_login'
    URL += '&state=wechat'
    window.location.href = URL
},

2. 扫码验证成功后，回调到你的 redirect_uri。redirect_uri 上会带有两个参数 code、state。其中 code 用于下一步获取 access_token。state 是你上一步时拼接在url上的。

工具函数用于从回调地址上取到两个参数

handler() {
    const search = window.location.search
    const initialStr = search.substr(1)
    const list = initialStr.split('&')
    const finalList = {}
    list.forEach((i) => {
       const item = i.split('=')
       finalList[item[0]] = item[1]
    })
}

3. 根据回调地址带回的 code 参数，获取access_token。从这一步起开始涉及微信API调用了。so 说一下本地反向代理配置，及服务器nginx规则配置。

本地反向代理
1. vue-cli 配置反向代理在 vue.config.js 中

devServer: {
  host: 'localhost',
  port: 8080,
  https: false,
  open: true,
  proxy: {
    '/wechat': {
      target: 'https://api.weixin.qq.com/',
      changeOrigin: true,
      pathRewrite: {
        '^/wechat': '/'
      }
    }
  }, // 设置代理
  before: app => {}
},

2. create-react-app 配置反向代理在 package.json 中

"proxy": {
  "/wechat": {
    "target": "https://api.weixin.qq.com/",
    "changeOrigin": true,
    "pathRewrite": {
      "^/wechat": "/"
    }
  }
},

服务器nginx规则配置

location /wechat/ {
    proxy_pass      https://api.weixin.qq.com/;
}

进入正题，通过code获取access_token（这里对请求函数进行了柯里化封装，按下不表）


/**
 * 获取 WeChat accesstoken
 * @param {string} params
 */
function getWeChatToken(params) {
  return request('/wechat/sns/oauth2/access_token', {
    method: 'GET',
    params
  })
}


async queryWechatToken() {
  const reqParams = {
    appid: WechatInfo.pro.appid, // 应用的 APPID
    secret: WechatInfo.pro.secret, // 开放平台账号的 APPSecret
    code: finalList.code, // redirect_uri 上带回的 code
    grant_type: 'authorization_code' // 固定值
  }
  const wechatToken = await getWeChatToken(reqParams) // 得到的 access_token 等信息
},

正确的返回：

{
"access_token":"ACCESS_TOKEN",
"expires_in":7200,
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID",
"scope":"SCOPE",
"unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"
}

**可以用到的是 access_token、openid。

4. 根据access_token、openid，获取用户信息。


/**
 * 获取 WeChat userinfo
 * @param {string} params
 */
export function getWeChatInfo(params) {
  return request('/wechat/sns/userinfo', {
    method: 'GET',
    params
  })
}


async queryWechatInfo() {
  const params = {
     access_token: wechatToken.access_token, // 接口调用凭证
     openid: wechatToken.openid // 授权用户唯一标识
  }
  const wechatData = await getWeChatInfo(params) // 用户信息
},

5. 拿到用户信息，调用自己项目的注册接口，进行注册。

blablabla...

web 端 三方登录及支付（二）微信三方登录