准备材料:
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网站集成微信登录已全面实现向上