uniapp微信小程序获取用户手机号uniCloud云开发版

开发微信小程序,很多时候需要获取用户的手机号,这样方便平台更好的为用户服务,但是微信小程序不允许开发者直接获取用户的手机号,需要用户手动授权才能获取手机号,且需要配合后端进行解密才能获得完整的手机号,这里的前端采用的是uniapp开发,后端采用的是uniCloud,下面就给大家展示一下实现代码。

一、给button按钮添加open-type属性

javascript 复制代码
<view class="layout">		
	<view class="tel">获取手机号示例</view>
	<button @getphonenumber="getPhoneNumber" open-type="getPhoneNumber" type="primary">获取手机号</button>
</view>

如上所示,需要给button按钮,设置open-type="getPhoneNumber"属性,并且设置事件@getphonenumber="getPhoneNumber"

javascript 复制代码
//获取手机号
const getPhoneNumber = (e)=>{	
	console.log(e);
}

点击"获取手机号"按钮,会有授权弹窗,执行getPhoneNumber 该方法,不会直接获取到真实的手机号,而且获取到加密的数据信息,如下图所示。

那么如何才能获取用户授权后,真实的手机号码那,需要看一下官方的文档,getPhoneNumber文档地址,文档中可以直接使用https调用获取,但是需要用到appid和secret,如果在前端展示了自己的秘钥这样是不安全的,因为发送网络请求或者查看源码都会泄露秘钥的,最好在服务端执行,只需要将前端获取的code传给后端执行即可,代码如下:

javascript 复制代码
//获取云对象
const cloudObj = uniCloud.importObject("cloud-service");

const getPhoneNumber = async(e)=>{
	let obj = {
		code:e.detail.code,
		encryptedData: e.detail.encryptedData,
		iv: e.detail.iv
	}
	//调用云对象的phone方法
	let res = await cloudObj.phone(obj);
	console.log(res);
}

二、unicloud云端获取code调用查询手机号接口

看一下获取手机号的必填入参,已知code是从客户端通过getPhoneNumber方法获取到的,并且从传参给了云对象,但是access_token没有,需要你自己在后端获取凭证,凭证有效期5分钟,可以存入缓存,如果业务比较单一可以不存储,每次执行一次也可以,这种仅限于业务非常单一的形式,获取凭证的接口地址:https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/mp-access-token/getAccessToken.html

javascript 复制代码
//unicloud云对象内的phone方法,params是客户端传来的值
async phone(params){
	//调用微信凭证接口,获取access_token,传入appid和secret
	//在这里可以判断是否已经有access_token缓存,如果没有再去调用凭证接口,避免重复调用
	let {data:{access_token}} = await uniCloud.request({
		url:"https://api.weixin.qq.com/cgi-bin/token",
		data:{
			grant_type:"client_credential",
			appid:"wxb3f72f0c8b700000",
			secret:"88826c257f4d0dc7e77f4b14911000000"
		}
	})
	let res = await uniCloud.request({
		url:"https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token="+access_token,
		method:"POST",
		data:{
			code:params.code
		}
	})
	return res;
}

通过以上方法,就可以获取到phone_info就是我们需要的真实手机号了,后端可以将手机号返回给客户端,也可以直接作为登录注册使用。

相关推荐
清风絮柳5 小时前
51. “闲转易”交易平台小程序(基于springboot&vue)
vue.js·spring boot·小程序·毕业设计·校园二手交易平台·二手交易小程序·闲转易交易系统
说私域6 小时前
基于开源AI大模型与S2B2C模式的线下服务型门店增长策略研究——以AI智能名片与小程序源码技术为核心
大数据·人工智能·小程序·开源
小程序照片合成7 小时前
uniapp微信小程序开发工具本地获取指定页面二维码
微信小程序·小程序·uniapp·二维码
低代码布道师7 小时前
加油站小程序实战教程05活动管理
低代码·小程序
教练 我想学编程7 小时前
学习记录706@微信小程序+springboot项目 真机测试 WebSocket错误: {errMsg: Invalid HTTP status.}连接不上
spring boot·学习·微信小程序
程序猿看视界10 小时前
Uni-app页面信息与元素影响解析
uni-app·状态栏·安全区域·窗口信息·像素比
清晨細雨10 小时前
UniApp集成极光推送详细教程
android·ios·uni-app·极光推送
_未知_开摆10 小时前
uniapp APP端在线升级(简版)
开发语言·前端·javascript·vue.js·uni-app
Li_na_na0110 小时前
解决安卓手机WebView无法直接预览PDF的问题(使用PDF.js方案)
android·pdf·uni-app·html5
橘猫云计算机设计11 小时前
基于django优秀少儿图书推荐网(源码+lw+部署文档+讲解),源码可白嫖!
java·spring boot·后端·python·小程序·django·毕业设计