微信掃描驗證登錄

• 前言
• 什么是OAuth2
• 微信掃碼驗證登錄思路及流程
• • 碼前流程構想及細節考慮
  • 實現步驟
• 實現
• • 1.獲取二維碼參數信息
  • 2.前端調用接口，生成二維碼
  • 3.1獲取臨時票據（code）
  • 3.2使用code+appid+secret換取access_token
  • 3.3根據獲取的access_token進行提取獲得openid(用戶信息唯一標識)
  • • 3.4根據openid進行登錄
  • 3.5 將用戶信息返回給前端
  • 3.6登錄驗證總代碼
  • 4. 前端接收參數并作校驗登錄
• 總結

---

前言

昨天整合了榛子云實現了短信服務驗證登錄，今天繼續實現第二種登錄方式，即微信掃碼驗證登錄~

什么是OAuth2

簡單來說，OAuth2就是一種授權認證，一種針對開放系統間授權，單點登錄和現代微服務安全的解決方案。

開放系統間授權：不同系統應用間可以通過互相訪問，而不需要重新進行登錄驗證，比如用戶需要從微信跳轉到天貓商城，這時候用戶在微信已經登錄了，但是在天貓商城中沒有登錄，沒有具體的訪問權限，這時候通過OAuth2的令牌訪問即可較好地解決此問題

單點登錄：一個模塊登錄，其它模塊就不需要進行登錄了（即一次登錄，處處訪問）

注意：OAuth2.0僅是一個授權框架，僅用于授權代理，即不同系統間的授權訪問，而這個授權是可以通過令牌實現的，正因為需要考慮如何管理令牌、頒發令牌、吊銷令牌，需要統一的協議，因此就有了OAuth2協議

微信掃碼驗證登錄思路及流程

碼前流程構想及細節考慮

上面我們簡單地了解了一下OAuth2是什么，接下來我們就理清一下如何實現微信的掃碼驗證登錄

我們體驗過掃碼登錄流程，大致流程如下:
待掃描- - ->已掃描，待確認- - ->已確認

前端發起一個使用二維碼登錄的請求，后端接收到這個請求，然后返回一個生成的二維碼或生成二維碼的信息給前端

用戶接收到這個二維碼，掃碼

掃碼成功，手機端確認登錄

手機端確認登錄，后端接收到這個響應，然后根據用戶是否注冊進行信息錄入，若用戶存在，那么就直接響應用戶信息給前端，否則進行簡單注冊后（用戶名，頭像等），然后返回給前端（基于JWT的token登錄驗證）

前端接收到信息，存儲用戶的cookie，然后登陸成功

其實其中還有非常多細節需要我們注意：

比如需要根據生成的唯一二維碼與用戶的身份信息進行綁定生成的臨時token，否則容易出現不同用戶之間的登錄錯亂的問題

需要有確認登錄這個步驟，確保用戶安全

服務端校驗臨時token并生成正式token，后續用戶便可以攜帶這個正式token訪問服務端

當然啦，我這里就沒有考慮到細節因素，這部分由于自己申請不下來就使用的是尚硅谷提供的二維碼掃描，也就沒有唯一綁定

實現步驟

• 使用方法生成微信掃碼的二維碼
• 返回生成二維碼所需要的參數給前端
• 前端拿到參數，然后在前端中調用遠程接口獲取二維碼，頁面跳轉
• 掃描二維碼,手機確認登錄
• 手機確認登錄后，微信的服務器調用回調地址，跳轉到本地方法接口中（回調本地方法），回調時傳遞code【臨時token】和state【狀態】，然后在本地方法中
• 第三方應用獲取到接口調用憑證，微信服務器校驗
• 校驗無誤，然后可以獲取到用戶個人信息，根據個人信息進行登錄驗證即可

圖片來源于B站拓薪教育

實現

1.獲取二維碼參數信息

/** 獲取微信登錄參數** @param session* @return* @throws UnsupportedEncodingException** 1. 該方法生成微信掃描的二維碼* 2. 返回生成二維碼所需要的參數*/@GetMapping("getLoginParam")@ResponseBody //通過這個注解可以返回數據public Result genQrConnect(HttpSession session) throws UnsupportedEncodingException {Map<String,Object> map = new HashMap<>();String redirectUri = URLEncoder.encode(ConstantWxPropertiesUtils.WX_OPEN_REDIRECT_URL, "UTF-8");//必須map.put("appid", ConstantWxPropertiesUtils.WX_OPEN_APP_ID);map.put("redirectUri",redirectUri);map.put("scope", "snsapi_login");//非必須map.put("state",System.currentTimeMillis()+"");return Result.ok(map);}

2.前端調用接口，生成二維碼

