欢迎光临 - 我的站长站,本站所有资源仅供学习与参考,禁止用于商业用途或从事违法行为!

微信小程序教程

微信小程序授权登录功能详解+示例代码

微信小程序教程 我的站长站 2023-10-25 共76人阅读

授权登录开发思路

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

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

3、通过步骤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方法,isShow设置为false,同时使用wx.login获取到登录凭证code

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

二、根据登录凭证code,获取用户登录信息

拿到登录凭证code后,调用auth.code2Session 微信api接口(此处为服务端操作,后端大佬搞定,我们直接调用他给的接口就好)

         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
        })
      }
    })
  },

此时授权登录功能已完成

相关推荐
  • 微信小程序api
  • 微信小程序常用api大全

    1、小程序常用生命周期wx.getLaunchOptionsSync 获取小程序启动时的参数。与 App.onLaunch 的回调参数一致。wx.getEnterOptionsSync 获取本次小程序启动时的参数。如果当前是冷启动,则返回值与 App.onLaunch 的回调参数一致;如果当前是热启动,则返回值...

    微信小程序教程 33 1年前
  • 微信小程序系统常用api大全

    1、wx.openAppAuthorizeSetting(Object object) wx.openAppAuthorizeSetting(Object object) 跳转系统微信授权管理页参数:1)success 接口调用成功的回调函数2)fail 接口调用失败的回调函数3)complete 接口调用结束的回调函数(调用成功、失败都会执行)2...

    微信小程序教程 37 1年前
  • 微信小程序授权登录功能详解+示例代码

    授权登录开发思路1、调用wx.login() 微信api获取临时登录凭证code,并回传到开发者服务器2、调用auth.code2Session 微信api接口,获取用户唯一标识OpenID、 用户在微信开放平台帐号下的唯一标识UnionID和会话密钥session_key3、通过步骤2获取的参数进行...

    微信小程序教程 76 1年前
  • 如何申请微信支付接口(图文)

    1、注册微信公众号必须企业或个体户资质微信公众号申请地址:https://mp.weixin.qq.com服务号:为企业和组织提供更强大的业务服务与用户管理能力,主要偏向服务类交互(功能类似12315,114,银行,提供绑定信息,服务交互的);适用人群:媒体、企业、政府或其他组织。2、...

    微信小程序教程 53 1年前
  • 利用URL Scheme接口无感跳转微信小程序教程

    获取URL Scheme接口第一步 获取URL Scheme:我们可以看到,最终实现的效果应该是:weixin://dl/business/?t= TICKET而这个TICKET只能从服务端获取第二步 点击服务端进来查看一下方法:我们可以看到 他是HTTPS发送一个Post请求调用的POST https://api.weixi...

    微信小程序教程 149 2年前