ReactNativeAuth

기본 인증 앱에 반응합니다

React Native, Expo, AWS Amplify, React-Navigation 및 Native Base를 사용하여 모바일 애플리케이션을위한 완전한 사용자 인증 흐름.

개요

이 앱에 사용 된 기술은 다음과 같습니다.

• 내비게이션은 다음과 같이 수행됩니다 : React-Navigation.

• 프론트 엔드 : 엑스포.

• 레이아웃 : 네이티브베이스.

• 백엔드 : AWS 증폭.

인증 흐름

• 사용자는 환영 화면으로 이동합니다.

• 사용자는 가입, 로그인, 비밀번호 변경 요청, 화면 사이를 탐색 할 수 있습니다.

• 국제 전화 입력은 가입 화면에 포함되어 있습니다.

• 로그인 후 사용자는 홈 화면으로 리디렉션됩니다.

• 사용자는 하단 탭 네비게이터 또는 서랍 네비게이터를 사용하여 화면 사이를 탐색 할 수 있습니다.

• 사용자는 앱에서 로그 아웃 할 때까지 로그인됩니다.

전제 조건

• 엑스포 클리

  • npm install -g expo-cli

• AWS 계정

• NPM이있는 노드 JS

• AWS는 CLI를 증폭시킵니다

  • npm install -g @aws-amplify/cli
  • amplify configure (단계별 비디오의 링크).

프로젝트 구성

1. 이 저장소를 로컬 컴퓨터에 복제하십시오.

 git clone https://github.com/yhenni1989/ReactNativeAuth.git

cd ReactNativeAuth

2. AWS 증폭 프로젝트를 초기화하십시오.

 amplify init

아래와 동일한 지침을 따르십시오.

3. 사용자 자격 증명을 저장하기 위해 Amazon Cognito 사용자 풀을 구성하십시오.

 amplify add auth

# When prompt, choose: Yes, use the default configuration.

4. 프로젝트를 AWS에 배포 할 시간입니다.

 amplify push

Are you sure you want to continue? Yes

몇 분 동안 자동화 된 운영 후, Amplify CLI는 Amazon Cognito 사용자 풀 및 ID Pool을 생성하여 사용자 크레더티블얼을 저장합니다.

응용 프로그램 실행

1. 클라이언트 종속성을 설치합니다.

 yarn

# or

npm install

2. 프로젝트 디렉토리 아래에서 시뮬레이터에서 React Native 앱을 시작하십시오.

 expo start --ios

# or

expo start --android

단계별 튜토리얼

• 이 앱의 건축 과정을 자세히 설명하는 전체 기사는 여기에서 찾을 수 있습니다.

• 인증 흐름의 데모 비디오가 여기에 있습니다.