Taro:微信小程序通过获取手机号实现一键登录

本文介绍如果通过微信小程序的getPhoneNumber方法获取用户微信绑定的手机号并自动注册登录。

1、前端获取手机号

<template>
    <nut-button size="large" block color="#1890FF" :loading="loading"  openType="getPhoneNumber" @getphonenumber="wxLogin">微信一键登录</nut-button>
</template>

1、按钮类型 openType 指定 “getPhoneNumber”

2、@getphonenumber必须全部小写

// 微信一键登录事件
async function wxLogin(e) {       
    loading.value = true;
    try {
      const result = await wxNumberLogin({
        appid: getAppId(), // 微信小程序APPID
        code: e?.detail?.code,
        openId: openId.value, // 微信小程序openID  
      });
      if (isRespondSuccess(result)){
        const from_url = Taro.getCurrentInstance().router?.params["from_url"];
        if (from_url && (from_url !== 'undefined')){
          Taro.reLaunch({url: from_url});
        } else {
          Taro.switchTab({url: `${ROUTER_ENUM.PAGE_HOME}`});
        }
      }
    } finally {
      loading.value = false;
    }
}

code:手机号获取凭证:动态令牌。可通过动态令牌换取用户手机号。

2、后台自动注册账号

​ 后台根据前端传入的code获取手机号并自动将手机号注册为账号。

public CommonResult<UserToken> getPhoneNumberRegister(String code, String appid, RegisterParams params) {
    String urlGetPhoneNumber = WxPlatformConstants.CODE_GET_PHONENUMBER
            .replaceFirst("ACCESS_TOKEN", getAuthAccessToken(appid));
    Map<String, String> map = new HashMap<>();
    map.put("code", code);
    String result  = HttpUtil.doPostUseJsonParams(urlGetPhoneNumber, map, HttpCharset.UTF8);
    log.info("getPhoneNumber_result:" + result);
    JSONObject object = JSON.parseObject(result);
    JSONObject phoneObject = object.getJSONObject("phone_info");
    String phone = phoneObject.getString("phoneNumber");
    params.setMobile(phone);
 
    return sysUserService.register(params, false); // 不需要校验验证码
}






扫描下方二维码,关注公众号:程序进阶之路,实时获取更多优质文章推送。


扫码关注

评论