小红书JS SDK签名过程

第一步:获取access_token(第一次加签)

目的 :用你的永久密钥(appSecret)向小红书服务器换取一个临时密钥(access_token)。这个临时密钥后续将代替appSecret进行签名,更安全。

执行方 :你的应用服务器后端appSecret必须保存在后端,绝不能泄露到前端)

详细过程

  1. 准备参数

    • app_key: 你在小红书开放平台申请应用后获得的唯一标识。
    • nonce: 生成一个32位以内的随机字符串(如:"aBc123xYz")。这个值需要记录下来,因为下一步还会用到。
    • timestamp: 获取当前的毫秒级时间戳(如:1727689200000)。这个值也需要记录下来
    • appSecret: 你的应用密钥,从平台获取,这是你的核心机密。
    • expires_in: (可选) 希望access_token过期的具体时间戳,不传则默认为24小时。
  2. 生成签名(第一次加签)

    • 使用文档中提供的 SignatureUtil.buildSignature 方法或类似逻辑。
    • 调用方式String signature = buildSignature(app_key, nonce, timestamp, appSecret);
    • 注意 :这里第四个参数传入的是 appSecret
    • 其内部逻辑是:将 appKey, nonce, timeStamp 按字母顺序排序后拼接成字符串,最后追加上appSecret,然后对整个字符串做SHA-256哈希计算,得到十六进制的签名。
  3. 发送HTTP请求

    • URL : POST https://edith.xiaohongshu.com/api/sns/v1/ext/access/token

    • Headers : Content-Type: application/json

    • Body (JSON格式) :

      json 复制代码
      {
        "app_key": "你的app_key",
        "nonce": "刚才生成的随机数nonce",
        "timestamp": "刚才生成的时间戳timestamp",
        "signature": "第一步计算出来的签名signature",
        "expires_in": 1727775600000 // 可选参数
      }
  4. 处理响应

    • 小红书服务器会验证你的签名。如果验证通过,会返回一个JSON响应:

      json 复制代码
      {
        "access_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...", // 一串很长的令牌字符串
        "expires_in": 1727775600000 // 这个token的过期时间戳
      }
    • 你的后端需要将这个 access_token 安全地存储起来(例如在内存或缓存中),并记录它的过期时间。


第二步:生成JS签名signature(第二次加签)

目的 :为前端生成调用JS SDK所需的最终签名。这次签名使用的密钥是上一步获取的access_token,而不是appSecret

执行方 :你的应用服务器后端

详细过程

  1. 准备参数

    • appKey: 同上,还是你的应用标识。
    • nonce: 生成一个新的32位以内的随机字符串(不能使用第一步用过的那个)。
    • timestamp: 获取一个新的当前毫秒级时间戳
    • access_token: 从上一步响应中获取到的临时令牌。
  2. 生成签名(第二次加签)

    • 再次使用 SignatureUtil.buildSignature 方法。
    • 调用方式String signature = buildSignature(app_key, new_nonce, new_timestamp, access_token);
    • 关键区别 :这里第四个参数传入的是 access_token,而不是 appSecret
    • 其内部逻辑完全相同,只是密钥换了:排序拼接 appKey, 新的nonce, 新的timestamp,然后追加上access_token,最后做SHA-256哈希。

第三步:返回参数并唤起JS SDK

目的:将必要的参数安全地传递给前端,让前端能够初始化并唤起小红书的JS SDK。

执行方

  • 提供参数 :你的应用服务器后端
  • 使用参数 :你的Web前端(浏览器)

详细过程

  1. 后端返回参数

    你的后端通过API接口(或直接渲染在页面里)将以下四个参数返回给前端:

    • appKey: 应用标识。
    • nonce: 第二步中使用的新生成的随机数
    • timestamp: 第二步中使用的新生成的时间戳
    • signature: 第二步中计算出来的最终签名

    注意access_token 不需要给前端,它只用于后端生成签名。)

  2. 前端初始化SDK

    你的前端页面在引入小红书的JS SDK后,会使用后端传过来的四个参数进行初始化配置。

    javascript 复制代码
    // 伪代码示例
    const config = {
      appKey: '从后端获取的appKey',      // 对应参数1
      nonce: '从后端获取的new_nonce',    // 对应参数2
      timestamp: '从后端获取的new_timestamp', // 对应参数3
      signature: '从后端获取的signature', // 对应参数4
      // ... 其他业务参数
    };
    
    // 初始化小红书JS SDK并调用相应功能
    xhs.init(config);
    xhs.share(...);
  3. 小红书SDK验签

    前端SDK会将这些参数发送给小红书。小红书服务器会使用你传来的 appKey 找到对应的 access_token,然后用和你第二步一模一样的算法 重新生成一次签名,并比对前端传来的 signature

    • 如果一致,验签通过,SDK功能成功唤起。
    • 如果不一致,或时间戳过期,或随机数已被使用,则验签失败,SDK调用会报错。

总结与类比

步骤 核心操作 使用的密钥 目的
第一步 向小红书换"临时通行证" appSecret (永久密码) 获取 access_token
第二步 为前端生成"门票"的签名 access_token (临时通行证) 生成最终给前端的 signature
第三步 前端出示"门票" (无) 验证门票真实性并唤起SDK

这个过程通过两次签名,确保了整个流程的安全性和不可篡改性,同时保护了最核心的appSecret不参与网络传输。

相关推荐
用户5757303346242 小时前
🐱 从“猫厂”倒闭到“鸭子”横行:一篇让你笑出腹肌的 JS 面向对象指南
javascript
码路飞2 小时前
GPT-5.4 Computer Use 实战:3 步让 AI 操控浏览器帮你干活 🖥️
java·javascript
进击的尘埃2 小时前
Service Worker 离线缓存这事,没你想的那么简单
javascript
进击的尘埃2 小时前
HTTP/3 的多路复用和 QUIC 到底能让页面快多少?聊聊连接迁移和 0-RTT
javascript
Maxkim3 小时前
前端工程化落地指南:pnpm workspace + Monorepo 核心用法与实践
前端·javascript·架构
小兵张健15 小时前
开源 playwright-pool 会话池来了
前端·javascript·github
codingWhat19 小时前
介绍一个手势识别库——AlloyFinger
前端·javascript·vue.js
Lee川19 小时前
深度拆解:基于面向对象思维的“就地编辑”组件全模块解析
javascript·架构
进击的尘埃19 小时前
Web Worker 与 OffscreenCanvas:把主线程从重活里解放出来
javascript
codingWhat19 小时前
手撸一个「能打」的 React Table 组件
前端·javascript·react.js