React Native에서 Firebase를 사용한 이메일 암호 확인
18596 단어 javascriptreactnativefirebase
Firebase에 대한 자세한 내용은 this link를 참조하십시오.
선결 조건
이 자습서는 React 및 React Native에 대한 기본 지식을 소개하지 않습니다.만약 기초 지식에 만족하지 않는다면, 이것은 helpful tutorial이다.
개술
이 문서에서는 다음 단계를 설명합니다.
개발 환경
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, 인증 화면이 내보내집니다.코드를 작성할 때, 우리는 사용자에 대한 신분 검증을 한 후, 신분 검증을 거친 화면을 조건부로 표시할 것입니다.
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 인증 모듈을 우리 프로그램에서 설정할 수 있습니다.사용자 계정 만들기
Firebase
auth
모듈에는 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} />;
로그인 사용자
Firebase
onAuthStateChanged
모듈에는 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);
}
})
한번 되돌아보도록 하겠습니다.
null
파일에 추가합니다.build.gradle
방법으로 새 사용자를 만드는 함수를 추가했습니다.createUserWithEmailAndPassword
프로세서로 상태를 업데이트하는 상태를 만들었습니다.auth
모듈의 onAuthStateChanged
방법으로 사용자에게 로그인했다.signInWithEmailAndPassword
모듈을 사용합니다.읽어주셔서 감사합니다!
Reference
이 문제에 관하여(React Native에서 Firebase를 사용한 이메일 암호 확인), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/zolomohan/react-native-firebase-email-password-authentication-3889텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)