Реализация входа с помощью 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.
- Перейдите на https://console.developers.google.com/apis/dashboard
и создайте свой проект. - После создания проекта щелкните новый проект и перейдите к «экрану согласия OAuth», выберите «Внешний» в качестве типа, выберите имя для своего приложения и нажмите «Сохранить».
- Затем нажмите «Учетные данные» и выберите «Создать учетные данные». Создайте новый «Идентификатор клиента OAuth». Тип приложения должен быть «Веб-приложение». Еще раз: задайте имя для своего приложения и нажмите «Создать».
- Скопируйте идентификатор клиента, а также секрет клиента.
Шаг 2. Добавьте Google в AWS Amplify Auth
Чтобы добавить Google в AWS Cognito, необходимо сначала запустить настройку AWS Amplify Auth (при наличии существующего проекта AWS Amplify).
- Выполнить
amplify add auth
илиamplify update auth
- Выберите
Default configuration with Social Provider (Federation)
- Остальную конфигурацию выполните по своему вкусу (домен можно оставить как есть)
- URI «Перенаправление подписи» и «Перенаправление выхода» должны быть установлены для домена, в котором вы будете обрабатывать вход/выход (после входа/выхода пользователя).
- Введите свой идентификатор клиента и секрет клиента, которые вы скопировали ранее.
- Разверните свой сервис, запустив amplify push
Шаг 3. Настройте свой проект API Google.
Теперь вы настроили AWS Cognito, чтобы он знал о вашем проекте Google OAuth. Однако Google ничего не знает о вашем проекте: Куда должен перенаправляться пользователь после авторизации? Давайте научим Google, как это сделать:
- Скопируйте домен OAuth из
aws-exports.js
, URI выглядит какyour-domain.auth.your-region.amazoncognito.com
. - Снова перейдите на панель инструментов Google Developer Dashboard https://console.developers.google.com/apis/dashboard.
- Перейдите в «Учетные данные» и отредактируйте приложение WebClient, которое вы создали ранее.
- Под
Authorized JavaScript origins
введитеhttps://
и вставьте свой домен OAuth, который вы скопировали ранее. Полный URL-адрес будет выглядеть примерно так:https://your-domain.auth.your-region.amazoncognito.com
- Кроме того, добавьте 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
- Сохраните ваше веб-приложение
Шаг 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()
(эта функция возвращает обещание).