小程序登录
调用 wx.login() 获取 临时登录凭证code ,并回传到开发者服务器。
调用 auth.code2Session 接口,换取 用户唯一标识 OpenID 和 会话密钥 session_key。
之后开发者服务器可以根据用户标识来生成自定义登录态,用于后续业务逻辑中前后端交互时识别用户身份。
登录流程图
1.调用wx.login() 获取 临时登录凭证code
2.拿到code后发送请求给你们的后台,后台再向微信的服务器获取openId, sessionKey等
//登录函数
const getLoginData = () => {
return new Promise(function(success,fail){
wx.login({
success: res => {
//code是用户登录的临时凭证,和用户是否授权没有关系,code的有效时间为五分钟
// 发送 res.code 到后台换取 openId, sessionKey, unionId
wx.request({
url: url, //向后台发送code的接口
method: 'POST',
data: {
code: res.code,
},
success: function (res) {
success(res);
},
fail: function (res) {
fail(res);
}
})
}
})
});
}
授权
1.小程序授权需要用户主动触发,所以我们要写一个触发按钮弹窗
<view class="weui-dialog__ft" wx:if='{{isShow}}'>
<view bindtap='cancel'>取消</view>
<view class="active">
<button open-type="getUserInfo" bindgetuserinfo="getUserInfoSubmit">授权</button>
</view>
</view>
2.判断是否授权
//判断是否授权的函数
// wx.getSetting() 获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限
getSetting: function () {
return new Promise(function (resolve, reject) {
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已授权,隐藏我们的授权按钮
resolve('1');
this.setData({
isShow: false
});
// wx.getUserInfo()获取用户信息。(必须是在用户已经授权的情况下调用)
wx.getUserInfo({
success: res2 => {
//获取到用户信息
console.log(res2.userInfo)
}
})
} else {
//未授权,显示我们的授权按钮
resolve('0');
this.setData({
isShow: false
});
}
},
fail: res => {
reject('调用判断状态失败')
// console.log('shibai')
}
});
});
},
3.授权
button的bindgetuserinfo属性:
用户点击该按钮时,会返回获取到的用户信息,回调的detail数据与wx.getUserInfo返回的一致,open-type="getUserInfo"时有效
//点击授权对应的函数
getUserInfoSubmit: function (e) {
//点击同意授权
this.setData({
isShow: false
});
if(e.detail.rawData){
var userinfo = JSON.parse(e.detail.rawData)
console.log(userinfo) //获取到用户信息
}else{
//授权失败(点击取消)
console.log('拒绝')
//继续弹出授权按钮
//我这里项目要求不授权无法进行下面的操作
//如果项目没有要求必须授权这里可以跳转到其他页面或执行相应的业务代码
this.setData({
isShow: true
});
}
wx.hideLoading();
},
注:
wx.authorize({scope: “scope.userInfo”}),不会弹出授权窗口,请使用
需要授权 scope.userLocation、scope.userLocationBackground 时必须配置地理位置用途说明。