Firebase 및 React로 사용자 등록

강력한 사용자 인증은 응용 프로그램 보안에 중요합니다. 이 기능을 처음부터 처음부터 구축하는 것은 시간이 많이 걸리고 복잡하여 보안 취약점의 위험을 증가시킵니다. Firebase는이 프로세스를 크게 단순화하여 사용자 ID 관리에 간소화 된 접근 방식을 제공합니다. 이 자습서는 FireBase V9의 모듈 식 API를 사용하여 사용자 등록, 확인 및 인증을 구현하는 방법을 보여줍니다.

이 튜토리얼은 React, React Hooks 및 Firebase V8에 대한 친숙 함을 가정합니다. Google 계정 및 Node.js가 설치해야합니다.

목차

• Firebase 설정
• 프로젝트 설정
• 파이어베이스 통합
• 사용자 등록
• 사용자 상태 관리 (RACT CONTEXT API)
• 이메일 확인
• 프로필 페이지
• 개인 경로 보호
• 로그인 기능
• 요약
• 추가 독서

Firebase 설정

1. Google 계정에 로그인하여 Firebase 콘솔에 액세스하십시오.
2. 새로운 Firebase 프로젝트 (예 : "Firebase-User-Reg-Auth")를 만듭니다. 이 튜토리얼의 경우 Google 웹 로그 분석을 건너 뛸 수 있습니다.
3. Firebase 콘솔 사이드 바의 인증 섹션으로 이동하십시오.
4. 이메일/암호 인증을 활성화합니다.

프로젝트 설정

스타터 저장소 복제 :

 git 클론 -B 스타터 https://github.com/tammibriggs/firebase_user_auth.git
CD FIREBASE_USER_AUTH
NPM 설치

This includes Firebase v9 in package.json . Run npm start to launch the application.

파이어베이스 통합

1. Firebase 콘솔에서 프로젝트의 웹 구성 객체를 얻으십시오.
2. Create firebase.js in your React app's src directory.
3. 필요한 모듈 가져 오기 :

 // src/firebase.js
'Firebase/App'에서 {initializeapp} 가져 오기;
'Firebase/Auth'에서 {getauth} 가져 오기;

4. FireBaseConfig 객체를 붙여 넣고 Firebase를 초기화하십시오.

 // src/firebase.js
const firebaseconfig = { / * 여기에서 구성 * /};
const app = initializeapp (firebaseconfig);
const auth = getauth (app);
내보내기 {auth};

사용자 등록

The Register.js component uses createUserWithEmailAndPassword (Firebase v9). 비밀번호 유효성 검사는 비밀번호 일치하는 것을 보장합니다. 등록 함수는 사용자 생성 및 오류 처리를 처리합니다. The form's onSubmit event triggers the registration process.

사용자 상태 관리 (RACT CONTEXT API)

An AuthContext.js file provides a context for managing user state. AuthProvider shares the user state, and useAuthValue accesses it. App.js wraps components with AuthProvider , and onAuthStateChanged updates the user state.

이메일 확인

After registration, sendEmailVerification sends a verification email. The user is redirected to a /verify-email page. This page displays the user's email and a "Resend Email" button with a 60-second cooldown using useEffect and state management to prevent rate limiting. 확인되면 사용자는 자동으로 프로필로 리디렉션됩니다.

프로필 페이지

The Profile.js component displays user email and verification status using useAuthValue . The "Sign Out" button utilizes signOut from Firebase.

개인 경로 보호

PrivateRoute.js restricts access to the profile page to verified users using Redirect . App.js 경로는 프로파일 구성 요소에 PrivateRoute 사용하도록 업데이트됩니다.

로그인 기능

The Login.js component uses signInWithEmailAndPassword . After login, it checks email verification and redirects to /verify-email if necessary, starting the 60-second countdown.

요약

이 자습서는 FireBase V9를 사용하여 React 응용 프로그램에서 안전한 사용자 인증을 구현하기위한 포괄적 인 안내서를 제공합니다. Firebase의 사용은 프로세스를 크게 단순화하여 강력하고 효율적인 솔루션을 제공합니다.

추가 독서

• Firebase 인증 문서
• 컨텍스트 API 문서를 반응합니다

위 내용은 Firebase 및 React로 사용자 등록의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!