WEB端第三方登陸接入 - 微信

相比QQ登陸接入,兩個方式差不多,在代碼方面微信更簡單

但是微信開通第三方登陸功能可是廢了不少事

需要開通微信公眾平台和開放平台,在開放平台還要有開發權限

注:截至到2020-7月份,開放平台認證是要花300塊的

由於是企業開通的,流程也真是相當不少

在此,小小的吐槽一下

具體流程就不說了,注意,開放平台開通后,公眾平台還要綁定一下.

建議:多打電話問問客服,仔細看接入文檔

說一下代碼方面的流程:

1 - 前端GET請求一個地址,打開的是一個二維碼

2 - 手機掃碼確認登陸后,微信會帶參回調一個頁面

3 - 在回調頁面獲取code,拿着code請求后端接口,獲取openId

4 - 通過openId獲取用戶,獲取到就登陸,否則提示

另外還有綁定微信的功能

上代碼:

1 - 前端GET請求,打開的是一個二維碼,掃碼登陸

const base_uri = 'https://open.weixin.qq.com/connect/qrconnect?'
const app_id = '***'
const redirect_uri = 'encodeUri'
const uri = base_uri + 'appid=' + app_id + '&redirect_uri=' + redirect_uri + '&response_type=code&scope=snsapi_login&state=自定義state'
window.location.href = uri

2 - 回調頁面獲取code,帶着code請求后端接口,code在url中,獲取一下

3 - 獲取openId

public String getWXOpenId(String code) {
    String accessTokenUri = String.format("https://api.weixin.qq.com/sns/oauth2/access_token?appid=%s&secret=%s&code=%s&grant_type=authorization_code", wxAppId, wxAppKey, code);
    String accessTokenResponse = httpUtils.Get(accessTokenUri);
    JSONObject responseJobj = JSONObject.fromObject(accessTokenResponse);
    return responseJobj.getString("openid");
}

4 - 微信登陸,接口就不寫了,有token就返回,為null就提示用戶

public String wxLogin(String code) {
    String openId = getWXOpenId(code);
    User user = ...根據openId獲取用戶;
    if (user == null) {
        return null;
    }
    return getUserToken(user);
}

至此,微信登陸完成,經過測試

5 - 微信綁定

說下流程:

用戶登陸后,在頁面上有個綁定按鈕,用戶點擊,后端可以通過token獲取到用戶

走一遍微信登陸流程,獲取openId,保存,openId一個用戶一個

可以通過state區分登陸和綁定

至此,微信綁定完成