作者： 劉志鵬

來源： JAVA葵花寶典

導讀：由於微信端流量比較足，所以掃碼登錄系統功能也受到了很多系統的青睞，本文就來詳細的解開該技術的面紗。

演示效果

微信掃碼登錄實戰（附代碼）


準備工作

1. 需要一個微信開放平臺賬號，並創建一個網站應用


微信掃碼登錄實戰（附代碼）


點擊查看該應用，將appid appSecret獲取下來，我們後面會用到。

2. 本地啓動ngrok,用來配合調試掃碼登錄授權回調

啓動如下：


微信掃碼登錄實戰（附代碼）


3. 將本地內網穿透的地址配置進網站應用裏面的開發信息-授權回調域


微信掃碼登錄實戰（附代碼）


本例所用到的技術

  • Spring-Boot
  • Thymeleaf
  • Httpclient
  • Json

本例學習要達到的目標

  • 生成全屏網頁二維碼以及定製化二維碼，後者可以進行二維碼大小調整，頁面佈局自行調整，前者則是固定的頁面和二維碼
  • 分析接入流程和實現功能
  • 列出來的技術

實戰

創建spring-boot項目 ，引入相關jar依賴


 org.springframework.boot
 spring-boot-starter-thymeleaf
 
 
 org.springframework.boot
 spring-boot-starter-web
  
 
 org.apache.httpcomponents
 httpclient
 4.1
  
 
 org.json
 json
 20160810

配置文件

spring.thymeleaf.prefix: classpath:/templates/
spring.thymeleaf.suffix: .html
#微信開放平臺創建的網站應用的appsecret
appsecret=
#微信開放平臺創建的網站應用的appid
appid=
scope=snsapi_login
#微信開放平臺創建的網站 設置的授權回調域
domain=http://test.xcx.cxylt.cn/
server.port=8083

授權流程說明

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

微信OAuth2.0授權登錄目前支持authorization_code模式，適用於擁有server端的應用授權。該模式整體流程爲：

  • 1.第三方發起微信授權登錄請求，微信用戶允許授權第三方應用後，微信會拉起應用或重定向到第三方網站，並且帶上授權臨時票據code參數；
  • 2.通過code參數加上AppID和AppSecret等，通過API換取access_token；
  • 3.通過access_token進行接口調用，獲取用戶基本數據資源或幫助用戶實現基本操作
簡單來講就是用戶在頁面生成二維碼掃碼後進入回調地址，回調地址可以獲取code,通過code可以獲取accessToken，通過accessToken則可以獲取用戶的全部信息


第一個二維碼頁面

後端代碼，生成授權地址，讓用戶點擊掃碼登錄

@RequestMapping("/")
 public String index(Model model) throws UnsupportedEncodingException {
 String oauthUrl = "https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect";
 String redirect_uri = URLEncoder.encode(callBack, "utf-8"); ;
 oauthUrl = oauthUrl.replace("APPID",appid).replace("REDIRECT_URI",redirect_uri).replace("SCOPE",scope);
 model.addAttribute("name","liuzp");
 model.addAttribute("oauthUrl",oauthUrl);
 return "index";
}

前端代碼




 
 Title


 
hello! 

 點擊掃碼登錄


編寫授權後回調方法

@RequestMapping("/callBack")
 public String callBack(String code,String state,Model model) throws Exception{
 logger.info("進入授權回調,code:{},state:{}",code,state);
 //1.通過code獲取access_token
 String url = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code";
 url = url.replace("APPID",appid).replace("SECRET",appsecret).replace("CODE",code);
 String tokenInfoStr = HttpRequestUtils.httpGet(url,null,null);
 JSONObject tokenInfoObject = new JSONObject(tokenInfoStr);
 logger.info("tokenInfoObject:{}",tokenInfoObject);
 //2.通過access_token和openid獲取用戶信息
 String userInfoUrl = "https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID";
 userInfoUrl = userInfoUrl.replace("ACCESS_TOKEN",tokenInfoObject.getString("access_token")).replace("OPENID",tokenInfoObject.getString("openid"));
 String userInfoStr = HttpRequestUtils.httpGet(userInfoUrl,null,null);
 logger.info("userInfoObject:{}",userInfoStr);
 model.addAttribute("tokenInfoObject",tokenInfoObject);
 model.addAttribute("userInfoObject",userInfoStr);
 return "result";
 }

回調後跳轉頁面，這個頁面記錄授權獲取的信息




 
 授權結果頁



 
你好，授權成功!


 
通過code換取access_token 結果:

 

 
通過access_token獲取用戶信息 結果:



自定義二維碼頁面

後端路由

@RequestMapping("/1")
 public String index1(Model model) throws UnsupportedEncodingException {
 String redirect_uri = URLEncoder.encode(callBack, "utf-8"); ;
 model.addAttribute("name","liuzp");
 model.addAttribute("appid",appid);
 model.addAttribute("scope",scope);
 model.addAttribute("redirect_uri",redirect_uri);
 return "index1";
}

前臺頁面




 
 內嵌(自定義二維碼)



 
hello!


兩個頁面結果頁和回調地址都是一致的，這裏只是提供兩種做法。

源碼獲取：

https://github.com/pengziliu/spring-boot-2.0-leaning

相關文章