公众号扫码登录最佳实践
时间：2023-05-11 01:36:01 | 来源：网站运营
时间：2023-05-11 01:36:01 来源：网站运营
公众号扫码登录最佳实践：设计任何一套系统，都离不开用户，用户身份的鉴定，用户资料的储存和更新本身不难，然而用户四处注册账号，等到回头用你的软件时早就忘记了账号密码，尤其是一些工具型的应用，没有必要自建用户体系。
解决用户容易忘记账号和密码这个问题通常的做法的是手机号+短信验证码，这个方案很不错，但是除了会产生短信费用外，还会增加用户的操作成本，用户需要输入手机号码，点击获取短信验证码，等待收取短信同时查看手机，再输入验证码，再点击登录按钮，前前后后一共5个步骤，看来是步骤挺多, 其实操作起来还是可以接受的，但是能不能再优化一些呢？答案是肯定的！
现在网络上随处可见的扫码登录，只需要打开微信扫码，即可完成登录。打开目标网站的登录页面，再打开微信扫码一下页面上的二维码，即可完成目标网站的登录过程，极简的情况下就这两步而已。根据设计需要，还可以在手机端做一些用户确认登录或取消登录的逻辑。
今天要介绍的就是PC端网页应用结合微信实现扫码登录的方案。
实现微信扫码登录的方案有两大类一、微信开放平台接入网站应用这种方式接入简单快速，但是仅限于扫码登录，登录后用户在手机端的页面只能关闭，不能留存下来做更多的事，而且PC端二维码页面是跳到微信侧域名下展示，授权后再跳转回来，不太优雅。如何接入请参考
https://open.weixin.qq.com/cgi-bin/frame?t=home/web_tmpl&lang=zh_CN二、公众号接口通过公众号的接口来实现，这种方式不但能实现扫码登录，还能让用户停留在手机端网页(公众号网页)，或停留在公众号会话窗口，甚至下发消息给用户，本文主要介绍这种方式。
前置条件：微信认证的订阅号或服务号，因为这两种账号才有权限获取用户信息。
2.1 公众号扫码登录方案一：网页授权（推荐）公众号扫码登录方案一：网页授权这种方式逻辑简单易实现，用户还能停留在公众号网页端继续其他操作，也可以登录完成后直接关闭页面。
- 用户访问PC端登录页面，触发WEB服务器端储存其SessionID到数据库用于后续与登录用户的绑定
- 生成二维码并显示，二维码内容是公众号网页的登录页地址，需带上SessionID参数，在这个页面实现授权登录同时把SessionID和用户绑定
- PC端网页开启实时登录结果查询，并进行相应的跳转 (设置最长的检查时间、次数等用于防止用户未扫码导致页面长时间调用后端资源)
- 用户使用微信扫码访问公众号网页登录地址完成授权登录
- WEB服务器将用户信息和SessionID匹配，此时第3步中的实时查询可得到登录结果并跳转
在公众号网页登录页面上用户完成微信授权登录之后，可以停留并显示当前正在登录的PC端网站名称、同意登录按钮、取消登录按钮，这样更贴近微信平台原生的扫码登录逻辑，当然也可以扫码后就直接完成登录过程，简化用户操作，根据实际的业务情况而定。
手机端公众号网页2.2 公众号扫码登录方案二：公众号临时二维码公众号扫码登录方案二：公众号临时二维码这种方式的一个最大的特点就是用户可以停留在公众号会话窗口，并且公众号可以下发消息给用户，缺点是所需权限较高，只有认证过的服务号才能使用，实现起来复杂度也较高。
如果有引导用户到公众号界面或有会话需求则可以考虑这种方式。
- 用户访问PC端登录页面，发起临时二维码获取请求
- 服务器和微信侧通过API沟通获取临时二维码并返回到PC端登录页面显示二维码
- PC端网页开启实时登录结果查询，并进行相应的跳转 (设置最长的检查时间、次数等用于防止用户未扫码导致页面长时间调用后端资源)
- 用户使用微信扫码
- 微信进入公众号会话页面并停留
- 微信侧下发扫码事件给WEB服务器，服务器在收到扫码事件后，将临时二维码与用户匹配，标记登录，第3步中的实时查询可得到登录结果并跳转
- 服务器通过API调用公众号下发消息给用户用作提示或其他用途
扫码事件的发生微信会认为此用户是当前公众号的活跃用户，在一定时间内可多次下发消息给用户，属于被动回复消息。
以上就是微信公众号实现PC端网站扫码登录的解决方案，来自我多个落地项目的经验，希望能帮助到有需要的朋友。
往期文章小鹅通与自有网站账号打通实现统一登录鉴权
H5开发地图组件怎么选？腾讯地图 vs 高德地图
本文相关文档地址- https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html (公众号网页授权)
- https://developers.weixin.qq.com/doc/offiaccount/Message_Management/Receiving_event_pushes.html (公众号临时二维码)
在线咨询
