AWS Amplify Google 身份验证用户未重定向回来

Question

我正在尝试使用 AWS Amplify 在 React 本机应用程序中实现 Google 身份验证。我已经在我的应用程序中安装了 Amplify，还安装了 Auth。

我在 Google api 中有这个客户端：

授权的javascript来源：

https://inventory053721f5-053721f5-develop.auth.eu-west-1.amazoncognito.com

授权重定向 uri:

https://inventory053721f5-053721f5-develop.auth.eu-west-1.amazoncognito.com/oauth2/idpresponse

aws-exports.js：

// WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten.

const awsmobile = {
    "aws_project_region": "eu-west-1",
    "aws_cognito_identity_pool_id": "***",
    "aws_cognito_region": "eu-west-1",
    "aws_user_pools_id": "***",
    "aws_user_pools_web_client_id": "***",
    "oauth": {
        "domain": "***",
        "scope": [
            "phone",
            "email",
            "openid",
            "profile",
            "aws.cognito.signin.user.admin"
        ],
        "redirectSignIn": "inventory://",
        "redirectSignOut": "inventory://",
        "responseType": "code"
    },
    "federationTarget": "COGNITO_USER_POOLS"
};


export default awsmobile;

我的App.tsx看起来像这样：

// WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten.

const awsmobile = {
    "aws_project_region": "eu-west-1",
    "aws_cognito_identity_pool_id": "***",
    "aws_cognito_region": "eu-west-1",
    "aws_user_pools_id": "***",
    "aws_user_pools_web_client_id": "***",
    "oauth": {
        "domain": "***",
        "scope": [
            "phone",
            "email",
            "openid",
            "profile",
            "aws.cognito.signin.user.admin"
        ],
        "redirectSignIn": "inventory://",
        "redirectSignOut": "inventory://",
        "responseType": "code"
    },
    "federationTarget": "COGNITO_USER_POOLS"
};


export default awsmobile;

发生的事情的视频：

https://i.stack.imgur.com/iz9TM.jpg

Answer 1

设置 Amplify Auth 并配置社交提供商后，您还必须设置链接，以便您的应用程序可以处理从 Web 浏览器返回到您的应用程序的回调：

1. 请注意您在运行时为“重定向登录 uri”输入的值amplify add auth（例如myapp:\\）。
2. 对于在iOS上使用react-native-cli（而不是Expo）制作的应用程序，打开Xcode项目（在ios文件夹中，rnamplify.xcworkspace）。然后打开info.plist源代码并添加以下内容：

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

3. 对于在Android上使用react-native-cli（而不是Expo）制作的应用程序，在Android Studio中打开android/app/main/AndroidManifest.xml并添加以下内容intent-filter：

<intent-filter android:label="filter_react_native">
  <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>

如果您的应用程序是使用 Expo 制作的，而不是使用 React-native-cli，那么您就不会执行上面的步骤 2 和 3。相反，打开app.json文件并将scheme键值对添加到“expo”属性：

{
  "expo": {
   "scheme": "myapp"
  }
}