firebase๋ hosting ์ธ์๋ ๋ค์ํ ๋ฐฑ์๋ ๊ธฐ๋ฅ์ ์ ๊ณตํ๋ค.
์ด๋ฒ์๋ ํํ ๋ณผ ์ ์๋ Sign in with Google ๊ธฐ๋ฅ์ ์ถ๊ฐํด๋ณด์.
์ด ํฌ์คํ ์ ์๋ฆฌ์ฆ์ 4๋ฒ์งธ ๊ธ๋ก 1ํธ, 2ํธ, 3ํธ์ ๋์ณค๋ค๋ฉด ๊ผญ ๋ณด๊ณ ์ค์!
Firebase ์ฝ์์ Authentication ๋ฉ๋ด๋ก ๊ฐ์ค๋ค.
2๋ฒ์งธ ํญ์ Sign-in method์์ ์ ๊ณต์ ์ฒด ์ค Google์ ์ ํํด ์ฌ์ฉํ ์ ์๋ค.
Google Auth๋ฅผ importํด์์ ์ธ ์ ์๋ค.
import { getAuth, GoogleAuthProvider, signInWithPopup } from "firebase/auth";
index.js
์ ๋งจ ์์ ์์ ๊ฐ์ด ์ถ๊ฐํด์ค๋ค. ์ด์ getAuth, GoogleAuthProvider, signInWithPopup์ ์ธ ์ ์๋ค.
const auth = getAuth();
firebase์ ๊ธฐ๋ฅ๋ค์ get(โฆ)
ํ์์ ์ด๋ฆ์ ๊ฐ๋ ๋ชจ๋์ ์ ๊ณตํ๋ค. ๋ถ๋ฌ์์ auth
๋ผ๋ ๋ณ์์ ์ ์ฅํด์ค๋ค.
<button class="signInBtn">Sign in with Google</button>
์ฐ์ index.html
ํ์ผ์ ๋ฒํผ์ ๋ง๋ค์ด์ฃผ์.
const signInBtn = document.getElementById("signInBtn");
index.js
์์๋ ๋ฒํผ์ ๋ถ๋ฌ์จ ํ
signInBtn.onclick = function () {
const provider = new GoogleAuthProvider();
provider.addScope("profile");
provider.addScope("email");
signInWithPopup(auth, provider)
.then((result) => {
const user = result.user;
const outputElement = document.createElement("h1");
// outputDiv.textContent = Object.keys(user);
//providerId,proactiveRefresh,reloadUserInfo,reloadListener,uid,auth,stsTokenManager,accessToken,displayName,email,emailVerified,phoneNumber,photoURL,isAnonymous,tenantId,providerData,metadata
outputElement.textContent = `Welcome, ${user.displayName}`;
document.body.appendChild(outputElement);
})
.catch((error) => {
const errorMessage = error.message;
const outputElement = document.createElement("h1");
outputElement.textContent = `Error: ${errorMessage}`;
document.body.appendChild(outputDiv);
});
};
ํด๋ฆญ ์ด๋ฒคํธ ์ ์คํ๋ ๋ก์ง์ ์์ ๊ฐ์ด ๋ง๋ค์ด์ค๋ค.
๋ณต์กํด๋ณด์ผ ์ ์์ง๋ง, Google์ด๋ Provider๋ฅผ ํตํด signInWithPopup
์ ์คํ์ํค๊ณ , ์ฑ๊ณตํ๋ฉด result๋ก๋ถํฐ ์ฌ์ฉ์์ ์ด๋ฆ์, ์คํจํ๋ฉด ์๋ฌ ๋ฉ์์ง๋ฅผ ๋ณด์ฌ์ฃผ๋ ๊ฒ ๋ฟ์ด๋ค.
์ฃผ์์ฒ๋ฆฌ๋ ๋ถ๋ถ์ result.user
์ค๋ธ์ ํธ๊ฐ ์ด๋ค ์ด๋ฆ์ key๋ค์ ๊ฐ๊ณ ์๋์ง ๋ชฐ๋ผ์ ํ๋ฉด์ ์ฐ์ด๋ณธ ํ์ ์ด๋ค. displayName
์ด ์์ผ๋ ์ฑ๊ณตํ๋ฉด ์ด๋ฆ๊ณผ ํจ๊ป ํ์ ๋ฉ์์ง๋ฅผ ๋ณด์ฌ์ฃผ์.
import { initializeApp } from "firebase/app";
import {
getAuth,
GoogleAuthProvider,
getRedirectResult,
signInWithRedirect,
onAuthStateChanged,
signInWithPopup,
} from "firebase/auth";
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "AIzaSyATCD9cxXSJ2RSUwd9WSDHTDMV7FuSaCgo",
authDomain: "fir-demo-48710.firebaseapp.com",
projectId: "fir-demo-48710",
storageBucket: "fir-demo-48710.appspot.com",
messagingSenderId: "49933278590",
appId: "1:49933278590:web:bb643d3e5d7b2077cd672f",
measurementId: "G-HFF9Z86BJM",
};
initializeApp(firebaseConfig);
const auth = getAuth();
const signInBtn = document.getElementById("signInBtn");
signInBtn.onclick = function () {
const provider = new GoogleAuthProvider();
provider.addScope("profile");
provider.addScope("email");
signInWithPopup(auth, provider)
.then((result) => {
const user = result.user;
const outputElement = document.createElement("h1");
// outputDiv.textContent = Object.keys(user);
//providerId,proactiveRefresh,reloadUserInfo,reloadListener,uid,auth,stsTokenManager,accessToken,displayName,email,emailVerified,phoneNumber,photoURL,isAnonymous,tenantId,providerData,metadata
outputElement.textContent = `Welcome, ${user.displayName}`;
document.body.appendChild(outputElement);
})
.catch((error) => {
const errorMessage = error.message;
const outputElement = document.createElement("h1");
outputElement.textContent = `Error: ${errorMessage}`;
document.body.appendChild(outputDiv);
});
};
์ ์ฒด ์ฝ๋๋ ์์ ๊ฐ๋ค.
npm run build
์ฝ๋์ ๋ณํ๊ฐ ์๊ฒผ์ผ๋ webpack์ผ๋ก ๋ค์ ๋น๋์์ผ์ฃผ์.
firebase deploy
๋ฐฐํฌ์ํจ๋ค. (๋ง์ฝ firebase๋ผ๋ ๊ฑธ ์ฐพ์ ์ ์๋ค๋ ๋ด์ฉ์ ์๋ฌ๊ฐ ๋์ค๋ฉด, ์ด์ ๊ธ๋ก ๋์๊ฐ์ firebase tools ์ค์น๋ถํฐ firebase login, firebase init๊น์ง ์คํ์์ผ์ฃผ์.)
๋ฐฐํฌ๋ ์ฌ์ดํธ์์ ๋ฒํผ์ ๋๋ฌ ๋ก๊ทธ์ธํด๋ณด์.
์ ๋์ค๋ ๊ฑธ ๋ณผ ์ ์๋ค!
Firebase ํ๋ก์ ํธ ์์๋ถํฐ, ๋ฐฐํฌ ๊ทธ๋ฆฌ๊ณ Google Auth ๊ธฐ๋ฅ ์ถ๊ฐ๊น์ง ํด๋ดค๋ค.
์ด ์ธ์๋ Firebase์๋ Storage ๋ฑ ๋ฐฑ์๋๋ฅผ ๊ตฌ์ฑํ๊ธฐ ์ํ ๋ค์ํ ๊ธฐ๋ฅ์ด ๋ ๋ง์ด ์๋ค. ํ์ง๋ง ์ฒ์ ์์ํด๋ณด๋ ค๊ณ ํ๋ ์ฌ๋๋ค์ ์ํ ๊ฐ์ด๋์ธ ์ด ์๋ฆฌ์ฆ๋ ์ฌ๊ธฐ์ ๋ง๋ฌด๋ฆฌ ์ง์ผ๋ ค๊ณ ํ๋ค.
โบ๏ธ์ฒ์ ์์ฑํ ํฌ์คํธ์๋๋ฐ, ์๊ฒ ๋ ๋ด์ฉ์ ๊ณต์ ํ๋ ๊ฒ ๋๋ฆ ์๋ฏธ๊ฐ ์๊ณ ์ฌ๋ฐ๋ค์. ์์ผ๋ก ์ฐ๊ฒ ๋ ๋ค๋ฅธ ๊ธ๋ ๋ง์ด ์ฝ์ด์ฃผ์ธ์๐๐ป