1. 개요

Firebase를 이용한 Google Login를 정리합니다.

소스 : HTML, JavaScript ES6+(IE 미지원)

기본 Spark 요금제는 일정 사용량은 무료입니다. 특히 Authentication 한국은 완전 무료입니다.

2. 내용

firebase.google.com 접속, ‘콘솔로 이동’ 클릭

2. ‘프로젝트 만들기’

3. 프로젝트 이름 입력

4. 약관 동의 후 ‘계속

5. 애널리틱스 화면 확인

6. 애널리틱스 사용하지 않고 ‘프로젝트 만들기’

7. 프로젝트 준비가 끝나면 ‘계속

8. </> 버튼 클릭

9. 웹 앱에 Firebase 추가 화면 확인

10. 앱 닉네임 입력

11. ‘<script> 태그 사용’ 선택

12. ‘다음’

13. ‘다음’

14. ‘콘솔로 이동’

15. ‘앱 1개’

16. Authentication 화면에서 ‘시작하기’

17. Sign-in method 탭에서 ‘Google’ 선택

18. ‘사용 설정’

19. ‘프로젝트의 공개용 이름’ 및 ‘프로젝트 지원 이메일’ 선택, 확인 그리고 ‘저장’

20. ‘Google’ 상태 확인 및 ‘localhost’ 도메인 확인

21. ‘프로젝트 설정’

22. 해당 내용 참고. 실제 소스와 다르면 에러 발생.

23. vscode에서 ‘Preview on Web Server’ Extension 설치. ‘Launch on browser’ 단축키 확인.

24. 소스 확인 후 단축키(ctrl+shift+l)로 Preview on Web Server 실행

3. 최종 소스

github : https://github.com/KimYunBeom/kdb/tree/main/firebase-google-login

<!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>Firebase Google Login</title>
    <style>
      .hide {
        display: none;
      }
    </style>
  </head>
  <body>
    <div>
      <a href="#">
        <img src="./btn_google_signin_dark_normal_web.png" alt="구글 이미지" id="googleLoginButton" />
      </a>
    </div>
    <div>
      <button type="button" id="googleLogoutButton" class="hide">로그아웃</button>
    </div>
    <hr />
    <div id="result" class="hide">
      <div><span>uid : </span><span id="resultUid"></span></div>
      <div><span>email : </span><span id="resultEmail"></span></div>
      <div><span>name : </span><span id="resultName"></span></div>
      <div>
        <div>photo :</div>
        <img id="resultPhoto" src="http://picsum.photos/96" alt="랜덤 이미지" />
      </div>
      <div><span>created : </span><span id="resultCreated"></span></div>
      <div><span>last login : </span><span id="resultLastLogin"></span></div>
    </div>
    <script type="module">
      // Import the functions you need from the SDKs you need
      import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.8.1/firebase-app.js';
      import {
        GoogleAuthProvider,
        getAuth,
        signInWithPopup,
        signOut,
        setPersistence,
      } from 'https://www.gstatic.com/firebasejs/9.8.1/firebase-auth.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
      const firebaseConfig = {
        apiKey: 'YOUR_INFORMATION',
        authDomain: 'YOUR_INFORMATION',
        projectId: 'YOUR_INFORMATION',
        storageBucket: 'YOUR_INFORMATION',
        messagingSenderId: 'YOUR_INFORMATION',
        appId: 'YOUR_INFORMATION',
        measurementId: 'YOUR_INFORMATION',
      };
      // Initialize Firebase
      const app = initializeApp(firebaseConfig);
      const provider = new GoogleAuthProvider();
      const auth = getAuth();
      const requestLogin = () => {
        signInWithPopup(auth, provider)
          .then((result) => {
            // This gives you a Google Access Token. You can use it to access the Google API.
            const credential = GoogleAuthProvider.credentialFromResult(result);
            const token = credential.accessToken;
            // The signed-in user info.
            const user = result.user;
            console.log('user :\n', JSON.stringify(user, null, 2));
            const {
              uid,
              email,
              displayName,
              photoURL,
              metadata: { creationTime },
              metadata: { lastSignInTime },
            } = user; // Destructuring Assignment. Object and nested object.
            document.querySelector('#resultUid').textContent = uid;
            document.querySelector('#resultEmail').textContent = email;
            document.querySelector('#resultName').textContent = displayName;
            document.querySelector('#resultPhoto').setAttribute('src', photoURL);
            document.querySelector('#resultCreated').textContent = creationTime;
            document.querySelector('#resultLastLogin').textContent = lastSignInTime;
            document.querySelector('#result').classList.remove('hide');
            document.querySelector('#googleLogoutButton').classList.remove('hide');
          })
          .catch((error) => {
            // Handle Errors here.
            const errorCode = error.code;
            const errorMessage = error.message;
            // The email of the user's account used.
            const email = error.email;
            // The AuthCredential type that was used.
            const credential = GoogleAuthProvider.credentialFromError(error);
            console.log(errorCode, errorMessage);
          });
      };
      const requestLogout = () => {
        signOut(auth)
          .then(() => {
            window.location.assign('https://accounts.google.com/logout');
          })
          .catch((error) => {
            alert('로그아웃에 실패했습니다.');
          });
      };
      const initElemEvent = () => {
        googleLoginButton.addEventListener('click', () => {
          requestLogin();
        });
        googleLogoutButton.addEventListener('click', () => {
          requestLogout();
        });
      };
      const init = () => {
        initElemEvent(); // 초기화 : Element 이벤트
      };
      init();
    </script>
  </body>
</html>