优雅解决微信小程序授权登录需要button触发

plus2047 发布于2019-08-23 15:40 / 2531人阅读

摘要：优雅解决微信小程序授权登录需要触发聊一聊最近的一个项目，这个项目是一个收书售书的小程序，有商城专栏信息发布论坛等功能。微信不会把的有效期告知开发者。

优雅解决微信小程序授权登录需要button触发

聊一聊最近的一个项目，这个项目是一个收书、售书的小程序，有商城、专栏、信息发布论坛等功能。虽然不是面向所有用户，但要求无论用户是否授权都皆可使用，但同时也要求部分功能对不授权的用户限制开放。

问题总结如下

首先是小程序不授权也可以使用，但是只有部分功能可用，比如浏览

第二问题是在用户想进一步使用小程序时需要获取用户授权

获取到用户授权的时候该如何处理跳转

解决方案 1.首先用户进入小程序的时候会在app.js中的onLaunch发起登陆

微信小程序文档这样说

调用 wx.login() 获取 临时登录凭证code ，并回传到开发者服务器。
调用 code2Session 接口，换取 用户唯一标识 OpenID 和 会话密钥 session_key。
之后开发者服务器可以根据用户标识来生成自定义登录态，用于后续业务逻辑中前后端交互时识别用户身份。

也就是说服务器可以返回一个自定义的session,缓存后用于后续业务逻辑中前后端交互时识别用户身份

同时微信小程序文档也说了

1.wx.login 调用时，用户的 session_key 可能会被更新而致使旧 session_key 失效（刷新机制存在最短周期，如果同一个用户短时间内多次调用 wx.login，并非每次调用都导致 session_key 刷新）。开发者应该在明确需要重新登录时才调用 wx.login，及时通过 code2Session 接口更新服务器存储的 session_key。
2.微信不会把 session_key 的有效期告知开发者。我们会根据用户使用小程序的行为对 session_key 进行续期。用户越频繁使用小程序，session_key 有效期越长。
3.开发者在 session_key 失效时，可以通过重新执行登录流程获取有效的 session_key。使用接口 wx.checkSession可以校验 session_key 是否有效，从而避免小程序反复执行登录流程。
当开发者在实现自定义登录态时，可以考虑以 session_key 有效期作为自身登录态有效期，也可以实现自定义的时效性策略。

意思说没必要每次启动小程序都要登录，我这里使用的是每次启动都要登录

