Аутентификация с легкостью - Пользовательский интерфейс

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

Userfront — это фреймворк, который помогает устранить проблемы, связанные с аутентификацией. Это полнофункциональное решение, которое автоматически обновляется и упрощает работу с аутентификацией в приложении React.

НЕОБХОДИМЫЕ УСЛОВИЯ

Для этого руководства очень необходимо хорошее понимание React и React Router. Эти технологии имеют основополагающее значение для построения и навигации по компонентам и маршрутам в приложении React. Документация React — хорошее место для начала.

НАСТРОЙКА ПРОЕКТА

Мы будем использовать Code Sandbox для настройки нового приложения React, а не загружать файлы локально с помощью CRA.

Чтобы быстро настроить шаблон React в песочнице Code, откройте новую вкладку в браузере и введите react.new .

Затем в разделе зависимостей найдите «@userfront/react» и «react-router-Dom». Добавьте эти два пакета в проект.

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

СОЗДАНИЕ МАРШРУТОВ

После создания этих файлов замените содержимое App.js на это:

import Home from "./Home";
import Login from "./Login";
import Reset from "./Reset";
import Dashboard from "./Dashboard";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";

export default function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/login">Login</Link>
            </li>
            <li>
              <Link to="/reset">Reset</Link>
            </li>
            <li>
              <Link to="/dashboard">Dashboard</Link>
            </li>
          </ul>
        </nav>

        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/login" element={<Login />} />
          <Route path="/reset" element={<Reset />} />
          <Route path="/dashboard" element={<Dashboard />} />
        </Routes>
      </div>
    </Router>
  );
}

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

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

Возвращаясь к нашему коду, замените свой Home.js контент следующим:

import Userfront from "@userfront/react";

Userfront.init("xbrxpjwb");

const SignupForm = Userfront.build({
  toolId: "lldrbnd"
});

function Home() {
  return (
    <>
      <h1>Home</h1>
      <SignupForm />
    </>
  );
}
export default Home;

А вот и красота Userfront. Просто импортировав пользовательский интерфейс и инициализировав его, мы можем отобразить компонент <SignupForm/>, и на нашей домашней странице появится форма регистрации.

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

Перейдите к своему Login.js и замените его содержимое следующим:

import Userfront from "@userfront/react";

Userfront.init("xbrxpjwb");

const LoginForm = Userfront.build({
  toolId: "kdlbkmd"
});

function Login() {
  return (
    <>
      <h2>Login</h2>
      <LoginForm />
    </>
  );
}
export default Login;

Замените Reset.js на это:

import Userfront from "@userfront/react";
Userfront.init("xbrxpjwb");

const PasswordResetForm = Userfront.build({
  toolId: "dkrbanb"
});

function Reset() {
  return (
    <>
      <h2>Reset</h2>
      <PasswordResetForm />
    </>
  );
}
export default Reset;

Вот пример того, как должно выглядеть ваше приложение:

ЗАЩИЩЕННЫЕ МАРШРУТЫ

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

Для этого мы заключаем компонент <Dashboard /> в компонент <RequireAuth />, который проверяет, вошел ли пользователь в систему. Когда пользователь входит в систему, его токен доступа доступен как Userfront.tokens.accessToken, поэтому мы проверяем это.

Компонент RequireAuth использует Navigate и useLocation из React Router для перенаправления браузера, если маркер доступа отсутствует.

import Userfront from "@userfront/react";
import Home from "./Home";
import Login from "./Login";
import Reset from "./Reset";
import Dashboard from "./Dashboard";
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Link,
  Navigate,
  useLocation
} from "react-router-dom";

export default function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/login">Login</Link>
            </li>
            <li>
              <Link to="/reset">Reset</Link>
            </li>
            <li>
              <Link to="/dashboard">Dashboard</Link>
            </li>
          </ul>
        </nav>

        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/login" element={<Login />} />
          <Route path="/reset" element={<Reset />} />
          <Route
            path="/dashboard"
            element={
              <RequireAuth>
                <Dashboard />
              </RequireAuth>
            }
          />
        </Routes>
      </div>
    </Router>
  );
}

function RequireAuth({ children }) {
  let location = useLocation();
  if (!Userfront.tokens.accessToken) {
    // Redirect to the /login page
    return <Navigate to="/login" state={{ from: location }} replace />;
  }

  return children;
}

Предварительный просмотр приборной панели:

Теперь пользователь вошел в систему, он может просматривать панель инструментов. Если пользователь не авторизован, он будет перенаправлен на страницу авторизации.

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

SSO (вариант единого входа)

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

Для этого создайте приложение с поставщиком удостоверений (например, Facebook), а затем добавьте эти учетные данные SSO на панель управления Userfront. Результатом является модифицированный знак опыта.

Заключение

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