Как интегрировать аутентификацию Okta в React

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

Прежде чем продолжить, важно отметить, что у нас есть предварительное руководство, в котором объясняется, как создать домен Okta и идентификатор клиента, которые мы будем использовать в нашем приложении React. Для начала ознакомьтесь с этим руководством: Аутентификация Okta (Настройка Okta)

Установка зависимостей Okta:

В вашем приложении React вам необходимо установить две зависимости Okta: @okta/okta-auth-js и @okta/okta-react. Вы можете установить их с помощью npm или пряжи.

Создание файла конфигурации Okta:

Затем создайте файл с именем config.js в корневой папке вашего приложения React. В этом файле будет храниться конфигурация вашего домена Okta и идентификатора клиента. Вот пример того, как должен выглядеть файл config.js:

const OKTA_ISSUER = "https://<YOUR_OKTA_DOMAIN>/oauth2/default";
const OKTA_CLIENT_ID = "<YOUR_OKTA_CLIENT_ID>";
const OKTA_SCOPES = "openid profile email";
const scopes = OKTA_SCOPES as string;
const scopesArray = scopes && scopes.split(/\s+/);
export const oktaConfig = {
    issuer: OKTA_ISSUER as string, 
    clientId: OKTA_CLIENT_ID as string,
    redirectUri: `${window.location.origin}/login/callback`,
    scopes: scopesArray || [],
    pkce: true,
    disableHttpsCheck: true
};

Безопасность ваших маршрутов

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

Чтобы защитить ваши маршруты, убедитесь, что ваша версия React-router-dom равна 5 или ниже. В этом уроке мы используем версию 5.3.0. Обновите файлы маршрутов, как показано во фрагменте кода.

import React, { Component } from "react";
import {
    Route,
    BrowserRouter,
    useHistory,
    Switch,
    withRouter,
} from "react-router-dom";
import { OktaAuth, toRelativeUrl } from "@okta/okta-auth-js";
import { Security, SecureRoute, LoginCallback } from "@okta/okta-react";
import { oktaConfig } from "../config";
import IndexPage from "../public/Index";
import SecretPage1 from "../private/SecretPage1";
import SecretPage2 from "../private/SecretPage2";
// Other Import statements here...
const oktaAuth = new OktaAuth(oktaConfig);
const Routes: React.FC = () => {
    const history = useHistory();
    const restoreOriginalUri = (_oktaAuth: OktaAuth, originalUri?: string) => {
        history.replace(
            toRelativeUrl(originalUri || "/", window.location.origin)
        );
    };
    return (
        <Security oktaAuth={oktaAuth} restoreOriginalUri={restoreOriginalUri}>
            <Switch>
                {/* Public routes */}
                <Route
                    path="/login/callback"
                    exact={true}
                    component={LoginCallback}
                />
                <Route exact path="/" component={IndexPage} />
                <SecureRoute exact path="/page1" component={SecretPage1} />
                <SecureRoute
                    exact
                    path="/page2"
                    component={SecretPage2}
                />
            </Switch>
        </Security>
    );
};
const AppWithRouterAccess = withRouter(Routes);
class AppRoutes extends Component {
    render() {
        return (
            <BrowserRouter>
                <AppWithRouterAccess />
            </BrowserRouter>
        );
    }
}
export default AppRoutes;

В приведенном выше коде вы можете видеть, что маршруты «index» и «login/callback» являются общедоступными, поскольку мы используем компонент «Route» из response-router-dom. Между тем, «SecretPage1» и «SecretPage2» являются частными маршрутами, поскольку они используют компонент «SecureRoute» из «@okta/okta-react». Дополнительно имеется обертка для компонента «Безопасность».

Проверка корневого файла

Теперь наш основной файл приложения будет выглядеть следующим образом:

import React from "react";
import AppRoutes from "./routes";
const App: React.FC = () => {
    return (
        <>
            <React.StrictMode>
                <AppRoutes />
            </React.StrictMode>
        </>
    );
};
export default App;

О входе и выходе

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

import { useOktaAuth } from "@okta/okta-react";
function Header() {
    const { oktaAuth, authState } = useOktaAuth();
    const logout = () => void oktaAuth.signOut();
    const login = () => void oktaAuth.signInWithRedirect({ originalUri: "/" });
    return (
        <>
            {authState?.isAuthenticated ? (
                <button 
                    onClick={() => void logout()}
                    className="header-auth-btn logoutLogo"
                >
                    Log out
                </button>
            ) : (
                <button
                    onClick={() => void login()}
                    className="header-auth-btn logoutLogo"
                >
                    Log-In
                </button>
            )}
        </>
    );
}
export default Header;

Бонусный раздел

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

import { useOktaAuth } from "@okta/okta-react";
import useAuthUser from "../../hooks/getUser";
const { authState } = useOktaAuth();
const userInfo = useAuthUser();

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

Методические рекомендации

Нам необходимо создать раздел, подчеркивающий важность сопоставления домена Okta, идентификатора клиента Okta и URI перенаправления в файле конфигурации с соответствующими значениями на панели разработчика Okta. С другой стороны, следует также подчеркнуть необходимость изменения маршрута /login/callback в конфигурации маршрутов.

Заключение

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

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