一文看懂微信小程序授权登录

一、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',
			    })
			}
		}
	})
}

这样下来就能获取信息进行授权登录啦~