【微信小程序】wx.login实现用户登录

简介: 【微信小程序】wx.login实现用户登录

实现原理/步骤】

一、wx.login

(1)前端通过wx.login()获取登录凭证code,每次调用的code均不同,有效时间5分钟,每个code可验证一回


(2)前端通过wx.request(我这里是用封装好的request.login)将code发送给后端


(3)后端将appid,appSecret(密钥)和code发送给微信接口服务去校验登录凭证,成功后会返回session_key(会话信息记录)和openid(用户唯一标识)


ps:前面的 appid,appSecret(密钥)可以在微信公众号平台获取


(4)用户登录成功后,后端将openid和session_key保存,生成一个自定义登录态的token(令牌)响应回去给前端。


(5)通过token可以查询openid和session_key,前端将返回的token进行缓存,小程序下次请求只要携带着token就可以证明已经登录。


(6)在app.js中检测用户是否已经登录


pages/login/login.js

onLoad() {
 
    wx.login({
 
      // 调用接口获取登录凭证(code)
 
      success: (Result) => {
 
        // 向后台发起request.login请求,用code换取用户登录态信息openid,存储为token;
 
        request.login({
 
          code: Result.code
 
        }).then((token) => {
 
          // 存储用户登录态信息token
 
          wx.setStorageSync('token', token)
 
        }) .catch(error => {
 
          console.log("换取登录态token失败:",error)
 
        });
 
      },
 
      fail:(res)=> { console.log("获取登录凭证code失败!",res) }
 
    }) 
 
  },
App({
 
  //配置全局变量(多页面使用)
  globalData: {
    // 登录信息
    token: ''
  },
 
// 登录检测:token
checkLogin() {
 
  //全局变量或缓存中存在token,直接赋值,否则重新登录
  var token = this.globalData.token
  if (!token) {
    token = wx.getStorageSync('token')
    if (token) {
      this.globalData.token = token;
 
    } else {
      wx.showToast({
        title: '请登录',
        icon: 'none'
      })
 
      setTimeout(() => {
        wx.reLaunch({
          url: '/pages/login/login',
        })
      }, 2000);
    }
  }
},
 
  onLaunch() {
      // 登录检测:token
      this.checkLogin(),
  },
})
相关文章
|
4月前
|
小程序 JavaScript
【微信小程序-原生开发】实用教程11 - 用户登录鉴权(含云函数的创建、删除、使用,通过云函数获取用户的openid)
【微信小程序-原生开发】实用教程11 - 用户登录鉴权(含云函数的创建、删除、使用,通过云函数获取用户的openid)
71 0
|
小程序 数据安全/隐私保护
微信小程序:wx.login和getPhonenumber获取手机号解密失败问题
微信小程序:wx.login和getPhonenumber获取手机号解密失败问题
686 0
|
JSON 前端开发 小程序
微信小程序入门05-用户登录注册接口开发
微信小程序入门05-用户登录注册接口开发
|
缓存 小程序 JavaScript
微信小程序用户登录功能探究
微信小程序用户登录功能探究
326 0
微信小程序用户登录功能探究
|
缓存 JSON 前端开发
微信小程序实现用户登录流程
微信小程序实现用户登录流程
1051 0
 微信小程序实现用户登录流程
|
小程序 开发者
详解微信小程序登录wx.login(Object object)
详解微信小程序登录wx.login(Object object)
819 0
详解微信小程序登录wx.login(Object object)
|
监控 JavaScript 小程序
微信小程序——用户登录模块服务器搭建
微信小程序——用户登录模块服务器搭建
417 0
|
JavaScript 数据库 开发者
小程序云应用入门实操系列课程第四讲 - 云应用的使用二:用户登录
云应用是面向小程序应用场景,为开发者提供的⼀键构建后端应用运行环境、后端服务部署、运维监控等能力的⼀站式小程序部署服务。本次课程主要分享小程序云应用开发中微信登录的实践部分,分别从服务端和小程序端学习用户登录的具体代码逻辑和操作。
6199 0
|
30天前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
203 3
|
1月前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
48 0
微信小程序更新提醒uniapp