오늘은 여러 언어 또는 프레임워크에 구축된 여러 앱에서 사용할 수 있는 사용자 관리 시스템인 Okta의 인증을 사용하는 반응 애플리케이션에 간단한 인증을 추가하는 방법을 보여드리겠습니다.

Auth0과 유사합니다. 여러 앱에서 사용할 수 있으며 다른 언어와 플랫폼에 구축된 앱에서도 사용할 수 있습니다.

현재 Okta는 다음 언어를 지원합니다.

안드로이드

각진

아이폰 OS

자바

.NET

Node.js

PHP

리액트

가입하기

Okta를 반응 애플리케이션에 통합하려면 Okta 개발자 계정이 필요합니다. 지금 바로 무료 계정을 만드십시오.

Free Okta Developer Account

Okta 대시보드

무료 계정을 생성하면 대시보드로 리디렉션됩니다. 대시보드에서 조직 URL을 확인하셨습니까? 신청서에 필요합니다. 대시보드에는 모든 활동을 보여주는 사용자 메트릭과 시스템 로그도 있습니다.

React 애플리케이션 등록

반응 애플리케이션을 등록할 시간입니다. 대시보드에서 애플리케이션 링크를 클릭합니다.

애플리케이션 추가를 클릭합니다.

단일 페이지 앱 선택

이름 필드에서 앱에 이름을 추가합니다.

이제 Base URI의 필드를 편집해야 합니다. 로컬 서버에서 create-react-app을 사용하고 있다고 가정하겠습니다.
http://localhost:3000

로그인 리디렉션 URI와 동일하고 완료를 클릭합니다.
http://localhost:3000/implicit/callback

이제 애플리케이션이 등록되었으며 클라이언트 ID를 받게 됩니다.

코드 편집기 실행

프로젝트 폴더로 이동합니다

.

필요한 패키지를 추가합니다

.
yarn add react-router-dom @okta/okta-react @okta/signin-widget
이 예제를 위해 반응 애플리케이션에 비공개 경로에 있는 것으로 간주되는 세 개의 페이지가 있고 권한이 있는 사용자만 이 경로에 액세스할 수 있다고 가정합니다.

/집
/사용자
/주문하다

로그인 구성 요소 만들기

구성 요소 폴더에 auth라는 새 폴더를 만들고 다음 코드를 사용하여 Login.js라는 새 파일을 만듭니다.

*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이라는 새 파일을 만들어야 합니다.

*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 구성 요소 내에서 개인 경로를 래핑하고 클라이언트 ID 및 발급자를 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 파일 또는 루트 파일에 로그아웃 버튼을 만들고 auth props를 사용하기 위해 withAuth 내부에 함수를 래핑하는 것을 잊지 마십시오.

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 인증을 성공적으로 통합하셨기를 바랍니다. 문제가 발생하면 아래에 댓글을 달아주세요. 나는 당신이 그것을 해결하는 데 도움이 될 것입니다.

이것은 내 첫 번째 dev.to 게시물입니다. 사실, 이것은 내 첫 번째 블로그 게시물입니다. 제 기술을 완전히 파악하지 못하셨다면 사과드립니다. 곧 새로운 소식으로 돌아오겠습니다.

고맙습니다!