小程序登录的最优流程

8,405 阅读3分钟

小程序登录无需点击登录的流程

起因

18年中旬做过一个小程序,当时是通过转跳到一个登录页,然后点击调用wx.getUserInfo ,然后发现这个api被禁用了(虽然依然可以用),然后用

<!-- 需要使用 button 来授权登录 -->
<button wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授权登录</button>
<view wx:else>请升级微信版本</view>

因为当时刚好需要用户信息,然后这个api有一个encryptedData属性可以获取信息。

这样的流程本就可以了,但是意外出现了。

思维的禁锢

当第二次(2020年)需要开发一个新的小程序,于是也用了老代码,但是出现了个奇怪的问题。 有兴趣的可以看下面的[奇怪的问题]

奇怪的问题:

因为微信限制无法转跳到登录页,所以想是否应该在首页设置一个弹窗,点击的时候授权。

但是因为考虑到可能会被微信拒绝,故在小程序开发者论坛开了一篇文章

app无法转跳到登录页面 and 小程序登录的哲学思考

随后发现,登录其实并不需要授权弹窗or页面。(如果服务器不需要保存用户信息)

流程

下面这个图是小程序官方图 点我转跳

代码

app.js(小程序的入口文件)的完整代码

const loginDataKey = 'loginData'

//app.js
App({
  onLaunch: function () {

    const loginData = wx.getStorageSync(loginDataKey)
    console.log('--loginData--')
    console.log(loginData)
    let toLogin = () => {
      console.log('未登录,去登录..')
      wx.showLoading({title: '登录中', icon: 'loading', mask: true})
      wx.login({
        success(res){
          console.log('wx.login res')
          console.log(res)
          let success = () => {
            console.log('登录成功')
            let loginResponse = {"openid":"ooZAbwpdDdaZV_xiamianshi_mashaike"}
            wx.setStorageSync(loginDataKey, loginResponse)
            wx.hideLoading()
          }
          let fail = () => {
            wx.hideLoading()
            wx.showToast({
              title: '登录失败,请重新打开小程序试试',
              icon: 'none',
              duration: 1e8
            })
          }
          // TODO 发起网络请求
          // 延时模拟请求登录成功
          setTimeout(success, 500)
        },
        fail(err){
          console.log(err)
          wx.hideLoading()
          wx.showToast({
            title: '登录失败,请重新打开小程序试试',
            icon: 'none',
            duration: 1e8
          })
        }
      })
    }
    // 未登录,去登录
    if(!loginData){
      toLogin()
    // 已登录,但是微信session_key过期
    }else{
      wx.checkSession({
        success () {
          //session_key 未过期,并且在本生命周期一直有效
          console.log('session_key 未过期')
        },
        fail () {
          // session_key 已经失效,需要重新执行登录流程
          console.log('session_key 已经失效,需要重新执行登录流程, 重新登录中')
          toLogin()
        }
      })
    }

  },
  globalData: {
    userInfo: null
  }
})

流程如下

  • 根据本地储存判断是否登录
  • 已登录判断是否失效
  • 失效或者未登录去登录
  • 登录展示toast
  • 拿到信息存储 关闭toast

核心

  • wx.login拿到code
  • 然后把code通过 auth.code2Session获取openid和unionid等。

这是我通过auth.code2Session拿到openid的截图(因为这个是测试号,所以没有unionid)
【unionid】是拿来和其他平台打通账号的关键,如果只有一个小程序,都可以不需要这个。

效果

其他

纯展示用户头像昵称等

<open-data type="userAvatarUrl"></open-data>
<open-data type="userNickName"></open-data>

查看open-data文档

关于小程序官方登陆通知

小程序内用户帐号登录规范调整和优化建议{官} 里面是审核标准,审核人员培训就是按照这个来的。

在里面有很多声音,指的是拿不到unionid

这个可以先看下 UnionID 机制说明 但是很多人按照这个来,也拿不到,为啥??

微信我觉得也要背一个锅,而且2、3条以前是没有的。现在有了依然不太行,是因为需要在小程序后台设置 -> 关联设置 -> 绑定开发平台。

(怎么又扯上了开发平台,就不能安静一点么,比如只要关联公众号就可以拿到,至于移动应用再强制去开放平台拿也行)

不过那些同学可能看不到这个文章~~

--完--