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

最新推荐文章于 2024-02-18 17:36:36 发布

sg_knight

最新推荐文章于 2024-02-18 17:36:36 发布

阅读量4k

点赞数 1

分类专栏：前端 # vue 文章标签： vue.js taro 微信小程序一键登录 getPhoneNumber

本文链接：https://blog.csdn.net/sg_knight/article/details/126901115

版权

前端同时被 2 个专栏收录

73 篇文章 6 订阅

订阅专栏

vue

15 篇文章 0 订阅

订阅专栏

本文介绍如果通过微信小程序的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); // 不需要校验验证码
}

1、常量参数CODE_GET_PHONENUMBER ：

CODE_GET_PHONENUMBER = "https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=ACCESS_TOKEN";

2、微信返回的参数：

{
    "errcode":0,
    "errmsg":"ok",
    "phone_info": {
        "phoneNumber":"xxxxxx",
        "purePhoneNumber": "xxxxxx",
        "countryCode": 86,
        "watermark": {
            "timestamp": 1637744274,
            "appid": "xxxx"
        }
    }
}

新时代农民工