WEB端第三方登陸接入 - QQ

阿新 • • 發佈：2020-08-26

準備工作就不說了,需要開通QQ登陸功能

流程是這樣的:

1 - 前端先發送一個GET請求,帶著要求的引數,會跳轉一個qq登陸頁面

2 - 前端還要有一個頁面用於處理使用者登陸成功後跳轉的,會攜帶code

3 - 拿著code請求後端介面,後端拿著code請求access_token

4 - 再用access_token獲取使用者openId

5 - 根據openId查詢使用者,查到就進行登陸

另外,還有一個繫結功能

上程式碼:

1 - 前端GET請求,開啟網頁

const base_uri = 'https://graph.qq.com/oauth2.0/authorize?'
const app_id  
= '...'
const redirect_uri = 'encode後的uri'
const uri = base_uri + 'response_type=code&client_id=' + app_id + '&redirect_uri=' + redirect_uri + '&state=自己定義用於區分狀態'
window.location.href = uri

2 - 在redirect_uri頁面處理請求,程式碼就不寫了

// 從url中獲取引數code
// 攜帶code引數請求後端介面獲取openId

3 - 後端請求方法,獲取openId

public 
 String getQQOpenId(String code) {
    StringBuilder accessTokenUri = new StringBuilder();
    accessTokenUri.append("https://graph.qq.com/oauth2.0/token?grant_type=authorization_code&client_id=").append(qqAppId);
    accessTokenUri.append("&client_secret=").append(qqAppKey);
    accssTokenUri.append( 
"&code=").append(code);
    // 此處redirectUri不需要encode
    accessTokenUri.append("&redirect_uri=").append(redirectUri);
    String accessTokenResponse = httpUtils.Get(accessTokenUri.toString());
    Map<String, String> responseMap = getUriParams(accessTokenResponse);
    String accessToken = responseMap.get("access_token");
    String openIdUri = String.format("https://graph.qq.com/oauth2.0/me?access_token=%s", accessToken);
    String openIdResponse = httpUtils.Get(openIdUri);
    JSONObject responseJobj = getCallbackParams(openIdResponse.trim());
    return responseJobj.getString("openid");
}

4 - 用到的方法

public JSONObject getCallbackParams(String callback) {
    return JSONObject.fromObject(callback.substring(9, callback.length() - 2).trim());
}

public Map<String, String> getUriParams(String uri) {
    if (RegexUtils.isNullOrEmpty(uri)) {
        return null;
    }
    String[] params = uri.split("&");
    Map<String, String> paramsMap = new HashMap<>();
    for (String para : params) {
        String[] arr = para.split("=");
        paramsMap.put(arr[0], arr[1]);
    }
    return paramsMap;
}

5 - qq登陸,介面就不寫了,無非就是有token返回token,沒token就提示

public String qqLogin(String code) {
    String openId = getQQOpenId(code);
    User user = ...通過openId獲取使用者;
    if (user == null) {
        return null;
    }
    // 登入成功，返回使用者token
    return getUserToken(user);
}

至此,qq登入已完成,經過測試

6 - qq繫結

說下流程就好了.

首先使用者處於登入狀態,後端可以在請求介面時通過token獲取到使用者

前端有個繫結按鈕,使用者點選

再走一遍qq登入流程,獲取openId,儲存,這個openId一個使用者一個

前端可以自定義state引數,區分登陸和繫結

至此,qq繫結已完成,經過測試