哈希空间

实现网页上微信公众号二维码扫码登录

为了方便用户扫码登录网站,同时给微信公众号引流增加关注。

我们可以在网站上放置微信动态二维码,当用户扫码/关注后会给网站后台发送一个消息。

我们依据这个消息就可以构建一个登录机制。

这里建议首先仔细阅读微信的官方文档
https://developers.weixin.qq.com/doc/offiaccount/Account_Management/Generating_a_Parametric_QR_Code.html

了解一下动态生成带参数的二维码的机制。需要明确的是只支持 服务号 生成带参数的二维码,普通的订阅号是不支持的。

实现网站扫码自动登录的难点在于把网站的浏览用户和扫码行为进行关联。

这里我们先给每个访问网站的用户都写入一个cookie,我们暂且称之为 tokenId ,值我们保存到 数据库表 token 中 ,值为 32位随机字符串。

网站加载后,通过 js 请求 后端接口,查询 这个tokenId 是否已经关注了微信公众号。

一开始的情况,当然是没有关注。也就是没有 tokenId 关联的 openid 。这时候接口里返回 一个依据这个tokenId 作为参数 生成的二维码,这个二维码通过上面提到的 微信接口生成即可。

这时候网页上已经可以展示一个二维码供用户进行扫码了。

当用户扫码后,微信会通知到我们的服务器接口,包含这个 tokenId 参数。因为这个二维码就是通过参数 tokenId 生成的。在微信通知的信息中还包含一个 openid 参数。这时候我们把 tokenId 和 openId 的关联关系保存到数据库表 token 中。

网页端需要实现一个定时器,比如1秒请求一次服务器端,轮询是否已经有了 tokenId和openId 的绑定关系。如果已经有了,则实现了登录。网页提示 登录成功即可。

如果对完整源代码感兴趣,可以在微信公众 哈希空间 里留言。谢谢!

本文 最佳观看地址:https://www.hashspace.cn/wechat-web-login.html 阅读 4789

打开 哈希空间 微信小程序中查看更佳