AWS Усиление Google auth user не перенаправлено обратно

Question

Я пытаюсь реализовать аутентификацию Google в собственном приложении React, используя AWS Усиление. Я установил Amplify в своем приложении, а также установил Auth.

У меня есть этот клиент в Google apis:

Авторизован javascript origin:

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

URI авторизованного перенаправления:

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

aws -экспорт. 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

Answer 1

После настройки Amplify Auth и настройки социального провайдера вам также необходимо настроить связывание , чтобы ваше приложение могло обрабатывать обратный вызов из веб-браузера обратно в ваше приложение:

1. Обратите внимание на значение, которое вы ввели для 'имени пользователя перенаправления', когда вы запустили amplify add auth (например, myapp:\\).
2. Для приложений, созданных с использованиемact-native- cli (вместо Expo) в iOS, откройте проект Xcode (в папке ios, rnamplify.xcworkspace). Затем откройте info.plist в качестве исходного кода и добавьте следующее:

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

Для приложений, созданных с использованиемact-native-cli (а не Expo) в Android, в 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, а не с Reaction-native-cli, то вы не сделали бы шаги 2 и 3 выше. Вместо этого откройте файл app.json и добавьте пару ключ-значение scheme в свойство expo:

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