Firebase를 이용한 인증

 

프로젝트를 마무리 하면서 코드 회고를 할 필요성을 느꼈다.

React와 Firebase를 통해 인증을 구현하였다.

 

Firebase는 인증 API가 잘 만들어져 있어서 메일과 소셜로그인을 통한 인증을 쉽게 할 수 있다.

 

1. Firebase에서 프로젝트를 만든다.

 

2. 프로젝트 바로가기에 Authentication 항목을 추가한다.

 

3. VSCode 내부에 apiKey 등 인증에 필요한 요소를 적어 넣는다.

해당 정보는 프로젝트 개요 옆 설정창에서 프로젝트 설정을 클릭하면 내앱 항목에서 볼 수 있다.

 

4. Authentication의 Sign-in method를 선택하여 제공업체를 추가하고 사용 설정을 활성화한다.

 

1. 이메일/비밀번호는 별도의 절차가 필요하지 않다.

2. Google은 프로젝트의 공개용 이름을 설정하고 firebase에 가입했던 이메일을 넣어주면 사용할 수 있다.

 

3. Github은 설정에서 developer settings에 들어가 OAuth Apps에 NewOAuth App을 추가한다.

setting은 Github의 가장 아래쪽에 있다.

프로젝트 이름 등을 입력한 후에는 Client ID, Client secrets가 발급된다. 이것들을 firebase에 추가한다.

승인 콜백 URL을 Github 앱 구성에 추가한다.

관련 내용은 공식 문서에 잘 정리되어 있다.

 

https://firebase.google.com/docs/auth/web/github-auth?hl=ko

자바스크립트에서 GitHub를 사용하여 인증  |  Firebase

 

일반 회원가입 코드다.

 

구글 회원가입 코드다.

 

다만 구글로 로그인한 경우 유효성 검사를 추가로 진행해야 한다.

그것은 프로젝트 이후에 개인적으로 공부해서 추가해 보기로 하였다.