uniapp小程序一键获取手机号,获取用户信息

做这个一键获取手机号就遇到了第一次获取不到,后台解密不出
甚至做到能让第一次获取,但第二次点击却不能获取了,后台炸了
现在通过这个全给你解决掉

请添加图片描述

<button class="one" open-type="getPhoneNumber" @getphonenumber="getphone">一键获取</button>

data(){
	return{
		code:'',
	}
},
onLoad() {
	//一打开就请求code,解决第一次不能获取手机号
	var that = this;
	uni.login({
		provider: 'weixin',
		success(res) {
			that.code = res.code;
		}
	})
},
methods:{
	//获取手机号
	getphone(e){
		if (!e.detail.iv) {
			uni.showToast({
				title:'获取手机号失败',
				icon:'none'
			})
			return;
		}
		var that = this;
		//验证code值是否过期
		uni.checkSession({
			success(val){
				if(val.errMsg == 'checkSession:ok'){
					var obj = {
						code:that.code,
						iv:e.detail.iv,
						encryptedData:e.detail.encryptedData
					}
					that.decryptPhone(obj);
				}else{
					uni.login({
						provider: 'weixin',
						success(res) {
							let code = res.code;
							var obj = {
								code,
								iv:e.detail.iv,
								encryptedData:e.detail.encryptedData
							}
							that.decryptPhone(obj);
						}
					})
				}
			}
		})

	},
	//解密手机号
	decryptPhone(obj){
		var that = this;
		//传给后台解密,获得手机号
		this.$api.getPhone(obj)
		.then(ss =>{
			if(ss.code == 200){
				console.log(ss)
			}else{
				uni.showToast({
					title:'获取手机号失败,请重试',
					icon:'none'
				})
			}
		})
		.catch(ss =>{
			uni.showToast({
				title:'获取手机号失败,请重试',
				icon:'none'
			})
		})
	}
 }

获取用户信息

<button open-type="getUserInfo" @tap="getUserProfile" size="mini"> 获取头像昵称 </button>


getUserProfile(e) {
   // 推荐使用wx.getUserProfile获取用户信息,开发者每次通过该接口获取用户个人信息均需用户确认
   // 开发者妥善保管用户快速填写的头像昵称,避免重复弹窗
   wx.getUserProfile({
    desc: '用于完善会员资料', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
    success: (res) => {
     console.log(res);
     console.log(res.userInfo.avatarUrl);//获取用户微信头像
     console.log(res.userInfo.nickName);//获取用户微信名
    }
   })
},
### 实现 uniapp 微信小程序一键登录并获取用户手机号 #### 前端 (uni-app) 为了实现在 uni-app 中的微信小程序一键登录功能,前端主要负责发起微信登录请求来获得 `code` 和加密后的手机号。具体操作如下: 1. **引入微信 SDK** 需要在项目中集成微信提供的 JavaScript 接口文件,以便能够调用微信的相关能力。 2. **获取 code** 使用 wx.login() 方法可以让用户触发登录行为,并返回临时登录凭证 `code`。此方法会弹出授权窗口给用户确认身份验证[^3]。 ```javascript wx.login({ success(res) { if (res.code) { console.log('Login succeed, got the temporary login credential:', res.code); } else { console.error('Failed to get login information'); } }, fail(err) { console.error('Error occurred during login process', err); } }); ``` 3. **获取加密手机号** 调用 `wx.getPhoneNumber()` 可以让已授权的小程序向微信服务器申请解密用户的电话号码。这一步骤同样需要用户的同意才能执行[^1]。 ```javascript wx.getPhoneNumber({ success(res) { const encryptedData = res.encryptedData; const iv = res.iv; // 将这些参数传递到后台进行下一步处理... }, fail(err) { console.error('Failed to obtain phone number.', err); } }); ``` 4. **发送至后端** 把从前两步得到的信息(即 `code`, 加密过的手机号及其对应的初始化向量 IV),通过 HTTP 请求的形式提交给后端接口用于后续的身份验证和数据解析工作。 #### 后端 (通用逻辑适用于 PHP/Go/Java) 后端的主要职责在于利用从小程序客户端接收到的数据来进行一系列的安全校验和服务侧的操作,比如交换 session key 或 openid、解码手机号等。以下是简化版的工作流描述: - 利用官方 API 凭借 `appid`, `secret`, 以及上述提到的 `js_code` 来换取 access token 和 open id; - 完成之后再依据业务需求决定是否创建新账户或是关联已有记录。 需要注意的是,在整个过程中应当始终遵循最佳实践指南,确保通信链路采用 HTTPS 协议传输敏感信息,并采取措施防范诸如 CSRF/XSS 等常见的网络安全威胁[^2]。
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值