×
Outbyte PC Repair
Outbyte Driver Updater

Auth0 인증 서비스를 React 애플리케이션과 통합하는 방법

2023/01/31
Auth0 인증 서비스를 React 애플리케이션과 통합하는 방법

Auth0은 웹 앱에서 사용자 ID를 설정하는 프로세스를 단순화합니다. API를 통해 안전하고 사용자 정의 가능한 인증 및 권한 부여 기능을 제공합니다. 이를 사용하면 처음부터 자체 인증 시스템을 구축하는 것에 대해 걱정할 필요가 없습니다.

Auth0과 통합하면 React 애플리케이션에 신뢰할 수 있는 인증을 쉽게 포함하고 앱에 대한 보안 액세스를 보장할 수 있습니다.

다음 단계에서는 Auth0을 React 애플리케이션에 통합하는 데 필요한 사항을 설명합니다.

Auth0이란 무엇입니까?

Auth0은 앱에서 사용자 인증 및 승인을 처리하는 보안 API를 제공하는 웹 서비스입니다.

React 애플리케이션에 쉽게 통합할 수 있는 사용자 지정 가능한 인증 시스템을 제공합니다. Auth0을 앱에 연결하면 나머지 인증 워크로드를 처리합니다.

로그인 페이지가 삼성 장치에 표시됩니다.

Auth0은 어떻게 작동합니까?

Auth0은 인증 흐름을 구현하는 범용 로그인 기능을 제공합니다. 사용자가 로그인을 원할 때마다 API는 사용자를 Auth0 로그인 페이지로 리디렉션하고 인증을 받은 다음 성공적인 인증 페이로드 데이터를 앱으로 전송합니다.

다양한 로그인 방법을 정의하여 앱의 인증 워크플로를 사용자 지정할 수 있습니다. 범용 로그인은 기본 인증으로 사용자 이름과 비밀번호를 제공하지만 Google과 같은 제공업체를 통한 소셜 로그인 및 다단계 인증과 같은 다른 옵션을 추가할 수도 있습니다.

이 유형의 인증을 사용하면 보안 인증 시스템을 만드는 데 일반적으로 사용되는 OAuth 2.0 또는 OpenID Connect와 같은 ID 프로토콜에 익숙하지 않아도 된다는 장점이 있습니다.

Auth0 개발자 콘솔에서 새 프로젝트 만들기

시작하려면 먼저 Auth0 계정에 가입해야 합니다. 가입 후 대시보드로 이동하여 애플리케이션 생성 을 클릭 하여 인증 프로젝트 설정을 구성합니다.

Auth0은 구축 중인 애플리케이션 유형에 따라 다양한 인증 구성을 제공합니다. 이 자습서에서는 애플리케이션 이름 을 입력하고 단일 페이지 웹 애플리케이션 을 선택한 다음 저장 을 클릭합니다 .

Auth0 새 애플리케이션 설정 팝업창,

다음 으로 Auth0에서 지원하는 기술 목록에서 React 를 선택합니다.

Auth0에서 지원하는 웹 개발 기술 목록

애플리케이션의 URI 구성

애플리케이션을 만들고 필요한 설정을 구성한 후 애플리케이션의 대시보드에서 설정 탭을 클릭하여 필수 URI 속성을 설정합니다.

Auth0 애플리케이션 대시보드

다음 속성을 설정합니다.

  • 허용된 콜백 URL . 사용자 인증 후 Auth0 서버가 호출할 URL입니다.
  • 허용된 로그아웃 URL . 사용자가 로그아웃할 때 Auth0이 사용자를 리디렉션할 URL입니다.
    콜백 및 로그아웃 URL에 대한 Auth0 애플리케이션 URI의 설정 섹션
  • 허용된 웹 출처 . 승인 요청이 올 수 있는 허용된 URL입니다.

URL 입력을 마치면 설정 페이지 하단의 변경 사항 저장 을 클릭하십시오.

선호하는 소셜 로그인 공급자 설정

Auth0의 애플리케이션 대시보드 왼쪽 메뉴 창에서 인증 을 클릭한 다음 소셜 을 선택 합니다. 그런 다음 소셜 연결 설정 페이지에서 연결 만들기 버튼을 클릭합니다.

Auth0 새 소셜 로그인 공급자 설정 페이지.

마지막으로 선호하는 소셜 로그인 공급자를 선택하고 추가합니다.

Auth0의 지원되는 소셜 로그인 공급자 목록

React 앱에 Auth0 구성

로그인 및 성공 구성 요소를 구축하여 Auth0 인증 서비스를 React 애플리케이션에 통합합니다.

1. React 애플리케이션 생성 및 ENV 파일 설정

