React Native에서 Firebase를 사용한 이메일 암호 확인

이 강좌에서, 우리는 비 로컬 응용 프로그램에서Firebase의 인증 모듈을 사용하여 사용자의 전자메일과 비밀번호를 인증하는 방법을 배울 것이다.
Firebase에 대한 자세한 내용은 this link를 참조하십시오.

선결 조건
이 자습서는 React 및 React Native에 대한 기본 지식을 소개하지 않습니다.만약 기초 지식에 만족하지 않는다면, 이것은 helpful tutorial이다.

개술
이 문서에서는 다음 단계를 설명합니다.

개발 환경.

클론 시작 코드.

Firebase 프로젝트를 만듭니다.

Firebase 인증을 설정합니다.

계정을 생성합니다.

기존 계정에 로그인합니다.

인증 화면.

로그아웃.

개요.

개발 환경

IMPORTANT - We will not be using Expo in our project.

this documentation 에 따라 환경을 설정하고 새 React 프로그램을 만들 수 있습니다.

Make sure you're following the React Native CLI Quickstart, not the Expo CLI Quickstart.

클론 시작 코드
인증 모듈에 더 많은 관심을 가지려면 GitHub에서 이 repository 복제 시작 코드를 사용할 수 있습니다.저장소README의 지침을 따릅니다.
마지막 코드에 관해서는 이것GitHub Repository을 보실 수 있습니다.
이것은 응용 프로그램의 폴더 구조가 될 것입니다.

나는 screens/ 디렉토리에 두 개의 스크린을 설정했습니다.

인증.js: 로그인하거나 계정을 만드는 데 사용되는 화면입니다.

인증js: 사용자가 로그인해야만 볼 수 있는 화면입니다.

응용 프로그램에서js, 인증 화면이 내보내집니다.코드를 작성할 때, 우리는 사용자에 대한 신분 검증을 한 후, 신분 검증을 거친 화면을 조건부로 표시할 것입니다.

Firebase 프로젝트 작성
Firebase console로 이동하여 계정에 로그인하십시오.
새 프로젝트를 만듭니다.

새 항목을 만들면 대시보드가 표시됩니다.

이제 안드로이드 아이콘을 누르면Firebase 프로젝트에 안드로이드 프로그램을 추가합니다.

프로그램을 등록하려면 프로그램의 패키지 이름이 필요합니다.AndroidManifest.xml 의 android/app/src/main/ 에서 가방 이름을 찾을 수 있습니다.

이제 다음 단계를 진행하면 google-services.json 파일을 다운로드할 수 있습니다.이 파일을 android/app 디렉토리에 두어야 합니다.
이 파일은 프로그램이 Firebase 서비스에 접근할 수 있도록 하는 설정을 포함합니다.

파일을 추가한 후 다음 단계를 계속합니다.이것은 build.gradle 파일에 설정을 추가해야 합니다.
먼저 google-services 플러그인을 android/build.gradle 파일에 종속 항목으로 추가합니다.

buildscript {
  dependencies {
    // ... other dependencies

    classpath 'com.google.gms:google-services:4.3.3'
  }
}

그런 다음 android/app/build.gradle 파일에 다음 항목을 추가하여 플러그인을 실행합니다.

apply plugin: 'com.android.application'
apply plugin: 'com.google.gms.google-services'

Firebase에 대해 iOS를 구성하려면 몇 가지 추가 절차가 필요합니다.this documentation에 따라 설치합니다.
Firebase 설정을 완료하려면 애플리케이션에 @react-native-firebase/app 패키지를 설치해야 합니다.

npm install @react-native-firebase/app

Firebase 인증 설정
대시보드의 인증 섹션으로 이동하여 Get Started 버튼을 클릭합니다.프로젝트에서 인증 모듈을 사용합니다.

다음에 로그인 방법에서 전자메일/비밀번호 인증을 사용해야 합니다.활성화되면 Save를 누릅니다.

응용 프로그램에 @react-native-firebase/auth 패키지를 설치합니다.

npm install @react-native-firebase/auth

Firebase Android BoM 성명android/app/build.gradle 파일에서 인증 모듈의 의존 관계를 사용합니다

dependencies {
    // Add these lines
    implementation platform('com.google.firebase:firebase-bom:26.3.0')
    implementation 'com.google.firebase:firebase-auth'
}

이렇게 하면 Firebase 인증 모듈을 우리 프로그램에서 설정할 수 있습니다.

사용자 계정 만들기
Firebaseauth 모듈에는 createUserWithEmailAndPassword라는 함수가 있는데, 응용 프로그램에 새 사용자를 만들고 전자메일과 비밀번호를 제공하는 데 도움을 줄 것이다.
예를 들면 다음과 같습니다.

auth().createUserWithEmailAndPassword('[email protected]', 'helloworld123');

Firebase 응용 프로그램에서 새 사용자, 이메일 ID[email protected]와 해당 암호를 생성합니다.동일한 응용 프로그램의 두 사용자는 동일한 전자 메일 ID를 가질 수 없습니다.
이 기능은 사용자 계정을 만든 후에 사용자를 응용 프로그램에 로그인합니다.
응용 프로그램에서js, auth 모듈을 가져오겠습니다.

import auth from '@react-native-firebase/auth';

전자 우편과 비밀번호를 받아들이고 createUserWithEmailAndPassword 새 사용자를 만들기 위한 함수를 작성합시다.createUserWithEmailAndPassword는 비동기 함수다.

