[对接] pc网站接入微信扫码登录

一、总体流程

1. 公司注册微信开放平台账号，并认证开发者资质（需要300块，只用交一次）；

2. 创建网站应用，获取AppID和AppSecret；

3. 前端在登录页嵌入微信二维码，并将扫码成功后重定向携带的code传给后端；

4. 后端调用微信接口，先获取access_token，再获取用户信息（包含昵称、头像、UnionID）；

5. 判断扫码用户是否关联网站账号（UnionID + 手机号 + 网站账号，三者关联）；

6. 没有关联就是首次登录，需要绑定手机号并发送短信验证码（证明手机号真实性）。

graph LR 微信扫码 --> 获取微信用户信息 --> 允许 -- 首次 --> 输入手机号绑定 --> 发送短信验证码 --> 进入首页

二、前端代码

<div id="wxqrcode-container"></div>;

if (WxLogin) {
    const origin = location.origin;

    // 重复调用可以刷新二维码
    new WxLogin({
        self_redirect: false, // 不改
        id: 'wxqrcode-container', // 二维码容器的id
        appid: APP_ID, // 网站应用的AppID
        scope: 'snsapi_login', // 不改
        redirect_uri: encodeURI(`${origin}/login`), // 重定向地址，通常是登录页地址（注意域名必须和网站应用的授权回调域名一致）
        state: '', // 重定向要带的参数，可以防止csrf攻击（加载二维码前从后端拿state值，扫码后再将state和code一起传回后端，后端验证state是否相同）
        style: 'black', // 文字颜色，只有黑白
        href: `${origin}/wxqrcode.css`, // 二维码的样式文件
    });
}

const code = location.search.split('code')?.[1]?.slice(1);

if (code) {
    // TODO: 将code传给后端
}

三、微信不同应用间的信息互通

网站既有pc站点也有对应的小程序，那在小程序登录后，pc还需要重新绑定手机号吗？

不需要。利用UnionID机制就能实现用户信息互通，因为只要是同一个微信开放平台账号下的移动应用、网站应用、公众号、小程序，用户的UnionID是唯一的（即同一用户，对同一个微信开放平台下的不同应用，UnionID是相同的）。

网站应用最后获取的用户信息包含UnionID；小程序通过wx.login获取用户的UnionID。

四、参考文章

1. 网站应用微信登录开发指南
2. UnionID机制说明