React 애플리케이션을 만든 다음 코드 편집기에서 프로젝트 폴더를 엽니다. 다음으로 프로젝트 폴더의 루트 디렉터리에서 환경 변수(도메인 이름 및 클라이언트 ID)를 저장할 ENV 파일을 만듭니다. 애플리케이션의 대시보드에서 Auth0 계정에 로그인하고 도메인 이름과 클라이언트 ID를 복사하여 다음과 같이 ENV 파일에 저장합니다.

REACT_APP_AUTH0_DOMAIN= your domain name
REACT_APP_AUTH0_CLIENT_ID= your client ID

2. 필수 패키지 설치

터미널에서 이 명령을 실행하여 필요한 종속성을 설치합니다.

npm install @auth0/auth0-react

3. Auth0 공급자로 앱 구성 요소 래핑

Auth0 공급자는 React Context를 사용합니다. 이렇게 하면 앱 구성 요소 내에서 모든 속성에 액세스할 수 있습니다. Auth0 공급자는 클라이언트 도메인, 클라이언트 ID 및 리디렉션 URI의 세 가지 매개 변수를 사용합니다.

index.js 파일을 열고 템플릿 React 코드를 삭제하고 아래 코드를 추가합니다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import{Auth0Provider} from '@auth0/auth0-react';

const root = ReactDOM.createRoot(document.getElementById('root'));


root.render(
  <Auth0Provider
     domain = {process.env.REACT_APP_AUTH0_DOMAIN}
     clientId = {process.env.REACT_APP_AUTH0_CLIENT_ID}
     redirectUri = {window.location.origin}
  >
    <App />
  </Auth0Provider>, document.getElementById('root')
);

4. 로그인 페이지 구성 요소 생성

React 애플리케이션의 /src 디렉토리에 새 폴더를 만들고 페이지 이름을 지정합니다. 이 폴더 안에 Login.js 및 Success.js라는 두 개의 파일을 만듭니다.

login.js 파일을 열고 아래 코드를 추가합니다. 로그인 페이지 구성 요소는 로그인 버튼을 렌더링합니다.

import React from 'react'
import { useAuth0 } from '@auth0/auth0-react';

const Login = () => {
    const { loginWithRedirect, isAuthenticated } = useAuth0();

    return (isAuthenticated || (
      <button onClick={() => loginWithRedirect()}> Log In</button>
    ))
}

export default Login

기본적으로 Auth0은 인증 방법으로 이메일과 비밀번호를 제공합니다. 또한 선택한 소셜 로그인 공급자에 따라 Auth0에 공급자의 로그인 옵션도 표시됩니다.

5. 성공 페이지 구성 요소 만들기

이 구성 요소는 인증된 사용자의 프로필과 로그아웃 버튼이라는 두 가지 주요 기능을 렌더링합니다.

Success.js 파일에 아래 코드를 추가합니다.

import React from 'react'
import { useAuth0 } from '@auth0/auth0-react'

const Success = () => {
    const { user, logout, isAuthenticated } = useAuth0();

    return (isAuthenticated && (
        <div>
            <h1>User Profile</h1>
            <img src={user.picture} alt={user.name} />
            <h2>{user.name}</h2>
            <p>{user.email}</p>
            <button onClick={() => logout()}> Log Out</button>
        </div>
    ))
}

export default Success

로그인하고 Auth0에 의해 인증되면 Auth0은 사용자를 다시 앱으로 리디렉션하고 사용자 세부 정보가 포함된 페이로드 데이터를 앱으로 보냅니다. 앱 내에서 이 데이터를 사용하여 사용자 정의 사용자 프로필을 구축하고 사용자 세션을 관리할 수 있습니다. UseAuth 후크의 User 속성을 사용하면 특정 사용자 데이터에 액세스할 수 있습니다.

UseAuth0 후크는 구성 요소를 조건부로 렌더링할 수 있는 isAuthenticated라는 속성도 제공합니다. 사용자가 인증되면 코드는 프로필 세부 정보를 렌더링하고 로그아웃 버튼 구성 요소를 표시합니다.

반대로 그렇지 않은 경우 로그인 버튼 구성 요소를 렌더링합니다. 즉, 이 속성이 이 프로세스를 자동으로 관리하므로 사용자의 인증 상태에 따라 경로를 지정할 필요가 없습니다. Auth0은 로그인 및 로그아웃 논리를 모두 정의하므로 인증 기능을 보다 쉽게 ​​구현할 수 있습니다.

Auth0 인증 서비스를 사용해 볼 가치가 있습니까?

Auth0은 앱의 인증 요구 사항을 처리하는 즉시 사용 가능한 솔루션을 제공합니다. 또한 Auth0 서비스는 웹, 모바일 및 기본 개발 플랫폼에 대한 지원을 제공하여 인증 시스템을 선호하는 기술 스택과 쉽게 통합할 수 있습니다.

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다