【微信網頁授權】SpringBoot+uniapp實作網頁授權獲取用戶基本資訊

前言

??緣由

起因于本狗上一個專案本打算采用微信公眾號網頁授權登錄做用戶鑒權，但最終因公眾號是未認證的訂閱號，無權限獲取用戶資訊，所以改變思路，采用登錄注冊方式實作用戶區分，但在開發中，學習了微信網頁授權登錄流程，特此分享，帶你手把手操作，讓我們一起捋清授權的邏輯，

??建議閱讀時長

約20分鐘

??主要目標

1. 測驗公眾號實作網頁授權并獲取用戶基本資訊
2. 靈活掌握微信介面檔案，熟練對接相關介面
3. 整理授權邏輯，前后端對接熟悉流程

?????試用人群

1. 對于微信公眾號網頁授權流程模糊或初次接觸
2. 做過相關流程但想回顧熟悉復盤

??快速鏈接

公眾號：JavaDog程式狗
在公眾號，發送【wx】 ，無任何套路即可獲得

??猜你喜歡

??水圖

正文

??準備

1.服務號/訂閱號(已認證)

網頁授權介面權限只有服務號或者已認證的訂閱號有權限，也就是需要每年繳納300塊錢費用認證過才會有權限，否則無法在正式公眾號呼叫此介面，
?? 切記無權限時呼叫會提示【微信公眾號授權scope引數錯誤或沒有scope權限】，只可在測驗公眾號進行除錯！！！

2.開發工具

3.介面檔案

微信官方公眾號檔案

4.網頁授權獲取用戶基本資訊配置

以測驗號進行展示操作步驟

在公眾號左側選單【開發工具】=》【公眾平臺測驗帳號】

在網頁服務-網頁賬號-修改

修改OAuth2.0網頁授權【授權回呼頁面域名】

切記不要帶http，此處地址填寫本地ip即可，可在鍵盤通過【win+R】，輸入【cmd】，確定后輸入ipconfig，復制出IPv4地址即可，或者啟動uniapp后，控制臺列印的地址，以上方法僅限本地除錯，

??問題剖析

1.什么是網頁授權？

官網解釋

如果用戶在微信客戶端中訪問第三方網頁，公眾號可以通過微信網頁授權機制，來獲取用戶基本資訊，進而實作業務邏輯，

簡單理解

通俗來說，就是我們通過微信內置瀏覽器去訪問其他網站時，可以通過微信授權策略，在目標網站可以獲取微信用戶的基本資訊，如昵稱，頭像等

舉個栗子 ??

通過微信內打開csdn分享鏈接，當跳轉到csdn網頁時，csdn就可以通過網頁授權，直接拿到我們微信的昵稱，頭像資訊等，完成自主授權注冊

2.網頁授權流程步驟？

1. 用戶同意授權，獲取code

前端引導用戶進入授權頁面同意授權，獲取code

2. 通過 code 換取網頁授權access_token

通過前端獲取的code，呼叫我們自己服務器介面，通過后臺使用code調取微信介面，換取access_token(網頁授權介面呼叫憑證)，access_token是呼叫用戶資訊及其他介面所必需的引數

3. 重繪access_token（如果需要）

由于access_token擁有較短的有效期，當access_token超時后，可以使用refresh_token進行重繪，refresh_token有效期為30天，當refresh_token失效之后，需要用戶重新授權

4. 拉取用戶資訊

開發者可以通過access_token和 openid 拉取用戶資訊

?? 如果看不懂不要劃走，下面才是重點講解
?? 如果看不懂不要劃走，下面才是重點講解
?? 如果看不懂不要劃走，下面才是重點講解

??開始

簡易流程圖

為了方便理解，畫了一個簡易流程圖，有疑惑別急，下面還有現實列子解釋版

舉個實際購買蘋果手機例子，可能不太貼合，但有助與理解

步驟

根據下圖進行步驟分析

1.步驟一

前端uniapp中新建授權頁

頁面進入后，onLoad直接跳轉微信介面地址，微信方通過appId獲取code，并攜帶code根據redirect_uri回傳到當前頁面，此刻地址欄中就包含著code資訊

跳轉前

跳轉后

關鍵代碼

//通過微信官方介面獲取code之后，會重新重繪設定的回呼地址【redirect_uri】,之后會繼續進入到onload()方法
location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appid + "&redirect_uri=" +
local + "&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect""

appid ：公眾號對應的appId
redirect_uri：頁面回跳地址，也就是當前頁面的地址，此地址也就是在上方準備4中OAuth2.0網頁授權【授權回呼頁面域名】填入的值，微信根據這個回呼地址進行攜帶code回跳，

其他引數可看官方引數說明

2.步驟二

1.后端提供介面，入參為上一步的code，通過code調取微信介面換取access_token，此處后端使用了weixin-java-mp組件，方便對接微信介面，

@Api(tags = "網頁授權控制器")
@RestController
@RequestMapping("/login")
public class AuthController {

    @Resource
    private UserService userService;

    @ApiOperation(value = "https://www.cnblogs.com/javadog-net/archive/2023/03/20/網頁授權獲取用戶基本資訊", notes = "網頁授權獲取用戶基本資訊")
    @GetMapping
    public ResponseData login(@RequestParam String code) throws WxErrorException {
        return userService.auth(code);
    }
}

2.前端帶著code，呼叫1中的/login介面

const res = await this.$api.login({
		code
	})
	if (!res.success) {
		uni.$u.toast(res.message)
		return
	}
	// 用戶資訊
	this.userInfo = res.data;
}

3.步驟三

將步驟二后端拿到的access_token，呼叫微信獲取用戶資訊，將用戶資訊回傳給前端

 WxOAuth2AccessToken accessToken;
        WxMpUser wxMpUser;
        try {
        	// 獲取accessToken 
            accessToken = wxMpService.getOAuth2Service().getAccessToken(code);
            log.info("AccessToken={}" + accessToken);
            // 獲取用戶資訊
            wxMpUser = wxMpService.getUserService().userInfo(accessToken.getOpenId());
            log.info("wxMpUser={}", JSONUtil.toJsonStr(wxMpUser));
        } catch (WxErrorException e) {
            return ResponseData.error(e.getMessage());
        }
        return ResponseData.success(wxMpUser);

?常見錯誤

錯誤1：redirect_uri 引數錯誤

微信中【OAuth2.0網頁授權】-授權回呼頁面域名配置錯誤

錯誤2：oauth_code已使用

code每次使用換取access_token后便失效，再次呼叫則會報錯，請根據自己業務，進行快取比較，防止重復呼叫

總結

本文雖然篇幅長，但是實作功能簡單，主要目的是展示網頁授權的流程與思路，對于微信對接，本人建議多查看微信官方檔案，寫的很詳細，通讀過幾遍后就會對疑問點有些許領悟，希望能對大家有所幫助，

標籤：其他

上一篇：Java面試-基礎篇（一）之1

下一篇：java基礎_參考資料型別_陣列_2