23年9月最新微信小程序 手机号授权 (uniapp+盛派SDK) 帮你踩坑_uniapp使用微信小程序手机号快速验证组件

一、背景

微信小程序手机号授权接口，从23年8月开始实行付费验证。

文档地址：手机号实时验证组件 | 微信开放文档

新版手机号授权说明如下：

自2023年8月28日起

【手机号实时验证组件】将需要付费使用。标准单价为：每次组件调用成功，收费0.04元。

【手机号快速验证组件】将需要付费使用。标准单价为：每次组件调用成功，收费0.03元。

两者组件区别是：

1. 【手机号实时验证组件】：平台会对号码进行验证，但不保证是实时验证
2. 【手机号实时验证组件】：在每次请求时，平台均会对用户选择的手机号进行实时验证，会发送验证码。

小程序后台付费管理页面，可以购买次数。如下图（每个小程序账号两个组件各有1000次体验额度，开发测试可以用）

用这个组件可以直接用code获取用户手机号，不需要再用sessionkey去解密手机号了。

正好要做一个小程序项目，打算用新的组件做用户授权。

前端使用：HBuilderX 开发 uniapp（可以生成H5 、APP 和 微信小程序等多家小程序）

后端使用：C# + 盛派SDK

二、划重点

1、手机号授权 getPhoneNumber 返回的 {code} 与 wx.login 返回的  {code}  作用是不一样的，不能混用且只能消费一次。

2、wx.login 是静默，可以在用户无感知的情况下用 {code} 换取用户的 【OpenId】。

3、手机号验证组件 会弹出授权窗口（如下图），只有用户点击同意才授权成功，可以拿到手机号。并且实时组件会发送验证码。

三、uniapp前端

uniapp 手机号页面代码 ，使用快速还是实时，看自己需求。

手机号快速验证组件：

<template>
    <view class="content">
        <view class="text-area">
            <button open-type="getPhoneNumber" @getphonenumber="GetPhoneNumber">手机号快捷登录</button>
        </view>
    </view>
</template>

手机号实时验证组件(会有验证码)：

<template>
    <view class="content">
        <view class="text-area">
            <button open-type="getRealtimePhoneNumber"@getrealtimephonenumber="getPhone">获取实时手机号码</button>
        </view>
    </view>
</template>

JS代码：

methods: {
    //手机号授权
    GetPhoneNumber: function(Res) {
        let Container = this;
        // 动态令牌
        var Code = Res.detail.code;
    },
}

如果获取到的code为空，可能是用户拒绝了授权，可以弹出【友好提示】请求再次授权。

用户授权成功后，拿到的正确响应如下图：

我们只需要用到code

用户拒绝授权，会得到这样的响应：

四、C#服务端

这里用到盛派的微信小程序SDK，需要引用相关NuGet包：Senparc.Weixin.WxOpen

C#代码：

使用盛派SDK：BusinessApi.GetUserPhoneNumber(" 可以放微信accessToken或者微信小程序AppId "," 前端手机号授权得到的code ")

盛派官方推荐使用 微信小程序AppId，系统会自动管理密钥的周期（如果过期会再次更新）

try
{
    #region code换用户手机号
    
     //code换用户手机号
     var UserMobilePhoneResult = BusinessApi.GetUserPhoneNumber("微信的动态令牌AccessToken", "前端拿到的code");
     //手机号
     String MobilePhone = MemberUserMobilePhoneResult.phone_info.purePhoneNumber;
     
     #endregion code换用户手机号
}
catch (ErrorJsonResultException err)
{
    return (XCXAccountUpdateMemberUserMobilePhoneResponse)SetExceptionError(MyResponse, err, -1, "手机号获取失败，" + "错误原因:" + err.Message);
}
catch (Exception err)
{
    return (XCXAccountUpdateMemberUserMobilePhoneResponse)SetExceptionError(MyResponse, err, -1, "手机号获取失败");
}

我项目有windows service (服务) 在服务器上24小时循环检查，统一生成微信小程序动态令牌AccessToken，所以我这里用的密钥。接口地址：https://developers.weixin.qq.com/miniprogram/dev/OpenApIdoc/mp-access-token/getStableAccessToken.html

盛派SDK也可以，获取微信的小程序动态令牌AccessToken：

String AccessToken = AccessTokenContainer.GetAccessToken(WXXCXAppID);

如果遇到这样的错误，说明没有注册盛派相关服务。可以看官方解决文档：https://www.cnblogs.com/szw/p/9265828.html

注册代码：

在global.asax.cs 文件的 Application_Start() 方法中，加入代码（注意 using 两个命名空间：Senparc.CO2NET 和 Senparc.Weixin）：

#region 注册（激活）盛派SDK 微信使用
try
{
     //设置全局 Debug 状态
     var isGLobalDebug = true;
     var senparcSetting = SenparcSetting.BuildFromWebConfig(isGLobalDebug);
     //CO2NET全局注册，必须！
     var register = RegisterService.Start(senparcSetting).UseSenparcGlobal();
     //设置微信 Debug 状态
     var isWeixinDebug = true;
     var senparcWeixinSetting = SenparcWeixinSetting.BuildFromWebConfig(isWeixinDebug);
     //微信全局注册，必须！
     register.UseSenparcWeixin(senparcWeixinSetting, senparcSetting);
    
     //根据APPId判断获取
     if (!AccessTokenContainer.CheckRegistered(WXXCXAppId))//检查是否已经注册
     {
         //注册小程序凭证 
         await AccessTokenContainer.RegisterAsync(小程序的AppId, 小程序的密钥AppSecret, "【xxxxxxxx】小程序");
     }
 }
catch (Exception ex)
{
    Senparc.CO2NET.Trace.SenparcTrace.SendCustomLog("系统日志", ex.Message);
}
#endregion 注册（激活）盛派SDK 微信使用