静的な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