uniapp+.net core实现微信小程序获取手机号功能

目录
  • 获取手机号
    • 注意:
  • 使用方法
  • 前端
    • template
    • js
  • 后端
    • appsetting配置
    • Startup.cs
    • GlobalContext.cs
    • 调用
  • 获取截图

获取手机号

从基础库 2.21.2 开始,对获取手机号的接口进行了安全升级,以下是新版本接口使用指南。( 旧版本接口 目前可以继续使用,但建议开发者使用新版本接口,以增强小程序安全性)

因为需要用户主动触发才能发起获取手机号接口,所以该功能不由 API 来调用,需用 button 组件的点击来触发。另外,新版本接口 不再 需要提前调用 wx.login 进行登录。

注意:

  • 目前该接口针对非个人开发者,且完成了认证的小程序开放(不包含海外主体)。需谨慎使用,若用户举报较多或被发现在不必要场景下使用,微信有权永久回收该小程序的该接口权限;
  • 在使用该接口时,用户可使用微信绑定手机号进行授权,也添加非微信绑定手机号进行授权。若开发者仅通过手机号作为业务关联凭证,在重点场景可适当增加短信验证逻辑。

使用方法

需要将 button 组件  open-type 的值设置为  getPhoneNumber ,当用户点击并同意之后,可以通过  bindgetphonenumber 事件回调获取到动态令牌 code ,然后把 code 传到开发者后台,并在开发者后台调用微信后台提供的  phonenumber.getPhoneNumber 接口,消费 code 来换取用户手机号。每个 code 有效期为5分钟,且只能消费一次。

注: getPhoneNumber 返回的  code 与  wx.login 返回的  code 作用是不一样的,不能混用。

前端

template

使用getphonenumber获取回调code

//小程序写法
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>
//uni-app写法
<button class="wx-login" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">微信用户一键登录</button>

js

调用服务器的url,消费 code 来换取用户手机号

methods: {
            getPhoneNumber: function(e) {
                var that = this;
                var userPhone = uni.getStorageSync('userPhone');
                if(userPhone != '')
                {
                    getApp().globalData.userPhone = userPhone;
                    uni.navigateTo({
                        url: 'personal'
                    });
                    return;
                }
                if (e.detail.errMsg == "getPhoneNumber:ok") {
                    //端口号是由后端服务器生成
                    wx.request({
                        url: '后端服务URL',
                        data: {
                            code: e.detail.code
                        },
                        method: "get",
                        success: function(res) {
                            uni.setStorageSync('userPhone', res.data);
                            getApp().globalData.userPhone = res.data;
                            uni.navigateTo({
                                url: 'personal'
                            });
                        },
                        fail: function(res) {
                            console.log(res.errMsg)
                        }
                    })
                }
            }
        }

后端

后端使用.net core配置api

appsetting配置

"Wx": {
    "appid": "",
    "secret": "",
    "baseurl": "https://api.weixin.qq.com/",
    "getToken": "cgi-bin/token?grant_type=client_credential&appid={0}&secret={1}",
    "getuserphonenumber": "wxa/business/getuserphonenumber?access_token={0}"
  }

Startup.cs

注册HttpClient调用微信API

public void ConfigureServices(IServiceCollection services)
 {
       services.AddHttpClient("WxClient", config =>
            {
                config.BaseAddress = new Uri(Configuration["Wx:baseurl"]);
                config.DefaultRequestHeaders.Add("Accept", "application/json");
            });
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
   GlobalContext.HttpClientFactory = app.ApplicationServices.GetService<IHttpClientFactory>();
}

GlobalContext.cs

获取token方法与获取手机号方法,通过HTTPClient调用获取Token方法,用Token和Code调用 getuserphonenumber获取用户手机号

using System;
using System.Reflection;
using System.Text;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.AspNetCore.StaticFiles;
using Microsoft.Extensions.Hosting;using Microsoft.AspNetCore.Http;
using System.Net.Http;
using Newtonsoft.Json;

namespace YiSha.Util
{
    public class GlobalContext
    {public static IHttpClientFactory HttpClientFactory { get; set; }

