时间戳

首页 > 解决方案 > AWS Amplify Google 身份验证用户未重定向回

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

问题描述

我正在尝试使用 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样子是这样的：

import React, {FunctionComponent} from 'react';
import Amplify, {Auth} from 'aws-amplify';
import {Button} from 'react-native';
import config from '../../aws-exports';

Amplify.configure(config);

export interface AppProps {}

const App: FunctionComponent<AppProps> = () => {
  return <Button title={'Login'} onPress={() => Auth.federatedSignIn()} />;
};

export default App;

发生了什么的视频：

https://imgur.com/tPEcoop

标签： reactjsamazon-web-servicesreact-nativereact-native-androidaws-amplify

解决方案

在设置 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>
  1. 对于在 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"
  }
}

推荐阅读