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就是我们需要的真实手机号了,后端可以将手机号返回给客户端,也可以直接作为登录注册使用。

相关推荐
CC同学呀6 小时前
从0到100:单位订餐统计小程序开发日记2025
小程序
某公司摸鱼前端6 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
遗憾随她而去.9 小时前
uniapp 中使用路由导航守卫,进行登录鉴权
前端·uni-app
666HZ66611 小时前
微信小程序中scss、ts、wxml
微信小程序·小程序·scss
二十十十十十12 小时前
微信点餐小程序—美食物
微信·小程序
向明天乄12 小时前
在小程序中实现实时聊天:WebSocket最佳实践
websocket·网络协议·小程序
h1853859224412 小时前
租车小程序电动车租赁小程序php方案
小程序
海的诗篇_12 小时前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
说私域12 小时前
基于开源AI智能客服、AI智能名片与S2B2C商城小程序的微商服务质量提升路径研究
人工智能·小程序·开源
牧杉-惊蛰13 小时前
uniapp微信小程序css中background-image失效问题
css·微信小程序·uni-app