AuthUI를 사용하여 React 앱에 인증을 추가하는 방법

새로운 프로젝트를 시작할 때 로그인/가입 화면을 구현하는 데 약간의 노력이 필요합니다. 우리는 종종 동일한 구현을 반복해서 반복해야 합니다.

인증은 MVP(가장 실행 가능한 제품)를 구축하거나 사용자가 시작할 수 있도록 마찰을 제거하기 위해 간단해야 합니다.

개발 시간을 절약하려면 인증 로직을 재사용해야 합니다.

애플리케이션을 인증 API와 통합할 수 있는 몇 가지 온라인 서비스가 있습니다. 그러나 이해하기 위해 긴 문서를 검토한 다음 학습 및 통합에 더 많은 시간을 할애해야 하는 경우 실제로 많은 시간을 절약할 수 없습니다.

인증 서비스는 통합이 간단해야 합니다. 아래는 예입니다.

1단계 - 로그인 구성 요소 가져오기 및 사용

$ npm install authui-ui

import LoginBox from "authui-ui/dist/js/components/LoginBox/LoginBox";

<LoginBox accountId="MyProductName" afterSubmit={afterSubmitHandler} />

LoginBox source code 또한 사용자 정의하고 직접 사용할 수 있습니다.

2단계 - 응답 처리

사용자가 양식을 제출한 후(가입 또는 로그인) "afterSubmit"콜백 함수가 호출됩니다. 여기에서 사용자를 홈 페이지, 대시보드 등으로 리디렉션하여 응답(전체 사용자 개체)을 처리할 수 있습니다.

const afterSubmitHandler = (jwtData) => {
  if (jwtData && jwtData.email) {
    alert('jwtData: ' + JSON.stringify(jwtData))
  }
}

jwtData 앱에서 사용할 수 있는(또는 localStorage에 저장) 사용자 uuid, accessToken, 이메일, 이름, picUrl 등과 같은 속성이 있는 사용자 객체입니다.

그게 다야! 3단계는 없습니다. 다음 글에서는 작동 방식에 대해 자세히 설명하겠습니다. 그동안 아래 링크에 더 많은 정보가 있습니다.

AuthUI Repo - UI와 API 모두 오픈 소스입니다.

Live Example

제작자이거나 인증이 필요한 프로젝트가 있는 경우 시도해 보십시오. 통합하는 데 도움이 필요하면 언제든지 (Github를 통해) 연락하십시오!