WEB端第三方登陆接入 - QQ

准备工作就不说了,需要开通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绑定已完成,经过测试