前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >小程序 | 14-小程序登录

小程序 | 14-小程序登录

作者头像
CnPeng
发布2021-05-17 15:17:48
8.7K0
发布2021-05-17 15:17:48
举报
文章被收录于专栏:CnPengDevCnPengDevCnPengDev

1. 小程序登录流程

1.1. 客户端的操作

客户端操作的内容主要有如下四项:

  • 调用 wx.login 获取 code
  • 调用 wx.request 发送 code 到我们自己的服务器(我们自己的服务器会返回一个登录态的标识,比如 token)
  • 将登录态的标识 token 进行存储,以便下次使用
  • 请求需要登录态标识的接口时,携带 token

1.2. 完整的操作流程:

2. 代码演练

// app.js
const TOKEN = "token"

App({
  globalData: {
    token: '',
    userInfo: null
  },

  onLaunch() {
    // 1 取出本地 storage 中的 token
    const token = wx.getStorageSync(TOKEN)
    // 2 判断 token 是否有值 
    if (token && token.length) {
      // 3 检查 token 是否有效
      this.checkToken(token)
    } else {
      // 4 没有token 执行登录逻辑
      this.login()
    }
  },

  // 检查令牌
  checkToken(token) {
    console.log(token)
    wx.request({
      url: 'http://123.107.32.32:3000/auth',
      method: 'post',
      header: {
        token
      },
      success: (res) => {
        if (!res.data.errCode) {
          console.log("token有效")
          this.globalData.token = token
        } else {
          this.login()
        }
      },
      fail: function (err) {
        console.log(err)
      }
    })
  },

  // 登录
  login() {
    wx.login({
      success: res => {
        // 读取 wx 返回的 code 的,有效期为 5 分钟.
        const code = res.code
        // 发送 code 到自己的后台后台换取 token 或 openId, sessionKey, unionId
        wx.request({
          url: 'http://123.207.32.32:3000/login',
          method: 'post',
          data: {
            code
          },
          success: (res) => {
            console.log(res)
            // 取出服务端返回的 token
            const token = res.data.token
            // 存储到全局变量中
            this.globalData.token = token
            // 存储到 storage 中
            wx.setStorageSync(TOKEN, token)
          }
        })
      }
    })
  },

  getUserInfo() {
    // 获取用户信息
    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)
              }
            }
          })
        }
      }
    })
  }
})
本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2021-05-09,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 CnPeng 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. 小程序登录流程
    • 1.1. 客户端的操作
      • 1.2. 完整的操作流程:
      • 2. 代码演练
      相关产品与服务
      云开发 CloudBase
      云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档