HTML 파일 하나로 Firebase Github 인증

HTML

index.html

<!DOCTYPE html>
<body>
  <p id="message"><!-- hello, *** --></p>
  <button id="signin">signin</button>
  <button id="signout">signout</button>

  <!-- 依存 -->
  <script src="https://www.gstatic.com/firebasejs/4.6.0/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/4.6.0/firebase-auth.js"></script>

  <!-- メイン処理 -->
  <script>
document.addEventListener('DOMContentLoaded', () => {
  const config = {
    apiKey: '<api-key>',
    authDomain: '<project-name>.firebaseapp.com'
  };
  firebase.initializeApp(config);

  const provider = new firebase.auth.GithubAuthProvider();

  /**
   * `firebase.auth().signInWithRedirect`から戻ってきた時に
   * 問題なければ`then`で`user`や`accessToken`が渡ってくる
   */
  (async () => {
    try {
      const {user, credential} = await firebase.auth().getRedirectResult();
      /* 何か... */
    } catch (err) {
      /* エラー時の処理 */
    }
  })();

  /**
   * ログインユーザーが変わったら発火
   */
  firebase.auth().onAuthStateChanged(user => {
    if (user) {
      document.getElementById('message').innerHTML = `hello, ${user.displayName}`;

      /**
       * ログイン中なのでログアウトできるように
       */
      document.getElementById('signout').addEventListener('click', async () => {
        try {
          await firebase.auth().signOut();
        } catch (_) {
          /* エラー時の処理 */
        }
      });
    } else {
      document.getElementById('message').innerText = '';

      /**
       * ログインまだなので、クリックでログインできるように
       */
      document.getElementById('signin').addEventListener('click', () => {
        firebase.auth().signInWithRedirect(provider);
      });
    }
  });
});
  </script>
</body>

Gif

보충하다

의존하다

인증만 사용하기 때문에 파일 크기를 줄이기 위해 단독으로 읽지만 Firebase가 제공하는 모든 기능을 사용하고 싶다면

<script src="https://www.gstatic.com/firebasejs/*.*.*/firebase.js"></script>

그럴 수도 있어.이것은

<script src="https://www.gstatic.com/firebasejs/*.*.*/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/*.*.*/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/*.*.*/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/*.*.*/firebase-messaging.js"></script>