开发者社区> 流楚丶格念> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

微信小程序用户登录功能探究

简介: 微信小程序用户登录功能探究
+关注继续查看

登录模块基础知识


用户登录是微信小程序必不可少的环节,一个完整的登录功能还包括用户的信息获取、登录的状态判定等。下图为未登录和已登录页面效果图。


比如下图是未登录状态


image


登陆后会显示详情信息


image


前导知识:


小程序通过微信官方提供的,获取微信提登录能力供的用户身份标识,建立用户体系。

用户登录流程时序图(下图所示):


image


用户登录流程需要小程序、开发者服务器和微信接口服务3个角色的参与,

下面介绍这3个角色的作用:


  • 小程序:用户使用的客户端,由于小程序运行在微信之上,因此小程序可以通过API获取微信用户的身份信息。


  • 开发者服务器:小程序的后端服务器,用于为小程序用户提供服务。


  • 微信接口服务:微信为开发者服务器提供的接口。


这三者通力合作才能完成上述图中过程


登录流程具体细节:


  1. 小程序获取code。


  1. 小程序将code发送给开发者服务器。


  1. 开发者服务器通过微信接口服务校验登录凭证。


  1. 开发者服务器自定义登录态。


另外还要用到 小程序数据缓存机制,可以参考另一篇博客:


https://yangyongli.blog.csdn.net/article/details/115388965


服务器搭建


由于这次的服务器代码比较多,我放到了另一篇博客中:登录功能服务器搭建 ←←点击查看查看


客户端搭建


在小程序启动时自动执行登录操作。


app.js


login: function() {
    wx.login({
      url: 'http://127.0.0.1:3000/login',
      method: 'post',
      data: { code: res.code },
      success: res => {
       console.log('token: ' + res.data.token)
        // 将token保存为公共数据(用于在多页面中访问)
         this.globalData.token = res.data.token
         // 将token保存到数据缓存(下次打开小程序无需重新获取token)
         wx.setStorage({ key: 'token', data: res.data.token })
       }
      success: res => {
        console.log('login code: ' + res.code)
        wx.request({ // 请求login登录接口 })
      }
    })
  },


小程序控制台打印


image


服务器控制台打印出login code和session的值。


image


token注意事项


判断数据缓存中是否存在token如果存在,取出数据缓存中的token值,不用再执行登录操作。需要注意的是,token有可能会过期,需要重新登录,这就需要从数据缓存中取出token后,先验证token是否过期,再使用token。


检查函数


进入app.js中编写checkLogin()函数,判断token是否存在。


checkLogin: function(callback) {
  var token = this.globalData.token
  if (!token) { 
    token = wx.getStorageSync('token') // 从数据缓存中获取token
    if (token) {
        this.globalData.token = token;
        wx.request({
            url: 'http://127.0.0.1:3000/checklogin',
            data: { token: token },
            success: res => {
              callback({ is_login: res.data.is_login })
            }
      })
  }
  else {   
    callback({ is_login: false })
    return
  }}
  // 如果token存在,请求服务器,判断是否有效
}


修改app.js中onLaunch()函数,用于在小程序启动后检查用户是否已经登录,如果没有登录则执行登录操作。


onLaunch: function() {
  this.checkLogin(res => {
    console.log('is_login: ', res.is_login)
    if (!res.is_login) {
      this.login()
    }
  })
}


获取用户信息


获取用户信息的两种常用方式如下:


1.使用组件来获取


特点:不需要用户授权,可以直接显示用户的头像、昵称、性别等,适合只用来展示信息的情况。


// 示例代码:
<!-- 用户头像 -->
<open-data type="userAvatarUrl"></open-data>
<!-- 用户昵称 -->
<open-data type="userNickName"></open-data>
<!-- 用户性别 -->
<open-data type="userGender" lang="zh_CN"></open-data>


2.单击按钮提示授权的方式


用法:如果“!hasUserInfo”值为true,表示没有获取到用户信息,显示“获取头像昵称”按钮;如果值为false,则将用户信息显示在页面中。


<button wx:if="{{!hasUserInfo}}" open-type="getUserInfo"
     bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>


js中getUserInfo函数


data: { 
    userInfo: {}, 
    hasUserInfo: false 
},
getUserInfo: function(e) {
if (e.detail.userInfo) {
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
}


判断之前是否授权


在app.js文件的onLaunch()函数中,编写如下代码,在下次启动时判断是否已经授权。



wx.getSetting({
  success: res => {
    if (res.authSetting['scope.userInfo']) {
      wx.getUserInfo({      // 表示用户已经授权,可以直接获取到用户信息
        success: res => { 
            this.globalData.userInfo = res.userInfo 
        }
        // 将res.userInfo保存到公共数据中,以便在其他页面可以调用 
        })
    }
 }
})


用法:在app.js文件的globalData中增加userInfo,编写如下代码。


globalData: {
  userInfo: null,   // 增加代码
  token: null
}


调用:在其他页面通过app.globalData.userInf获取到用户信息。


案例:用户登录


image


wxml


<!--pages/index/index.wxml-->
<button bindtap="credit">获取用户的积分</button>
<!-- 用户头像 -->
<open-data type="userAvatarUrl"></open-data>
<!-- 用户昵称 -->
<open-data type="userNickName"></open-data>
<!-- 用户性别 -->
<open-data type="userGender" lang="zh_CN"></open-data>
<!-- 单击按钮提示授权 -->
<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo}}" open-type="getUserInfo"
     bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
    <block wx:else>
      <!-- 用户头像 -->
      <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}"
       mode="cover"></image>
      <!-- 用户昵称 -->
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
      <!-- 用户所在城市 -->
      <text class="userinfo-nickname">{{userInfo.city}}</text>
      <!-- 用户性别 -->
      <open-data type="userGender" lang="zh_CN"></open-data>
    </block>
  </view>
