uniapp 实现微信小程序授权,获取用户信息,获取手机号,解密手机号。

授权

html代码(授权只能点击触发,不能直接触发)

<view class="button-sq" hover-class="button-hover" @tap="authoLogin()">
	<text>授权</text>
</view>

js代码 (appid,secret在小程序开发>开发管理>开发设置>开发者id 查看)


methods: {
			//用户授权,获取用户信息
			authoLogin() {
				uni.getUserProfile({
					desc: 'Wexin', // 这个参数是必须的
					success: res => {
						console.log(res)
						console.log("用户信息", res.rawData)//可获取用户头像url和名字等信息
						this.isShowDialog = false;
						this.loginUser()//获取用户code函数
					}
				})
			},
		//用户登录
			loginUser() {
				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						console.log('用户登录')
						console.log(loginRes)
						this.jsCode = loginRes.code;//保存登录后的code
						
						//获取session_key
						uni.request({
						    url: 'https://api.weixin.qq.com/sns/jscode2session',
						    method:'GET',
						    data: {
						    appid: this.appid,        //你的小程序的APPID
						    secret: this.secret,    //你的小程序秘钥secret,  
						    js_code: this.jsCode,    //wx.login 登录成功后的code
						    grant_type:'authorization_code'
						    },
						    success: (cts) => {
						        console.log('获取信息',cts);  // 换取成功后 暂存这些数据 留作后续操作
						        this.openid=cts.data.openid    //openid 用户唯一标识
						        this.session_key=cts.data.session_key    //session_key  会话密钥
						    }
						});
						
						

					}
				});
			},
			
}

获取解密手机号

html代码(点击按钮直接触发授权)

<button class="tl-btn-630" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">微信账号快捷登录</button>

js代码

			//获取手机号授权
			getPhoneNumber(e) {
				uni.showLoading({})
				this.iv = e.detail.iv //获取iv 
				this.encryptedData = e.detail.encryptedData//获取encryptedData
				this.decryptPhone()//解密手机号函数
			},
			
			//解密手机号
			decryptPhone(){
				let pc = new WXBizDataCrypt(this.appid,this.session_key);
				let data = pc.decryptData(this.encryptedData , this.iv);
				console.log('解密后 data: ', data)
				
			},
			

好了关键来了,这个WXBizDataCrypt去哪里拿呢
到微信官方地址https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/signature.html
在这里插入图片描述
点击下载后,找到里面的Node文件夹下的WXBizDataCrypt.js 文件,然后将他引入到你项目里,最后在头部引用一下

import 	WXBizDataCrypt from '@/common/utils/WXBizDataCrypt.js';

end

  • 4
    点赞
  • 31
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要在PHP中实现微信小程序授权获取用户信息并绑定手机号登录,可以按照以下步骤进行操作: 1. 在微信小程序端,通过`wx.login`获取到用户的临时登录凭证`code`。 2. 将获取到的`code`发送到服务器端,使用`https`接口调用`code2Session`接口,获取到`openid`和`session_key`。 3. 将`openid`和`session_key`保存至服务器端数据库或缓存中。 4. 在小程序端,使用`wx.getUserInfo`获取用户信息,包括`nickName`、`avatarUrl`等,并将用户信息传输到服务器端。 5. 在服务器端,接收到用户信息后,将用户信息保存到服务器数据库中,可以使用`openid`作为用户的唯一标识。 6. 在小程序端,点击绑定手机号的按钮,调用`wx.request`向服务器发送请求,请求获取手机号的能力。 7. 在服务器端,接收到手机号请求后,可以返回一个包含手机号获取能力的`code`给小程序端。 8. 小程序端收到`code`后,调用`wx.request`向服务器发送请求,请求获取手机号。 9. 服务器端接收到获取手机号的请求后,可以通过调用微信开放平台提供的解密能力,解密包含手机号的数据,并将解密得到的手机号用户信息进行绑定。 10. 绑定成功后,返回相应的状态给小程序端。 总结:通过以上步骤,我们可以在PHP中实现微信小程序授权获取用户信息并绑定手机号登录的功能。在小程序端,用户使用微信授权登录后,将用户信息传输到服务器端保存,并通过绑定手机号使用户能够更便捷地登录和使用小程序。同时,在服务器端需要进行数据加密和解密的操作,确保用户的信息安全。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值