내배캠 TIL 2022.11.17(파이어베이스)

개발자 되는 중/TIL&WIL

내배캠 TIL 2022.11.17(파이어베이스)

SeonChoco 2022. 11. 17. 14:35

파이어베이스로 로그인 기능 만들기

https://youtu.be/tPqTE14DEUg

로그인 기능 이해

1. 회원가입

맨처음에 정보를 준다

이메일, 패스워드와 같은 정보를 서비스 DB에 준다

2.로그인

기억한 정보를 떠올린다.

이전에 입력한 이름을 머리에 달고있다

이전의 정보를 토큰이라는 것을 통해서 기억하고 있다.

3.로그인 이후

로그인 할 때 email과 pass워드를 넣었다면 서비스 DB는 토큰을 주면서 앞으로 이메일이랑 패스워드 말고 토큰만 주시면 요청을 받아들일게요 한다.

검사 창에서 내가 검색했던 검색어를 확인 할 수 있다.

내가 검색한 것을 불러오면서 사용된 토큰도 확인할 수 있다.(토큰은 암호화된 정보)

파이어베이스

백엔드/서버 기능을 대신 해주는 클라우드

Cloud storage: 문서나 사진을 저장할 수 있다.

Firebase hosting: 브라우저에 배포하는 호스팅 기능

Firebase Cloud Messaging: 사용자에게 알림을 보내는 기능

Firbase Authentication: 회원가입 로그인 기능

Cloud Firestore: DB

회원가입 화면 구성 만들기

! + tab: html 기본구성 불러오기

단어 선택은 2번클릭

줄 클릭는 3번 클릭

<div>
		<form>
			<h1>회원가입</h1>
			<div> email: <input type="email" /></div>
			<div> password: <input type="password" /></div>
			<button type="submit">회원가입하기</button>
			<button>로그인하러 가기</button>
		</form>
	</div>

Firebase 연결

프로젝트 만들 때 복사해뒀던 스크립트 없어졌으면

프로젝트 개요

프로젝트 설정

CDN 복사

바디 안에 폼태그 아래에 script 전체 붙이기

파이어베이스랑 잘 연결되었는지 확인하는 방법

복사해온 script 안에 console.log를 넣어서 저장하고

우리가 만든 페이지의 콘솔창에 가서 되는지 뜨는지 확인한다.

1.authentication 들어가서

2.물음표 클릭

3.개발자 문서 누르기

4.빌드 카테고리에서

5.인증에 들어간다

6. 시작하는 방법 알아보기 클릭

7. Firebase 서비스에서 이메일 주소 및 비밀번호로 로그인 칸의 웹을 선택

8. 암호 기반 계정 만들기에서 스크립트 복사해와서 이용한다

	<div>
		<form>
			<h1>회원가입</h1>
			<div> email: <input type="email" id="signUpEmial" /></div>
			<div> password: <input type="password" id="signUpPassword" /></div>
			<button type="submit" id="signUpButton">회원가입하기</button>
			<button>로그인하러 가기</button>
		</form>
	</div>

회원가입 기능 구현

이메일과 패스워드를 받아오는 코드를 썼다. 코드를 찬찬히 살펴보자

		//버튼을 누르면 이메일과 패스워드를 받아오는 코드
		document.getElementById('signUpButton').addEventListener('click', (event) => {
			event.preventDefault()
			console.log(1)
		})

document: body에 썼던 것 중 하나를 가져온다.

getElementById('해당 아이디'): 요소 중에 하나를 ID를 이용해서 가져온다.

addEventListener(): 앞에 지칭한 것을 눌렀을 때 , 어떤 움직임을 하고 어떤 것을 반환 시킬지 괄호 안에 정해준다.

'click' 했을 때 반환되는 event는 console.log(1)이다.

event.preventDefault():

<form> 태그 특징이 새로고침인데 그것을 방지하기 위해서 써준다.

이것 지웠더니 콘솔창에 1찍혔던게 바로 지워진다

event => event.preventDefault(): 무슨 이벤트가 일어나던지 일단 막아줘라는 요청이다 (여기서는 새로고침을 막아줘)

		//버튼을 누르면 이메일과 패스워드를 받아오는 코드
		document.getElementById('signUpButton').addEventListener('click', (event) => {
			event.preventDefault()
			const email = document.getElementById('signUpEmail').value
			const password = document.getElementById('signUpPassword').value
			console.log(1)
		})

const email 부터 살펴보자

email이라는 변수에 body에서 signUpEmail라는 id가진 element에 들어오는 값을 넣어준다.

password라는 변수에 body에서 signUpPassword id 가진 element에 들어오는 값을 넣어준다.

	document.getElementById('signUpButton').addEventListener('click', (event) => {
			event.preventDefault()
			const email = document.getElementById('signUpEmail').value
			const password = document.getElementById('signUpPassword').value
			const auth = getAuth();
			createUserWithEmailAndPassword(auth, email, password)
				.then((userCredential) => {
					// Signed in 
					const user = userCredential.user;
					// ...
				})
				.catch((error) => {
					const errorCode = error.code;
					const errorMessage = error.message;
					// ..
				});
		})

