Нужна аутентификация для вашего веб-приложения? В этом посте я расскажу вам, как настроить пул пользователей Amazon Cognito и использовать Amazon Cognito Hosted UI вместе с Amplify JavaScript для входа и выхода.

Часть 1. Создание пула пользователей Amazon Cognito

Выберите свой регион AWS, откройте Amazon Cognito и перейдите в раздел Пулы пользователей, затем нажмите Создать пул пользователей.

На шаге 1 выберем Электронная почта в качестве единственного варианта входа.

На шаге 2 я выберу вариант Без многофакторной идентификации для простоты, остальное оставлю по умолчанию.

Настройки по умолчанию на шаге 3 кажутся мне хорошими.

На шаге 4 я буду проще и выберу Отправить электронное письмо с помощью Cognito, оставив все остальное по умолчанию.

На шаге 5 давайте введем имя пула пользователей и отметим Использовать пользовательский интерфейс Cognito Hosted.

Прокрутите вниз, выберите Использовать домен Cognito и выберите префикс.

Давайте выберем имя клиента приложения, и я установлю разрешенный URL-адрес обратного вызова на URL-адрес моего сервера разработки (http://localhost:5173/, поскольку я использовать Vite). После входа пользователь будет перенаправлен на этот URL.

И последнее: разверните Дополнительные настройки клиента приложения, прокрутите вниз и нажмите Добавить URL-адрес для выхода. Я установлю это так же, как URL-адрес обратного вызова. Остальное можно оставить по умолчанию.

Проверьте свой выбор на шаге 6, затем нажмите Создать пул пользователей.

Теперь у вас есть совершенно новый пул пользователей!

Часть 2: Получите параметры для настройки Amplify

Нам нужно получить некоторые параметры для Настройки Amplify Cognito. Щелкните имя только что созданного пула пользователей и запишите ID пула пользователей и домен Cognito (без части https://).

Затем перейдите на вкладку Интеграция приложения и прокрутите вниз, чтобы найти клиент приложения.

Щелкните имя клиента приложения, чтобы открыть его. Запишите идентификатор клиента.

Круто, теперь мы должны быть готовы настроить Amplify. Просто убедитесь, что у вас есть все эти параметры (пример в скобках):

  • Когнито регион (eu-север-1)
  • Идентификатор пула пользователей (eu-north-1_4taDddVXH)
  • Идентификатор клиента (5fetar0pehrrdb451i5ucol4p5)
  • Домен Cognito (auth-demo.auth.eu-north-1.amazoncognito.com)
  • URL-адрес обратного вызова и выхода (http://localhost:5173/)

Часть 3: Веселье с интерфейсом

Давайте создадим новый проект Vite. Я буду упрощать и использовать ванильный JavaScript.

Без Amplify не весело, давайте установим его:

npm install aws-amplify

Хорошо, начнем с удаления каталога public/ и всех .js, .htmlи .css. файлы. А, намного лучше. Хорошо, давайте создадим файл vite.config.js с этим содержимым (чтобы избежать ошибок сборки позже, просто используйте его):

// vite.config.js
export default {
  define: {
    global: {},
  },
  resolve: {
    alias: {
      './runtimeConfig': './runtimeConfig.browser',
    },
  },
};

Отлично, теперь давайте создадим файл index.html:

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <script defer type="module" src="auth.js"></script>
  </head>
  <body>
    <button id="auth"></button>
  </body>
</html>

Вау, это действительно минимум! Что еще… Ах да, нам нужен JavaScript. Продолжайте и создайте auth.js. Сначала мы настроим Amplify с параметрами из Части 2:

// auth.js
import { Amplify, Auth } from 'aws-amplify';

Amplify.configure({
  Auth: {
    region: 'eu-north-1', // Cognito region
    userPoolId: 'eu-north-1_4taDddVXH', // User pool ID
    userPoolWebClientId: '5fetar0pehrrdb451i5ucol4p5', // Client ID (app client)
  },
  oauth: {
    domain: 'auth-demo.auth.eu-north-1.amazoncognito.com', // Cognito domain (without "https://")
    redirectSignIn: 'http://localhost:5173/', // App client callback URL
    redirectSignOut: 'http://localhost:5173/', // App client sign-out URL
    responseType: 'code', // OAuth grant type (code is recommended)
  },
});

Большой! Было бы забавно, если бы что-то действительно происходило, когда пользователь нажимал кнопку входа. Добавьте это в конец auth.js:

// auth.js
const button = document.getElementById('auth');
Auth.currentAuthenticatedUser()
  .then((user) => {
    // Woop, the user is signed in!
    const email = user.signInUserSession.idToken.payload.email;
    button.textContent = `Sign out ${email}`;
    button.addEventListener('click', () => Auth.signOut());
  })
  .catch(() => {
    // The user is not signed in...
    button.textContent = 'Sign in';
    button.addEventListener('click', () => Auth.federatedSignIn());
  });

Вот и все.

Часть 4: Давайте попробуем

Запустите сервер разработки с помощью:

vite

И переходим на http://localhost:5173/.

Хорошо, это не суперярко. Но давайте, это минимальный пример. Нажмите Войти.

Откроется пользовательский интерфейс Cognito Hosted. Нажмите Зарегистрироваться, чтобы создать учетную запись, и следуйте инструкциям. Теперь вы должны авторизоваться (нет, это не мой личный адрес электронной почты):

Потрясающе, мы можем входить и выходить, и я могу даже закрыть браузер и все равно войти в систему, когда открою его снова! Это все люди! И для полноты репозиторий GitHub с кодом: https://github.com/oskaerik/auth-demo