歡迎您光臨深圳凯时真人娱乐平台網絡科技有限公司!
电话图标 余先生:13699882642

網站百科

为您解码網站建設的点点滴滴

小程序篇(2):登錄獲取用戶信息

发表日期:2019-11 文章编辑:小灯 浏览次数:1310

登錄和獲取用戶信息是小程序中最基本的两步操作,但是由于之前小程序官方开始时的设计缺陷,导致很多开发者将登錄和獲取用戶信息绑定使用,尽管后来小程序wx.getUserInfo接口调整为:在用户未授权过的情况下调用此接口,将不再出现授权弹窗,会直接进入 fail回调,但是改了之后,依旧有不少开发者对这两步的概念混淆不清,接下来这篇文章将会详细介绍小程序这两步操作

登錄

wx.login()用来做登錄的方法,调用接口获取登錄凭证,code发送给后端用于置换session_key和openid等数据,接下来看看小程序的整个登錄流程是怎样的:

这是小程序官方的一张登錄流程图,现在就来解读一下这个流程

  • 前端wx.login()獲取code,調用後端接口,將得到的code發送到後端
  • 後端調用微信接口服務,用appid+appsecret+code發送過去,置換到session_key+openid,以前是不能置換unionid的,但是現在在滿足以下條件可以置換到unionid
  1. 在微信開放平台下存在同主體的App、公衆號、小程序
  2. 用户关注了某个相同主体公众号,或曾经在某个相同主体App、公众号上进行过微信登錄授权

同時滿足以上兩個條件就能拿到用戶unionid,這樣一來,就能在wx.login()准確識別出用戶是誰

  • 自定登錄态与openid和session_key关联,实际就是生成一个与openid,session_key关联的token,下发给前端
  • 前端将后端下发的token存入缓存,在后面的接口请求中带上自定登錄态

以上就是小程序的整个登錄流程,可以看到其实并不是一定要wx.getUserInfo()才能拿到用户的信息,在特定的条件下,通过wx.login()的调用拿到unionId也能后端数据库里拿到用户信息

獲取用戶信息

wx.getUserInfo()以前调用时是会弹出授权弹框的,根据用户的授权与否进入对应的回调函数,但是后来微信发现开发者滥用wx.getUserInfo()方法,不授权用户信息不能使用小程序,现在就只能通过button组件open-type="getUserInfo"触发授权弹窗,授权后能获得用户信息以及用户信息的加密数据,将用户信息的加密数据发送到后端,后端通过wx.login()的code置换到的session_key对加密数据进行解密就能拿到用户的完整信息,这一步其实是对第一步的补充,当wx.login()无法确认用户的时候时候才会执行到这一步,如果在wx.login()可以确认用户信息时,就可以不用执行这一步,实现用户的无感登錄。

注意点:根据小程序官方最近发布的文档来看,小程序不能用户进入小程序时就弹登錄框要求用户登錄才能体验小程序,这种操作审核会被拒,要用户在体验一定的小程序功能后,才能引导用户去登錄授权用户信息,具体文檔地址

token過期重登

以往我们写网页应用时,当后端下发的token失效时,请求接口会得到403错误码,然后前端接到返回的错误码时就会跳到登錄页要求用户重新登錄,但是在小程序当token失效时,需要跳到一个登錄页重新登錄吗?明显不需要,因为小程序本身就没有账号密码登錄,因此登錄失效了直接做一个无感的重登操作就行了,除非某些小程序在并没有依赖微信的登錄信息,而是小程序里面内置自己的用户登錄信息,这时候就需要跳到一个登錄页面进行重登,但是这样的小程序还是少数,接下来就来看看如何小程序是如何做无感重登的。

直接來看代碼:

const Fly = require('../libs/flyio')
const fly = new Fly()
const newFly = new Fly()
let time = 0
let baseUrl = 'xxxxx'
fly.interceptors.request.use((request) => {
  wx.showNavigationBarLoading()
  request.headers['token'] = wx.getStorageSync('token')
  request.baseURL = baseUrl
  return request
})
newFly.interceptors.request.use((request) => {
  wx.showNavigationBarLoading()
  request.headers['token'] = wx.getStorageSync('token')
  request.baseURL = baseUrl
  return request
})
fly.interceptors.response.use(
  (response, promise) => {
    wx.hideNavigationBarLoading()
    return promise.resolve(response.data)
  },
  function (err, promise) {
    wx.hideNavigationBarLoading()
    // session或者session_key失效的时候重新登錄
    if (err.status === 403) {
      //锁定当前实例,后续请求会在拦截器外排队
      this.lock()
      // 当出现未认证的情况时重新登錄,超过三次抛出错误
      if (time > 3) {
        time = 0
        return promise.reject(err.message + `(${err.status})`)
      }
      return new Promise((resolve, reject) => {
        wx.login({
          success: (e) => {
            let options = {
              'code': e.code
            }
            resolve(options)
          }
        })
      }).then((options) => {
        return newFly.post('/login', options).then(info => {
          wx.setStorageSync('token', info.token)
          time++
          //解锁后,会继续发起请求队列中的任务
          this.unlock()
          // 重新请求失败的请求
          return fly.request(err.request)
        })
      })
    }
  }
)

export {
  fly
}

上面的代码展示的就是小程序token過期重登的过程,代码不多,关键的地方也加上了注释,很容易理解,这里面最关键的就是使用了flyio这个网络请求库,利用这个库做的过期重登,这是一个基于Promise的、强大的、支持多种JavaScript运行时的http请求库,可以使用一份http请求代码在浏览器、微信小程序、Weex、Node、React Native、快应用中都能正常运行,在小程序中使用这个库十分方便。这段代码为了避免死循环,因此用了一个计数,超过三次就不会再重试登錄,直接抛错

總結

本篇文章主要介绍了小程序的登錄流程、獲取用戶信息、以及登錄过期重登的相关内容,这里介绍的只是基础的通用的流程,实际上每个小程序的业务可能不太一样,因此在具体应用需要根据具体业务再行调整。
如果有錯誤或不嚴謹的地方,歡迎批評指正,如果喜歡,歡迎點贊


本頁內容由凯时真人娱乐平台網絡科技有限公司通過網絡收集編輯所得,所有資料僅供用戶參考了本站不擁有所有權,如您認爲本網頁中由涉嫌抄襲的內容,請及時與凯时真人娱乐平台 聯系,並提供相關證據,工作人員會在5工作日內聯系您,一經查實,本站立刻刪除侵權內容。本文鏈接:/25240.html
相關小程序
 八年  行業經驗

多一份參考,總有益處

联系深圳网站公司凯时真人娱乐平台网络,免费获得網站建設方案及报价

咨詢相關問題或預約面談,可以通過以下方式與凯时真人娱乐平台 聯系

業務熱線:余經理:13699882642

在線咨詢 提交需求

Copyright ? 2013-2018 Tadeng NetWork Technology Co., LTD. All Rights Reserved.    

  • 粵ICP備13056747號