React,Express,Firebase,MongoDB를 이용한 회원가입 Auth인증

파이어베이스를 통해서 회원가입정보를 auth인증을 위한 암호화 데이터로 만들고,

그 데이터를 몽고DB에 저장하는 과정이다.

 

회원가입 컴포넌트에서는 

닉네임

이메일

비밀번호

3개의 정보를 보낸다.

이 정보를 암호화해서 몽고DB에 저장해보자

 

파이어베이스 시작

1. 파이어베이스 프로젝트 만들기 -애널리틱스x

2. 파이어베이스에서 웹에 파이어베이스를 추가 -호스팅x

3. 파이어베이스 sdk추가 (npm i firebase 와 sdk 코드 복사)

4. client에 파이어베이스 설치

6. client에 firebase.js 생성 후 sdk 코드 복사 후 붙여넣기(코드에 보안주의)

 

파이어베이스에서 auth 빌드하기

1. 파이어베이스 메뉴의 빌드에서 authentication 클릭

2. 이메일/비밀번호 클릭 후 저장

client/firebase.js 수정

1. firebas.compat/auth를 import해준다.

2. firebase/compat/app 에서 firebase를 갖고와서 initializing 수행

 

client/Register.js에 회원가입 요청 추가

1. client/firebase.js 파일 Register에 import해주기

2. firebase.js를 이용해 email값과 password값을 인자로 줘서 회원가입 수행 - promise수행(async await)

https://firebase.google.com/docs/auth/web/start?hl=ko&authuser=0#sign_up_new_users 

웹사이트에서 Firebase 인증 시작하기  |  Firebase Authentication

let createdUser = await firebase.auth().createUserWithEmailAndPassword(emaill,password)

3.사용자 이름(닉네임)도 파이어베이스에 넣어줄 수 있다. - 파이어베이스에서 제공하는 updateProfile로  유저정보의 이름을 나타낼 때 displayName사용

await createdUser.use.updateProfile({
	displayNmae : Name,
});

4. 이제 회원가입을 수행하면 파이어베이스에 정보가 암호화되어서 저장된다.

5.createdUser.user에 우리가 입력한 정보가 저장된다.(uid는 유저들의 고유한 아이디)

6. axios로 몽고DB에 파이어베이스에 저장했던 데이터를 똑같이 저장하기위해 요청

 

 

client에서 보내준 파이어베이스의 데이터를 server을 통해 몽고DB에 저장하기

1.User의 스키마를 위한 모델 작성 - Model/User.js 생성

2. User만을 위한 API요청을 위해 Express의 router 따로 작성 - Router/user.js 생성

3. user.js에서 User모델과 고유한 user번호를 위한 Counter 모델을 가져옴

4.회원가입 요청 API 생성

5. Counter DB에서 useNumber을 가져와서 저장할 회원가입 정보에 추가해주고, Counter의 userNum은 +1로 업데이트

6. index.js에서 router 추가

 

 

 

🙌추가적인 부분

1. 파이어베이스의 auth에 데이터를 저장할 때 비밀번호가 6글자를 넘지 않으면 에러가 난다.

-비밀번호 입력 input태그에 minLength를 설정해준다.

☝익스플로어나 파이어폭스는 이 기능이 제대로 기능안될 수도 있으므로 따로 sumbit할 때 비밀번호와 비밀번호확인의 길이를 확인해서 6글자이하면 return해주는 방법도 있다.

2. 사용자가 회원가입버튼을 반복해서 누르는 것을 방지해야한다.

Flag를 처음에 false를 줘서 회원가입이 처음에는 클릭되게한다.

만약 회원가입 버튼을 누르면 true로바꿔주고, 데이터가 모두 전송이 완료되었다면 다시 false로 바꿔준다.

 

 

오류

POST https://identitytoolkit.googleapis.com/v1/accounts:lookup?key=AIzaSyB9Z_lTQubStZzdFRV4J36l7749JGcl1Ys 400

위와같은 오류가 회원가입을 했을 때 생겼다.

몽고DB나 파이어베이스에도 정상적으로 저장되었지만 찝찝해서 다시 회원가입을 시도했더니 오류가 더이상 안생긴다.

알아보니 구글클라우드 에러라고 한다.

하지만 해결방법은 아직 파악하지 못했다.

https://cloud.google.com/identity-platform/docs/reference/rest

Identity Toolkit API  |  Identity Platform Documentation  |  Google Cloud