[memo-app] Firebase 4.인증 기능 구현
🧶 𝗪𝗲𝗯/Firebase

[memo-app] Firebase 4.인증 기능 구현

 

 

 인증 기능 구현 

auth 모듈 가져오기

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

 

자바스크립트에서 Google 로그인을 사용하여 인증  |  Firebase Documentation

의견 보내기 자바스크립트에서 Google 로그인을 사용하여 인증 Google 로그인을 앱에 통합하여 사용자가 Google 계정으로 Firebase에 인증하도록 할 수 있습니다. Google 로그인을 통합하려면 Firebase SDK를

firebase.google.com

<script
			src="https://cdnjs.cloudflare.com/ajax/libs/firebase/8.10.1/firebase.js"
			integrity="sha512-xOm7T+n5pRgOd5Da97/0Tuvgwumw9fca80qIlLDJ7+qCvoJNYTpoNESwL3iJR9m8Klrf2W9ocgcTSP60ZUKJvA=="
			crossorigin="anonymous"
			referrerpolicy="no-referrer"
></script>
        
<script>
			// SDK
			const firebaseConfig = {
				apiKey: "AIzaSyBc-Fk0pH3zdRJOBoQu-6oYqYu47J02ATc",
				authDomain: "fir-start-5566d.firebaseapp.com",
				databaseURL:
					"https://fir-start-5566d-default-rtdb.asia-southeast1.firebasedatabase.app",
				projectId: "fir-start-5566d",
				storageBucket: "fir-start-5566d.appspot.com",
				messagingSenderId: "654124086552",
				appId: "1:654124086552:web:8a55ccd1da2e128ea95a6d",
				measurementId: "G-GVRG34H6EL",
			};

			// 초기화
			firebase.initializeApp(firebaseConfig);
            
            
			//	 인증
			var auth = firebase.auth();
			var authProvider = new firebase.auth.GoogleAuthProvider();

			auth.onAuthStateChanged((user) => {
				if (user) {
					console.log("success");
					console.log(user);
				} else {
					console.log("fail");
					auth.signInWithPopup(authProvider);
				}
			});
</script>

firebase 버전 8을 사용합니다. 모듈은 [firebase.js]에서 가져옵니다.

인증에서 GoogleAuthProvider, signInWithPopup 메소드를 가져옵니다.

구글 인증을 사용할 것이기 때문에 GoogleAuthProvider 를 사용합니다.

signInWithPopup(auth, provider) 은 팝업창이 뜨도록 하는 메소드입니다.

 

firebase serve 를 돌려보면 이렇게 로그인 인증 창이 뜹니다.

 

 

public/index.html - 8버전

