授权
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';