Firebase Authentication を使ったログイン認証でのセッション管理やアクセス制限について

静的なWebサイトを制作し、Firebase Authentication を使ったログイン認証機能を実装しました。

下記のサイトに記載のコードを参考にして、ログイン機能と認証後にページ移管させることはできました。

https://www.topgate.co.jp/firebase05-firebase-authentication

流れ
ログインページ（Index.html）
↓ 認証後にページ移管
会員専用ページ(main.html)

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script defer src="/__/firebase/5.3.1/firebase-app.js"></script>
    <script defer src="/__/firebase/5.3.1/firebase-auth.js"></script>
    <script src="https://cdn.firebase.com/libs/firebaseui/3.1.1/firebaseui.js"></script>
    <link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/3.1.1/firebaseui.css" />
    <script defer src="/__/firebase/init.js"></script>
  </head>

  <body>
    <p>Hello, Firebase Hosting!</p>
    <div id="firebaseui-auth-container"></div>
    <div id="loader">Loading...</div>

    <script src="https://www.gstatic.com/firebasejs/5.3.1/firebase.js"></script>
    <script>
      // Initialize Firebase
      var config = {
        apiKey: "<API_KEY>",
        authDomain: "<PROJECT_ID>.firebaseapp.com",
        databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
        storageBucket: "<BUCKET>.appspot.com",
        messagingSenderId: "<SENDER_ID>",      
      };
      firebase.initializeApp(config);
    </script>

    <script type="text/javascript">
            var ui = new firebaseui.auth.AuthUI(firebase.auth());

            var uiConfig = {
              callbacks: {
                signInSuccessWithAuthResult: function(authResult, redirectUrl) {
                  return true;
                },
                uiShown: function() {
                  document.getElementById('loader').style.display = 'none';
                }
              },
              signInFlow: 'popup',
              signInSuccessUrl: 'main.html',
              signInOptions: [
                firebase.auth.EmailAuthProvider.PROVIDER_ID,
              ],
            };
            ui.start('#firebaseui-auth-container', uiConfig);
        </script>
  </body>
</html>

ただ、その後の流れについてわからない点があり質問をさせて頂きました。

こちらのサイトは会員専用のサイトを想定しており、ログインの状況に応じて各ページにアクセス制限をかける予定ですが、Firebase Authenticationを使用した場合の、アクセス制限方法やセッション管理がわかりません。

セッション管理に関しては下記も参考にしたのですが、現状でまだやり方がわかりません。

https://firebase.google.com/docs/auth/admin/manage-cookies?hl=ja#sign_out
https://firebase.google.com/docs/auth/web/service-worker-sessions

知りたいこと
・ログインをしてない状態で会員専用(main.html)ページにアクセスした場合、ログインページ（Index.html）にリダイレクトさせるにはどういう処理が必要なのか（ログイン後はリダイレクト制限を解除させる）

・会員専用ページ(main.html)に移管後にログアウトをさせる処理

・JavaScriptでセッションを管理する方法などの記事を見ていますが、このようなことを参考にすればFirebase Authentication でも代用できるのか。

https://techacademy.jp/magazine/23194
https://techacademy.jp/magazine/22314

aaharu

2020/02/17 03:43 編集

HTMLしかないですが、サーバーでなにか処理をする予定はあるでしょうか。セッションって言っているのでなにかありそうなんですが、それが全然見えないです。 SPAだとか、サーバーでPHP,Node.jsを動かすとか、サーバーはHTML置くだけだとか、それぞれやることが変わるのでこの状態だと回答しづらいです。

tomato01

2020/02/17 13:49

ご指摘を頂きありがとうございます。サーバー側の処理についてはfirebaseで行うことで考えており、firebase環境下でログイン制限をかけたりをしたいと思っております。（すみません、firebase環境について詳しくないので具体的な説明ができません。）

行動規範の内容に同意します

回答1件

firebase.auth().onAuthStateChangedにより現在ログインしているユーザ情報を獲得し、取得できたか否かで処理を分岐されてはいかがでしょうか？

（参考）https://firebase.google.com/docs/auth/web/manage-users?hl=ja#get_the_currently_signed-in_user

認証情報については、デフォルトでlocalになっており、ブラウザを閉じても保持され続けます。

（参考）https://firebase.google.com/docs/auth/web/auth-state-persistence?hl=ja

投稿2020/02/17 05:47

dorarep

総合スコア102

tomato01

2020/02/17 13:54

ご回答を頂き誠にありがとうございます。教えて頂いた、firebase.auth().onAuthStateChangedはとても有効のような気がしました。尚、下記のような処理を考えておりますがまだ解決ができておりません。 firebase.auth().onAuthStateChanged(function(user) { if (user) { // User is signed in.　　　　→　　　コンテンツ内のページにリダイレクト } else { // No user is signed in.　　　→　　　ログインのページにリダイレクト } });

行動規範の内容に同意します