web端微信扫码登录——通过扫小程序码登录

Web端通过微信扫码登录，可以使用微信官方方案，但它属于付费方案。本篇中，我们总结了一种非付费方案，通过扫码微信小程序二维码进行登录。两者对比如下：

• 微信官方登录：
  • 最简单、最舒服的实现方式
  • 需要收费
• 小程序登录：
  • 专门针对没有获得微信官方付费接口的情况，组合多端实现的一套登录方案
  • 不收费，但是实现难度大
  • 当没有微信官方的付费接口权限时，可以使用该方案。能登录成功的前提是，拥有一个已上线部署的小程序。

小程序扫码

小程序登录需要具备的条件：

• 一个已经上线发布的小程序（该方法的局限性就是这里，主要针对不适用微信开放平台付费接口的情况）
  • 在没有付费开通微信开放平台接口的情况下，可以上线一个小程序，通过这种方式登录
  • 在已有微信开放平台接口权限的情况下，建议采用第一种方式
• 已经上线发布的小程序，需要准备一个登录页面，专门用来执行web端的登录
• 后端服务需要对微信开放平台的进口进行各种调用

登录方案为：

具体登录过程

小程序涉及三个端：

• web前端
• 后台服务端
• 小程序端

Web端

Web端的工作主要包括：

1. 调用后端接口，获取扫描二维码
2. 展示小程序二维码，并轮询二维码状态（调用后端接口）
3. 根据扫码结果，改变二维码的状态
4. 根据扫码结果，进行页面跳转、执行登录成功等功能

Web端的功能比较简单也比较复杂，我们在此处不做代码列举。

后台服务

在登录这一环节，后台主要做两件事情：

• 一是获取小程序二维码
• 二是执行小程序登录

获取二维码

第一步：获取access_token

// 获取小程序access_token
    async queryAccessToken() {
        try {
            return new Promise(async(resolve, reject) => {
                let requestParams = {
                    grant_type: 'client_credential', // 指定值
                    appid: '', // 请填写自己小程序的appid
                    secret: '' // 请填写自己小程序的appsecret
                }
                let url = `https://api.weixin.qq.com/cgi-bin/token?grant_type=${requestParams.grant_type}&appid=${requestParams.appid}&secret=${requestParams.secret}`
                request.get(url, async function(err, response, body) {
                    resolve(JSON.parse(body))
                })
            })
        } catch(e) {
            console.log(e)
        }
    }

第二步：获取小程序二维码

// 获取小程序二维码
async queryQRCode(access_token: string) {
    try {
        return new Promise(async (resolve, reject) => {
            const params = {
                path: 'pages/card/index', // 小程序登录功能的页面
            }
            const url = `https://api.weixin.qq.com/wxa/getwxacode?access_token=${access_token}`
            request({
                url: `https://api.weixin.qq.com/wxa/getwxacode?access_token=${access_token}`,
                method: 'post',
                body: JSON.stringify(params),
                encoding: null,
            }, async function(error, response, body) {
                let data = body
                var base64Img = "data:image/png;base64," + data.toString('base64');  // base64图片编码字符串
                resolve(base64Img)
            })
        })
    } catch(e) {
        console.log(e)
    }
}

说明：

• access_token来自第一步中获取的code

执行登录

微信小程序登录的流程为：

我们只需要在后台：

• 调用 wx.login() 获取 临时登录凭证code ，并回传到开发者服务器。
• 调用 auth.code2Session 接口，换取 用户唯一标识 OpenID 、 用户在微信开放平台账号下的唯一标识UnionID（若当前小程序已绑定到微信开放平台账号） 和 会话密钥 session_key。

之后开发者服务器可以根据用户标识来生成自定义登录态，用于后续业务逻辑中前后端交互时识别用户身份。

将上述微信官方平台的接口封装成服务，供小程序端调用即可。

小程序端

小程序端开发一个微信小程序登录的页面，在Web端扫码成功后，就可在手机端弹出该登录页面，并在手机上确认登录。

<!--index.wxml-->
<view class="container">
  <view>
    <button bindtap="getUserLogin">点击登录</button>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

在getUserLogin方法中，调用后端服务登录接口。登录成功后，Web端会携带用户信息一起，返回给客户端。

示例效果