【uniApp】APP使用微信授权登录

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第13天，点击查看活动详情

背景

现在我们的APP应用登录方式有很多种，最原始的账号密码登陆、手机号验证码登录，还有三分授权登录比如微信、QQ、邮箱登录这种。最近的一个业务场景就是使用微信进行三方授权登录APP，便查阅了一下微信官方文档和uniapp的官方文档，发现和小程序微信登录还是很像的。

准备工作

申请微信开放平台账号，首先在微信开放平台注册一个开发者账号，并申请移动应用并需要审核通过，以获取到后续使用的AppID 和 AppSecret。

功能开发

服务端代码：

1.通过code获取access_token和openid。

2.通过access_token和openid获取微信授权登录的个人信息。

/**
 * 方法描述: 获取微信用户的基本信息<br>
 *
 * @return String <br>
 */
public static Map<String, Object> getWechatUserInfo(String code) {
    Map<String, Object> resultMap = new HashMap<>();
    /** 请求结果 */
    String result = null;
    String url = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=AppId&secret=AppSecret&code=CODE&grant_type=authorization_code";
    url = url.replace("AppId", AppId).replace("AppSecret", AppSecret)
            .replace("CODE", code);
    try {
        result = MyPubUtil.sendGet(url);
        JSONObject jsonTexts = (JSONObject) JSON.parse(result);
        System.out.println("jsonTexts=" + jsonTexts);
        String openid = "";
        String accessToken = "";
        if (null != (jsonTexts.get("openid"))) {
            openid = jsonTexts.get("openid").toString();
            accessToken = jsonTexts.get("access_token").toString();
            System.out.println("accessToken=" + accessToken);
            url = "https://api.weixin.qq.com/sns/userinfo?access_token=AccessToken&openid=Openid&lang=zh_CN";
            url = url.replace("AccessToken", accessToken).replace("Openid", openid);
            result = MyPubUtil.sendGet(url);
            System.out.println("result=" + result);
            resultMap.put("result", result);
            resultMap.put("openid", openid);
        }
    } catch (Exception e) {
        e.printStackTrace();
    }
    return resultMap;
}

uniapp代码：

1.获取微信服务商权限。

2.通过uni.login方法获取code值。

3.携带code进行请求后端接口。

uni.getProvider({
        service: 'oauth',
        success: function (res :any) {
                if (~res.provider.indexOf('weixin')) {
                        uni.login({
                                "provider": "weixin",
                                "onlyAuthorize": true, // 微信登录仅请求授权认证
                                success: function(event :any){
                                        this.params.code = event.code
                                        this.$u.api
                                                .postLogin(this.params)
                                                .then(res => {
                                                        console.log(res, '[登录页-登录]');
                                                        // 存储token
                                                        uni.setStorageSync('JW-Token', res.data.token);
                                                        uni.navigateBack();
                                                })
                                                .catch(err => {
                                                        console.log(err);
                                                });

                                },
                                fail: function (err) {
                                // 登录授权失败  
                                        console.log(err);
                            }
                        })
                }
        },
        //请求失败
        fail: (err) => {
                console.log(err);
        },
 });