uniapp 小程序 获取手机号---通过前段获取

该代码示例展示了在微信小程序中进行用户登录、获取微信授权信息、解密手机号的过程。首先通过uni.login获取登录code,然后用code换取openid和session_key。接着获取手机号的加密数据,并使用WXBizDataCrypt.js进行解密,得到用户的手机号。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<template>
	<!-- 获取手机号,登录内容 -->
	<view>
		<!-- 首先需要先登录获取code码,然后才可以获取用户唯一标识openid以及会话密钥及用于解密获取手机的加密信息 -->
		<view @click="login">登录</view>
		<view class="" @click="get_miyao" style="padding: 40rpx;">获取密钥session_key</view>
		<!-- 获取手机号的加密 -->
		<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取电话</button>
		<!-- <view @click="check_user">检查是否登录</view> -->
		<view class="" @click="get_user">获取用户信息</view>
		
		
		<view @click="jiemi">解密</view>
		
		<view class="" style="height: 60rpx;"> ========== </view>
		<br>
		
		<image :src="user_img" mode="" alt="暂无图片"></image>
		<view class="red">用户名:{{user_name}}</view>
		<text class="blue">微信登录成功:{{login_code}}</text>
		<view class="red">手机号:{{phone}}</view>
		<view class="blue">用户唯一标识openid:{{openid}}</view>
		<view class="red">会话密钥-sessionkey:{{session_key}}</view>
		<view class="blue">手机-encryptedData:{{phone_encryptedData}}</view>
		<view class="red">手机-iv:{{phone_iv}}</view>
		<view class="blue">手机-code:{{phone_code}}</view>
	</view>
</template>

<script>
	//import WXBizDataCrypt from "@/static/wx/WXBizDataCrypt.js"
	import WXBizDataCrypt from "../../utils/WXBizDataCrypt"

	export default {
		data() {
			return {
				phone:'无',
				user_img:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSNuo1br3pHCs7Y-RLdS0oc-dflmDaUdm_Jkg&usqp=CAU',
				user_name:'空',
				login_code:'空', // 登录返回code码,用于获取用户唯一标识和会话密钥
				openid:'',// 用户唯一标识
				session_key:'',// 会话密钥
				phone_encryptedData:'',
				phone_iv:'',
				phone_code:''
				
			}
		},
		methods: {
			login(){ // 微信登录
				uni.login({
				    provider: 'weixin',
				    success: res => {
				    	debugger
						console.log(res)
						this.login_code = res.code
					}
				    
				});
			},
			check_user(){ // 检查是否登录
				uni.checkSession({
					success:res => {
						console.log(res)
					}
				})
			},
			get_user(){ // 获取用户信息
				uni.getUserProfile({
					desc: '用户登录',
					success: res => {
						console.log(res)
						this.user_img = res.userInfo.avatarUrl
						this.user_name = res.userInfo.nickName
					}
				})
			},
			getPhoneNumber(res){ // 获取手机号
				console.log(res)
				this.phone_code = res.detail.code
				this.phone_encryptedData = res.detail.encryptedData
				this.phone_iv = res.detail.iv
				
			},
			get_miyao(){ // 获取密钥 === 需要登录才可以获取密钥
				uni.request({
				    url: 'https://api.weixin.qq.com/sns/jscode2session',
				    method:'GET',
				    data: {
						appid: 'wx4e70a3d6c0f866f3',        //你的小程序的APPID
						secret: '9ee0d4c6e1a996fbd90725f4a7176e5f',    //你的小程序秘钥secret,
						js_code: this.login_code,    //wx.login 登录成功后的code
						grant_type:'authorization_code'
				    },
				    success: (res) => {
				        console.log('获取信息',res);  // 换取成功后 暂存这些数据 留作后续操作
				        this.openid=res.data.openid    //openid 用户唯一标识
				        this.session_key=res.data.session_key    //session_key  会话密钥
				    }
				});
			},
			jiemi(){ // 解密需要appid 会话密钥;然后需要手机号的加密字段-
				let pc = new WXBizDataCrypt('wx4e70a3d6c0f866f3',this.session_key);
				let data = pc.decryptData(this.phone_encryptedData , this.phone_iv);  
				console.log(data)       //data就是最终解密的用户信息
				debugger
				this.phone = data.phoneNumber
			}
			
		}
	}
