如何将React Native中TikTok OAuth v1认证URL迁移至v2？

核心修改点 #

• 授权端点替换为官方指定的 https://www.tiktok.com/v2/auth/authorize/
• 参数名调整：v1的client_key替换为v2的client_id
• Scope更新：原user.info.basic需替换为v2对应的user.profile.basic
• 移动应用必须添加PKCE相关参数（code_challenge、code_challenge_method），否则会触发权限错误

修正后的代码实现 #

首先实现PKCE参数生成逻辑，再构建授权URL：

// 生成PKCE code verifier
const generateCodeVerifier = () => {
  const array = new Uint32Array(28);
  window.crypto.getRandomValues(array);
  return Array.from(array, dec => ('0' + dec.toString(16)).substr(-2)).join('');
};

// 生成PKCE code challenge（SHA-256哈希后base64url编码）
const generateCodeChallenge = async (verifier) => {
  const encoder = new TextEncoder();
  const data = encoder.encode(verifier);
  const digest = await window.crypto.subtle.digest('SHA-256', data);
  return btoa(String.fromCharCode(...new Uint8Array(digest)))
    .replace(/\+/g, '-')
    .replace(/\//g, '_')
    .replace(/=+$/, '');
};

// 构建授权URL
const buildTikTokAuthUrl = async (clientId, redirectURI) => {
  const baseUrl = 'https://www.tiktok.com/v2/auth/authorize/';
  const scope = 'user.profile.basic';
  const state = Math.random().toString(36).substring(7);
  
  // 生成PKCE参数
  const codeVerifier = generateCodeVerifier();
  const codeChallenge = await generateCodeChallenge(codeVerifier);
  
  // 对redirect_uri进行URL编码，避免参数解析错误
  const encodedRedirectUri = encodeURIComponent(redirectURI);
  
  const queries = new URLSearchParams({
    client_id: clientId,
    response_type: 'code',
    scope: scope,
    redirect_uri: encodedRedirectUri,
    state: state,
    code_challenge: codeChallenge,
    code_challenge_method: 'S256'
  });
  
  // 保存codeVerifier到本地（后续换取token时必须使用）
  // 示例：await AsyncStorage.setItem('tiktok_code_verifier', codeVerifier);
  
  return `${baseUrl}?${queries.toString()}`;
};

关键注意事项 #

• PKCE强制要求：React Native属于公共客户端（无法安全存储客户端密钥），TikTok v2强制要求使用PKCE流程，缺少相关参数会直接返回权限错误
• Scope一致性：代码中使用的scope必须与你在TikTok开发者后台申请的v2权限完全匹配，若需要其他权限，参考平台官方权限列表
• Redirect URI配置：redirect_uri必须与开发者后台中配置的地址完全一致，包括自定义协议（如myapp://tiktok-auth-callback）
• Code Verifier存储：生成的codeVerifier必须妥善保存，后续调用token接口时需要传入该参数换取access token

后续Token换取说明 #

用户授权后，你会从redirect URI中拿到code和state，此时调用v2的token接口：

• 端点地址：https://open.tiktokapis.com/v2/oauth/token/
• 请求方法：POST
• 必填参数：client_id、code、redirect_uri、grant_type=authorization_code、code_verifier（之前保存的值）

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