Добавьте аутентификацию на любую веб-страницу за 10 минут

Всем сегодняшним веб-приложениям требуется, чтобы пользователи входили в систему и делились своей информацией, чтобы создавать свои собственные профили. Это помогает приложению безопасно предоставлять им персонализированный опыт. Существует два способа, которыми разработчики могут аутентифицировать пользователей: либо они могут создать свою собственную систему аутентификации, либо использовать службу управления идентификацией и доступом, которая обеспечивает безопасную регистрацию пользователей и возможности входа в систему со встроенными функциями. на страницах входа.

В этом посте показано, как легко добавить аутентификацию в любое одностраничное приложение Javascript (SPA) с помощью Authgear.

Почему Authgear?

Использование Authgear в ваших приложениях похоже на отправку процесса входа на одну главную страницу входа, подобно тому, как Google делает это для Gmail, YouTube и других. Вы можете легко интегрировать функции аутентификации в свое приложение (Angular, Vue, React или любые веб-сайты JavaScript). Обычно требуется всего несколько строк кода для включения нескольких методов аутентификации, таких как логин через социальные сети, беспарольный, биометрический вход, одноразовый вход в систему. пароль (OTP)» с помощью SMS/WhatsApp и многофакторной аутентификации (MFA).

Как это работает

Когда ваш пользователь входит в систему, Authgear создает специальный ID Token, который отправляется обратно в ваше приложение:

Когда пользователь нажимает кнопку Войти или ссылки в вашем клиентском приложении, ваше приложение отправляет их на страницу входа Authgear. Вы также можете настроить эту страницу.
Пользователь входит в Authgear, используя один из настроенных вами параметров входа (например, имя пользователя/пароль, вход через социальные сети, без пароля или по электронной почте).
После аутентификации пользователя ваше приложение запрашивает токен идентификатора пользователя.
Затем Authgear возвращает токен идентификатора пользователя вашему приложению.

Обзор реализации

Реализация аутентификации для приложений SPA состоит из двух частей. В первой части вы создаете приложение Authgear, выбираете метод ведения журнала и настраиваете страницу пользовательского интерфейса входа (необязательно). Вторая часть посвящена использованию Authgear’s Web SDK для запуска потока аутентификации, такого как вход в систему и выход из нее.

Часть 1. Настройка Authgear

Создать учетную запись Authgear

Первое, что вам нужно сделать, это создать Учетную запись Authgear, чтобы бесплатно начать работу с Authgear’s Portal.

Создать заявку на портале

Вам нужно будет создать приложение, чтобы знать, какие пользователи могут входить в какие приложения. Приложение Authgear — это место, где вы настраиваете, как вы хотите, чтобы аутентификация работала для проекта, который вы разрабатываете.

После входа в Authgear Portal перейдите на вкладку Приложения и нажмите Добавить приложение.
Выберите подходящий тип приложения (одностраничное приложение) и укажите имя для вашего приложения.

Нажмите Сохранить и перейдите к следующей странице руководства, или вы также можете следовать руководству по началу работы, чтобы настроить новое приложение.

Настроить приложение

После создания приложения вы будете перенаправлены на вкладку «Настройки», где сможете настроить параметры приложения.

Настроить авторизованные URI перенаправления

URI авторизованного перенаправления — это URL-адрес в вашем приложении, по которому Authgear перенаправляет пользователя после его аутентификации. Вы должны установить его на http://localhost:3000, где работает наш SPA. Мы создадим его во второй части.

Настроить URI перенаправления после выхода из системы

URI перенаправления после выхода из системы — это URL-адрес в вашем приложении, на который Authgear может вернуться после выхода пользователя из сервера авторизации Authgear. Для URL выхода нужно указать тот же адрес http://localhost:3000.

Нажмите Сохранить и не забудьте указать Конечную точку и Идентификатор клиента. Он понадобится вам при инициализации подключения через Authgear SDK for Web в вашем SPA-коде.

Каждому приложению в Authgear назначается буквенно-цифровой уникальный идентификатор клиента, который код вашего приложения будет использовать для вызова API Authgear через SDK.

Настройте методы входа

Authgear поддерживает широкий спектр методов аутентификации. На вкладке «Аутентификация» вы можете выбрать метод входа для своих пользователей. Варианты включают в себя, по электронной почте, мобильному телефону или в социальных сетях, просто используя имя пользователя или указанный вами пользовательский метод. Для простоты вы можете выбрать варианты Электронная почта и Без пароля:

Часть 2. Добавьте аутентификацию на свою веб-страницу

