Как добавить аутентификацию в ваше приложение React с помощью Okta

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

Он похож на Auth0. Вы можете использовать его в нескольких приложениях, и вы даже можете использовать его с приложениями, созданными на разных языках и платформах.

В настоящее время Okta поддерживает следующие языки:

  • Android
  • Угловой
  • iOS
  • Ява
  • .СЕТЬ
  • Node.js
  • PHP
  • Реагировать

Зарегистрироваться

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

Бесплатная учетная запись разработчика Okta

Панель управления Okta

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

Зарегистрируйте свое приложение React

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

  • Нажмите "Добавить приложение".
  • Выберите одностраничное приложение
  • Добавьте имя в свое приложение в поле Имя

Теперь вам нужно отредактировать поле Базовые URI. Я предполагаю, что вы используете приложение create-response-app на своем локальном сервере.

http://localhost:3000

То же самое с URI перенаправления входа и Нажмите Готово

http://localhost:3000/implicit/callback

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

Запустите свой редактор кода

  • Перейдите в папку вашего проекта
  • Добавьте необходимые пакеты

yarn add react-router-dom @okta/okta-react @okta/signin-widget

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

/ главная / пользователь / заказ

Создайте компонент входа в систему

Создайте новую папку с именем auth в папке компонентов и создайте новый файл с именем Login.js со следующим кодом.

import React, { Component } from 'react';
import { Redirect } from 'react-router-dom';
import OktaSignInWidget from './SigninWidget';
import { withAuth } from '@okta/okta-react';

export default withAuth(class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      authenticated: null
    };
    this.checkAuthentication();
  }

  async checkAuthentication() {
    const authenticated = await this.props.auth.isAuthenticated();
    if (authenticated !== this.state.authenticated) {
      this.setState({ authenticated });
      this.props.history.push('/home')

    }
  }

  componentDidUpdate() {
    this.checkAuthentication();
  }

  onSuccess = (res) => {
    if (res.status === 'SUCCESS') {
      return this.props.auth.redirect({
        sessionToken: res.session.token
      });
   } else {
    // The user can be in another authentication state that requires further action.
    // For more information about these states, see:
    //   https://github.com/okta/okta-signin-widget#rendereloptions-success-error
    }
  }

  onError = (err) => {
    console.log('error logging in', err);
  }

  render() {
    if (this.state.authenticated === null) return null;
    return this.state.authenticated ?
      <Redirect to={{ pathname: '/' }}/> :
      <OktaSignInWidget
        baseUrl={this.props.baseUrl}
        onSuccess={this.onSuccess}
        onError={this.onError}/>;
  }
});

Затем вам нужно создать новый файл с именем SigninWidget в том же каталоге auth со следующим кодом.

*SigninWidget.js*

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import OktaSignIn from '@okta/okta-signin-widget';
import '@okta/okta-signin-widget/dist/css/okta-sign-in.min.css';

 class SigninWidget extends Component {
  componentDidMount() {
    const el = ReactDOM.findDOMNode(this);
    this.widget = new OktaSignIn({
      baseUrl: this.props.baseUrl,
      authParams: {
        pkce: true
      },
    });
    this.widget.renderEl({el}, this.props.onSuccess, this.props.onError);
  }

  componentWillUnmount() {
    this.widget.remove();
  }

  render() {
    return <div />;
  }
};

export default SigninWidget

Следующим шагом будет обновление файла маршрута. Вот пример из моей реализации Okta. Оберните частные маршруты в компонент SecureRoute, а также замените идентификатор клиента и эмитента своими учетными данными из консоли разработчика Okta.

import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Order from "./pages/Order.js";
import Home from "./pages/Home.js";
import Users from "./pages/Users.js";
import Login from "./components/auth/Login";
import { Security, SecureRoute, ImplicitCallback } from "@okta/okta-react";

function onAuthRequired({ history }) {
  history.push("/login");
}

const AppRoute = () => (
  <Router>
    <Security
      issuer="https://dev-944example.okta.com/oauth2/default" //Replace with your ORG URI.
      clientId="0oa1ws12avokObj45C357example" //Replace with your own client id
      redirectUri={window.location.origin + "/implicit/callback"}
      onAuthRequired={onAuthRequired}
    >
      <SecureRoute exact path="/orders" component={Order} />
      <SecureRoute exact path="/users" component={Users} />
      <Route exact path="/" component={Home} />
      <Route
        path="/login"
        render={() => <Login baseUrl="https://dev-968924.okta.com" />}
      />
      <Route path="/implicit/callback" component={ImplicitCallback} />
    </Security>
  </Router>
);

export default AppRoute;

Создать функцию выхода

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

import { withAuth } from "@okta/okta-react";
import Breadcrumb from './breadcrumb.js'
class Home extends Component {
  logout = async () => {
    this.props.auth.logout("/");
  };

  render() {
    return (
      <>
        <Breadcrumb home="Logout" click={this.logout} />
      </>
    );
  }
}

export default withAuth(Home);

Поздравляю! 🎉

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

Это мой первый пост здесь. Я скоро вернусь с новым.

Спасибо!