微信扫码登录
发布时间:2026-10-28 | 浏览:1
微信扫码登录基于OAuth2协议的授权码模式,
https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html
第三方应用获取access_token令牌后即可请求微信获取用户的信息,成功获取到用户的信息表示用户在第三方应用认证成功。
第三方使用网站应用授权登录前请注意已获取相应网页授权作用域(scope=snsapi_login),则可以通过在 PC 端打开以下链接: https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect 若提示“该链接无法访问”,请检查参数是否填写错误,如redirect_uri的域名与审核时填写的授权域名不一致或 scope 不为snsapi_login。
用户允许授权后,将会重定向到redirect_uri的网址上,并且带上 code 和state参数
若用户禁止授权,则不会发生重定向。
登录一号店网站应用 https://test.yhd.com/wechat/login.do 打开后,一号店会生成 state 参数,跳转到 https://open.weixin.qq.com/connect/qrconnect?appid=wxbdc5610cc59c1631&redirect_uri=https%3A%2F%2Fpassport.yhd.com%2Fwechat%2Fcallback.do&response_type=code&scope=snsapi_login&state=3d6be0a4035d839573b04816624a415e#wechat_redirect 微信用户使用微信扫描二维码并且确认登录后,PC端会跳转到 https://test.yhd.com/wechat/callback.do?code=CODE&state=3d6be0a40sssssxxxxx6624a415e 为了满足网站更定制化的需求,我们还提供了第二种获取 code 的方式,支持网站将微信登录二维码内嵌到自己页面中,用户使用微信扫码授权后通过 JS 将code返回给网站。 JS微信登录主要用途:网站希望用户在网站内就能完成登录,无需跳转到微信域下登录后再返回,提升微信登录的流畅性与成功率。 网站内嵌二维码微信登录 JS 实现办法:
步骤1:在页面中先引入如下 JS 文件(支持https):
步骤2:在需要使用微信登录的地方实例以下 JS 对象:
3、通过 code 获取access_token ¶
通过 code 获取access_token
4、通过access_token调用接口 ¶
获取access_token后,进行接口调用,有以下前提:
对于接口作用域(scope),能调用的接口有以下:
其中snsapi_base属于基础接口,若应用已拥有其它 scope 权限,则默认拥有snsapi_base的权限。使用snsapi_base可以让移动端网页授权绕过跳转授权登录页请求用户授权的动作,直接跳转第三方网页带上授权临时票据(code),但会使得用户已授权作用域(scope)仅为snsapi_base,从而导致无法获取到需要用户授权才允许获得的数据和基础功能。 接口调用方法可查阅 《微信授权关系接口调用指南》
获取用户信息接口文档:https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Authorized_Interface_Calling_UnionID.html
https://open.weixin.qq.com/
3、添加应用需要指定一个外网域名作为微信回调域名
最终获取appID和AppSecret
我们的开发环境在局域网,微信回调指向一个公网域名。
如何让微信回调请求至我们的开发计算机上呢?
内网穿透简单来说就是将内网外网通过隧道打通,让内网的数据让外网可以获取。开启隧道之后,内网穿透工具会分配一个专属域名/端口,办公软件就已经在公网上了,在外地的办公人员可以在任何地方愉快的访问办公软件了~~
1、在内网穿透服务器上开通隧道,配置外网域名,配置穿透内网的端口即本地电脑上的端口。
这里我们配置 认证服务 端口,最终实现通过外网域名访问本地认证服务。
2、在本地电脑上安装内网穿透的工具,工具上配置内网穿透服务器隧道token。
根据OAuth2协议授权码流程,结合本项目自身特点,接入微信扫码登录的流程如下:
需要定义接口接收微信下发的授权码。
收到授权码调用微信接口申请令牌。
申请到令牌调用微信获取用户信息。
获取用户信息成功将其写入本项目用户中心数据库。
参考微信接口规范中“请求获取授权码” 定义接收微信下发的授权码code接口。
定义WxLoginController类:
接口定义好下边进行测试,主要目的是测试接口调度的环境。
2、在/wxLogin接口中打断点
此时正常进入 /wxLogin 方法,最后跳转到http://www.51xuecheng.cn/sign.html?username=t1&authType=wx。
1、使用restTemplate请求微信,配置RestTemplate bean
在启动类配置restTemplate
2、定义与微信认证的service接口:
3、下边在controller中调用wxAuth接口:
4、在WxAuthService 的wxAuth方法中实现申请令牌、查询用户信息等内容。
2、进入http://www.51xuecheng.cn/wxsign.html
向数据库保存用户信息,如果用户不存在将其保存在数据库。
2、进入http://www.51xuecheng.cn/wxsign.html
4、自动跳转到登录页面,提交认证成功。