로그인, 회원가입 with Firebase

로그인, 회원가입 with Firebase

참고영상)
https://www.youtube.com/watch?v=tPqTE14DEUg

1. Firebase 기능

1) Cloud Storage

  - 문서나 사진들을 저장

2) Hosting

  - 실제 만든 서비스를 브라우저에서 확인할 수 있게 해줌

3) Cloud Messaging

  - user에게 직접적인 알림을 보내줌

4) Cloud Firestore

  - 실시간소통, 서버에 숫자나 문자등 유저정보를 저장하거나 가져옴

5) Authentication

  - 쉽고 빠르게 회원가입,로그인 기능을 사용가능

2. 컴포넌트에 Firebase 연결하기

1) script 태그를 html파일(index.html)의 body 내 가장 아랫줄에 복사,붙혀넣기

-> 이때, ‘SDK 설정 및 구성’은 ‘CDN’으로

2) 제대로 연결됬는지 확인한다.

-> 붙혀넣은 script태그 안에 console.log() 작성하여 콘솔을 찍어본다.

       `console.log('작동된다!!!')`

        `console.log(app)`

3) Firebase 개발자문서에 들어가서 인증부분의 코드를 복사하여 1)의 script파일에 불혀 넣는다.
-> 해당 코드의 "firebase/auth" 이 주소를 1) script 내 {initializeApp} 의 주소로 바꾼후, 주소의 뒷부분(firebase-app.js)을 firebase-auth.js 로 수정한다.

4) 나머지 코드 작성및 수정

< 작업 중 발생한 에러 >

• 에러코드 400

POST https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=AIzaSyCzjAJffq9DgyPHFLMHczAdMEe9eGeo39Q 400

sol) 아이디 형식이 잘못되서 발생한 에러였음

super****@naver.com/nv****** 으로 로그인 성공

※ 로그인도 회원가입과 비슷하게 작성하면 됨.