Lời giới thiệu
Hôm nay, tôi sẽ chỉ cho bạn cách bạn có thể thêm authentication(xác thực) đơn giản vào ứng dụng React của mình bằng cách sử dụng xác thực từ Okta. Một hệ thống quản lý người dùng có thể được sử dụng trên nhiều ứng dụng, nhiều ngôn ngữ hoặc framework
Sign-Up
Trước khi có thể tích hợp Okta vào ứng dụng react. Bạn cần có tài khoản nhà phát triển Okta. Vì vậy, hãy tiếp tục và tạo tài khoản miễn phí của bạn ngay bây giờ.
Okta Dashboard
Sau khi tạo tài khoản miễn phí, bạn sẽ được chuyển hướng đến trang dashboard. Bạn có nhận thấy Org URLtrong trang dashboard. Bạn cần điều đó cho ứng dụng của mình. Trang dashboard cũng có chỉ số người dùng và nhật ký hệ thống hiển thị tất cả các hoạt động.
Đăng ký App React
Đã đến lúc đăng ký ứng dụng react. Nhấp vào liên kết Applications trên trang dashboard.
- Click chọn Add Application
- Tiếp tục chọnSingle Page App
- Thêm tên app vào Name field
Bây giờ, bạn phải chỉnh sửa field URI cơ sở. Tôi sẽ giả định rằng bạn đang sử dụng ứng dụng tạo trên server local của mình.
http://localhost:3000Làm điều tương tự với URI chuyển hướng Đăng nhập & Nhấp vào Done
http://localhost:3000/implicit/callbackBây giờ ứng dụng của bạn đã được đăng ký và bạn sẽ nhận được Client ID
Khởi động IDE
- Điều hướng đến thư mục app react của bạn
- Thêm các package cần thiết
yarn add react-router-dom @okta/okta-react @okta/signin-widgetVì lợi ích của ví dụ này, hãy giả sử rằng ứng dụng react của bạn có ba trang nằm trong các route riêng tư. Và chỉ người dùng được authorized(ủy quyền) mới có quyền truy cập vào các route.
/home /user /order
Tạo component Login app React
Create a new folder called auth in your components folder and create a new file called Login.js with the following code.
Tạo một thư mục mới được gọi là auth trong thư mục components và tạo một tệp mới có tên là Login.js với code sau.
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}/>;
}
});
Tiếp theo, bạn cần tạo một tệp mới có tên SigninWidget trong cùng thư mục auth với code sau.
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 SigninWidgetBước tiếp theo là cập nhật tệp route. Đây là một ví dụ từ việc implement Okta. Bao bọc các route riêng tư bên trong component SecureRoute và cũng thay thế Client và issuer bằng thông tin đăng nhập của riêng bạn từ bảng điều khiển dành cho nhà phát triển 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;Tạo hàm Logout cho app React
Đây là bước cuối cùng. Bạn sẽ muốn tạo nút đăng xuất trong tệp home.js hoặc tệp gốc của mình. Nút này được hiển thị cho người dùng sau khi đăng nhập và đừng quên bọc chức năng bên trong withAuth để sử dụng các đạo cụ xác thực.
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);Kết luận
Chúng ta đã tạo được authentication cho appReact. Tôi hy vọng bạn đã tích hợp thành công xác thực Okta trong app react của mình. Nếu bạn gặp bất kỳ rắc rối nào, hãy bình luận bên dưới. Tôi sẽ giúp bạn giải quyết nó.
Tham khảo thêm về React tại đây: Cách xây dựng Micro Frontend với React và SSR
Bài viết này được sưu tầm và tổng hợp từ nhiều nguồn trên Internet.
Nếu có gì không hiểu thì inbox messenger bên dưới mình hỗ trợ thêm nhé.
