javadog-net

前言

??緣由

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

??建議閱讀時長

約20分鐘

??主要目標

1. 測試公眾號實現網頁授權并獲取用戶基本信息
2. 靈活掌握微信接口文檔，熟練對接相關接口
3. 整理授權邏輯，前后端對接熟悉流程

?????試用人群

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

??快速鏈接

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

??猜你喜歡

??水圖

正文

??準備

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

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

2.開發工具

3.接口文檔

微信官方公眾號文檔

4.網頁授權獲取用戶基本信息配置

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

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

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

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

切記不要帶http，此處地址填寫本地ip即可?？稍阪I盤通過【win+R】，輸入【cmd】，確定后輸入ipconfig，復制出IPv4地址即可?；蛘邌觰niapp后，控制臺打印的地址，以上方法僅限本地調試。

??問題剖析

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. + 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 = "網頁授權獲取用戶基本信息", 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后便失效，再次調用則會報錯，請根據自己業務，進行緩存比較，防止重復調用

總結

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