</script>

<style scoped>
image{
	width: 100rpx;
	height: 100rpx;
}
.red{
	background-color: #DD524D;
	margin: 20rpx 0;
}
.blue{
	background-color: #007AFF
}
</style>

js 解密文件

import WXBizDataCrypt from "../../utils/WXBizDataCrypt"
//WXBizDataCrypt.js
var crypto = require('crypto')

function WXBizDataCrypt(appId, sessionKey) {
    this.appId = appId
    this.sessionKey = sessionKey
}

WXBizDataCrypt.prototype.decryptData = function (encryptedData, iv) {
    // base64 decode
    var sessionKey = new Buffer(this.sessionKey, 'base64')
    encryptedData = new Buffer(encryptedData, 'base64')
    iv = new Buffer(iv, 'base64')

    try {
        // 解密
        var decipher = crypto.createDecipheriv('aes-128-cbc', sessionKey, iv)
        // 设置自动 padding 为 true,删除填充补位
        decipher.setAutoPadding(true)
        var decoded = decipher.update(encryptedData, 'binary', 'utf8')
        decoded += decipher.final('utf8')

        decoded = JSON.parse(decoded)

    } catch (err) {
        throw new Error('Illegal Buffer')
    }

    if (decoded.watermark.appid !== this.appId) {
        throw new Error('Illegal Buffer')
    }

    return decoded
}

module.exports = WXBizDataCrypt

### 小程序微信授权手机号登录实现方法 #### 获取用户同意并调用 `getPhoneNumber` 接口 为了使小程序能够获取用户的手机号,需先获得用户的授权许可。这一步骤通过调用微信提供的 `getPhoneNumber` API 来完成,在用户点击按钮触发该接口之后,会弹出授权框让用户确认是否允许应用访问其电话号码信息[^1]。 ```javascript // 绑定事件处理函数至按钮上 wx.getPhoneNumber({ success(res) { console.log('成功获取加密数据:', res.encryptedData); console.log('成功获取初始向量:', res.iv); }, fail(err) { console.error('获取失败', err); } }); ``` #### 处理前端接收到的数据并向服务器发送请求 一旦获得了来自微信平台返回的成功响应,则意味着已经得到了经过加密处理过的手机号资料以及必要的解密参数(如 encryptedData 和 iv)。此时应该把这些信息连同 session_key 一并通过 HTTPS POST 请求的形式提交给开发者自有的后台服务端进行下一步操作。 ```json { "sessionKey": "...", // 用户唯一标识符对应的 Session Key "iv": "...", // 加密算法使用的初始化向量 IV "encryptedData": "..." // 包含了敏感信息的已加密字符串 } ``` #### 解密过程和服务端逻辑编写 在服务端接收到从前端传来的上述三个重要字段后,利用官方给出的方式加载 WXBizDataCrypt 类库来执行具体的解密工作。注意这里提到的类库应当放置于项目的公共目录下以便被其他模块所引用,并确保按照文档说明正确配置好 appid 参数[^2]。 ```javascript import WXBizDataCrypt from '@/common/WXBizDataCrypt.js'; const pc = new WXBizDataCrypt(appId, sessionKey); try { const data = pc.decryptData(encryptedData, iv); console.log('解密后的data: ', data.phoneNumber); // 输出明文形式的手机号码 } catch (err) { console.error('解密错误:', err.message || '未知异常'); } ``` #### 返回结果给客户端显示或存储 最后当一切顺利的话,就可以把最终得到的真实有效的手机号反馈回去供小程序展示或是保存起来用于后续的身份验证等功能需求当中去了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值