跳到主要内容

小程序登录流程

登录流程步骤有哪些？

session_key作用是什么？

encryptedData/iv是什么？

传统的web开发实现登陆功能，一般的做法是输入账号密码登录，存储token，判断token是否过期，而小程序，是利用微信官方提供的登录能力相关api方便地获取微信提供的用户身份标识，快速建立小程序内的用户体系，从而实现登陆功能

  • 通过 wx.login() 获取到用户的code判断用户是否授权读取用户信息，调用 wx.getUserInfo 读取用户数据

1、需要自身后端调用微信服务器获取用户信息

2、code是登录凭证

登录流程步骤​

  • 1、open-type="getPhoneNumber"： 获取用户手机号，可以从 bindgetphonenumber 回调中获取到用户信息
html
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">
    授权登录
</button>
  • 2、获取用户信息, 获取 encryptedData 、iv 参数回传给后端，后端结合 session_key进行解密返回信息
js
async getPhoneNumber(e){
  const { iv, encryptedData } = e.detail;
       if (iv && encryptedData) {
            await wx.request({
                url:'xxx'
            })
        }
}

注意：调用getPhoneNumber的时候，如果又调用了wx.login，会导致 session_key被冲掉，解密的时候，此时的session_key已经不是加密时的session_key了，导致解密失败

新版本手机号授权流程​

从基础库2.21.2开始，对步骤2中换取手机号信息的方式进行了安全升级，上述为新方式使用指南。（旧方式目前可以继续使用，但建议开发者使用新方式，以增强小程序安全性）另外，新方式不再需要提前调用wx.login进行登录。

  • 1、通过button的getPhoneNumber 的接口 来进行手机号授权
  • 2、用户允许授权之后，获取code动态令牌
  • 3、把这个code令牌传给后台，后台调用微信提供的api phonenumber.getPhoneNumber 接口
    • 通过code来换取用户手机号

每个code有效期为5分钟，且只能消费一次。

js
Page({
  getPhoneNumber (e) {
        let detail = e.detail;
        console.log(detail);
        if (detail.errMsg === "getPhoneNumber:ok") {
            console.log('用户同意授权');
            let code = detail.code; // 动态令牌
            console.log(code);
            wx.request({
                url: '你的接口，比如登录',
                data: {
                    code
                },
                success(res) {
                    console.log(res.data); // 后端返回解析出的手机号，或者直接返回登录成功的信息

                }
            })

        } else {
            console.log('用户拒绝授权');
        }
  }
})

session_key作用是什么？​

小程序中的 session_key 是一个密钥，用于将用户数据进行加密签名，其中也包括用于解密 encryptedData 的过程。 另外，session_key 还可以帮助开发者校验当前小程序的登录状态是否有效，避免重复的登录流程操作。如果 session_key 失效了，开发者可以重新执行登录流程来获取有效的 session_key。你可以通过 wx.checkSession 接口来检查你的 session_key 是否有效

  • session_key的有效期相对较短，在一段时间后会过期失效。
  • 它是一个临时的、与用户绑定的密钥，用于后续对用户敏感数据的加解密
  • 生成 session_key 是由微信服务器进行操作的，开发者无需自行生成。微信会在用户登录小程序时，为每个用户生成一个临时的 session_key，作为用户与小程序之间通信的加密密钥

encryptedData/iv是什么？​

  • encryptedData（加密数据）：是用户敏感数据在传输过程中使用会话密钥进行加密后的结果。例如，用户的手机号、用户信息等都可以通过 encryptedData 进行加密保护，确保数据在传输过程中的安全性。
  • iv（初始向量）：是对加密数据进行解密时所需的初始向量参数。它是一个随机生成的字符串，用于增加加密算法的随机性和安全性。在解密过程中，需要使用 iv 与 session_key 一起对加密数据进行解密还原。

通常需要使用 encryptedData 和 iv 进行解密操作。

session_key过期如何处理​

1、wx.login 调用时，用户的 session_key会被更新而致使旧 session_key 失效

2、使用接口 wx.checkSession可以校验 session_key 是否有效

  • session_key过期之后，需要重新授权登录 【提示：登录过期，请重新登录】
  • 更好的用户体验，可以定期刷新 session_key，保持用户登录状态的持久性
    • 客户端和服务端共同约定一个合适的时间周期，在周期内主动调用微信的刷新接口（如 auth.code2Session），获取到新的 session_key

一键登录如何实现​

其实一键登录和普通登录流程是类似的，都是调用微信登录相关api

  • 1、当用户点击一键登录按钮时，触发微信相关的登录api
  • 2、调用 wx.login() 方法获取用户的登录凭证（code）
  • 3、将获取的登录凭证发送到后端服务器，后端服务器需要与微信的服务器进行交互。
  • 4、后端服务器调用微信提供的 auth.code2Session 接口，传递登录凭证，获取用户的唯一标识 OpenID 和会话密钥 SessionKey。
  • 5、后端服务器根据获取到的 OpenID 和 SessionKey 进行业务逻辑处理，例如用户校验、生成用户令牌等。
  • 6、后端服务器将处理结果返回给小程序前端

通过 wx.login() 和 wx.getUserInfo() 组合使用，实现一键登录的同时获取用户的基本信息，如头像、昵称等，以便在小程序中展示用户相关信息。

微信提供了几种登录机制​

微信小程序登录授权，有三种方式，

  • 无感登录
  • 手机号登录
  • 用户信息授权登录

无感登录​

参考：https://www.cnblogs.com/caihongmin/p/17048599.html

wx.login获取到 code后，把code传递给后端，后端通过接口去微信后端换取到 openid 和 sessionKey

  • 前端调用wx.login，拿到登陆凭证code，通过wx.request发起网络请求
  • 后端那边利用code + appid + appsecret这三个数值，调用微信的auth.code2Session接口，拿到用户唯一标识openid 和 会话密钥session_key
    • 定义token，与openid和session_key关联，最后再返回给前端

无感登录，简单来说就是拿小程序token的过程

wx.login 行为是静默，不必授权的，用户不会察觉。

手机号登陆​

需要注意的是，个人账号，无法使用手机号登录功能，并且该功能是收费的

  • 1、通过getPhoneNumber的接口 来进行手机号授权

  • 2、用户允许授权之后，获取code动态令牌

  • 3、把这个code令牌传给后端

用户信息授权登录​

该登陆主要为了获取用户信息（姓名、性别、地址、昵称等等），用于给个人中心模块做铺垫

  • wx.getUserInfo获取用户信息，不会有底部弹窗，而wx.getUserProfile则会出现下方的底部弹窗
    • 底部弹窗的方式来获取用户信息授权

授权登录​

  • 1、用户通过点击小程序提供的授权登录按钮
  • 2、点击这个允许授权之后，获取相关的信息 iv, encryptedData
    • iv 是初始向量，用于解密时所需的初始向量参数
    • encrytedData 加密数据 【用户的敏感】
  • 3、获取 encryptedData 、iv 参数回传给后端
  • 4、后端进行解密，返回对应的信息，返回session_key
  • 5、前端就把session_key存储到本地，后续通过这个session_key来验证身份