Firebase Auth란 손쉽게 사용자 인증을 구현할 수 있도록 돕는 Firebase의 서비스입니다.
이메일과 비밀번호 인증, 소셜 미디어 인증, 전화번호 인증같은 기능들을 제공합니다.
인증 정보를 안전하게 저장하고 인증 정보 변경시 실시간으로 앱에 업데이트를 해줍니다.
인증 이메일 전송이나 비밀번호 재설정 이메일 전송 등의 기능도 제공합니다.
Firebase Auth의 장점
- 복잡한 인증 과정을 Firebase가 대신 처리
- 클라이언트 사이드 개발에만 집중할 수 있음
- OAuth와 OpenID Connect 지원
- 각종 소셜 미디어 계정 이용한 인증 쉽게 구현 가능
- 사용자의 비밀번호를 안전하게 암호화
- HTTPS 이용해 데이터 전송 보안
사용 방법
Firebase 계정 생성 후 로그인을 합니다. 웹을 선택하고 원하는 프로젝트 명으로 프로젝트를 만들어 줍니다.
생성된 프로젝트를 클릭하시면 하단과 같은 모습으로 화면이 보여집니다.
Authentication을 클릭하면 아래와 같은 화면이 보여집니다.
Firebase를 이용하여 회원가입을 하면 사용자 탭에 사용자 정보가 등록되어 확인 할 수 있습니다.
로그인 방법 탭에서는 다양한 로그인 방법을 추가할 수 있습니다.
템플릿 탭에서는 기본으로 주어지는 템플릿외에 수정이 가능하고 여러가지 인증을 설정할 수 있습니다.
사용량 탭에서는 활성 사용자 수 분석내용을 볼 수 있습니다.
더 자세한 내용은 Firebase Google Docs에서 확인 가능합니다.
Firebase
프로젝트 세팅
프로젝트에 세팅하는 방법입니다.
우선 firebaseApp.ts 파일을 생성하여 아래와 같이 설정해 줍니다.
아래의 내용은 프로젝트 생성할 때 제공해주는 SDK 설정 코드를 가져와 env 파일에 중요 정보들을 넣고 가져온 내용입니다.
아래는 회원가입 코드 예시입니다.
createUserWithEmailAndPassword 를 사용하여 이메일 회원가입을 할 수 있도록 합니다.
회원가입에 성공하면 아래와 같이 사용자 정보가 Firebase 데이터 베이스에 들어오게 됩니다.
사용자 정보는 관리자도구의 어플리케이션 탭 - 인덱스 DB - 파이어베이스 로컬스토리지에서도 확인 가능합니다.
아래는 Firebase 로그인 구현 예시 코드입니다.
signInWithEmailAndPassword 를 사용하여 로그인을 처리할 수 있습니다
onAuthStateChanged란 Firebase Authentication 서비스에서 제공하는 메서드입니다.
인증 상태가 변경될 때마다 호출되는 리스너 설정으로 로그인하거나 로그아웃 할 때 사용됩니다.
사용자 객체를 인자로 받는 콜백 함수를 등록하여 사용자의 로그인 상태를 실시간으로 확인 후 적절한 작업을 수행할 수 있습니다.
로그인 상태일 때는 사용자의 정보를 아니라면 null을 리턴합니다.
아래는 로그아웃 처리 예시 코드입니다.
마찬가지로 Firebase에서 제공되는 signOut 기능을 사용해 로그아웃을 쉽게 처리해 줄 수 있습니다.
