React Native基于AWS Cognito实现Google/Apple第三方登录问题咨询

你提到的Auth.federatedSignIn({customProvider: "provider"})方案完全可以在React Native应用内嵌入使用，不需要依赖Cognito自带的托管UI，就能直接拉起第三方登录页面。

1. 前置配置校验 #

首先要确保你的AWS Amplify配置中OAuth相关参数填写正确，配置示例如下：

import Amplify from 'aws-amplify';

Amplify.configure({
  Auth: {
    region: '你的AWS区域',
    userPoolId: '你的Cognito用户池ID',
    userPoolWebClientId: '你的用户池应用客户端ID',
    identityPoolId: '你的Cognito身份池ID',
    oauth: {
      domain: '你的Cognito域名（格式为xxx.auth.区域.amazoncognito.com）',
      scope: ['openid', 'email', 'profile'],
      redirectSignIn: '你的应用DeepLink地址，比如myapp://callback',
      redirectSignOut: '你的应用登出回调地址，比如myapp://signout',
      responseType: 'token', // React Native场景用隐式流即可
      options: {
        AdvancedSecurityDataCollectionFlag: false
      }
    }
  }
});

同时要提前在React Native项目中配置好DeepLink的接收规则：iOS端在Info.plist中配置URL Schemes，Android端在AndroidManifest.xml中配置对应的intent-filter，确保第三方登录完成后能正确跳回你的应用。

2. 自定义登录按钮逻辑实现 #

在登录页面的按钮点击事件中直接调用对应方法即可，代码示例如下：

import { Auth } from 'aws-amplify';
import { TouchableOpacity, Text } from 'react-native';

// Google登录按钮
const GoogleLoginButton = () => {
  const handleLogin = async () => {
    try {
      // 注意这里的provider名称必须和Cognito用户池控制台中配置的第三方提供商名称完全一致，大小写敏感
      await Auth.federatedSignIn({ customProvider: 'Google' });
    } catch (err) {
      console.error('Google登录触发失败', err);
    }
  };

  return (
    <TouchableOpacity onPress={handleLogin}>
      <Text>Google账号登录</Text>
    </TouchableOpacity>
  );
};

// Apple登录按钮
const AppleLoginButton = () => {
  const handleLogin = async () => {
    try {
      // 提供商名称要和Cognito控制台配置的Sign in with Apple名称完全一致
      await Auth.federatedSignIn({ customProvider: 'SignInWithApple' });
    } catch (err) {
      console.error('Apple登录触发失败', err);
    }
  };

  return (
    <TouchableOpacity onPress={handleLogin}>
      <Text>Apple账号登录</Text>
    </TouchableOpacity>
  );
};

3. 登录结果与Token获取 #

用户在第三方页面完成授权后，会自动重定向回你的应用，Amplify会自动解析回调参数并将凭证存储到本地。你可以在应用回到前台时调用Auth.currentSession()方法获取用户凭证，示例如下：

const getCurrentUserToken = async () => {
  try {
    const session = await Auth.currentSession();
    const idToken = session.getIdToken().getJwtToken();
    // 拿到的idToken即可放在请求头中调用你的Gateway API
    return idToken;
  } catch (err) {
    // 用户未登录的情况处理
    console.error('获取用户会话失败', err);
    return null;
  }
};

• Cognito用户池中配置的第三方身份提供商的回调地址，必须和Amplify配置中的redirectSignIn、redirectSignOut完全一致，否则会出现授权失败的问题
• customProvider参数的取值必须和Cognito用户池控制台中「身份提供商」页面配置的对应提供商名称完全匹配，大小写敏感
• 调用需要鉴权的API时，将ID Token放在Authorization请求头中，格式为Bearer ${idToken}即可
• 如需实现登出逻辑，直接调用Auth.signOut()即可清除本地存储的所有凭证

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