💣 Когда использовать Single Sign On (SSO) в приложениях React

Введение

В наш век быстро развивающихся платформ и приложений администрирование пользователей стало сложной задачей.

Независимо от выбранного способа размещения (локальный, облачный или гибридный) и метода аутентификации и авторизации пользователей, управление пользователями – это утомительная работа.

Кроме того, чем больше приложений вы создаете, тем более адским становится этот процесс.

Но управление пользователями также имеет решающее значение для успеха вашей компании.

Оно должно быть выполнено правильно, чтобы обеспечить безопасность вашего приложения.

И если у вас несколько приложений, есть способ сделать это, одновременно значительно улучшив пользовательский опыт ваших клиентов – Служба единого входа (SSO).

SSO позволяет решить две основные проблемы пользователей: Как я могу хранить столько паролей и идентификаторов, и почему мне нужно каждый раз входить в систему?

Он выполняет аутентификацию пользователя один раз централизованно, а затем использует ее для предоставления пользователю доступа к каждому приложению в сети приложений.

Если вы хотите посмотреть на удобство этой системы, обратите внимание на сеть приложений Google.

Помните ли вы, когда вам в последний раз приходилось входить в свой аккаунт Google?

Как работает SSO?

Прежде всего, необходимо знать, что для работы SSO существует множество протоколов.

Вот некоторые из широко используемых на рынке протоколов:

• SAML – SAML означает язык разметки утверждений безопасности, который похож на стандарт XML и облегчает обмен данными аутентификации и авторизации пользователей в защищенных доменах. SSO-аутентификация на основе SAML работает путем передачи запросов от поставщика идентификационных данных пользователя к поставщику услуг.
• Kerberos – в этой системе после предоставления пользователем учетных данных генерируется тикет (TGT). TGT помогает вашему приложению работать с другими приложениями, обслуживая билеты, предоставляя доступ к приложению без необходимости повторного ввода пользователем учетных данных.

🔐Разбираемся в технологиях безопасной аутентификации

Хотя SSO поддерживает несколько протоколов, таких как SAML/Kerberos, основной механизм его работы остается неизменным.

1. Пользователю, который пробует определенное приложение, будет предложено пройти аутентификацию. Если это пользователь, который уже входил в систему, то он сразу попадет в приложение и перейдет к шагу 7.
2. Поставщик услуг перенаправит пользователя к поставщику SSO.
3. Браузер пользователя отправит запрос на аутентификацию в службу SSO и пройдет аутентификацию.
4. Служба SSO возвращает ответ в формате XHTML и передает его браузеру. В ответе содержится информация, необходимая поставщику услуг в параметре SAMLResponse.
5. Ответ передается поставщику службы.
6. Поставщик обрабатывает этот ответ, генерирует контекст безопасности для пользователя и регистрирует его в системе.
7. Имея эти данные, вы можете запросить интересующие вас ресурсы.
8. Вы получите доступ к ресурсам.

Провайдеры SSO

На рынке представлено множество провайдеров SSO, таких как AWS, GSuite, Okta и OneLogin.

У каждого провайдера есть свои плюсы и минусы, и этой статьи будет недостаточно, чтобы провести сравнение.

У Frontegg есть несколько отличных возможностей по сравнению с другими SSO-сервисами, которые я использовал в прошлом.

Их бесплатная версия хорошо подходит для подобных нужд.

Я искал очень специфический набор функций для своего проекта, когда наткнулся на Frontegg, и с тех пор перешел на него.

Ниже перечислены функции, которые пригодились мне и послужили критерием для выбора Frontegg:

Интеграция Frontegg SSO

Давайте обсудим, как можно интегрировать этот SSO-сервис с помощью приложения React в вашей локальной среде.

Как только вы зарегистрируете аккаунт в Frontegg, автоматически будет создано рабочее пространство.

После этого выполните следующие шаги:

1. Создайте новое приложение React с помощью npm.

npx create-react-app app-with-frontegg
cd app-with-frontegg
   

2. Установите frontegg/react js lib с помощью npm.

npm install @frontegg/react
   

3. Измените файл index.js, чтобы включить в него контекст Frontegg.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import { FronteggProvider } from '@frontegg/react';
const contextOptions = {
baseUrl: 'https://workspace.frontegg.com',
};
// Replace this with your app logo
const headerImage = 'https://assets.frontegg.com/public-frontegg-assets/acme-logo.svg';
ReactDOM.render(
,
document.getElementById('root')
);

4. Измените файл app.js.

import React from 'react';
import { useAuth } from '@frontegg/react'
function App() {
const { user, isAuthenticated } = useAuth();
return (
{isAuthenticated && (  {user.name} )}
);
}
export default App;

5. Запустите приложение.

npm start
   

Frontegg был успешно интегрирован в ваше приложение.

Также были добавлены маршруты входа и выхода.

Вы можете найти url для регистрации по этой ссылке на localhost: http://localhost:3000/account/sign-up.

На локальный экран можно попасть по этому пути: http://localhost:3000/account/login.

Если вы хотите выйти из текущей сессии: http://localhost:3000/account/logout.

Заключение

SSO помогает решить проблемы, связанные с управлением несколькими механизмами аутентификации в организации.

Хороший поставщик SSO должен отвечать требованиям организации со всех точек зрения – безопасность, интеграция, переносимость, простота управления, поддержка и цена.

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