정보실

웹학교

정보실

Reactjs 첫 React 앱 인증 (Auth0 사용)

본문

Auth0의 새로운 SPA SDK, React Context 및 React Hooks를 사용하여 React 앱을 인증하는 방법에 대해 알아보십시오.


https://auth0.com/blog/authenticating-your-first-react-app/ 


Auth0은 인증을 애플리케이션에 통합하기 위한 많은 도구를 제공합니다. 

과거에 JavaScript 앱을 빌드 할 때 Auth0은 auth0.js 라이브러리를 사용하는 것이 좋습니다. 

최근 Auth0은 단일 페이지 앱 (SPA)의 인증에 사용할 수 있도록 새로운 업그레이드 라이브러리를 만들었습니다. 

이 새로운 라이브러리는 2019 년 7 월 2 일에 릴리스되었으며 Auth0 단일 페이지 앱 SDK라고 합니다.


이 자습서에서는 이 Auth0 SPA SDK를 널리 사용되는 JavaScript 라이브러리인 React와 통합합니다. 

우리는 React Context and Hooks를 사용하여 그것을 만들 것입니다.


우리가 만들 것 


다음과 같은 작업을 수행 할 수 있는 React 애플리케이션을 구축 할 것입니다.

  • Auth0을 사용하여 이메일 또는 소셜 (Facebook, Twitter, Google 등)을 통해 로그인하십시오.
  • 사용자 데이터 가져 오기
  • 인증 액세스 토큰을 가져와 API 호출
  • React Router를 사용하여 애플리케이션 일부 보호

이 자습서가 끝날 때 가장 중요한 기능은 상태 관리를 위한 컨텍스트입니다. 이를 통해 모든 앱에서 Auth0 React 인증을 위한 견고한 기반을 갖추게 됩니다.


여기서 GitHub 저장소를 찾을 수 있습니다. 이 데모 앱을 인증 된 React 애플리케이션의 기초로 자유롭게 사용하십시오.


Auth0 SPA SDK의 특징 


Auth0 SPA SDK는 SPA에 특화된 라이브러리입니다. auth0.js 라이브러리보다 많은 이점을 제공합니다.

  • SPA 사용 대상
  • 단일 페이지 앱에 필요한 코드가 더 적습니다.
  • 작은 크기! ~ 7kb에 들어옵니다
  • 토큰 만료 및 갱신을 자동으로 관리

최종 사용자를 위한 인증 흐름 


최종 사용자의 경험은 어떻습니까? Auth0 SPA SDK를 사용하므로 Auth0의 범용 로그인을 사용하게 됩니다.

  1. 사용자가 로그인을 클릭
  2. 사용자는 Auth0 로그인 페이지를 보고 자격 증명을 입력합니다
  3. Auth0은 사용자를 응용 프로그램으로 리디렉션 합니다
  4. 앱은 Auth0에서 사용자 정보를 가져옵니다.
  5. 사용자가 인증 된 경우 앱의 일부 표시 및 숨기기

Auth0의 범용 로그인을 사용하면 Auth0 페이지에서 모든 인증이 수행된다는 이점이 있습니다. 따라서 로그인 디자인에 대해 걱정할 필요가 없습니다.


인증 된 React 앱 시작 


완전히 새로운 React 애플리케이션을 만들어 봅시다 :


npx create-react-app auth0-react-app 


참고 : npx는 일회성 npm 명령을 실행할 수 있는 도구입니다. 최신 버전의 create-react-app를 가져옵니다. 

npx는 npm v5.1 이상에서만 사용할 수 있습니다.


프로젝트 실행으로 이동하려면 :


cd auth0-react-app 


우리는 새로운 React 앱을 가지고 있습니다! 선택한 코드 편집기에서 열어 보겠습니다.


우리 앱의 빠른 스타일 


이 자습서에서는 CSS 프레임 워크인 Bulma를 가져옵니다. 깔끔한 스타일을 추가하는 간단한 방법입니다.