</view>
<!-- 开放数据加密与解密 -->
<button bindtap="sendUserInfo">将用户信息发给服务器</button>


js


const app = getApp()
Page({
  data: {
    userInfo: {},
    hasUserInfo: false
  },
  credit: function () {
    wx.request({
      url: 'http://127.0.0.1:3000/credit',
      data: { 
        token: app.globalData.token 
      },
      success: res => {
        console.log(res.data)
      }
    })
  },
  getUserInfo: function (e) {
    console.log("getUserInfo函数");
    console.log(e.detail.userInfo)
    if (e.detail.userInfo) {
      this.setData({
        userInfo: e.detail.userInfo,
        hasUserInfo: true
      })
    }
  },
  onLoad: function () {
    console.log("onLoad函数");
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else {
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    }
  },
  sendUserInfo: function () {
    console.log("sendUserInfo函数");
    var token = app.globalData.token
    wx.getUserInfo({
      success: res => {
        wx.request({
          url: 'http://127.0.0.1:3000/userinfo?token=' + token,
          method: 'post',
          data: {
            rawData: res.rawData,
            signature: res.signature,
            encryptedData: res.encryptedData,
            iv: res.iv
          }
        })
      }
    })
  }
})



版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【微信小程序】小程序的宿主环境
文章目录 宿主环境 一、什么是宿主环境? 二、小程序的宿主环境 三、小程序宿主环境包含的内容 1.通信模型 通信的主体 小程序的通信模型 2.运行机制 小程序启动的过程 小程序页面渲染过程 3.组件 4.API
24 0
微信小程序登录流程解析
微信官方文档有小程序的登录流程时序图,本文围绕这张图从0到1做更具体的解析。微信小程序的登录看上去好像很复杂,实际上只是不同的接口调用、字段返回,整个过程有3方在参与:小程序、开发者服务器、微信服务器。
165 0
微信小程序实现下拉刷新功能
微信小程序实现下拉刷新功能
26 0
微信小程序源码
内带scroll滚动轮播:如图:           微信小程序开发工具:微信开发工具; 文件目录:     images:小程序的图标 pages:小程序页面 utils:方法js git地址:https://github.
1060 0
微信小程序把玩(三十四)Audio API
原文:微信小程序把玩(三十四)Audio API 没啥可值得太注意的地方 重要属性: 1. wx.getBackgroundAudioPlayerState(object) 获取播放状态 2.
923 0
微信小程序入口
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.
471 0
+关注
流楚丶格念
csdn平台优质创作者,51cto TOP博主,360图书馆科技博主,燕山大学目前大三在读,日拱一卒,功不唐捐,加油!!!
1010
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载