大体思路为
1.跳转到微信页面展示二维码
2.用户授权登录，回调带回code参数。
3.通过code获取access_token。
4.通过 access_token、openid 请求用户信息。
5.拿到用户信息去自己的项目里进行注册请求
话不多说，先说点题外话
微信有两个平台，微信开放平台跟公众平台，很容易混淆。
这里先简单介绍一下，两个平台的区别。
1. 微信公众平台是给编辑用的，微信开放平台是给技术用的。
2. 微信公众平台 用于管理、开放微信公众号（包括订阅号、服务号、企业号），简单的说就是微信公众号的后台运营、管理系统。
- 微信开放平台 主要面对移动应用 / 网站应用 开发者，为其提供微信 登录、分享、支付 等相关权限和服务
由于做的是 web端的微信登录，选择 微信开放平台 下面的网站应用，登录方式是 ‘扫码登录’
创建网站应用时，应用官网地址、网站信息登记表扫描件、网站应用图片。需要提前准备好 ！
对接微信登录时，需要用到 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。
下面开始正式的开发流程
（文档地址先贴为敬 微信登录文档）
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...
