uniapp小程序获取用户手机号码

文章描述:

uniapp小程序开发经过用户授权获取用户手机号码

 

小程序获取用户手机号码大致分为4个步骤:

1、需要用户获取code

2、根据code获取openId 和 session_key

3、再根据openId 和 session_key获取手机号码权限,允许授权 获取encryptedData和iv

4、再传 encryptedData,iv,sessionKey,openId这个四个字段到后台获取手机号码

 

注意:接口只能用户非个人开发者和且完成了认证的小程序开放。

小程序微信认证查看位置:小程序 → 设置 → 基本设置 → 微信认证

前期开发我们可以用测试号进行开发,完成后再换成正式认证号即可。

测试号申请地址:https://mp.weixin.qq.com/wxamp/wadevelopcode/sandbox

 

获取code

获取openId和session_key

获取encryptedData和iv

 

uniapp

template

<template>
	<view>
		<view class="number">
			{{phoneNumber}}
		</view>
		
		<view class="item">
			<label>code:</label>
			{{code}}
		</view>
		<view class="item">
			<view>
				<label>openId:</label>	{{openId}}
			</view>
			<view>
				<label>session_key:</label>
				{{session_key}}
			</view>
		</view>
		<button class="botton" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">授权手机号</button>
		
	</view>
</template>

script

export default{
	data(){
		return{
			code:'',
			openId:"",
			session_key:"",
			phoneNumber:"",
		}
	},
	onLoad() {
		this.getWxCode()
	},
	methods:{

		// 获取用户手机号
		getPhoneNumber(e){
			
			console.log(e.detail.errMsg)                               // 判断用户是否允许获取手机号
			console.log(e.detail.iv)                                   // 参数 iv
			console.log(e.detail.encryptedData)                        // 参数encryptedData
			
			if(e.detail.errMsg == "getPhoneNumber:ok"){                // 用户允许或去手机号
				
				uni.request({
					
					url:"https://api.xxx.com/wechat/index.php",
					method:"POST",
					header:{'content-type':'application/x-www-form-urlencoded'},
					data:{
						encryptedData: e.detail.encryptedData,
						iv: e.detail.iv,
						session_key: this.session_key,
						openid: this.openId,
						//code:e.detail.encryptedData
					},
					success:(res)=>{
						if(res.data.errorinfo == null){
							console.log(res.data)       // 这个里面就有手机号了
							this.phoneNumber = res.data.phoneNumber
						}
					}
				})
			}
		},
		// 1.获取微信授权 code
		getWxCode() { 
			let that = this;
			uni.login({
				provider: 'weixin',
				timeout: 3000,
				success: res => {
					//console.log(res,"登录的结果值");
					//console.log(res.code)
					if (res.code) {
						//uni.setStorageSync('code', res.code)
						that.code=res.code;
						
						//2.获取openId 和 session_key
						uni.request({
						 	url: 'https://api.weixin.qq.com/sns/jscode2session',  
						 	method:'GET',  
						 	data: {  
						 		appid: '',                         //你的小程序的APPID  
						 		secret: '',                        //你的小程序的secret,  
						 		js_code:res.code,                  //wx.login 登录成功后的code  
						 		grant_type: 'authorization_code',
						 	},  
						 	success: (cts) => {  
						 		// 换取成功后 暂存这些数据 留作后续操作  
						 		this.openId=cts.data.openid               //openid 用户唯一标识  
						 		this.unionid=cts.data.unionid             //unionid 开放平台唯一标识   当公众号和小程序同时登录过才会有
						 		this.session_key=cts.data.session_key     //session_key  会话密钥  
						 		//console.log(cts)
						 		//console.log(this.openId,this.session_key)
						 	}  
						});
					}
				},
				fail(err) {
					console.log(err)
				}
			})
		},
		
	}
}

style

page{
	padding: 100upx 30upx;
	box-sizing: border-box;
}
label{
	color: red;
}
.item{
	display: none;
	padding: 40upx 30upx;
	border-bottom: 1px solid #eee;
}
.botton{
	background: #42b983;
	color: #fff;
}
.number{
	font-size: 28px;
	text-align: center;
	color: #42b983;
	height: 80upx;
	margin-bottom: 80upx;
	display: flex;
	align-items: center;
	justify-content: center;
}

 

PHP

注意:微信返回的参数是加密的,需要进行解密,同样微信官方也提供了加密数据解密算法,demo 在文末的相关文档中进行下载。

$appid = '';
$secret = '';

include_once "wxBizDataCrypt.php";

$sessionKey = $_POST['session_key'];
$encryptedData = $_POST['encryptedData'];
$iv = $_POST['iv'];

$pc = new WXBizDataCrypt($appid, $sessionKey);
$errCode = $pc->decryptData($encryptedData, $iv, $data );

if ($errCode == 0) {
	//echo "<pre>";
        //print($data . "\n");
	$json = json_decode($data,true);
	//print_r($json);
	// echo $json["phoneNumber"];
	echo $data;
} else {
    print($errCode . "\n");
}

 

 

发布时间:2022/08/26

发表评论