授权

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

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