質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

2551閲覧

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

tomato01

総合スコア82

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2020/02/05 09:53

編集2020/02/05 09:57

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

aaharu

2020/02/17 03:43 編集

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

2020/02/17 13:49

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

回答1

0

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.   →   ログインのページにリダイレクト } });
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問