Как добавить аутентификацию в ваше приложение React с помощью Okta
Сегодня я покажу вам, как вы можете добавить простую аутентификацию в ваше приложение React, которое использует аутентификацию из Okta, которая представляет собой систему управления пользователями, которую можно использовать в нескольких приложениях, построенных на нескольких языках или фреймворках.
Он похож на Auth0. Вы можете использовать его в нескольких приложениях, и вы даже можете использовать его с приложениями, созданными на разных языках и платформах.
В настоящее время Okta поддерживает следующие языки:
- Android
- Угловой
- iOS
- Ява
- .СЕТЬ
- Node.js
- PHP
- Реагировать
Зарегистрироваться
Прежде чем вы сможете интегрировать Okta в свое приложение для реагирования, вам понадобится учетная запись разработчика Okta. Так что вперед и создайте бесплатную учетную запись прямо сейчас.
Бесплатная учетная запись разработчика Okta
Панель управления Okta
После создания бесплатной учетной записи вы будете перенаправлены на панель управления. Вы обратили внимание на URL-адрес организации на панели управления. Это понадобится вам для вашего приложения. На панели управления также есть пользовательские показатели и системные журналы, в которых показаны все действия.
Зарегистрируйте свое приложение React
Пришло время зарегистрировать ваше приложение для реагирования. Нажмите ссылку Приложения на панели управления.
- Нажмите "Добавить приложение".
- Выберите одностраничное приложение
- Добавьте имя в свое приложение в поле Имя
Теперь вам нужно отредактировать поле Базовые URI. Я предполагаю, что вы используете приложение create-response-app на своем локальном сервере.
То же самое с 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 в свое приложение для реагирования. Если у вас возникнут проблемы, напишите комментарий ниже. Я помогу тебе решить эту проблему.
Это мой первый пост здесь. Я скоро вернусь с новым.
Спасибо!