Реализация входа с помощью Google для вашего приложения AWS Amplify

Добавление функции «Войти через Google» в ваше приложение может оказаться сложной задачей. Это требует от вас базового понимания процесса OAuth2.0.

AWS Amplify поставляется с набором инструментов, которые абстрагируют большинство странных частей. Для вашего удобства я создал простое пошаговое руководство по внедрению AWS Amplify Auth (AWS Cognito) с дополнительными пояснениями о процессе OAuth2.0.

Шаг 1. Создайте проект API Google.

Нам нужно создать проект API Google, чтобы получить идентификатор клиента и секрет клиента, чтобы AWS Cognito мог подключиться к API OAuth2.0 сервисов Google.

  1. Перейдите на https://console.developers.google.com/apis/dashboard
    и создайте свой проект.
  2. После создания проекта щелкните новый проект и перейдите к «экрану согласия OAuth», выберите «Внешний» в качестве типа, выберите имя для своего приложения и нажмите «Сохранить».
  3. Затем нажмите «Учетные данные» и выберите «Создать учетные данные». Создайте новый «Идентификатор клиента OAuth». Тип приложения должен быть «Веб-приложение». Еще раз: задайте имя для своего приложения и нажмите «Создать».
  4. Скопируйте идентификатор клиента, а также секрет клиента.

Шаг 2. Добавьте Google в AWS Amplify Auth

Чтобы добавить Google в AWS Cognito, необходимо сначала запустить настройку AWS Amplify Auth (при наличии существующего проекта AWS Amplify).

  1. Выполнить amplify add auth или amplify update auth
  2. Выберите Default configuration with Social Provider (Federation)
  3. Остальную конфигурацию выполните по своему вкусу (домен можно оставить как есть)
  4. URI «Перенаправление подписи» и «Перенаправление выхода» должны быть установлены для домена, в котором вы будете обрабатывать вход/выход (после входа/выхода пользователя).
  5. Введите свой идентификатор клиента и секрет клиента, которые вы скопировали ранее.
  6. Разверните свой сервис, запустив amplify push

Шаг 3. Настройте свой проект API Google.

Теперь вы настроили AWS Cognito, чтобы он знал о вашем проекте Google OAuth. Однако Google ничего не знает о вашем проекте: Куда должен перенаправляться пользователь после авторизации? Давайте научим Google, как это сделать:

  1. Скопируйте домен OAuth из aws-exports.js, URI выглядит как your-domain.auth.your-region.amazoncognito.com.
  2. Снова перейдите на панель инструментов Google Developer Dashboard https://console.developers.google.com/apis/dashboard.
  3. Перейдите в «Учетные данные» и отредактируйте приложение WebClient, которое вы создали ранее.
  4. Под Authorized JavaScript origins введите https:// и вставьте свой домен OAuth, который вы скопировали ранее. Полный URL-адрес будет выглядеть примерно так: https://your-domain.auth.your-region.amazoncognito.com
  5. Кроме того, добавьте URI для Authorized redirect URIs, этот URI также начинается с https://, за которым следует тот же домен OAuth, который вы скопировали ранее. Но здесь нужно добавить /oauth2/idpresponse (подробнее: https://aws.amazon.com/de/blogs/mobile/understanding-amazon-cognito-user-pool-oauth-2-0-grants/)
    Полный URL будет выглядеть примерно так: https://your-domain.auth.your-region.amazoncognito.com/oauth2/idpresponse
  6. Сохраните ваше веб-приложение

Шаг 4: Реализуйте вход с помощью Google в свой проект JavaScript

Теперь вам нужно настроить свой проект в веб-редакторе.

Для вашего входного файла
В входном файле ваших проектов (например, index.ts, main.js, …):

// Add an import to AWS Amplify (if you havent done so already)
import Amplify from 'aws-amplify';
import config from './aws-exports.js';
Amplify.configure(config);

В файле, где пользователь должен иметь возможность войти в систему
Откройте файл, в котором вы хотите предоставить кнопку «Войти через Google», и добавьте следующие строки везде, где они подходят:

import { Auth } from 'aws-amplify';
// Add this button, if you provide your own interface:
<button onClick={() => Auth.federatedSignIn({provider: "Google"})}>Sign in with Google</button>
// This Button would already come with an interface 
// (after redirect)
<button onClick={() => Auth.federatedSignIn()}>Sign In</button>

Получение информации о вошедшем в систему пользователе
Если вы хотите получить информацию о текущем аутентифицированном пользователе, вызовите Auth.currentAuthenticatedUser() (эта функция возвращает обещание).