Amplify React 인증 구성 요소 전체 설명서

몇 주 전에 제가 속한 팀인 AWS Amplify는 React, Vue, Angular에 새로운 신분 검증 구성 요소를 내놓았습니다.백엔드 인증을 사용하는 것부터 간단한 백엔드 흐름에 이르기까지 복잡한 맞춤형 설정에 이르기까지 이 구성 요소들의 기능을 빠르게 알아보고 싶습니다.

인증 사용

Amplify Studio를 먼저 사용한 다음 Amplify CLI를 통해 인증을 설정할 수 있습니다.Studio를 통해 이를 구현하는 방법을 보여 드리겠습니다.그러나 만약 이것이 당신의 업무 절차에 더 적합하다면, 여기instructions for doing so through the command line가 있습니다.
우선the Amplify Console으로 가세요.그런 다음 [새 적용]을 클릭하고 [구축 적용]을 선택합니다.그런 다음 프로젝트의 이름을 선택합니다. 예를 들어 [인증서 데모 확대]입니다.응용 프로그램을 배치한 후 "스튜디오 시작"을 누르십시오.Studio 소개 페이지에서 인증 사용 을 클릭합니다.

여기서 필요한 인증 설정을 선택하십시오.기본 설정을 사용하지만, 다중 요소 인증, 사용자로부터 원하는 다양한 속성, 소셜네트워크서비스 제공자를 포함한 다양한 로그인 메커니즘을 추가할 수 있습니다.

설정이 완료되면 배치를 클릭합니다.현재 당신은 이미 당신의 응용 프로그램에 백엔드 인증을 사용합니다!

응용 프로그램 설정

인증 구성 요소를 보여 주는 React 프로그램을 만들 것입니다.하지만 Vue와 호환되며 Angular는 더 많은 프레임워크와 호환됩니다!
새 React 애플리케이션을 만듭니다.

npx create-react-app amplify-authenticator
cd amplify-authenticator

"Studio로 돌아가서 페이지의 오른쪽 상단에 있는""배포 성공 - 다음 단계를 보려면 클릭""을 클릭하면 애플리케이션 idamplify pull 명령이 표시됩니다. 이 명령을 실행하면 백엔드와 프런트엔드가 동기화됩니다."브라우저 확인 창이 표시되면 CLI의 질문에 동의하고 대답합니다.기본값은 거의 모든 질문에 대답하기에 충분할 것입니다.
그런 다음 확대 라이브러리 및 React 구성 요소를 설치합니다.

npm i aws-amplify @aws-amplify/ui-react

텍스트 편집기에서 응용 프로그램을 열고 다음 내용을 src/index.js 파일에 추가합니다.

import Amplify from 'aws-amplify'
import config from './aws-exports'

Amplify.configure(config)

이것은 응용 프로그램에서 Amplify를 설정합니다!Amplify CSS 파일 및 AmplifyProvider 구성 요소가 추가되었습니다.

import '@aws-amplify/ui-react/styles.css'
import { AmplifyProvider } from '@aws-amplify/ui-react'

그런 다음 공급자 인스턴스를 React 응용 프로그램의 최상위 수준으로 추가합니다.

ReactDOM.render(
  <AmplifyProvider>
    <App />
  </AmplifyProvider>,
  document.getElementById('root')
)

이것은 응용 프로그램에 Amplify 기본 스타일을 추가합니다.

withAuthenticator 구성 요소

withAuthenticator 고급 구성 요소를 사용하여 응용 프로그램에 완전한 인증 흐름을 추가합니다.먼저 가져오기

import { withAuthenticator } from '@aws-amplify/ui-react'

그런 다음 포장App을 내보냅니다.

export default withAuthenticator(App)

응용 서버를 실행하면 로그인, 등록, 비밀번호 잊어버리기 등 완전한 인증 절차가 있음을 알 수 있습니다.해봐!

사용자를 만들고 로그인에 성공하면 구성 요소의 내용을 볼 수 있습니다.나의 예에서 "안녕하세요, 세계!"프로그램의 다른 페이지에서 이 흐름을 사용할 수 있습니다. 예를 들어 폼을 사용하면 누구나 로그인 페이지에 접근할 수 있지만, 인증된 사용자만 이 폼에 접근할 수 있습니다.
이 구성 요소는 자동으로 인증 설정을 감지하기 때문에 소셜네트워크서비스 공급자를 사용하면 폼에 옵션으로 표시됩니다.그러나 매개변수를 withAuthenticator에 전달하여 이러한 기본값을 무시할 수도 있습니다.예를 들어, 프로그램에 로그인을 설정하지 않아도, 다음 내용은sign-in with Apple를 표시합니다.

export default withAuthenticator(App, {
  socialProviders: ['apple']
})

로그아웃 추가 및 사용자 정보 표시

로그아웃을 응용 프로그램에 추가하고 홈 페이지에 사용자를 표시합니다.검증기 구성 요소는 signOut 함수와 user 대상을 우리의 구성 요소에 전달하기 때문에 우리는 그것들을 분해하여 우리의 응용 프로그램에서 사용할 수 있습니다!예를 들면 다음과 같습니다.

function App({ signOut, user }) {
  return (
    <div>
      <h1>Hey, {user.attributes.email}</h1>
      <button onClick={signOut}>Sign out</button>
    </div>
  )
}

인증서를 사용하여 흐름 사용자 정의

Authenticator 구성 요소를 사용하면 흐름, 필드, 텍스트 등을 더욱 사용자 정의할 수 있습니다.텍스트를 전 세계적으로 필요에 따라 표시할 수 있도록 국제화도 추가할 수 있습니다.
전화번호full documentation to learn more입니다.

사용자 인터페이스에 테마 추가하기

인증서 구성 요소에 테마를 추가할 수도 있습니다.CSS 변수, JavaScript 객체 또는 디자인 태그를 사용하여 수행할 수 있습니다.JavaScript 객체를 만들려고 합니다.

const theme = {
  name: 'pretty-princess',
  tokens: {
    colors: {
      background: {
        primary: { value: 'hotpink' }
      }
    }
  }
}

그리고 아이템으로 전달AmplifyProvider

<AmplifyProvider theme={theme}>

지금, 나의 조립품은 핫핑크이다!

Learn more about theming 파일에 있습니다.

결론

가서 the Amplify Console 응용 프로그램을 만들기 위해서 무엇을 만들었는지 보고 싶습니다.피드백이 있으면 언제든지 연락 join our Discord 하거나 남겨 주십시오 GitHub Issue.