const createUser = (email, password) => {
  try {
    auth().createUserWithEmailAndPassword(email, password);
  } catch (error) {
    alert(error);
  }
};

이제 이 함수를 인증 화면에 전달합시다.

return <Authentication createUser={createUser} />;

사용자가 생성 단추를 눌렀을 때, 우리는 이 함수를 호출해야 한다.우리는 이 함수를 호출할 때 전자메일과 비밀번호를 상태에서 이 함수로 전달해야 한다.

<Button title="Create" onPress={() => props.createUser(email, password)} />

이제 사용자가 이 버튼을 누르면 전자 우편과 비밀번호 호출 createUserWithEmailAndPassword 을 사용하여Firebase 프로그램에 새 사용자를 만들 것입니다.오류가 발생하면 alert()를 사용하여 사용자에게 표시합니다.
사용자 계정이 생성되면 그/그녀도 응용 프로그램에 로그인할 것이다.사용자가 인증을 받았는지 추적하기 위해서, 상태를 만들고 초기 값을false로 설정합니다.

const [authenticated, setAuthenticated] = useState(false);

사용자의 인증 상태가 응용 프로그램에서 변경될 때마다 onAuthStateChanged 이벤트를 터치합니다.
이 탐지기에 이벤트 처리 프로그램을 설정할 수 있습니다.이 프로세서는 user 대상을 받을 것입니다.user 객체가 null인 경우 사용자가 로그아웃되었음을 나타내고 그렇지 않으면 사용자가 로그인되었음을 나타냅니다.authenticated 대상이 true 프로세서에 없으면 user 상태를 null로 설정합니다.

auth().onAuthStateChanged((user) => {
  if(user) {
    setAutheticated(true);
  }
})

현재 사용자가 프로그램에서 인증을 거치면 인증 화면으로 돌아갑니다.

if (authenticated) {
  return <Authenticated />;
}

return <Authentication createUser={createUser} />;

로그인 사용자
FirebaseonAuthStateChanged 모듈에는 auth라는 함수가 있는데, 이 함수는 전자메일과 비밀번호로 사용자를 프로그램에 로그인시킨다.
예를 들어 e-메일 ID를 사용하여 응용 프로그램에 사용자를 로그인합니다.

auth().signInWithEmailAndPassword('[email protected]', 'helloworld123');

전자 우편과 비밀번호를 받아들이고 signInWithEmailAndPassword 로그인 사용자를 호출하는 함수를 만듭니다.signInWithEmailAndPassword는 비동기 함수다.

const signin = (email, password) => {
  try {
    auth().signInWithEmailAndPassword(email, password);
  } catch (error) {
    alert(error);
  }
};

이제 이 함수를 인증 화면에 전달합시다.

return <Authentication signin={signin} createUser={createUser} />;

사용자가 로그인 단추를 눌렀을 때, 우리는 이 함수를 호출해야 한다.우리는 이 함수를 호출할 때 전자메일과 비밀번호를 상태에서 이 함수로 전달해야 한다.

<Button title="signin" onPress={() => props.signin(email, password)} />

현재 사용자가 로그인 단추를 눌렀을 때 전자메일과 비밀번호 호출 signInWithEmailAndPassword 을 사용하여 사용자가 프로그램에 들어갈 수 있도록 합니다.오류가 발생하면 signInWithEmailAndPassword를 사용하여 사용자에게 표시합니다.


출석
우리는 auth 모듈의 alert() 방법을 사용하여 프로그램에서 사용자를 로그아웃해야 한다.
인증 방식으로 signOut 모듈을 가져옵니다.js.

import auth from '@react-native-firebase/auth';

사용자가 로그아웃 단추를 눌렀을 때 auth 방법을 사용하도록 하겠습니다.

<Button title="Signout" onPress={() => auth().signOut()} />

현재, 사용자가 단추를 눌렀을 때,auth 모듈은 사용자를 프로그램에서 로그아웃합니다.이것은 탐지기 signOut 를 촉발할 것이다.처리 프로그램은 onAuthStateChanged 대상이 아니라 null 대상을 받을 것이다.
따라서 user를 받으면 인증 상태를 false로 설정해야 합니다.

auth().onAuthStateChanged((user) => {
  if(user) {
    setAuthenticated(true);
  } else {
    setAuthenticated(false);
  }
})

한번 되돌아보도록 하겠습니다.

우리는 개발 환경을 설정하고 React 원본 응용 프로그램을 만들었다.

Firebase 프로젝트를 만들었습니다.

프로젝트에 인증 모듈을 설정하고 이메일/비밀번호 인증을 활성화했습니다.

우리는 시작 코드를 복제했다.

의존항을 null 파일에 추가합니다.

모듈의 build.gradle 방법으로 새 사용자를 만드는 함수를 추가했습니다.

사용자의 인증 상태를 추적하고 createUserWithEmailAndPassword 프로세서로 상태를 업데이트하는 상태를 만들었습니다.

우리는 함수를 추가하여 auth 모듈의 onAuthStateChanged 방법으로 사용자에게 로그인했다.

검증된 화면에서 사용자를 응용 프로그램에서 로그오프하는 signInWithEmailAndPassword 모듈을 사용합니다.

축하해,🥳 해냈어.
읽어주셔서 감사합니다!