微信小程序登录流程

猫老板的豆2024-04-04 10:32

文章目录

[1. 用户触发登录操作](#1. 用户触发登录操作)
[2. 获取临时登录凭证](#2. 获取临时登录凭证)
[3. 发送登录凭证到服务器](#3. 发送登录凭证到服务器)
[4. 后端使用 code 获取 session_key 和 openid](#4. 后端使用 code 获取 session_key 和 openid)
[5. 后端保存 session_key 和 openid 返回token](#5. 后端保存 session_key 和 openid 返回token)
[6. 前端保存登录态](#6. 前端保存登录态)

1. 用户触发登录操作

用户在小程序内部点击登录按钮或进行需要登录权限的操作，触发登录流程。

2. 获取临时登录凭证

当用户点击登录按钮后，小程序调用 wx.login() 获取 code。

js 复制代码

// 小程序页面中的登录按钮点击事件处理函数  
login: function() {  
  wx.login({  
    success: function(res) {  
      if (res.code) {  
		console.log(res.code); // 获取到code
      } else {  
        console.log('登录失败！' + res.errMsg);  
      }  
    }  
  });  
}

3. 发送登录凭证到服务器

将获取到的code发送至开发者的后台服务器。这个步骤通常是通过HTTP请求完成的，可能还包含其他必要的参数，如小程序的AppID等。

4. 后端使用 code 获取 session_key 和 openid

后端服务器接收到 code 后，使用自己的 appid 和 appsecret，结合 code，请求微信服务器换取 session_key(本次登录的会话密钥) 和 openid。

5. 后端保存 session_key 和 openid 返回token

后端服务器保存 session_key 和 openid，并可以生成自定义的登录态 token 给小程序

6. 前端保存登录态

前端接收到登录态 token后，保存到本地，以便后续的请求中携带(需要携带token进行身份验证)。

js 复制代码

// 小程序页面中的登录按钮点击事件处理函数  
login: function() {  
  wx.login({  
    success: function(res) {  
      if (res.code) {  
        // 发送 res.code 到后台换取 openId, sessionKey, unionId  
        wx.request({  
          url: 'https://xxxxxx/api/login', // 你的服务器地址  
          data: {  
            code: res.code,
            AppID:'xxxxxxxxx'  
          },  
          method: 'POST',  
          success: function(response) {  
          	// 服务器接收 code 并请求微信接口获取 session_key 和 openid,返回登录态 token 给小程序
            // 登录成功，保存登录态 token 到 storage，并在后续的请求中携带这个token，以便服务器验证用户的身份。
            wx.setStorageSync('token', response.data.token);  
            // 跳转到其他页面或执行其他操作  
          },  
          fail: function(error) {  
            // 登录失败处理  
            console.error('Login failed:', error);  
          }  
        });  
      } else {  
        console.log('登录失败！' + res.errMsg);  
      }  
    }  
  });  
}