提供微信扫一扫登录能力。支持个人网站接入，无需企业认证，无需另外申请微信公众号， 也能即刻拥有微信 [扫一扫] 登录能力

 

1、登录时序图

2、生成登录二维码相关信息

 

注：登录二维码在开发者服务器直接生成，只需按指定规则生成即可

 

2.1、获取密钥secret：

 

微信扫码登录本网站后，进入个人中心的“我的应用”页面，点击“创建应用”，输入应用名称和回调URL地址 (回调URL用于接收登录成功后的用户信息)

 

 

 

2.2、二维码参数规则如下：

 

示例：http://i.0526.xyz/qr?appid=64255e8f8&key=8oQXVpd2GBNiCdhz&expire=1681111339&sign=32d3f2e58a89c9c42b8a

 

参数说明

参数	类型	必填	说明
appid	string	是	应用的appid
key	string	是	随机字符串
expire	int	是	二维码有效期（时间戳-2分钟以内）
sign	string	是	签名

 

注：二维码参数直接在开发者服务器生成，二维码使用JS渲染展示即可

 

签名算法：MD5(appid+key+expire+secret)

 

3、用户扫码、登录成功后回调给开发者服务器

 

用户登录成功后，登录服务器会给开发者服务器推送通知，该请求是一个“POST”类型，内容格式是application/json，参数如下

 

3.1、开发者服务器接收到的返回参数

·请求类型 ： POST

·内容格式 ： application/json

 

参数	类型	必填	说明
event	string	是	事件：扫码、登录
data	object	是	事件信息：手机号等
timestamp	int	是	时间戳

 

3.2、开发者服务器返回状态码

当开发者服务器接收到登录服务器回调通知后，开发者服务器需要向登录服务器返回响应信息

·内容格式 ： JSON

·返回字段

参数	类型	必填	说明
state	string	是	SUCCESS,FAIL

 

示例代码：

    ## 前端代码
    <div class="qr"></div>

    function showLoginQr() {
        const API_URL = `/api/base/login/qr`
        fetch(`${API_URL}`)
            .then(res => {
                if (res.ok) {
                    res.json().then(rs => {
                        if (rs.code === 1000) {
                            let url = 'http://i.0526.xyz/qr?appid=' + rs.data.appid + '&key=' + rs.data.key + '&expire=' + rs.data.expire + '&sign=' + rs.data.sign;
                            // 二维码渲染，示例使用kjua渲染，这里可使用其他JS渲染方案替代
                            document.querySelector('.qr').appendChild(kjua({text: url}))
                            const t = setInterval(function () {
                                if (rs.data.expire > parseInt(new Date().getTime() / 1000)) {
                                    queryState(rs.data.key) // 轮询查询
                                } else {
                                    clearInterval(t)
                                }
                            }, 1000)
                        }
                    })
                }
            })
    }
    function queryState(key) {
        const API_URL = `/api/base/login/qr/` + key
        fetch(`${API_URL}`)
            .then(res => {
                if (res.ok) {
                    res.json().then(rs => {
                        if (rs.code === 1000) {
                            switch (rs.data) {
                                case 'SCAN':
                                    console.log('扫码成功');// 已经扫码的效果
                                    break
                                default:
                                    console.log('登录成功');// 此次处理登录成功逻辑，如cookie，token等
                                    clearInterval(1)
                            }
                        }
                    })
                }
            })
    },

                    

    ### 后端逻辑
    后端代码这里不做具体示例，只做实现逻辑描述。后端需实现3个接口
    1. 二维码参数生成接口
    2. 登录状态轮询接口
    3. 回调接口

    平台把当前扫码的状态通过回调接口推送给开发者服务器，开发者服务器处理登录逻辑并缓存，前端通过登录状态轮询接口获取登录状态