auth라는 유효성 검사할때 는 변수를 getAuth() 함수로 만들어주면

createUserWithEmailAndPassword(auth, email, password)에 들어갈 auth, email, password가 모두 만들어진다.

회원 가입이 잘 된다면 .then 이후에 있는 내용이 실행될 것이고 => usercredential이라는 것이 만들어진다

잘 안 되었다면 .catch 이후에 있는 내용들이 실행될 것이다.

=> : 이 화살표의 의미는 정확히 모르겠는데, 함수가 실행하면 결과를 {} 안에 있는 것으로 해줘라 이런 뜻인가?

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>login</title>
</head>

<body>
	<div>
		<form>
			<h1>회원가입</h1>
			<div> email: <input type="email" id="signUpEmail" /></div>
			<div> password: <input type="password" id="signUpPassword" /></div>
			<button type="submit" id="signUpButton">회원가입하기</button>
			<button>로그인하러 가기</button>
		</form>
	</div>


	<script type="module"> 	// CDN이라는 것을 복사해 온 것 
		// Import the functions you need from the SDKs you need
		import { initializeApp } from "https://www.gstatic.com/firebasejs/9.14.0/firebase-app.js";
		import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.14.0/firebase-analytics.js";
		// TODO: Add SDKs for Firebase products that you want to use
		// https://firebase.google.com/docs/web/setup#available-libraries

		// Your web app's Firebase configuration
		// For Firebase JS SDK v7.20.0 and later, measurementId is optional
		const firebaseConfig = {
			apiKey: "AIzaSyCisJhPl7xp5sxK1qrlZ71xZry8ebHGthE",
			authDomain: "easylogin-2cef9.firebaseapp.com",
			projectId: "easylogin-2cef9",
			storageBucket: "easylogin-2cef9.appspot.com",
			messagingSenderId: "652784557025",
			appId: "1:652784557025:web:b98ac141fe7f81c63550a0",
			measurementId: "G-4LCMTLH9LR"
		};

		// Initialize Firebase
		const app = initializeApp(firebaseConfig);
		const analytics = getAnalytics(app);


		// 여기서 부터 유효성 검사하는 코드
		import { getAuth, createUserWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/9.14.0/firebase-auth.js";

		//버튼을 누르면 이메일과 패스워드를 받아오는 코드
		document.getElementById('signUpButton').addEventListener('click', (event) => {
			event.preventDefault()
			const email = document.getElementById('signUpEmail').value
			const password = document.getElementById('signUpPassword').value
			const auth = getAuth();
			createUserWithEmailAndPassword(auth, email, password)
				.then((userCredential) => {
					console.log(userCredential)
					// Signed in 
					const user = userCredential.user;
					// ...
				})
				.catch((error) => {
					console.log('error')
					const errorCode = error.code;
					const errorMessage = error.message;
					// ..
				});
		})
	</script>
</body>

</html>

회원가입하기 누르면

콘솔창에 이렇게 뜬다. user 내용을 보면 사용자 고유의 토큰이 생겼고, 이메일도 들어가있다.

회원가입하기

		<form>
				<h1>로그인</h1>
				<div> email: <input type="email" id="signInEmail" /></div>
				<div> password: <input type="password" id="signInPassword" /></div>
				<button type="submit" id="signUpButton">로그인하기</button>
				<button>회원가입하러 가기</button>
			</form>

회원가입아래에 비슷하게 만들어준다

id는 같은게 있으면 안되기 때문에 다른게 바꿔준다.

1.authentication 들어가서

2.물음표 클릭

3.개발자 문서 누르기

4.빌드 카테고리에서

5.인증에 들어간다

6. 시작하는 방법 알아보기 클릭

7. Firebase 서비스에서 이메일 주소 및 비밀번호로 로그인 칸의 웹을 선택

6. 이메일 주소와 비밀번호로 사용자 로그인 처리의 코드를 복사해서 script 안에 넣어준다

	import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/9.14.0/firebase-auth.js";

임포트할 내용에 sign with email and password를 넣어준다.

auth() 코드를 바깥으로 꺼내주고 나머지는 똑같이 복사해서 붙인가 (이유는 몰라)

'개발자 되는 중 > TIL&WIL' 카테고리의 다른 글

내배캠 WIL 2022.11 3주차 (1)	2022.11.20
내배캠 TIL 2022.11.18 (0)	2022.11.18
내배캠 TIL 2022.11.16(알고리즘 3주차, DB 특강, SPA 특강) (1)	2022.11.16
내배캠 TIL 2022.11.15 (알고리즘 3주차) (2)	2022.11.15
내배캠 2022.11.14 (알고리즘 2주차) (1)	2022.11.14

현재글내배캠 TIL 2022.11.17(파이어베이스)

Today :
Yesterday :

일	월	화	수	목	금	토
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

선초코