最近網站PC端集成微信掃碼登錄，踩了不少坑，在此記錄下實現過程和注意事項。

本文目錄

一、微信開放平臺操作步驟1.創建“網站應用”2.獲取AppID和AppSecret二、開發指南三、開發實戰1、pom.xml引入jar包2、配置文件添加對應的配置3、初始化配置4、控制層核心代碼四、運行效果1.構造pc端鏈接2.微信掃描生成的二維碼3.獲取微信用戶信息

一、微信開放平臺操作步驟

微信開放平臺地址：https://open.weixin.qq.com

一定要注意，網站集成微信登錄需要在微信開放平臺操作，它和微信公眾平臺不一樣，雖然雙方最后的用戶唯一標識都是openId，但是是不互通的。如果開發平臺想和公眾平臺相互通，兩個平臺得互相綁定，然后獲取唯一識別的unionId。

下面說下在開放平臺上的操作步驟：

1.創建“網站應用”

由于到對接PC網站登錄，所以創建“網站應用”，操作截圖如下：

新建網站應用截圖

2.獲取AppID和AppSecret

等微信審核通過后，會分配對應的AppId，AppSecret需要管理員掃描生成，生成后截圖如下：

查看AppId截圖

二、開發指南

微信OAuth2.0授權登錄讓微信用戶使用微信身份安全登錄第三方應用或網站，在微信用戶授權登錄已接入微信OAuth2.0的第三方應用后，第三方可以獲取到用戶的接口調用憑證（access_token），通過access_token可以進行微信開放平臺授權關系接口調用，從而可實現獲取微信用戶基本開放信息和幫助用戶實現基礎開放功能等，整體流程為：

1.第三方發起微信授權登錄請求，微信用戶允許授權第三方應用后，微信會拉起應用或重定向到第三方網站，并且帶上授權臨時票據code參數；
2.通過code參數加上AppID和AppSecret等，通過API換取access_token；
3.通過access_token進行接口調用，獲取用戶基本數據資源或幫助用戶實現基本操作。

三、開發實戰