# with npm npm install --save bulma # with yarn yarn add bulma 


설치가 완료되면 (시간이 걸릴 수 있음) src/App.js로 이동하여 Bulma 스타일을 추가하겠습니다. 가져 오기 'bulma/css/bulma.css'를 사용하여 CSS를 추가하겠습니다. 또한 React가 이 파일에 추가한 상용구를 제거 할 것입니다.


App.css 및 logo.svg 파일을 삭제할 수 있습니다. 이 자습서에서는 사용되지 않습니다.


우리는 약간의 클래스를 추가하여 앱의 스타일을 조금 보여줄 것입니다. 우리는 Bulma의 Hero 스타일을 사용하고 있습니다.


// src/App.js import React from 'react'; import 'bulma/css/bulma.css'; function App() { return ( <div className="hero is-info is-fullheight"> <div className="hero-body"> <div className="container has-text-centered"> my app goes here! </div> </div> </div> ); } export default App; 



npm start로 응용 프로그램을 시작하면 http://localhost:3000에서 응용 프로그램을 볼 수 있습니다.


이제 브라우저 창에서 "내 앱이 여기에 간다!"라는 메시지가 나타납니다. 파란색 배경으로!


다음 단계로 넘어 가서 Auth0 SPA SDK를 사용하여 React 앱의 인증 통합 작업을 시작하십시오!


React와 함께 Auth0 SPA SDK를 사용하는 방법 


다음은 Auth0 SPA SDK를 React와 통합하는 데 필요한 단계에 대한 개요입니다. 이러한 단계를 모든 React 애플리케이션으로 가져올 수 있습니다. 샘플 React 애플리케이션을 빌드 할 때 이 학습서에서 이 모든 단계를 수행합니다.

  1. Auth0 계정을 구성
  2. Auth0 SPA SDK를 설치하십시오. npm install @ auth0 / auth0-spa-js
  3. React에 추가하십시오 (React Context 및 React Hooks를 사용합니다)
    -, Auth0 SPA SDK를 초기화하십시오. createAuth0Client()
    -, 라이브러리를 사용하여 로그인하십시오. auth0Client.loginWithRedirect()
    -, 로그인 한 사용자 가져 오기 : auth0Client.getUser()
    -, 사용자가 인증되었는지 확인하십시오. auth0Client.isAuthenticated()
    -, 인증 토큰을 가져옵니다. auth0Client.getTokenSilently()
  4. React 컴포넌트에 인증 데이터 표시


Auth0 계정 구성 


Auth0 대시 보드로 갑니다. 도착하려면 Auth0 계정을 만들거나 계정에 로그인해야 합니다. 대시 보드에 있으면 CREATE APPLICATION 버튼을 누르십시오. 앱 이름을 지정하고 (예 : React SPA SDK Demo) 단일 페이지 웹 애플리케이션을 선택하십시오. 완료되면 CREATE를 누르십시오.


Auth0 Create Application View 

그런 다음 설정 탭을 눌러 응용 프로그램에 필요한 모든 정보를 볼 수 있습니다.


"도메인"및 "클라이언트 ID"를 기록하십시오. 우리는 이것들이 곧 필요할 것입니다!


아래로 스크롤 하면 다음 필드가 나타납니다.

  • Callback URL
  • Allowed Web Origins
  • Logout URLs

각각의 React 앱은 개발 중인 해당 URL에서 작동하므로 http://localhost:3000으로 설정해야 합니다. 해당 값을 세 지점에 입력 한 후에는 페이지 하단에서 변경 사항 저장을 눌러야 합니다.


참고 : 프로덕션으로 이동할 때는 여기에 올바른 URL을 추가하십시오.


이제 애플리케이션 자격 증명이 있고 콜백 URL을 구성 했으므로 코드로 돌아가서 Auth0 SPA SDK를 React에 추가 할 수 있습니다.




  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 20회 ]  작성일19-12-05 18:27

웹학교