web网站基于微信小程序实现微信扫码登录

113 阅读1分钟

1.实现小程序二维码的生成

微信官方文档: developers.weixin.qq.com/miniprogram…

image.png 在请求参数中,有这么一个字段,scene,这个内容我们是可以自定义的,可以随机生成一个,不妨叫做ticket,那么ticket就与生成的二维码产生了唯一绑定。

2.扫码进入小程序后获取scene

用户扫码后进入小程序,需要获取到scene,也就是二维码中的ticket,官方文档中有说明:

image.png 特别注意:

image.png 扫码进入小程序获取到scene,需要将小程序发布为开发版本,不然无法获取。

3.获取用户的openid

官方文档:developers.weixin.qq.com/ebook?actio…

微信官方给出的流程如下:

image.png

服务端需要实现:developers.weixin.qq.com/miniprogram…

至此,拿到了openid,和ticket进行绑定,也就知道了谁扫了这个二维码。

4.web端检测扫码状态

前端可以通过轮询,携带ticket,来向后端询问该ticket是否有人扫码成功。

5.完整流程

graph TD
A[开始] --> B[生成随机场景值scene作为ticket]
    B --> C[调用微信API生成二维码]
    C --> D[将二维码图片以PNG格式返回给客户端]
    D --> E[在响应头中返回ticket值]
    E --> F[用户扫码授权获取openid]
    F --> G[将ticket与openid关联绑定]
    G --> H[前端携带ticket通过轮询查询扫码状态]
    H --> I[结束]

6.结语

我是通过轮询实现的,当然也可以通过websocket,在小程序中,只要用户授权,是可以获取更多的信息的。希望我的分享能够对大家有所帮助。这是我的思路,仅供大家参考。