weixinLogin() {this.dialogAtrr.showLoginType = 'weixin'weixinApi.getLoginParam().then(response => {var obj = new WxLogin({self_redirect:true,id: 'weixinLogin', // 需要顯示的容器idappid: response.data.appid, // 公眾號appid wx*******scope: response.data.scope, // 網頁默認即可redirect_uri: response.data.redirectUri, // 授權成功后回調的urlstate: response.data.state, // 可設置為簡單的隨機數加session用來校驗style: 'black', // 提供"black"、"white"可選。二維碼的樣式href: '' // 外部css文件url，需要https})})},

3.1獲取臨時票據（code）

//1.獲取臨時票據code[攔截非法回調]if (StringUtils.isBlank(state) || StringUtils.isBlank(code)) {log.error("非法回調請求");throw new YyghException(ResultCodeEnum.ILLEGAL_CALLBACK_REQUEST_ERROR);}

3.2使用code+appid+secret換取access_token

//2.使用code和appid以及appscrect換取access_tokenStringBuffer baseAccessTokenUrl = new StringBuffer().append("https://api.weixin.qq.com/sns/oauth2/access_token").append("?appid=%s").append("&secret=%s").append("&code=%s").append("&grant_type=authorization_code");String accessTokenUrl = String.format(baseAccessTokenUrl.toString(),ConstantWxPropertiesUtils.WX_OPEN_APP_ID,ConstantWxPropertiesUtils.WX_OPEN_APP_SECRET,code);//3.根據HttpClientUtils進行http請求回調String result = null;try {result = HttpClientUtils.get(accessTokenUrl);} catch (Exception e) {throw new YyghException(ResultCodeEnum.FETCH_ACCESSTOKEN_FAILD);}System.out.println("使用code換取的access_token結果 = " + result);

3.3根據獲取的access_token進行提取獲得openid(用戶信息唯一標識)

JSONObject resultJson = JSONObject.parseObject(result);if(resultJson.getString("errcode") != null){log.error("獲取access_token失敗：" + resultJson.getString("errcode") + resultJson.getString("errmsg"));throw new YyghException(ResultCodeEnum.FETCH_ACCESSTOKEN_FAILD);}String accessToken = resultJson.getString("access_token");String openId = resultJson.getString("openid");log.info(accessToken);log.info(openId);

3.4根據openid進行登錄

//判斷數據庫中是否存在掃碼人的信息(根據openid進行唯一標識判斷)UserInfo userInfo = userInfoService.selectWxInfoOpenId(openId);if(userInfo == null){ //數據庫中不存在信息，先對用戶信息進行存儲//4.拿著openid和access_token請求微信地址，得到掃描人信息//具體步驟：//根據access_token獲取微信用戶的基本信息//先根據openid進行數據庫查詢// UserInfo userInfo = userInfoService.getByOpenid(openId);// 如果沒有查到用戶信息,那么調用微信個人信息獲取的接口// if(null == userInfo){//如果查詢到個人信息，那么直接進行登錄//使用access_token換取受保護的資源：微信的個人信息String baseUserInfoUrl = "https://api.weixin.qq.com/sns/userinfo" +"?access_token=%s" +"&openid=%s";String userInfoUrl = String.format(baseUserInfoUrl, accessToken, openId);String resultUserInfo = null;try {resultUserInfo = HttpClientUtils.get(userInfoUrl);} catch (Exception e) {throw new YyghException(ResultCodeEnum.FETCH_USERINFO_ERROR);}System.out.println("使用access_token獲取用戶信息的結果 = " + resultUserInfo);JSONObject resultUserInfoJson = JSONObject.parseObject(resultUserInfo);if(resultUserInfoJson.getString("errcode") != null){log.error("獲取用戶信息失敗：" + resultUserInfoJson.getString("errcode") + resultUserInfoJson.getString("errmsg"));throw new YyghException(ResultCodeEnum.FETCH_USERINFO_ERROR);}//5.解析用戶信息（用戶昵稱和用戶頭像）String nickname = resultUserInfoJson.getString("nickname");String headimgurl = resultUserInfoJson.getString("headimgurl");//添加到數據庫userInfo = new UserInfo();userInfo.setOpenid(openId);userInfo.setNickName(nickname);userInfo.setStatus(1);userInfoService.save(userInfo);}//6.將獲取到的掃碼人的信息添加到數據庫Map<String, Object> map = new HashMap<>();String name = userInfo.getName();if(StringUtils.isBlank(name)) {name = userInfo.getNickName();}if(StringUtils.isBlank(name)) {name = userInfo.getPhone();}map.put("name", name);//判斷手機號是否為空，如果手機號為空，那么返回openid,否則返回手機號if(StringUtils.isBlank(userInfo.getPhone())) {map.put("openid", userInfo.getOpenid());} else {map.put("openid", "");}String token = JwtHelper.createToken(userInfo.getId(), name);map.put("token", token);

3.5 將用戶信息返回給前端

return "redirect:"+ ConstantWxPropertiesUtils.YYGH_BASE_URL+ "/weixin/callback?token="+map.get("token")+"&openid="+map.get("openid")+"&name="+ URLEncoder.encode((String)map.get("name"),"utf-8");

3.6登錄驗證總代碼

@GetMapping("callback")public String callback(String code,String state) throws UnsupportedEncodingException {//1.獲取臨時票據code[攔截非法回調]if (StringUtils.isBlank(state) || StringUtils.isBlank(code)) {log.error("非法回調請求");throw new YyghException(ResultCodeEnum.ILLEGAL_CALLBACK_REQUEST_ERROR);}//2.使用code和appid以及appscrect換取access_tokenStringBuffer baseAccessTokenUrl = new StringBuffer().append("https://api.weixin.qq.com/sns/oauth2/access_token").append("?appid=%s").append("&secret=%s").append("&code=%s").append("&grant_type=authorization_code");String accessTokenUrl = String.format(baseAccessTokenUrl.toString(),ConstantWxPropertiesUtils.WX_OPEN_APP_ID,ConstantWxPropertiesUtils.WX_OPEN_APP_SECRET,code);//3.根據HttpClientUtils進行http請求回調String result = null;try {result = HttpClientUtils.get(accessTokenUrl);} catch (Exception e) {throw new YyghException(ResultCodeEnum.FETCH_ACCESSTOKEN_FAILD);}System.out.println("使用code換取的access_token結果 = " + result);JSONObject resultJson = JSONObject.parseObject(result);if(resultJson.getString("errcode") != null){log.error("獲取access_token失敗：" + resultJson.getString("errcode") + resultJson.getString("errmsg"));throw new YyghException(ResultCodeEnum.FETCH_ACCESSTOKEN_FAILD);}String accessToken = resultJson.getString("access_token");String openId = resultJson.getString("openid");log.info(accessToken);log.info(openId);//判斷數據庫中是否存在掃碼人的信息(根據openid進行唯一標識判斷)UserInfo userInfo = userInfoService.selectWxInfoOpenId(openId);if(userInfo == null){ //數據庫中不存在信息，先對用戶信息進行存儲//4.拿著openid和access_token請求微信地址，得到掃描人信息//具體步驟：//根據access_token獲取微信用戶的基本信息//先根據openid進行數據庫查詢// UserInfo userInfo = userInfoService.getByOpenid(openId);// 如果沒有查到用戶信息,那么調用微信個人信息獲取的接口// if(null == userInfo){//如果查詢到個人信息，那么直接進行登錄//使用access_token換取受保護的資源：微信的個人信息String baseUserInfoUrl = "https://api.weixin.qq.com/sns/userinfo" +"?access_token=%s" +"&openid=%s";String userInfoUrl = String.format(baseUserInfoUrl, accessToken, openId);String resultUserInfo = null;try {resultUserInfo = HttpClientUtils.get(userInfoUrl);} catch (Exception e) {throw new YyghException(ResultCodeEnum.FETCH_USERINFO_ERROR);}System.out.println("使用access_token獲取用戶信息的結果 = " + resultUserInfo);JSONObject resultUserInfoJson = JSONObject.parseObject(resultUserInfo);if(resultUserInfoJson.getString("errcode") != null){log.error("獲取用戶信息失敗：" + resultUserInfoJson.getString("errcode") + resultUserInfoJson.getString("errmsg"));throw new YyghException(ResultCodeEnum.FETCH_USERINFO_ERROR);}//5.解析用戶信息（用戶昵稱和用戶頭像）String nickname = resultUserInfoJson.getString("nickname");String headimgurl = resultUserInfoJson.getString("headimgurl");//添加到數據庫userInfo = new UserInfo();userInfo.setOpenid(openId);userInfo.setNickName(nickname);userInfo.setStatus(1);userInfoService.save(userInfo);}//6.將獲取到的掃碼人的信息添加到數據庫Map<String, Object> map = new HashMap<>();String name = userInfo.getName();if(StringUtils.isBlank(name)) {name = userInfo.getNickName();}if(StringUtils.isBlank(name)) {name = userInfo.getPhone();}map.put("name", name);//判斷手機號是否為空，如果手機號為空，那么返回openid,否則返回手機號if(StringUtils.isBlank(userInfo.getPhone())) {map.put("openid", userInfo.getOpenid());} else {map.put("openid", "");}String token = JwtHelper.createToken(userInfo.getId(), name);map.put("token", token);return "redirect:"+ ConstantWxPropertiesUtils.YYGH_BASE_URL+ "/weixin/callback?token="+map.get("token")+"&openid="+map.get("openid")+"&name="+ URLEncoder.encode((String)map.get("name"),"utf-8");}

4. 前端接收參數并作校驗登錄

callback.vue

<template><!-- header --><div></div><!-- footer --> </template> <script> export default {layout: "empty",data() {return {}},mounted() {let token = this.$route.query.tokenlet name = this.$route.query.namelet openid = this.$route.query.openid// 調用父vue方法window.parent['loginCallback'](name, token, openid)} } </script>

myheader.vue

loginCallback(name, token, openid) {// 打開手機登錄層，綁定手機號，改邏輯與手機登錄一致if(openid != '') {this.userInfo.openid = openidthis.showLogin()} else {this.setCookies(name, token)}},

總結

將微信登錄流程搞清楚才能在代碼實戰中清楚，這方面還有待加強~

總結

以上是生活随笔為你收集整理的微信扫描验证登录的全部內容，希望文章能夠幫你解決所遇到的問題。

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