React Native与React中基于Cognito的社交登录跳转适配问题

要让Web和React Native（RN）端共享Amplify社交登录能力，同时适配各自的重定向需求，核心是分环境配置重定向URI，并同步更新社交平台开发者后台的授权设置，具体步骤如下：

1. 分环境配置Amplify OAuth参数 #

Amplify支持根据运行环境动态调整配置，你可以通过判断当前平台，给Web和RN端设置不同的redirectSignIn和redirectSignOut：

Web端配置示例 #

import { Amplify } from 'aws-amplify';

Amplify.configure({
  Auth: {
    oauth: {
      domain: 'your-cognito-domain.auth.us-east-1.amazoncognito.com',
      scope: ['email', 'openid'],
      redirectSignIn: 'https://your-web-app.com/login/callback', // Web端原重定向URL
      redirectSignOut: 'https://your-web-app.com/logout',
      responseType: 'code'
    }
  }
});

React Native端配置示例 #

import { Amplify } from 'aws-amplify';
import { Platform } from 'react-native';

const redirectUri = Platform.OS === 'ios' || Platform.OS === 'android' 
  ? 'myapp://oauth2callback' // 移动端deeplink
  : 'https://your-web-app.com/login/callback';

Amplify.configure({
  Auth: {
    oauth: {
      domain: 'your-cognito-domain.auth.us-east-1.amazoncognito.com',
      scope: ['email', 'openid'],
      redirectSignIn: redirectUri,
      redirectSignOut: redirectUri,
      responseType: 'code'
    }
  }
});

2. 同步更新社交平台的重定向URI列表 #

必须把Web端URL和移动端deeplink都添加到Google、Facebook的开发者后台授权列表中，否则会出现重定向失败：

Google Cloud Console设置 #

• 进入你的Google OAuth 2.0客户端ID配置页面
• 在「授权重定向URI」中添加：
  • Web端：https://your-web-app.com/login/callback
  • 移动端：myapp://oauth2callback/google（格式需与Amplify配置一致）

Facebook for Developers设置 #

• 进入应用的「Facebook登录」→「设置」页面
• 在「有效的OAuth重定向URI」中添加：
  • Web端：https://your-web-app.com/login/callback
  • 移动端：myapp://oauth2callback/facebook
• 同时确保在「应用设置」→「高级」中配置了正确的「关联域名」或URL Scheme（iOS需在Info.plist中配置，Android在Manifest中配置）

3. 处理React Native端的deeplink回调 #

RN端需要监听deeplink跳转，获取登录回调中的授权码，再传给Amplify完成登录流程：

配置RN的deeplink支持 #

• iOS：在Info.plist中添加URL Scheme：

  <key>CFBundleURLTypes</key>
  <array>
    <dict>
      <key>CFBundleURLSchemes</key>
      <array>
        <string>myapp</string>
      </array>
    </dict>
  </array>
  

• Android：在AndroidManifest.xml的<activity>标签中添加intent-filter：

  <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="myapp" />
  </intent-filter>
  

监听deeplink并完成登录 #

import { Linking } from 'react-native';
import { Auth } from 'aws-amplify';

// 组件挂载时监听deeplink
useEffect(() => {
  const handleRedirect = async (event) => {
    const url = event.url;
    // 解析URL中的授权参数（code、state等）
    if (url.startsWith('myapp://oauth2callback')) {
      try {
        // 让Amplify处理回调，完成登录
        await Auth.federatedSignIn({ provider: 'Google', url });
        // 登录成功后的逻辑，比如跳转到首页
      } catch (err) {
        console.error('登录回调处理失败:', err);
      }
    }
  };

  Linking.addEventListener('url', handleRedirect);
  // 检查应用启动时是否有deeplink（比如用户直接从浏览器跳转过来）
  Linking.getInitialURL().then(handleRedirect);

  return () => Linking.removeEventListener('url', handleRedirect);
}, []);

4. 统一登录触发逻辑 #

不管Web还是RN端，直接调用Amplify的社交登录方法即可，Amplify会自动使用对应环境的重定向URI：

// 触发Google登录
const handleGoogleLogin = async () => {
  try {
    await Auth.signInWithSocial({ provider: 'Google' });
  } catch (err) {
    console.error('登录触发失败:', err);
  }
};

关键注意事项 #

• 所有重定向URI必须完全一致：Amplify配置、社交平台后台、RN的deeplink配置三者的路径、大小写都要匹配
• 测试时可以用命令验证deeplink：iOS用xcrun simctl openurl booted myapp://oauth2callback，Android用adb shell am start -W -a android.intent.action.VIEW -d "myapp://oauth2callback"
• 如果使用Cognito作为身份池，确保用户池的身份提供商（Google、Facebook）已正确配置，且重定向URI与上述设置一致

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