firebase hostingでシングルサインオンする

firebase hostingでシングルサインオンを使用します。
今回はGoogleアカウントとの連携を行います。

1.firebase consoleで連携アカウントを選択する
Authenticationページを開き、ログイン方法タブを選択する。
許可したいプロバイダを選択し「有効にする」にチェックする。

2.必要なライブラリをインポートします。
最新バージョンは公式サイト「https://firebase.google.com/docs/auth/web/firebaseui?hl=ja」
を参考にすれば安全そう。

<script src="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.css" />

3.HTML/Javascriptのソースコード追加
今回は認証状況に応じて、サインイン/サインアウトのボタンを表示するよう実装します。
まずはHTMLで画面に表示する部品の準備

    <!-- signinのボタン用 -->
    <div id="auth-component"></div>
    <!-- signoutのボタン用 -->
    <input type="button" id="signout-button" value="Signout" onclick="signout()"/>

次にJavascriptで認証用の処理を記載
認証用の処理の記載はライブラリの定義が見つからないことを防ぐため、
「DOMContentLoaded」イベントの後が安全そうです。

    <script>
      document.addEventListener('DOMContentLoaded', function() {
        try {
             var ui = new firebaseui.auth.AuthUI(firebase.auth());
             var uiConfig = {
               signInOptions: [
                 firebase.auth.GoogleAuthProvider.PROVIDER_ID
               ],
               callbacks: {
                 signInSuccess: function(currentUser, credential, redirectUrl) {
                   // リダイレクトさせない
                   return false;
                 }
               },
             };

             // 認証状態の変更を監視するイベントリスナー
             firebase.auth().onAuthStateChanged((user) => {
                if (user) {
                  // サインインに変更された為、サインアウト用のUIを表示
                  document.getElementById('signout-button').style.display = "block";
                  document.getElementById("name").innerHTML=`${user.displayName}さん`;
                  document.getElementById("email").innerHTML=`${user.email}`;
                } else {
                  // サインアウトに変更された為、サインイン用のUIを表示
                  document.getElementById("name").innerHTML=``;
                  document.getElementById("email").innerHTML=``;
                  document.getElementById('signout-button').style.display = "none";
                  
                  ui.start('#auth-component', uiConfig);
                }
              }, (error) => {
                console.log(error);
              }
            );
            } catch (e) {
              console.error(e);
              document.getElementById('load').innerHTML = 'Error loading the Firebase SDK, check the console.';
            }
          });

      // サインアウトする
      function signout(){
          firebase.auth().signOut();
      }
    </script>