onLaunch: function () {
    wx.login({
      success: res => {
        if (res.code) {
          // 发送 res.code 到后台换取 openId, sessionKey
        }else{
          console.log("获取用户登录态失败：" + res.errMsg)
        }
      }
    })

2.然后再通过wx.getSetting判断用户是否已经授权过了,如果授权过了则可以直接调用 getUserInfo 获取头像昵称，不会弹框，存入globalData，那么该用户可以进行所有的操作。同时可以将 res 发送给后台解码出 unionId。

wx.getSetting({
      success: res => {
        if (res.authSetting["scope.userInfo"]) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId

              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })

3.当小程序启动后，用户之前没有授权过的话，在使用发布信息、购物车、我的、论坛等功能的时候则跳转至提示用户授权页面或者使用弹窗提示用户授权，这个项目用的是页面。

注意：因为用户授权之后要跳转到用户要使用的功能页面，所以要在重定向之前记录好用户当前的路径信息、要使用的功能的页面的路径信息，存储在globalData中，在获取授权后再重定向至该页面。如果用户点击拒绝则返回原来页面

贴上部分代码

/**
*  oldPath = getApp().globalData.oldPath
*  用户要用的功能页面
*  newPath = getApp().globalData.goToPath
*/
const oldPath = getApp().globalData.oldPath
const newPath = getApp().globalData.goToPath

if (app.globalData.userInfo) {
  goNewPath(newPath)
} else if (this.data.canIUse) {
  // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
  // 所以此处加入 callback 以防止这种情况
  app.userInfoReadyCallback = res => {
    if (e.detail.userInfo != void 0){
      app.globalData.userInfo = res.userInfo
      goNewPath(newPath)
    }else{
      goOldPath(oldPath)
    }
  }
} else {
  // 在没有 open-type=getUserInfo 版本的兼容处理
    wx.getUserInfo({
      success: res => {
        if (e.detail.userInfo != void 0){
          app.globalData.userInfo = res.userInfo
          goNewPath(newPath)
        }else{
          goOldPath(oldPath)
        }
      }
    })
  }
},
bindGetUserInfo: function (e) {
  if (e.detail.userInfo != void 0){
    app.globalData.userInfo = e.detail.userInfo
    wx.switchTab({
      url: "../bookcity/bookcity",
      success: function (res) { },
      fail: function (res) { },
      complete: function (res) { },
    })
  }else{
    // 授权失败
    goOldPath(oldPath)
  }
},
goNewPath: function(path){
  // isTab()判断路径是否是Tab
  if(isTab(path)){
      wx.switchTab({
      url: path,
      success: function(res) {},
      fail: function(res) {},
      complete: function(res) {},
    })
  }else{
    wx.reLaunch({
      url: path ,
    })
  }
},
goOldPath: function(path){
  wx.navigateBack({
    delta: 1,
  })
},
isTab: function(path){

}

云服务器 GPU云服务器微信小程序需要钱吗微信小程序需要多少钱微信小程序需要用cdn吗个人微信小程序需要备案吗

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102423.html

微信小程序授权登录、解密unionId出错

摘要：注没有在微信开放平台做开发者资质认证的就不要浪费时间了，没认证无法获取，认证费用元年，微信授权登录流程第一步获取用户临时登录凭证第二步获取加密过的数据和解密参数第三步把步骤一二中的传到开发者自己服务端第三步服务端获取到之后用方法请求如下微信注：没有在微信开放平台做开发者资质认证的就不要浪费时间了，没认证无法获取unionId，认证费用300元/年，emmmm.... 微信授权登录流程...

tinysun1234 2019-08-26 12:21 评论0 收藏0
微信小程序开发中的二三事之网易云信IMSDK DEMO

摘要：传统的网页编程采用的三剑客来实现，在微信小程序中同样有三剑客。观察者模式不难实现，重点是如何在微信小程序中搭配其特有的生命周期来使用。交互事件传统的事件传递类型有冒泡型与捕获型，微信小程序中自然也有。本文由作者邹永胜授权网易云社区发布。简介为了更好的展示我们即时通讯SDK强悍的能力，网易云信IM SDK微信小程序DEMO的开发就提上了日程。用产品的话说就是: 云信 IM 小程序 S...

weij 2019-06-28 11:05 评论0 收藏0
小程序开发中的那些小坑

摘要：解决方法用组件替换组件，用微信小程序的实现点击切换效果除此之外，在中也不能使用组件。接口更改问题微信小程序最近被吐槽最多的一个更改，就是用户使用开发和体验版时不会弹出授权，正式版不受影响。最近专门做小程序开发中，跟大家分享下遇到那些不得不处理的小坑，欢迎指正 1.小程序用 WxParse 在手机上不能正确解析 html 代码并显示解决办法：这个是 wxparse 代码的一个...

CODING 2019-08-29 16:25 评论0 收藏0
小程序开发中的那些小坑

摘要：解决方法用组件替换组件，用微信小程序的实现点击切换效果除此之外，在中也不能使用组件。接口更改问题微信小程序最近被吐槽最多的一个更改，就是用户使用开发和体验版时不会弹出授权，正式版不受影响。最近专门做小程序开发中，跟大家分享下遇到那些不得不处理的小坑，欢迎指正 1.小程序用 WxParse 在手机上不能正确解析 html 代码并显示解决办法：这个是 wxparse 代码的一个...

jerryloveemily 2019-08-26 12:11 评论0 收藏0
小程序开发中的那些小坑

摘要：解决方法用组件替换组件，用微信小程序的实现点击切换效果除此之外，在中也不能使用组件。接口更改问题微信小程序最近被吐槽最多的一个更改，就是用户使用开发和体验版时不会弹出授权，正式版不受影响。最近专门做小程序开发中，跟大家分享下遇到那些不得不处理的小坑，欢迎指正 1.小程序用 WxParse 在手机上不能正确解析 html 代码并显示解决办法：这个是 wxparse 代码的一个...

Achilles 2019-08-02 11:14 评论0 收藏0