使用微信的扫码功能实现网站和小程序端用户账号统一

男娘i 2023-01-15 08:30 50阅读 0赞

**前言**  
上一篇文章（[使用小程序内的扫码功能实现网站和小程序端用户账号统一][Link 1]）发表后，社区大佬杨泉和拾忆分别给出了改进建议，总结两人的建议，就有了用户体验更好的方法，直接使用微信扫码来实现网站和小程序端用户账号统一。

先说一下前提，这次的方法都要用到[扫普通链接二维码打开小程序][Link 1]来实现功能。在小程序后台完成相关配置后，直接用微信扫码就会打开小程序指定页面个并将网址直接通过参数q带给页面。

**小程序扫码登录网站**  
在小程序后台配置中，将二维码规则设置为附带登录码的网址（比如：http://www.abc.com/?loginCode=），小程序功能页面建议设置为需要登录才能访问的页面，小程序中这个页面直接访问时需要判断是否登录，未登录状态要触发登录功能，登录后原样返回。

网页端业务逻辑不变，要登录时先生成一个唯一的登录码，比如：1234，然后放在小程序后台配置的二维码规则网址中，比如：http://www.abc.com/?loginCode=1234，然后把这个网址生成二维码展示。

用户使用微信扫码后会自动打开小程序对应页面，并将二维码对应网址通过参数q带给页面，在onLoad事件中提取q参数并提取出其中的登录码，提交到后端接口，后端接口查询该登录码绑定的用户返回后在小程序端完成登录。网页端在展示二维码后，开启一个轮询，定时访问后端接口查询该登录码的登录状态，在该登录码和小程序已登录用户绑定后完成网站上的用户登录。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjIxNDM2_size_16_color_FFFFFF_t_70]

**小程序扫码登录小程序**  
小程序后台配置和上一个情况一致，网页端流程略有不同。网页上用户登录后展示带登录码的网址对应的二维码，同时将当前登录用户和登录码绑定。微信扫码打开小程序后提取出登录码，提交到后端接口，后端接口查询该登录码绑定的用户返回后在小程序端完成登录。还可以配合wx.login绑定当前用户的openid，实现自动登录。

网页端展示二维码后使用轮询查看登录码的登录状态，到期或者已登录后在网页端销毁二维码。小程序端也需要对当前是否已登录做一个判断并做好切换用户的相关功能。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjIxNDM2_size_16_color_FFFFFF_t_70 1]

总结  
总结下来，这个方法就是以登录码为媒介，通过在某一端将登录码和登录用户绑定后，在另一端实现同一用户的登录，实际使用中还需要考虑登录码的有效期等。

以上方法流程不知道会有什么风险，欢迎大家的讨论。

[Link 1]: http://github.crmeb.net/u/defu
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjIxNDM2_size_16_color_FFFFFF_t_70]: /images/20221022/9a0f4e01b0c44c889d14cf8d5f5a7be2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjIxNDM2_size_16_color_FFFFFF_t_70 1]: /images/20221022/ad7387c3f0464970baa3e584f9e9dacb.png