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区分登陆和绑定

至此,微信绑定完成