項目中使用了開源項目WxJava，WxJava源碼地址(https://github.com/Wechat-Group/WxJava)；

先新建要給Spring Boot項目，具體可以參考文章我之前的文章《Spring Boot入門-快速搭建web項目》；

新建好項目后，繼續按照下面步驟操作即可。

1、pom.xml引入jar包

<!--微信登錄jar-->
<dependency>
<groupId>com.github.binarywang</groupId>
<artifactId>weixin-java-mp</artifactId>
<version>3.3.0</version>
</dependency>

2、配置文件添加對應的配置

配置appId和appSecret，application.yml內如下：

wx:
mp:
configs:
-appid:wx1*********
secret:***********
token:
aesKey:
msgDataFormat:

3、初始化配置

WxMpProperties.java代碼如下：

@Data
@ConfigurationProperties(prefix="wx.mp")
publicclassWxMpProperties{

privateList<MpConfig>configs;

@Data
publicstaticclassMpConfig{
/**
*設置微信公眾號的appid
*/
privateStringappId;

/**
*設置微信公眾號的appsecret
*/
privateStringsecret;

/**
*設置微信公眾號的token
*/
privateStringtoken;

/**
*設置微信公眾號的EncodingAESKey
*/
privateStringaesKey;
}

}

WxMpConfiguration.java代碼如下：

@Slf4j
@Configuration
@EnableConfigurationProperties(WxMpProperties.class)
publicclassWxMpConfiguration{

privatestaticMap<String,WxMpService>mpServices=Maps.newHashMap();

publicstaticMap<String,WxMpService>getMpServices(){
returnmpServices;
}

@Autowired
privateWxMpPropertiesproperties;

@Autowired
privateWxMpInRedisConfigStorageMyconfigStorage;

@PostConstruct
publicvoidinitServices(){
//代碼里getConfigs()處報錯的同學，請注意仔細閱讀項目說明，你的IDE需要引入lombok插件！！！！
finalList<WxMpProperties.MpConfig>configs=this.properties.getConfigs();
if(configs==null){
thrownewRuntimeException("大哥，拜托先看下項目首頁的說明（readme文件），添加下相關配置，注意別配錯了！");
}

mpServices=configs.stream().map(a->{
//redis
configStorage.setAppId(a.getAppId());
configStorage.setSecret(a.getSecret());
configStorage.setToken(a.getToken());
configStorage.setAesKey(a.getAesKey());

WxMpServiceservice=newWxMpServiceImpl();
service.setWxMpConfigStorage(configStorage);
log.info("配置的appId={}",a.getAppId());
returnservice;
}).collect(Collectors.toMap(s->s.getWxMpConfigStorage().getAppId(),a->a,(o,n)->o));
}
}

4、控制層核心代碼

@Slf4j
@Controller
@RequestMapping("/redirect/{appid}")
publicclassWxRedirectController{

/**
*獲取用戶信息
*
*/
@RequestMapping("/getUserInfo")
publicvoidgetBase(HttpServletRequestrequest,HttpServletResponseresponse,@PathVariableStringappid,@RequestParam("code")Stringcode){
WxMpServicempService=WxMpConfiguration.getMpServices().get(appid);
try{
WxMpOAuth2AccessTokenaccessToken=mpService.oauth2getAccessToken(code);
log.info("accessToken={}",JSON.toJSONString(accessToken));
WxMpUserwxMpUser=mpService.oauth2getUserInfo(accessToken,null);
log.info("wxMpUser={}",JSON.toJSONString(wxMpUser));
}catch(Exceptione){
log.error("獲取用戶信息異常！",e);
}
}
}

四、運行效果

1.構造pc端鏈接

https://open.weixin.qq.com/connect/qrconnect?appid=wx12345678redirect_uri=http%3a%2f%2fwww.test.com%2fredirect%2fwx12345678%2fgetUserInfo&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect

打開上面鏈接后截圖如下：

2.微信掃描生成的二維碼

微信掃描后手機端截圖如下：

微信用戶使用微信掃描二維碼并且確認登錄后，PC端會跳轉到

http://www.test.com/redirect/wx12345678/getUserInfo?code=CODE&state=STATE

3.獲取微信用戶信息

控制層代碼可以接收到上code和state參數，根據這兩個參數可以獲取微信用戶信息，請求過來后打印用戶信息的日志如下：

[http-nio-8104-exec-2]INFOc.t.m.s.c.WxRedirectController-accessToken={"accessToken":"24_vWnvRSV9vmR7qOqhJKRoER93bhsPg","expiresIn":7200,"openId":"oRXsdsUh6scaKof3D1I4d3c","refreshToken":"24_WmknxCn9ff2Pl2xhLFw-kY96p6zgiqFJy8LMIOP_CaMZOHEM","scope":"snsapi_login","unionId":"oJxUkwfFOSyu1oC6oF2h6pTI"}
[http-nio-8104-exec-2]INFOc.t.m.s.c.WxRedirectController-wxMpUser={"city":"","country":"","headImgUrl":"https://thirdwx.qlogo.cn/mmopen/vi_32/Q3auHgzwzM4ibeAsuoVIf3qr4QxjnNWh4Q1WiawCFNfzkGMzVqubPOnr0hA3Micwsu1LtblQ7phImdYSC2nic6OUicQ/132","language":"","nickname":"阿白","openId":"oRXsdsUh6scaKof3D1I4d3c","privileges":[],"province":"","sex":0,"sexDesc":"未知","unionId":"oaDUkwVfCpMJOSyu1oC2oF2h6pTI"}

到此PC網站集成微信登錄已經全部實現完成了，有問題歡迎留言溝通哦！

推薦閱讀

1.Spring Boot 2.X 整合Redis
2.Spring Boot 2.X 如何優雅的解決跨域問題？
3.Spring Boot 2.X 集成spring session實現session共享
4.Spring條件注解@Conditional
5.SpringBoot 2.X從0到1實現郵件發送功能
6.Redis批量刪除key的小技巧，你知道嗎？
7.Spring Boot 2.X 如何快速整合jpa？
8.Spring Boot之Profile--快速搞定多環境使用與切換
9.Spring Boot快速集成kaptcha生成驗證碼
10.Spring Boot 2.X整合Spring-cache，讓你的網站速度飛起來

---

限時領取免費Java相關資料，涵蓋了Java、Redis、MongoDB、MySQL、Zookeeper、Spring Cloud、Dubbo/Kafka、Hadoop、Hbase、Flink等高并發分布式、大數據、機器學習等技術。
關注下方公眾號即可免費領取：

總結

以上是生活随笔為你收集整理的利用WxJava实现网站集成微信登录功能，核心代码竟然不超过10行的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。