如何给网站添加微信扫描二维码登录功能

  备案动态     |      2023-08-30
如何给网站添加微信扫描二维码登录功能

准备材料:

1. 微信开放平台注册

2. 一个域名。需要记录

3、ssl证书一份。现在微信平台需要https

4.一台服务器。推荐:腾讯云服务器。如果您不知道如何搭建网站,可以参考《如何使用云服务器搭建https网站?》 ”

一、微信开放平台操作步骤

微信开放平台地址:https://open.weixin.qq.com

需要注意的是,网站集成微信登录需要在微信开放平台上操作,这与微信公众平台不同。虽然双方最终的唯一用户ID都是openId,但并不互通。开发平台想要与公共平台进行通信,必须将两个平台相互绑定,然后获取唯一标识的unionId。

下面说一下开放平台上的操作步骤:

1.创建“网站应用”

登录对接PC网站,创建“网站应用”。运行截图如下:

新网站申请截图

2.获取AppID和AppSecret

微信审核通过后,会分配对应的AppId。 AppSecret需要管理员扫描生成。生成后的截图如下:

查看AppId截图

二、开发指南

微信OAuth2.0授权登录允许微信用户使用微信身份安全登录第三方应用或网站。微信用户授权登录有权访问微信OAuth2.0的第三方应用后,第三方可以获得用户的接口调用证书(access_token),可以用来调用微信开放的授权关系接口平台通过access_token,获取微信用户的基本开放信息,帮助用户实现基本开放功能。整体流程如下:

1、第三方发起微信授权登录请求。微信用户允许第三方应用授权后,微信将启动应用或重定向至第三方网站,并携带授权临时票码参数; 2、添加AppID、AppSecret等,通过API换取access\_token; 3、通过access\_token进行接口调用,获取用户的基础数据资源或帮助用户实现基本操作。复制:

三、开发实战

项目中使用了开源项目WxJava,WxJava源码地址(https://github.com/Wechat-Group/WxJava);

首先新建一个Spring Boot项目,具体可以参考文章https://mp.weixin.qq.com/s/YW9nWbtHAMHWQ--PgUmZRg

创建新项目后,继续执行以下步骤。

1、pom.xml引入jar包

!-- 微信登录jar --dependency groupIdcom.github.binarywang/groupId artifactIdweixin-java-mp/artifactId version3.3.0/version/dependency 复制

2、配置文件添加对应的配置

配置appId和appSecret,application.yml如下:

wx: mp: 配置: - appid: wx1\*\*\*\*\*\*\*\*\* 秘密: \*\*\*\*\*\*\*\*\*\* \* token: aesKey: msgDataFormat: copy:

3、初始化配置

WxMpProperties.java 代码如下:

@Data@ConfigurationProperties(prefix='wx.mp') 公共类WxMpProperties { 私有ListMpConfig 配置; @Data public static class MpConfig { /\*\* \* 设置微信公众号的appid \*/private String appId; /\ *\* \* 设置微信公众号的app Secret \*/private String Secret; /\*\* \* 设置微信公众号的token \*/private String token; /\*\* \* 设置微信公众号EncodingAESKey \*/private String aesKey;复制WxMpConfiguration.java代码如下:

@Slf4j@Configuration@EnableConfigurationProperties(WxMpProperties.class) 公共类WxMpConfiguration { 私有静态MapString, WxMpService mpServices=Maps.newHashMap();公共静态MapString,WxMpService getMpServices(){返回mpServices; xMpProperties 属性; @Autowired私有WxMpInRedisConfigStorageMy configStorage; @PostConstruct public void initServices() { //代码中getConfigs()报错的同学,请仔细阅读项目说明,你的IDE需要引入lombok插件!最终ListWxMpProperties.MpConfig configs=this.properties.getConfigs(); if (configs==null) { throw new RuntimeException('兄弟,请阅读项目主页(readme文件)上的说明,添加相关配置,注意不要匹配错了!'); } mpServices=configs.stream().map(a - { //redis configStorage.setAppId(a.getAppId()); configStorage.setSecret(a.getSecret()); configStorage.setToken(a .getToken()); configStorage.setAesKey(a.getAesKey()); WxMpService service=new WxMpServiceImpl(); service.setWxMpConfigStorage(configStorage); log.info('配置的appId={}', a.getAppId() ); 返回服务; }) .collect(Collectors.toMap(s - s.getWxMpConfigStorage().getAppId(), a - a, (o, n) - o)); }} 复制:

4、控制层核心代码

@Slf4j@ Controlle@RequestMapping('/redirect/{appid}') public class WxRedirectController { /\*\* \* 获取用户信息\* \*/@RequestMapping('/getUserInfo') public void getBase(HttpServletRequest 请求,HttpServletResponse 响应,@PathVariable String appid, @RequestParam('code') String code) { WxMpService mpService=WxMpConfiguration.getMpServices().get(appid);尝试{ WxMpOAuth2AccessToken accessToken=mpService.oauth2getAccessToken(code); log.info('accessToken={ }', JSON.toJSONString(accessToken)); WxMpUser wxMpUser=mpService.oauth2getUserInfo(accessToken, null); log.info('wxMpUser={}', JSON.toJSONString(wxMpUser)); } catch (Exception e) { log .error('获取用户信息异常!', e);复制:

四、运行效果

1.构造pc端链接

https://open.weixin.qq.com/connect/qrconnect?appid=wx12345678redirect\_uri=http%3a%2f%2fwww.test.com%2fredirect%2fwx12345678 %2fgetUserInforesponse\_type=codescope=snsapi\_loginstate=STATE#wechat\_redirect 复制并打开上述链接后,截图如下:

2.微信扫描生成的二维码

微信扫描后手机截图如下:

微信用户使用微信扫描二维码并确认登录后,PC端会跳转到

http://www.test.com/redirect/wx12345678/getUserInfo?code=CODEstate=STATE 复制:

3.获取微信用户信息

控制层代码可以接收上面的code和state参数,根据这两个参数可以获取微信用户信息,打印用户后request信息的日志如下:

[http-nio-8104-exec-2]信息c.t.m.s.c.WxRedirectController - accessToken={'accessToken':'24\_vWnvRSV9vmR7qOqhJKRoER93bhsPg','expiresIn':7200,'openId':'oRXsdsUh6scaKof3D1I4 d3c','refreshToken':'2 4\ _WmknxCn9ff2Pl2xhLFw -kY96p6zgiqFJy8LMIOP\_CaMZOHEM','scope':'snsapi\_login','unionId':'oJxUkwfFOSyu1oC6oF2h6pTI'}[http-nio-8104-exec-2] 信息c.t.m.s.c.WxRedirectController - wxMpUser={'城市': '', '国家':'','headImgUrl':'https://thirdwx.qlogo.cn/mmopen/vi\_32/Q3auHgzwzM4ibeAsuoVIf3qr4QxjnNWh4Q1WiawCFNfzkGMzVqubPOnr0hA3Micwsu1LtblQ7phImdYSC2nic6OUicQ/132 ','语言':' ','昵称':'阿拜','openId':'oRXsdsUh6scaKof3D1I4d3c ','privileges':[],'province':'','sex':0,'sexDesc':'unknown','unionId':'oaDUkwVfCpMJOSyu1oC2oF2h6pTI'}复制到此PC网站集成微信登录已全面实现向上