SumSub KYC验证JavaScript集成遇401未授权错误求助

核心问题：令牌类型误用 #

你在控制台生成的prd:01Xwjxxxxxxxxxi98d是SumSub的API密钥（Secret Key），这类密钥仅用于后端服务调用SumSub API，绝对不能直接暴露在前端代码中。而Web SDK需要的是临时访问令牌（Access Token），必须通过你的后端服务生成并返回给前端，这是导致401错误的根本原因。

解决步骤 #

1. 后端生成合法访问令牌
   • 调用SumSub的POST /resources/accessTokens接口，传入你的levelName（如kyc-sl-group）、用户唯一标识userId等参数。
   • 请求必须用你的API密钥和App Token做签名认证，这一步必须在后端完成，避免密钥泄露。
2. 前端安全获取令牌
   • 前端通过你的后端接口获取生成好的临时访问令牌，再传入SDK初始化函数。
3. 修正代码中的细节问题
   • onError回调中错误使用了未定义的payload参数，应改为error；
   • getNewAccessToken函数需要实际调用后端接口刷新令牌，不能直接返回空Promise。

修正后的示例代码 #

前端代码 #

<html>
 <head>
  <title>WebSDK CDN Example</title>
 </head>
 <body>
    <p>test</p>
    <script src="https://static.sumsub.com/idensic/static/sns-websdk-builder.js"></script>
    <div id="sumsub-websdk-container"></div>
</body>
</html>
<script>
function launchWebSdk(accessToken) {
     let snsWebSdkInstance = snsWebSdk.init(
             accessToken,
             // 令牌刷新回调：调用后端接口获取新令牌
             () => fetch('/your-backend/api/sumsub/token')
                   .then(res => res.json())
                   .then(data => data.accessToken)
         )
         .withConf({
             lang: 'en', 
         })
         .on('onError', (error) => {
           console.log('onError', error)
         })
         .onMessage((type, payload) => {
           console.log('onMessage', type, payload)
         })
         .build();

     snsWebSdkInstance.launch('#sumsub-websdk-container')
}

// 先从后端获取初始令牌
fetch('/your-backend/api/sumsub/token')
  .then(res => res.json())
  .then(data => launchWebSdk(data.accessToken))
</script>

后端伪代码（Node.js示例） #

const axios = require('axios');
const crypto = require('crypto');

// 从SumSub控制台获取的密钥
const SUMSUB_APP_TOKEN = '你的App Token';
const SUMSUB_SECRET_KEY = '你的API密钥（prd:xxx）';
const SUMSUB_BASE_URL = 'https://api.sumsub.com';

async function generateSumSubAccessToken(userId, levelName) {
  const url = `${SUMSUB_BASE_URL}/resources/accessTokens?userId=${userId}&levelName=${levelName}`;
  const timestamp = Math.floor(Date.now() / 1000).toString();
  // 生成签名
  const signature = crypto
    .createHmac('sha256', SUMSUB_SECRET_KEY)
    .update(timestamp + url)
    .digest('hex');

  const response = await axios.post(url, {}, {
    headers: {
      'X-App-Token': SUMSUB_APP_TOKEN,
      'X-App-Access-Ts': timestamp,
      'X-App-Access-Sig': signature
    }
  });

  return response.data.token;
}

// 暴露接口给前端
app.get('/your-backend/api/sumsub/token', async (req, res) => {
  const userId = req.user.id; // 替换为你的系统用户唯一标识
  const token = await generateSumSubAccessToken(userId, 'kyc-sl-group');
  res.json({ accessToken: token });
});

额外注意事项 #

• 绝对禁止在前端代码中直接使用API密钥，否则会导致密钥泄露，引发安全风险。
• 临时访问令牌有有效期，当SDK触发令牌刷新回调时，必须从后端重新获取新令牌。
• 确保生成令牌时使用的levelName和SumSub控制台中配置的一致，否则也会导致授权失败。

内容的提问来源于stack exchange，提问作者devZ