Изображение от Ben Sweet на Unsplash

Используя систему управления контентом, вы можете предоставить пользователю (Пользователь А) разрешение на изменение содержимого статьи, а другому пользователю (Пользователь Б) — разрешение только на просмотр содержимого статьи. Это означает, что пользователь А имеет более высокие привилегии и доступ к статье, чем пользователь Б. Этот простой сценарий объясняет, что такое управление доступом.

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

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

Что такое управление пользователями?

Управление пользователями — это возможность администраторов определять доступ пользователей к ресурсам приложения, таким как функции, страницы, хранилище, сети и т. д.

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

Интеграция аутентификации в приложение React может быть немного сложной, но она необходима для обеспечения безопасности данных ваших пользователей. Один из лучших способов настроить аутентификацию — использовать библиотеку или службу аутентификации. Эти библиотеки и службы берут на себя всю тяжелую работу, такую ​​как хранение учетных данных пользователя и обработка хеширования паролей.

Служба аутентификации, которую я использовал специально для React, называется Frontegg. Это сквозная платформа управления пользователями, которая предоставляет различные функции управления пользователями, такие как управление профилями, ролями, настройка разрешений и безопасная аутентификация. Он поставляется с возможностью изменения стилей и использует различные сторонние логины, такие как Github, Facebook, Google и другие. Их бесплатный план имеет множество функций, которых вполне достаточно для небольших проектов. В этой статье я покажу вам, как я использовал Frontegg для управления пользователями в React.

Внедрение аутентификации и управления пользователями

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

Когда вы закончите, нажмите кнопку «Далее», чтобы увидеть различные параметры входа, которые вы можете включить для своего приложения.

После выбора параметров входа, которые вы хотите включить в своем приложении, нажмите кнопку «Далее».

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

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

Теперь мы готовы интегрировать аутентификацию в наше приложение.

Нажмите кнопку «Опубликовать в разработчике» в правом верхнем углу панели инструментов.

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

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

Интеграция Frontegg в проект React

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

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

Затем установите библиотеки Frontegg и react-router-dom из NPM.

npm install @frontegg/react react-router-dom

Теперь пришло время запустить ваш проект.

Выполните следующую команду на своем терминале.

npm start

Далее нам нужно обернуть наш корневой компонент с помощью FronteggProvider.

Если вы используете React версии 18, вы можете скопировать приведенный ниже код, но лучше заменить baseUrl и clientId на свои.

В index.js или main.jsx вставьте код ниже:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';
import { FronteggProvider } from '@frontegg/react';
const contextOptions = {
    baseUrl: 'YOUR_BASE_URL',
    clientId: 'YOUR_CLIENT_ID'
};
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <FronteggProvider contextOptions={contextOptions} hostedLoginBox={true}>
        <App />
    </FronteggProvider>
);

На этом этапе Frontegg должен быть успешно интегрирован в наш проект React.

Теперь пришло время аутентифицировать пользователей в нашем приложении.

Аутентификация пользователей в нашем приложении

Теперь нам нужно проверить, вошел ли пользователь в приложение с помощью хука Frontegg useAuth. Если пользователь не вошел в систему, мы перенаправим его на страницу входа с помощью хука useLoginWithRedirect.

Пожалуйста, посетите freecodecamp, если вам нужна помощь в понимании хуков в React.

В файле app.js или App.jsx вставьте приведенный ниже код:

import './App.css';
// import { useEffect } from 'react';
import { useAuth, useLoginWithRedirect, ContextHolder } from "@frontegg/react";

function App() {
  const { user, isAuthenticated } = useAuth();
  const loginWithRedirect = useLoginWithRedirect();
  // Uncomment the lines below to redirect to log in automatically 
  // on component re-render

  // useEffect(() => {
  //   if (!isAuthenticated) {
  //       loginWithRedirect();
  //   }
  // }, [isAuthenticated, loginWithRedirect]);

  const logout = () => {
    const baseUrl = ContextHolder.getContext().baseUrl;
    window.location.href = `${baseUrl}/oauth/logout?post_logout_redirect_uri=${window.location}`;
  };

  return (
    <div className="App">
      { isAuthenticated ? (
        <div>
          <div>
            <img src={user?.profilePictureUrl} alt={user?.name}/>
          </div>
          <div>
            <span>Logged in as: {user?.name}</span>
          </div>
          <div>
            <button onClick={() => alert(user.accessToken)}>What is my access token?</button>
          </div>
          <div>
            <button onClick={() => logout()}>Click to logout</button>
          </div>
        </div>
      ) : (
        <div>
          <button onClick={() => loginWithRedirect()}>Click me to login</button>
        </div>
      )}
    </div>
  );
}

export default App;

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

Теперь, если вы вернетесь в браузер, вы увидите кнопку, предлагающую авторизоваться в приложении.

Теперь нажмите на эту кнопку, и вы попадете на страницу, содержащую форму входа и параметры аутентификации, которые вы создали ранее.

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

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

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

Мы успешно реализовали аутентификацию в нашем приложении для реагирования!

Давайте пойдем немного дальше, не так ли?

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

Но подождите, прежде чем мы настроим роли и разрешения, нам нужно найти пользователей нашего приложения.

Как найти данные пользователя

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

Нажмите на значок яйца в левом верхнем углу панели инструментов, чтобы перейти на «Домашнюю страницу» вашего портала Frontegg.

В меню боковой панели нажмите «Среды», чтобы открыть раскрывающееся меню под ним. В этом меню нажмите «Разработка». Это действие переключит ваше приложение в среду разработки, поскольку мы еще не опубликовали его.

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

Вы будете перенаправлены на страницу, где сможете управлять пользователями вашего приложения.

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

Вы можете отредактировать данные пользователя, заблокировать пользователя, удалить пользователя и повторно отправить электронное письмо для активации.

Теперь давайте настроим роли для пользователей нашего приложения.

Как настроить роли

На боковой панели нажмите «Роли», и вы попадете на новую страницу. На этой странице будут перечислены все уже созданные роли, и вы увидите кнопку для создания новой роли.

Если вы хотите создать новую роль, нажмите кнопку «Добавить новую» и предоставьте некоторую информацию о новой роли. После создания новой роли необходимо добавить к ней разрешения.

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

Сохраните изменения с помощью кнопки «Сохранить изменения».

Если вы не видите свое разрешение в списке, нажмите кнопку «Добавить новое разрешение», а затем создайте новое разрешение.

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

Контроль доступа: как назначать роли пользователям

На боковой панели портала Frontegg нажмите «Учетные записи».

Вы попадете на страницу, где увидите список организаций, зарегистрированных в вашей заявке.

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

Щелкните вторичное меню определенного пользователя, чтобы назначить или удалить роли для этого пользователя.

Вот и все! Мы успешно интегрировали аутентификацию и поняли основные шаги по управлению идентификацией пользователей и контролю доступа в приложениях React.

Если вам нужен архив кода этой статьи, загляните в репозиторий GitHub.

Заключение

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

Затем мы обсудили аутентификацию, как она связана с контролем доступа и как мы можем использовать стороннюю систему аутентификации Frontegg для реализации аутентификации, управления пользователями и контроля доступа в приложениях React.

Я надеюсь, что эта статья помогла вам понять основные шаги по управлению идентификацией пользователей и контролем доступа в приложениях React.

Спасибо за чтение.

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .

Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.