React Native实现Twitch API隐式授权登录的重定向问题

核心思路 #

Twitch要求重定向URL必须是HTTPS，我们可以通过静态HTTPS跳转页面作为中间层：Twitch授权完成后跳转到该HTTPS页面，页面自动将授权参数（token等）通过APP的深度链接传递回React Native应用。

具体实现步骤 #

1. 配置APP的深度链接 #

让你的APP能响应自定义URL Scheme，比如twitch-myapp://

iOS配置（Info.plist）

在项目的Info.plist中添加URL Scheme配置：

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>twitch-myapp</string> <!-- 自定义Scheme，可按需修改 -->
    </array>
  </dict>
</array>

Android配置（AndroidManifest.xml）

在主Activity标签内添加intent-filter，处理自定义Scheme：

<intent-filter>
  <action android:name="android.intent.action.VIEW" />
  <category android:name="android.intent.category.DEFAULT" />
  <category android:name="android.intent.category.BROWSABLE" />
  <data android:scheme="twitch-myapp" /> <!-- 和iOS保持一致的Scheme -->
</intent-filter>

2. 制作HTTPS跳转页面 #

创建静态HTML页面（比如callback.html），托管到支持HTTPS的静态服务上（如自有域名配SSL）。页面负责解析Twitch返回的授权参数，再跳回APP：

<!DOCTYPE html>
<html>
<head>
  <script>
    // 解析Twitch授权返回的hash参数（隐式授权参数存于hash中）
    const hashParams = new URLSearchParams(window.location.hash.slice(1));
    const authParams = new URLSearchParams();
    authParams.set('access_token', hashParams.get('access_token'));
    authParams.set('token_type', hashParams.get('token_type'));
    authParams.set('expires_in', hashParams.get('expires_in'));

    // 拼接APP深度链接，传递授权参数
    const appRedirectUrl = `twitch-myapp://callback#${authParams.toString()}`;
    
    // 自动跳回APP
    window.location.href = appRedirectUrl;
  </script>
</head>
<body>
  正在跳转回应用...若未自动跳转，请手动返回。
</body>
</html>

3. 配置Twitch开发者控制台 #

在Twitch开发者后台的应用设置中，将上述HTTPS跳转页面的完整地址（如https://your-domain.com/callback.html）添加到允许的重定向URL列表中。

4. 修改React Native代码 #

更新授权请求的redirect_uri，并处理深度链接回调：

// 授权请求配置
const baseURL = 'https://id.twitch.tv/oauth2/authorize';
const redirect_uri = 'https://your-domain.com/callback.html'; // 替换为你的HTTPS跳转页地址
const response_type = 'token';
const scope = 'channel:manage:polls';    

const formattedScope = scope.replace(':','%3A');
// 对redirect_uri做URL编码，避免参数解析错误
const requestUri = `${baseURL}?response_type=${response_type}&client_id=${this.clientID}&redirect_uri=${encodeURIComponent(redirect_uri)}&scope=${formattedScope}`;

// 处理深度链接回调
const handleUrl = (event) => {
  const url = event.url;
  // 解析深度链接中的授权参数
  const hashParams = new URLSearchParams(url.split('#')[1]);
  const accessToken = hashParams.get('access_token');
  const tokenType = hashParams.get('token_type');
  const expiresIn = hashParams.get('expires_in');

  // 这里可将token保存到本地（如AsyncStorage）或直接用于API请求
  console.log('获取到的授权Token:', accessToken);
  
  // 移除监听，避免重复触发
  Linking.removeEventListener('url', handleUrl);
};

// 添加监听并打开授权页面
Linking.addEventListener('url', handleUrl);
await WebBrowser.openBrowserAsync(requestUri);

注意事项 #

• 确保HTTPS跳转页面公开可访问，且使用有效SSL证书
• Twitch后台的重定向URL必须与代码中使用的完全一致（含HTTPS前缀）
• 测试时，iOS可能需重启APP使URL Scheme生效；Android需确保APP已安装

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