Защита приложений React с помощью Keycloak: подробное руководство

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

В таких случаях Keycloak — идеальный выбор, поскольку он предлагает широкий набор функций из коробки. Keycloak включает встроенную поддержку OpenID Connect и SAML 2.0, а также интеграцию с популярными социальными сетями, такими как Google, GitHub, Facebook и Twitter.

Давайте посмотрим, как создать страницу входа с помощью React и keycloak.
Примечание Мы не будем подробно рассказывать, как установить keycloak. Посмотреть установку keycloak можно здесь

Шаг 1. Установите адаптер JavaScript Keycloak для React.

Вы можете установить адаптер JavaScript Keycloak для React, используя npm. В каталоге вашего проекта выполните следующую команду:

npm install @react-keycloak/web keycloak-js

Шаг 2. Настройте экземпляр Keycloak

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

import Keycloak from "keycloak-js";

const keycloak = new Keycloak({
  url: "https://your-keycloak-server/auth",
  realm: "your-realm",
  clientId: "your-client-id",
});

export default keycloak;

Замените значения URL, области и clientId URL-адресом вашего сервера Keycloak, именем области и идентификатором клиента.

Шаг 3. Оберните приложение с помощью KeycloakProvider.

Оберните свое приложение React компонентом KeycloakProvider, чтобы предоставить вашему приложению контекст Keycloak. Вы можете сделать это, добавив следующий код в файл index.js:

import React from "react";
import ReactDOM from "react-dom";
import { KeycloakProvider } from "@react-keycloak/web";
import keycloak from "./keycloak";

ReactDOM.render(
  <KeycloakProvider keycloak={keycloak}>
    <App />
  </KeycloakProvider>,
  document.getElementById("root")
);

Замените App на имя вашего основного компонента.

Шаг 4. Создайте компонент страницы входа

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

import React, { useState } from "react";
import { useKeycloak } from "@react-keycloak/web";

function LoginPage() {
  const { keycloak } = useKeycloak();
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");

  const handleSubmit = async (event) => {
    event.preventDefault();
    try {
      await keycloak.login({
        username,
        password,
      });
    } catch (error) {
      console.error("Failed to log in", error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Username"
        value={username}
        onChange={(event) => setUsername(event.target.value)}
      />
      <input
        type="password"
        placeholder="Password"
        value={password}
        onChange={(event) => setPassword(event.target.value)}
      />
      <button type="submit">Log in</button>
    </form>
  );
}

export default LoginPage;

Шаг 5. Используйте компонент страницы входа

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

import React from 'react';
import { useKeycloak } from '@react-keycloak/web';
import LoginPage from './LoginPage';

function App() {
  const { keycloak, initialized } = useKeycloak();

  if (!initialized) {
    return <div>Loading...</div>;
  }

  if (!keycloak.authenticated) {
    return <LoginPage />;
  }
  return (
    <div>)

Вот и все! С помощью этих шагов вы сможете создать страницу входа с помощью React и Keycloak.

Чао

Первоначально опубликовано на https://www.javahabit.com 15 марта 2023 г.