<!DOCTYPE html>
<html>
	<head>
		<!--Import Google Icon Font-->
		<link
			href="http://fonts.googleapis.com/icon?family=Material+Icons"
			rel="stylesheet"
		/>
		<!--Import materialize.css-->
		<!-- Compiled and minified CSS -->
		<link
			rel="stylesheet"
			href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css"
		/>

		<!--Let browser know website is optimized for mobile-->
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<style>
			::-webkit-scrollbar {
				display: none;
			}
			.collection {
				cursor: pointer;
			}
		</style>
	</head>

	<body>
		<div class="row">
			<div
				class="col s3"
				style="
					padding: 0;
					margin: 0;
					overflow-y: auto;
					overflow-x: hidden;
					height: 1080px;
					-ms-overflow-style: none;
				"
			>
				<!-- Grey navigation panel -->
				<ul class="collection" style="padding: 0; margin: 0"></ul>
			</div>

			<div
				class="col s9"
				style="padding: 0; margin: 0; max-height: 1080px"
			>
				<!-- Teal page content  -->
				<nav>
					<div class="nav-wrapper">
						<div class="col s12">
							<a href="#!" class="breadcrumb"
								><span id="modifyDate"></span
							></a>
						</div>
					</div>
				</nav>

				<textarea
					style="height: 1000px"
					class="textarea"
					width="100%"
					rows="1000"
					placeholder="새로운 메모를 입력해보세요^^"
				></textarea>
			</div>

			<div class="fixed-action-btn" style="bottom: 45px; right: 24px">
				<a class="btn-floating btn-large waves-effect waves-light red"
					><i class="material-icons">add</i></a
				>
			</div>

			<div
				class="preloader-wrapper big active"
				style="
					position: absolute;
					z-index: 1000;
					left: 50%;
					top: 50%;
					display: none;
				"
			>
				<div class="spinner-layer spinner-blue-only">
					<div class="circle-clipper left">
						<div class="circle"></div>
					</div>
					<div class="gap-patch">
						<div class="circle"></div>
					</div>
					<div class="circle-clipper right">
						<div class="circle"></div>
					</div>
				</div>
			</div>
		</div>

		<!--Import jQuery before materialize.js-->
		<script
			type="text/javascript"
			src="https://code.jquery.com/jquery-2.1.1.min.js"
		></script>

		<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>

		<script
			src="https://cdnjs.cloudflare.com/ajax/libs/firebase/8.10.1/firebase.js"
			integrity="sha512-xOm7T+n5pRgOd5Da97/0Tuvgwumw9fca80qIlLDJ7+qCvoJNYTpoNESwL3iJR9m8Klrf2W9ocgcTSP60ZUKJvA=="
			crossorigin="anonymous"
			referrerpolicy="no-referrer"
		></script>

		<script>
			// SDK
			const firebaseConfig = {
				apiKey: "AIzaSyBc-Fk0pH3zdRJOBoQu-6oYqYu47J02ATc",
				authDomain: "fir-start-5566d.firebaseapp.com",
				databaseURL:
					"https://fir-start-5566d-default-rtdb.asia-southeast1.firebasedatabase.app",
				projectId: "fir-start-5566d",
				storageBucket: "fir-start-5566d.appspot.com",
				messagingSenderId: "654124086552",
				appId: "1:654124086552:web:8a55ccd1da2e128ea95a6d",
				measurementId: "G-GVRG34H6EL",
			};

			// 초기화
			firebase.initializeApp(firebaseConfig);

			//	 인증
			var auth = firebase.auth();
			var authProvider = new firebase.auth.GoogleAuthProvider();

			auth.onAuthStateChanged((user) => {
				if (user) {
					console.log("success");
					console.log(user);
				} else {
					console.log("fail");
					auth.signInWithPopup(authProvider);
				}
			});
		</script>
	</body>
</html>

성공하면 콘솔창에서 success 와 user 정보가 뜨고 실패하면 fail 과 팝업 창이 뜹니다.

 

더보기

public/index.html - 9버전

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

			// 인증
			import {
				getAuth,
				GoogleAuthProvider,
				signInWithPopup,
				onAuthStateChanged,
			} from "https://www.gstatic.com/firebasejs/9.6.7/firebase-auth.js";
			const provider = new GoogleAuthProvider();

			// Your web app's Firebase configuration
			// For Firebase JS SDK v7.20.0 and later, measurementId is optional
			const firebaseConfig = {
				apiKey: "AIzaSyBc-Fk0pH3zdRJOBoQu-6oYqYu47J02ATc",
				authDomain: "fir-start-5566d.firebaseapp.com",
				databaseURL:
					"https://fir-start-5566d-default-rtdb.asia-southeast1.firebasedatabase.app",
				projectId: "fir-start-5566d",
				storageBucket: "fir-start-5566d.appspot.com",
				messagingSenderId: "654124086552",
				appId: "1:654124086552:web:8a55ccd1da2e128ea95a6d",
				measurementId: "G-GVRG34H6EL",
			};

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

			// 인증
			var auth = getAuth();
			onAuthStateChanged(auth, (user) => {
				if (user) {
					// 인증 성공부
					console.log("success");
					console.log(user);

          // 메모 리스트 출력
				} else {
					// 인증 실패부
					console.log("fail");
					signInWithPopup(auth, provider); // 팝업
				}
			});
		</script>

이건 firebase 9버전입니다.

 

 

 

 

 

 

 

firebase authentication

firebase 인증 사용법

firebase 로그인 사용법

firebase 인증 사용

 

728x90
저작자표시 비영리 변경금지

'🧶 𝗪𝗲𝗯 > Firebase' 카테고리의 다른 글

[memo-app] Firebase 6.데이터 저장과 출력  (0) 2022.02.22
[memo-app] Firebase 5.데이터 출력  (0) 2022.02.22
[memo-app] Firebase 3.설정 스크립트  (0) 2022.02.21
[memo-app] Firebase 2.로컬개발환경  (0) 2022.02.21
[memo-app] Firebase 1.환경설정  (0) 2022.02.21

    티스토리툴바