Следуйте инструкциям по созданию простого приложения SPA и узнайте, как использовать Authgear Web SDK для интеграции Authgear в ваше приложение. Вы также можете просмотреть полный исходный код в репозитории GitHub.

Предпосылки

Прежде чем мы начнем, убедитесь, что в вашей системе установлен Node.js. Если нет, скачайте и установите его с официального сайта.

Создайте базовый веб-сервер

В этой части вы создадите простой сервер веб-сайта для размещения приложения SPA с помощью ExpressJS. Мы также будем использовать его для обслуживания нашей HTML-страницы и любых необходимых ресурсов, таких как JavaScript, CSS и т. д. Начните с создания новой папки на вашем компьютере, чтобы сохранить исходный код приложения (в примере мы называем ее authgear-spa-js-login). Затем инициализируйте новый проект NPM, выполнив следующую команду:

npm init -y

Далее устанавливаем два необходимых пакета:

npm install express

Также установите [nodemon](https://npmjs.org/package/nodemon), чтобы наш сервер мог автоматически перезапускаться при любых изменениях кода в режиме разработки:

npm install -D nodemon

Затем откройте файл package.json и отредактируйте запись скриптов, чтобы иметь команды start и dev, как показано ниже:

{
  // ...
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js"
  },
  // ...
}

Теперь вы можете запускать приложение в двух режимах: prod и dev.

Например, npm run dev будет запускать приложение с помощью nodemon, отслеживая изменения по мере изменения файлов.

Создание server.js

Создайте новый файл server.js в корне проекта и заполните его следующим кодом:

const express = require("express");
const { join } = require("path");
const app = express();

// Serve static assets from the /public folder
app.use(express.static(join(__dirname, "public")));
// Endpoint to serve the configuration file
app.get("/authgear_config.json", (req, res) => {
  res.sendFile(join(__dirname, "authgear_config.json"));
});
// Serve the index page for all other requests
app.get("/*", (_, res) => {
  res.sendFile(join(__dirname, "index.html"));
});
// Listen on port 3000
app.listen(3000, () => console.log("Application running on port 3000"));

Создайте базовую HTML-страницу

Создайте файл index.html в корне проекта и добавьте в созданный файл следующее содержимое:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Authgear SPA SDK Sample</title>
    <link rel="stylesheet" type="text/css" href="/css/main.css" />
  </head>
<body>
    <h2>SPA Authentication Sample</h2>
    <p>Welcome to our page!</p>
    <button id="btn-login" disabled="true" onclick="login()">Log in</button>
    <button id="btn-logout" disabled="true" onclick="logout()">Log out</button>
    <script src="js/app.js"></script>
    <script src="https://unpkg.com/@authgear/[email protected]/dist/authgear-web.iife.js"></script>
  </body>
</html>

Чтобы сделать демонстрацию простой, мы не используем диспетчер пакетов, такой как Webpack, мы будем извлекать веб-SDK Authgear из CDN Authgear с помощью пакета IIFE (выражение функции с немедленным вызовом). Мы можем напрямую ссылаться на скрипт в нашем HTML:

<script src="https://unpkg.com/@authgear/[email protected]/dist/authgear-web.iife.js"></script>

Вы можете установить Authgear Web SDK как зависимость вашего приложения. Это полезно, если вы создаете приложения React или React Native. Посмотрите, как установить пакет.

Создайте файл main.css

Создайте новую папку с именем public в корневой папке проекта и создайте другую папку с именем css внутри папки public. Добавьте туда новый файл с именем main.css. Это будет использоваться для определения того, как элементы кнопок входа и выхода будут скрыты на главной странице в зависимости от того, аутентифицирован пользователь или нет.

Откройте только что созданный файл public/css/main.css и добавьте следующий CSS:

.hidden {
    display: none;
}
label {
    margin-bottom: 10px;
    display: block;
}

После создания HTML-файла и применения стилей CSS посмотрите, как выглядит наша страница, запустив npm run dev и обратившись к ней по адресу http://localhost:3000.

Создайте файл app.js

Чтобы добавить действие на страницу, мы создаем новый каталог в папке public с именем js и добавляем туда новый файл с именем app.js. Скопируйте и вставьте следующий код JS, который считывает определенные значения приложения Authgear файла authgear_config.json (endpoint и clientId) из конечной точки с помощью функции fetchAuthConfig. Кроме того, он настраивает новый клиент Authgear и определяет логику входа и выхода:

let authgearClient = null;