        public static IConfiguration Configuration { get; set; }public static string Token { get; set; }

        public static DateTime TimeOutDate { get; set; }

        /// <summary>
        /// 获取Token
        /// </summary>
        /// <returns>Item1 Token;Item2 是否成功</returns>
        public static Result GetToken()
        {
            //判断Token是否存在 以及Token是否在有效期内
            if (string.IsNullOrEmpty(Token) || TimeOutDate > DateTime.Now)
            {
                //构造请求链接
                var requestBuild = Configuration["Wx:getToken"];
                requestBuild = string.Format(requestBuild,
                                  Configuration["Wx:appid"],
                                  Configuration["Wx:secret"]
                               );
                using (var wxClient = HttpClientFactory.CreateClient("WxClient"))
                {
                    var httpResponse = wxClient.GetAsync(requestBuild).Result;
                    var dynamic = JsonConvert.DeserializeObject<dynamic>(
                                          httpResponse.Content.ReadAsStringAsync().Result
                                          );

                    if (dynamic.errmsg == null)//刷新Token
                    {
                        Token = dynamic.access_token;
                        var expires_in = Convert.ToDouble(dynamic.expires_in);
                        TimeOutDate = DateTime.Now.AddSeconds(expires_in);
                        return new Result(Token);
                    }
                    else
                    {
                        return new Result(errMsg:dynamic.errmsg);
                    }
                }
            }
            else
            {
                return new Result(Token);
            }
        }

        public static Result GetUserPhoneNumber(string code)
        {
            var token = GetToken();
            if(!token.isSuccess)
            {
                return token;
            }
            //构造请求链接
            var requestBuild = Configuration["Wx:getuserphonenumber"];
            requestBuild = string.Format(requestBuild, token.data);
            //建立HttpClient
            using (var wxClient = HttpClientFactory.CreateClient("WxClient"))
            {
                string content = $"{{\"code\":\"[code]\"}}";
                byte[] data = Encoding.UTF8.GetBytes(content);
                var bytearray = new ByteArrayContent(data);
                var httpResponse = wxClient.PostAsync(requestBuild, bytearray).Result;
                var dynamic = JsonConvert.DeserializeObject<dynamic>(
                                     httpResponse.Content.ReadAsStringAsync().Result
                                     );
                if (dynamic.errmsg == "ok")
                    return new Result(dynamic.phone_info.phoneNumber.ToString());
                else
                    return new Result(errMsg: dynamic.errmsg.ToString());
            }
        }

        /// <summary>
        ///  返回消息
        /// </summary>
        public class Result
        {
            public Result()
            {
            }

            /// <summary>
            /// 正确
            /// </summary>
            /// <param name="data"></param>
            public Result(string data)
            {
                this.data = data;
                this.isSuccess = true;
            }

            /// <summary>
            /// 错误
            /// </summary>
            /// <param name="errMsg"></param>
            /// <param name="isSuccess"></param>
            public Result(string errMsg,bool isSuccess = false)
            {
                this.errMsg = errMsg;
                this.isSuccess = isSuccess;
            }

            public string data { get; set; }

            public string errMsg { get; set; }

            public bool isSuccess { get; set; }
        }
    }
}

调用

[HttpGet]
        public string GetPhone(string code)
        {
            var phone = GlobalContext.GetUserPhoneNumber(code);
            if(!phone.isSuccess)
            {
                //错误处理
            }
            return phone.data;
        }

获取截图

文档传送门:

获取手机号: https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html

