PROGRAMING/FULL STACK

[Auth] Firebase Auth

donghunl 2024. 3. 23. 09:46
반응형

지금까지 블로그에 데이터베이스를 연결했습니다. 다음으로 할 일은 블로그에 기본 사용자 인증을 추가하는 작업입니다.

코드로 사용자 인증을 넣을수도 있지만 많은 양의 노력이 필요하므로 여기서는 구글의 Firebase Auth로 인증작업을 진행합니다. Firebase Auth는 기본적으로 모든 사용자의 정보와 비밀번호를 매우 안전한 방식으로 저장하는 서비스입니다. 이것을 사용함으로써 Google의 보안정책에 편승할수 있으며 구글 서비스를 사용하는데에 제한사항이 줄어들게 될것입니다.

 

그럼 지금부터 Firebase Auth에서 프로젝트를 생성하여 사용자 관리를 해보고 나중에 블로그에 연결하도록 하겠습니다.

프로젝트를 만들기 위에 다음 URL로 접속을 합니다.

http://console.firebase.google.com 

 

로그인 - Google 계정

이메일 또는 휴대전화

accounts.google.com

먼저 구글 Account가 없으면 구글 계정을 만들어야 합니다. 계정을 만들어야 할경우 여기에 나오지 않는 설정을 좀 더 해야할수도 있지만 그리 어려운 설정이 아닙니다. 계정을 만들고 로그인을 하면 다음과 같은 화면이 나옵니다.

여기서 Create a project 버튼을 클릭합니다.

프로젝트 이름을 정하면 프로젝트 ID를 자동으로 생성해주고 약관과 사용목적에 동의한후 Continue를 진행합니다.

여기서는 프로젝트 이름을 My React Blog라 지정했습니다.

다음으로 구글 분석을 사용할것이라고 묻는 화면이 나오는데 여기서는 간단한 인증만을 사용할 예정이므로 여기서는 비활성화 시키고 진행합니다. Create project 버튼 클릭으로 진행합니다.

다음과 같이 프로젝트 생성 로딩화면이 표시됩니다.

자 이제 Firebase Auth 프로젝트가 준비가 되었습니다. 다음으로는 콘솔화면이  보이고 여기서는 인증을 사용할 예정이므로 왼쪽 메뉴의 Build 메뉴를 클릭하고 Authentication메뉴를 클릭합니다.

Authentication 화면이 보이고 중간에 Get started 버튼 클릭으로 진행합니다.

사인을 어떻게 할것인가를 묻는 화면이 나타납니다. 여러가지 옵션이 있지만 여기서는 제일 단순한 방법으로 진행하기 위해 이메일 비밀번호 인증을 사용합니다.

이메일 비밀번호 인증을 사용할것이므로 Enable 시키고 Save 버튼으로 진행합니다.

이메일/비밀번호 인증이 활성화 되고 사용자 인증을 추가할수 있는 Add new provider버튼이 보입니다.

이제 사용자를 등록하기 위해 Users 탭으로 이동하면 User를 새로 생성할수 있는 화면이 보입니다. Add user 버튼으로 사용자를 새로 등록합니다.

여기서는 블로그에 로그인 하는데 사용할수 있는 테스트 사용자를 만들기 때문에 실제 존재하지 않는 이메일을 사용해도 됩니다. 다만 비밀번호는 Firebase 인증에서는 볼수 없기 때문에 잊어먹지 않도록 다른 곳에 적어두는것이 좋습니다.

여기는 간단하게 myreactblog@gmail.com/Abcd123! 라는 테스트 사용자를 생성하겠습니다.

자! 마침내 이제 사용자가 생성 되었습니다.

반응형