简单实现小程序授权登录功能

永恒给大家带来了关于微信小程序的相关知识，其中主要介绍了怎么实现小程序授权登录功能的相关内容，下面一起来看一下，希望对大家有帮助。

在我们平时工作、学习、生活中，微信小程序已成为我们密不可分的一部分，我们仔细留意下，每当我们使用一个新的小程序时，总会遇到如下页面:

这便是微信小程序授权登录功能了，授权登录后，我们就可以正常使用小程序，而小程序也会获取到我们的用户权益，手机号等个人信息

授权登录功能剖析

微信小程序的授权登录具体步骤如下所示

具体实现主要有以下三个步骤:

调用wx.login() 微信api获取临时登录凭证code，并回传到开发者服务器

调用auth.code2Session 微信api接口，获取用户唯一标识OpenID、 用户在微信开放平台帐号下的唯一标识UnionID和会话密钥session_key

通过步骤2获取的参数进行解密操作，获取用户手机号，头像等特性，并把需要的数据保存到缓存中

步骤实现代码如下：

一、获取临时登录凭证code

由于微信官方修改了getUserInfo接口，现在无法实现一进入微信小程序就会自动弹出授权窗口，所以我们只能通过button按钮让用户手动触发

我们先写一个简单的弹框，用isShow变量控制，isShow取决于步骤3中的缓存信息，当所有步骤都走通，会正确缓存用户信息，此时弹框隐藏，否则弹框都为显示状态

<view class='wx_dialog' wx:if="{{isShow}}">
      <view class='wx_content'>
        <text>需要先授权获取个人信息</text>
        <button class="btn" open-type="getPhoneNumber" type="primary" bindgetphonenumber="getUserInfo">微信账号快速授权</button>
      </view>
</view>

getUserInfo:e=>{
   this.setData({
      isShow:false
   })
 
   wx.login({
      success: function (res) {
         let code = res.code // 登录凭证code
      }
   })       
}

wx.request({
   url: 获取用户信息的auth.code2Session微信api接口,
   method: 'POST',
   data:{
      code:code//登录凭证code
   },
   header: {
      'content-type': 'application/json;charset=UTF-8'
   },
   success: function (res) {
      var userphone= res.data.data                  //解密手机号
      var msg = e.detail.errMsg;
      var sessionKey = userphone.session_key;//会话密钥
      var encryptedData=e.detail.encryptedData; //签名
      var unionid = userphone.unionid//唯一标识
      var iv= e.detail.iv;                  //授权成功
      if (msg == 'getPhoneNumber:ok') {
         wx.checkSession({
            success:function(){                        //进行请求服务端解密手机号
               this.deciyption(sessionKey,encryptedData,iv,unionid);
            }
         })
      }
   }
})

deciyption(sessionKey,encryptedData,iv,unionid){
    var that = this;
    wx.request({
      url: 解密接口,
      method: 'POST',
      data: {
        sessionKey: sessionKey,
        encryptedData:encryptedData,
        iv: iv
      },
      header: {
        'content-type': 'application/json;charset=UTF-8'
      },
      success: function(res) {
        let data = res.data
        if (data.resultCode == 'success') {
            wx.setStorageSync('userTel', data.data.phoneNumber);//存储解密后的用户手机号
        }else{
            wx.showToast({
                title: '获取信息失败请重新授权',
                icon: 'none'
            })
            that.setData({
                isShow:true
            })
        }    
      },
      fail:function(res) {
        wx.showToast({
            title: '获取失败请重新授权',
            icon: 'none'
        })
        that.setData({
          isShow:true
        })
      }
   })
},

下载说明：
1、本站所有资源均从互联网上收集整理而来，仅供学习交流之用，因此不包含技术服务请大家谅解！
2、本站不提供任何实质性的付费和支付资源，所有需要积分下载的资源均为网站日常活跃所需，积分可通过日常活跃免费获得！
3、本站所有资源仅用于学习及研究使用，您必须在下载后的24小时内删除所下载资源，切勿用于商业用途，否则由此引发的法律纠纷及连带责任本站和发布者概不承担！
4、本站站内提供的所有可下载资源，本站保证未做任何负面改动（不包含修复bug和完善功能等正面优化或二次开发），但本站不保证资源的准确性、安全性和完整性，用户下载后自行斟酌，我们以交流学习为目的，并不是所有的源码都100%无错或无bug！如有链接无法下载、失效或广告，请联系客服处理！
5、本站资源除标明原创外均来自网络整理，版权归原作者或本站特约原创作者所有，如侵犯到您的合法权益，请立即告知本站，本站将及时予与删除并致以最深的歉意！
6、如果您也有好的资源或教程，您可以投稿发布，成功分享后有站币奖励，同时还能获得对应的人气！
7、如果您喜欢该资源，请支持官方正版资源，以得到更好的正版服务！
8、请您认真阅读上述内容，注册本站用户或下载本站资源即您同意上述内容！
原文链接：http://www.yonghengzy.cn/blog/48776.html，转载请注明出处。