const fetchAuthConfig = () => fetch("/authgear_config.json");
const configureClient = async () => {
    const response = await fetchAuthConfig();
    const config = await response.json();
    authgearClient = window.authgear.default;
    await authgearClient.configure({
        endpoint: config.endpoint,
        clientID: config.clientID,
        sessionType: "refresh_token",
    }).then(
        () => {
            console.log("Authgear client successfully configured!");
        },
        (err) => {
            console.log("Failed to configure Authgear");
        }
    );
};
const login = async () => {
    await authgearClient
        .startAuthentication({
            redirectURI: window.location.origin,
            prompt: "login",
        })
        .then(
            () => {
                console.log("Logged in!");
            },
            (err) => {
                console.log("Log in failed", err);
            }
        );
};
const logout = () => {
    authgearClient
    .logout({
      redirectURI: window.location.origin,
    })
    .then(
      () => {
        console.log("Logged out successfully");
      },
      (err) => {
        console.log("Failed to logout");
      }
    );
};
window.onload = async () => {
    await configureClient();
    updateUI();
    const query = window.location.search;
    if (query.includes("code=")) {
        updateUI();
        window.history.replaceState({}, document.title, "/");
    }
}
const updateUI = async () => {
    const isAuthenticated = authgearClient.sessionState === "AUTHENTICATED";
    document.getElementById("btn-logout").disabled = !isAuthenticated;
    document.getElementById("btn-login").disabled = isAuthenticated;
};

Понимание всей картины

Давайте разберем код app.js из предыдущего раздела и поймем, как достигается аутентификация с помощью Authgear:

Настройте клиент Authgear

fetchAuthConfig: Во-первых, эта функция делает запрос к /authgear_config.json конечной точке, которую мы предоставили в server.js, чтобы получить значения настроек приложения Authgear из authgear_config.jsonfile.

configureClient: После того, как мы получим информацию о конфигурации для клиента Authgear из файла authgear_config.json, мы настроим клиент Authgear с этими настройками. Он также записывает сообщение на консоль, сообщая, была ли конфигурация успешной или нет.

Последовательность входа

login: login функция вызывается кнопкой Войти, ранее определенной на HTML-странице. Он выполняет действие входа в систему, вызывая функцию authgearClient.startAuthentication Authgear. Он перенаправляет пользователя на страницу входа в Auhthgear. После того, как пользователь успешно войдет в систему, он будет перенаправлен обратно на ту же страницу, которую мы установили в redirectURI. Запустите проект и нажмите кнопку Войти. Вы должны перейти на страницу входа в Authgear, настроенную для вашего приложения. Идите вперед и создайте нового пользователя или войдите в систему, используя электронную почту (мы указали метод входа в систему без пароля в первой части). Когда вы пытаетесь войти в систему с помощью своей электронной почты, вы должны получить волшебную ссылку на свой почтовый ящик для подтверждения операции входа.

После успешной аутентификации вы будете перенаправлены на страницу, на которой были раньше.

Процедура выхода

logout: Эта функция выводит пользователя из системы и перенаправляет его обратно на исходную страницу (по адресу http://localhost:3000). Он использует функцию Authgear logout и записывает в консоль сообщение с указанием результата операции.

Обновите пользовательский интерфейс

window.onload: Это функция, которая запускается при загрузке страницы. Он настраивает клиент Authgear и обновляет пользовательский интерфейс. Если URL-адрес страницы содержит «код =», это означает, что пользователь аутентифицирован (code запрос будет получен от сервера Authgear), он снова обновляет пользовательский интерфейс и удаляет «код =» из URL-адреса.

Оцените состояние аутентификации

updateUI: Эта функция обновляет статус кнопок входа и выхода в зависимости от того, аутентифицирован ли пользователь. В Authgear вы можете проверить, вошел ли пользователь в систему или нет, с атрибутом sessionState. Если пользователь аутентифицирован, мы отключаем кнопку входа и включаем кнопку выхода, и наоборот, если пользователь не аутентифицирован.

Краткое содержание

На протяжении всего поста вы узнали, как можно быстро добавить аутентификацию на основе электронной почты без пароля на любую веб-страницу JavaScript всего за 10 минут с помощью Authgear. С Authgear вы можете делать гораздо больше, например, вы можете получить текущую информацию о пользователе через SDK, или, если вам нужно безопасно обмениваться данными со своей веб-страницы с серверным API, вы можете включить токен доступа в HTTP-запросы к вашему серверу приложений.

Связанные ресурсы

Сообщество

🙋 Присоединяйтесь к сообществу Authgear в Discord

🐦 Подпишитесь на Twitter

📝 Задавай вопросы

💁 Проверьте SDK с открытым исходным кодом

Об авторе

Посетите мой блог: www.iambobur.com