相比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區分登陸和繫結

至此,微信繫結完成