到此这篇关于uniapp+.net core实现微信小程序获取手机号的文章就介绍到这了,更多相关uniapp .net core小程序获取手机号内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 微信小程序uniapp添加悬浮菜单的方法

    本文实例为大家分享了微信小程序uniapp添加悬浮菜单的具体代码,供大家参考,具体内容如下 在项目中可能会有一些页面需要加一个悬浮按钮,提供一些额外的菜单本项目通过uniapp来演示如何将一个按钮悬浮在页面右下角有需要的话需要把view标签替换成div 效果: 想直接看全部代码不想看各种逼逼叨叨的请直接翻到最下边.. 一.绘制按钮 通过menushow来控制显示内容,显示菜单时按钮文字变为”隐藏“ <view class="floatbtn" @click="chang

  • uniapp微信小程序底部动态tabBar的解决方案(自定义tabBar导航)

    目录 需求 实现原理 实现 总结 需求 分包中如果有6个页面A B C D E F,这6个页面可以作为tabbar页面进行展示,具体配置通过后台接口返回(页面数量限制依然存在 2 - 5),比如后台配置A B C D E这个5个页面为tabbar页面,那么A B C D E将作为tab页展示,跳转方式也是tab方式跳转,跳转到F页面为普通navigate跳转.这将解决 多商家底部tab配置问题,可以让商家自己配置小程序tab页的展示模式. 实现原理 1.自定义底部导航,数据通过接口获取 2.将需

  • uniapp在微信小程序中使用ECharts的方法

    今天使用uniapp集成Echarts,实现地图图表的展示 可以参照mpvue-echarts 参照:https://github.com/F-loat/mpvue-echarts https://ask.dcloud.net.cn/article/36288 进行改进 网上有很多教程,但都说的不是很明白,下面直接上步骤 1.npm install echarts mpvue-echarts 执行该命令后,会在node_modules下生成mpvue-echarts.echarts,然后把mpv

  • uniapp实现微信小程序的电子签名效果(附demo)

    目录 1.标签和样式 2.横屏切换 3.绘图 3.1.初始化数据会吧? 3.2.触摸开始时获取起点,会吧? 3.3.触摸移动获取路径点,会吧? 3.4.触摸结束,将未绘制的点清空防止对后续路径产生干扰,简单吧? 3.5.绘制笔迹,没得问题吧? 4.扫尾处理 画布可以做很多事情,比如可以绘图,也可以做海报.在这里只是想拿它来的实现亲笔签名,开启不一样的亲笔签名姿势. 开发框架:uniapp开发语言:vue2展示平台:微信小程序(实际可以兼容多个平台) 标签和样式没什么好说的,这里绘制了简单的页面,

  • 关于uniapp微信小程序左上角返回按钮的监听详解

    目录 项目场景: 问题描述: 原因分析: 解决方案一: 解决方案二: 结语 项目场景: uni-app 开发微信小程序,界面中点击左上角的返回按钮或者是系统自带的虚拟返回操作,返回前监听用户是否在页面内进行了相应操作,如果有则进行提示(提示用户是否确定要返回),如果没有则直接返回. 问题描述: uni-app 页面生命周期中有 onBackPress ,不过不支持微信小程序.翻看微信小程序官方文档,并未发现可以监听到左上角返回按钮的事件.查阅相关技术文档,确认微信小程序现阶段并没有提供监听左上角

  • uniapp+.net core实现微信小程序获取手机号功能

    目录 获取手机号 注意: 使用方法 前端 template js 后端 appsetting配置 Startup.cs GlobalContext.cs 调用 获取截图 获取手机号 从基础库 2.21.2 开始,对获取手机号的接口进行了安全升级,以下是新版本接口使用指南.( 旧版本接口 目前可以继续使用,但建议开发者使用新版本接口,以增强小程序安全性) 因为需要用户主动触发才能发起获取手机号接口,所以该功能不由 API 来调用,需用 button 组件的点击来触发.另外,新版本接口 不再 需要提

  • 微信小程序 获取手机号 JavaScript解密示例代码详解

    当我们在开发微信小程序中,有一个常用的功能,就是获取用户的手机号,然后一键登入小程序,那么手机号如何获取呢?请认真看完本文,保证可以获取到用户的手机号. 刚开始开发微信小程序的时候,想着实现手机验证码登入,后来查阅资料得知,发给用户的短信是要自己付费的.后来想想,微信获取用户的手机号一样可以保证手机号码的真实性,因为手机号既然可以绑定微信,那么肯定是被严格核验过的,然后就开始了获取手机号之旅,网上教程有很多,但不知什么原因,都是会少一些内容,有的只有前端代码,没有后端:有的后端代码是PHP,不是

  • 微信小程序获取手机号授权用户登录功能

    小程序中有很多地方都会用到注册用户信息的地方,用户需要填写手机号等,有了这个组件可以快速获取微信绑定手机号码,无须用户填写. 1.getPhoneNumber这个组件通过button来实现(别的标签无效).将button中的open-type="getPhoneNumber",并且绑定bindgetphonenumber事件获取回调. <span style="font-size:14px;"><button open-type="get

  • 微信小程序获取手机号,后端JAVA解密流程代码

    小程序获取手机号,后端JAVA解密流程代码 微信官方文档获取手机号流程地址,先看下最好方便理解下面步骤 实现思路,步骤如下 1.前端需先调用官方wx.login接口获取登录凭证code. 2.后端接收code 调用官方接口地址获取用户秘钥 sessionKey. 3.前端通过官方getPhoneNumber获取encryptedData,iv 4.前端通过参数**[encryptedData] .[iv] .[sessionKey]** 发送请求后端接口,解密用户手机号 小程序获取session

  • 微信小程序获取手机号的踩坑记录

    前言 最近在开发小程序遇到这样一个问题, 在用户点击授权后去解密手机号时会出现第一次失败,第二次成功的情况.研究了一段时间,终于找到比较合理的解决方案,在此记录并总结一下,希望可以帮助到大家. 需求描述 在用户点击获取电话按钮后, 将用户在微信内设置的电话解密显示在联系电话输入框内 具体代码 <view class="cu-form-group"> <view class="title text-black">联系电话</view>

  • 微信小程序获取手机号的完整实例(Java后台实现)

    目录 小程序 后端接口 总结 小程序端:https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html 获取手机号码:https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/phonenumber/phonenumber.getPhoneNumber.html 获取token:https://d

  • uniapp微信小程序获取当前定位城市信息的实例代码

    目录 一.事先准备 二.正式代码使用 补充:UNIAPP获取当前城市和坐标 总结 一.事先准备 此处用的是腾讯地图的jdk 1.在腾讯地图开发上申请key 2. WebServiceAPI选择签名校验获取SK 3. uniapp上勾选位置接口 4.在腾讯地图上下载微信小程序javaScript SDK放入项目里 二.正式代码使用 提示:可能会出现引入jdk时报错 解决方法: *把jdk最后一行暴漏方式改为export default 引入时用import就行了* // 1.首先在需要用到的地方引

  • 如何使用uniapp开发微信小程序获取当前位置详解

    目录 前言 一.配置 1.进入mainfest.json文件配置permission块 2.进入微信公众平台添加合法域名 3.高德SDK文件下载 二.使用步骤 (直接封装组件) 1.在组件中引入amap-wx.130.js文件 2.在data中定义 3.在created中定义 4.在methods中定义 5.在你需要使用的vue页面调用改组件 总结 前言 使用uniapp开发微信小程序时,多多少少会遇到获取当前位置的详细信息(比如:xxx省xxx市),uniapp提供了一个名为uni.getLo

  • .NET Core 实现微信小程序支付功能(统一下单)

    最近公司研发了几个电商小程序,还有一个核心的电商直播,只要是电商一般都会涉及到交易信息,离不开支付系统,这里我们统一实现小程序的支付流程(与服务号实现步骤一样). 开通小程序的支付能力 开通小程序支付功能比较简单,基本上按微信文档一步一步的申请就好,如图 以上三个步骤就申请完成 1.提交资料给微信 2.微信审核并签署协议 3.商户后台绑定同主体的APPID 商户后台绑定同一主体的APPID并授权 1.登录商户后台https://pay.weixin.qq.com,进入产品中心-APPID授权管理

  • uniapp微信小程序打卡功能的详细实现流程

    目录 一.vue后台地图选地点 step1| 注册账号并申请Key step2| 设置 JSAPI 安全密钥的脚本标签 step3| 地图选点页面demo 二.uniapp微信小程序打卡 step1| 获取key step2| manifest.json中配置权限 step3| 获取定位地址与经纬度 三.核心流程描述 总结 一.vue后台地图选地点 step1| 注册账号并申请Key 请参考链接注册账号并申请Key 部分 step2| 设置 JSAPI 安全密钥的脚本标签 注意事项: 必须在vu

随机推荐