一文看懂微信小程序授权登录
一、wx.getUserInfo授权登录
在2018年4月30日之前,可以使用 wx.getUserInfo 接口直接弹出授权框。
但在2018年4月30日开始,小程序与小游戏的体验版、开发版调用 wx.getUserInfo 接口,将无法弹出授权询问框,默认调用失败。
所以需要采用官网提供的其他方式进行授权登录
二、使用 button 组件
根据官网的后续说明,使用button组件,并将 open-type 指定为 getUserInfo 类型,可以获取用户基本信息。
<button
wx:if="{{canIUse}}"
open-type="getUserInfo"
bindgetuserinfo="bindGetUserInfo"
>授权登录</button>
<view wx:else>请升级微信版本</view>
data: {
//判断小程序的API,回调,参数,组件等是否在当前版本可用。
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
onLoad: function() {
// 查看是否授权
wx.getSetting({
success: function(res){
if (res.authSetting['scope.userInfo']) {
wx.getUserInfo({
success: function(res) {
console.log(res.userInfo)
//用户已经授权过
}
})
}
}
})
},
bindGetUserInfo: function(e) {
console.log(e.detail.userInfo)
if (e.detail.userInfo){
//用户按了允许授权按钮
} else {
//用户按了拒绝按钮
}
},
授权弹框如下
这里需要注意的是,获取的信息只包括头像、地区、昵称、性别等
三、wx.login
利用wx.login获取到的code,在发送小程序的appid、secret和grant_type(授权类型)获取用户的信息,包括用户的手机号。
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>
getPhoneNumber: function (e) {
var that = this;
wx.login({
success(res) {
if (res.code) {
//登陆成功并成功返回code便发起网络请求获得OPENID
wx.request({
url: 'fuwuqi.php',
data: {
appid: "你的小程序APPID",
secret: "你的小程序appsecret",
code: res.code,
grant_type:"authorization_code"
},
success: function(res){
//获取用户的手机号
phoneObj = res.data.phoneNumber;
console.log("手机号=", phoneObj)
}
})
}else{
console.log('登录失败!'+res.errMsg);
}
if (e.detail.errMsg == 'getPhoneNumber:user deny') { //用户点击拒绝
wx.navigateTo({
url: '../login/login',
})
} else { //允许授权执行跳转
wx.navigateTo({
url: '../index/index',
})
}
}
})
}
这样下来就能获取信息进行授权登录啦~