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.xmlandroid/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 모듈을 사용합니다.
  • 축하해,🥳 해냈어.
    읽어주셔서 감사합니다!

    좋은 웹페이지 즐겨찾기