ASP.NET Core Razor Pages と Firebase Authentication を組み合わせた認証機能の作成（AuthUI の利用）

別記事での実装をベースに、AuthUI を利用した場合の認証機能作成方法を紹介します。

ASP.NET Core Razor Pages と Firebase Authentication を組み合わせた認証機能の作成 | Water Margin

AuthUI を利用することで、認証プロバイダーを呼び出すボタンを自動的に表示してくれるようになります。ログインボタン周りの実装の手間が省けるメリットがあります。

上記リンク記事で公開しているサンプルのうち、Login.cshtml を下記の様に差し替えます。

@page
@model ASPNETCore_Firebase_Auth_Google_AuthUI.Pages.LoginModel
@{
}

<form id="form1" method="post" hidden>
    <input id="token" asp-for="Credential.Token" />
    <input id="uid" asp-for="Credential.Uid" />
</form>
<div id="firebaseui-auth-container"></div>

@section Scripts{
    <script src="https://www.gstatic.com/firebasejs/ui/4.8.0/firebase-ui-auth.js"></script>
    <link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.8.0/firebase-ui-auth.css"/>
    <script src="https://www.gstatic.com/firebasejs/8.6.2/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.5.0/firebase-auth.js"></script>
 
    <script>
        const firebaseConfig = {
          ...
        };

        firebase.initializeApp(firebaseConfig);

        document.addEventListener('DOMContentLoaded', (event) => {
          let uiConfig = {
              callbacks: {
                  signInSuccessWithAuthResult: function (result) {
                      console.log("ログイン成功");
                      document.getElementById("token").value = result.credential.idToken;
                      document.getElementById("uid").value = result.user.uid;
              
                      // サーバーに認証情報を送信
                      document.getElementById("form1").submit();
                      return false;
                  }
              },
              signInOptions: [
                  firebase.auth.GoogleAuthProvider.PROVIDER_ID,
              ]
          };

          let ui = new firebaseui.auth.AuthUI(firebase.auth());
          ui.start('#firebaseui-auth-container', uiConfig);
        });
    </script>
}