Firebaseの機能を順次試していきたいと思います。
FirebaseではAuthenticationを利用することで様々な認証を用いることができます。今回実装するメールアドレスの他に各種SNSやSMSなどにも対応可能です。Webの他にiOSやAndroidなどにも導入可能。
今回は単純なログイン機能をWebページに実装してみます。
メールアドレスとパスワードを入力すると登録やログインできるようになります。
目次
Authenticationでログイン
コンソール上の設定
Firebaseのコンソールにログインし、新しくプロジェクトを作成するか、既存のプロジェクトを選択します。
プロジェクトのダッシュボードに移動したら、早速Authenticationの設定を進めていきます。
まずは左側のメニューの「Authentication」をクリックし、右ペインが切り替わったら「ログイン方法」タブをクリック。
「メール/パスワード」の行をクリックし、「有効にする」のスライダーをクリック。
その後「保存」ボタンをクリック。
この後JSを書き始めるのですが、その前にプロジェクトの情報を取得します。プロジェクトのコンソール右上にある「ウェブ設定」ボタンをクリック。
JSの設定部分の雛形が表示されますので、これをコピーします。
これでブラウザでのFirebaseの必須の設定はひとまずこれで完了です。
簡単でしたねｗ
認証処理をJSで書く
今回は認証部部のUIがまるっとセットになったfirebaseui-webを使っていきます。
ここでは次の3つのファイルを作成しています。
- config.js
- 前項でコピペしたコンソールの内容を保存します。
- login.html
- ログイン画面のHTML
- done.html
- ログイン完了画面のHTML
config.js
コンソールでコピーしたJavaScript部分をコピペしてください。このページはそのままでは動きませんのでご注意を。
//----------------------------------------------
// Firebaseの初期化
//----------------------------------------------
// コンソールの内容をそのままコピペ
var config = {
apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
authDomain: "test-f76bc.firebaseapp.com",
databaseURL: "https://test-f76bc.firebaseio.com",
projectId: "test-f76bc",
storageBucket: "test-f76bc.appspot.com",
messagingSenderId: "0000000000000"
};
firebase.initializeApp(config);
login.html
実際のログイン処理を記述しますが、ほとんどはライブラリ側で吸収してくれるので、設定をJSONで記述し所定のメソッドにわたすだけです。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello Firebase Auth</title>
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.css" />
<style>h1{text-align: center;}</style>
</head>
<body>
<h1>Hello Firebase Auth</h1>
<div id="firebaseui-auth-container"></div>
<script src="https://www.gstatic.com/firebasejs/5.8.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.8.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/ui/3.5.2/firebase-ui-auth__ja.js"></script>
<script src="./config.js"></script>
<script>
//----------------------------------------------
// Firebase UIの設定
//----------------------------------------------
var uiConfig = {
// ログイン完了時のリダイレクト先
signInSuccessUrl: '/done.html',
// 利用する認証機能
signInOptions: [
firebase.auth.EmailAuthProvider.PROVIDER_ID //メール認証
],
// 利用規約のURL(任意で設定)
tosUrl: 'http://example.com/kiyaku/',
// プライバシーポリシーのURL(任意で設定)
privacyPolicyUrl: 'http://example.com/privacy'
};
var ui = new firebaseui.auth.AuthUI(firebase.auth());
ui.start('#firebaseui-auth-container', uiConfig);
</script>
</body>
</html>
done.html
ログインが完了するとlogin.htmlで指定したこの画面に遷移します。ここではAuthenticationの機能でログイン済みユーザーかどうかを判定し、メッセージの出し分けを行っています。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello Firebase Auth</title>
</head>
<body>
<h1>...Please wait</h1>
<div id="info"></div>
<script src="https://www.gstatic.com/firebasejs/5.8.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.8.1/firebase-auth.js"></script>
<script src="./config.js"></script>
<script>
firebase.auth().onAuthStateChanged( (user) => {
let h1 = document.querySelector('h1');
let info = document.querySelector('#info');
if(user) {
h1.innerText = 'Login Complete!';
info.innerHTML = `${user.displayName}さんがログインしました`;
console.log(user);
}
else {
h1.innerText = 'Not Login';
}
});
</script>
</body>
</html>
実行結果
クリックするとサンプルコードが実行できます。お試しに登録やログインなどどうぞ。悪いことはしないでねｗ
（登録された内容は適当なタイミングで削除します）
実行するとわかりますが、入力内容やセッション状態によって以下のような挙動になります。
- 未登録のメールアドレスが入力された場合は自動的に「新規登録」
- 登録済みのメールアドレスが入力された場合は「ログイン」
- 過去にログイン済みのセッションが残っている場合は「アカウント選択画面」
現在の設定ではメールアドレスの確認は行われません。また確認メールなどの送信もされません。ユーザーが入力した内容を全力で信じる形になるので、予め用意したメールアドレスのリストを管理者が管理画面から登録する際などに利用するようなイメージでしょうか。
その他
登録済みのアカウントを確認する
コンソールから確認することができます。Authenticationの「ユーザー」タブをクリックしてください。
なおユーザーが入力したパスワードはハッシュ化されて保存されていることもある、管理者であろうと見ることはできません。もし忘れてしまった場合は「再設定」を行うことになります。
アカウントを手動で追加する
同じくコンソールから、任意のメールアドレスを追加できます。
アカウントを停止/削除/パスワード再設定
各ユーザーの列にマウスカーソルを乗せるとメニュー「」が右側に出現するので、クリックすると停止(BAN)や削除するためのメニューが表示されます。
続き
参考ページ
このブログを応援する
お寄せいただいたお気持ちは全額サーバ代や次の記事を執筆するための原資として活用させていただいております。この記事が参考になった場合などぜひご検討ください。
同じカテゴリの記事
- [Firebase] Cloud Functionsの実行結果をCDNにキャッシュする
- [Firebase] Functionsで環境変数を参照/設定する
- Firebaseからのメール「Firebase CLI lower than 7.7.0 will need to explicitly grant access through Cloud IAM」
- [Firebase] デプロイ対象を一部のサービスに限定する
- [Firebase] CloudFunctionsのRESTful APIを独自ドメインで利用する
- [Firebase] Authenticationで複数の認証プロバイダへ同時対応する (Web編)
- [Firebase] AuthenticationでSMS認証 (Web編)
- [Firebase] AuthenticationでGitHub認証 (Web編)
done.htmlから別のページに移動させるにはどうしたらいいのでしょうか？
aタグなどで移動できますよ。
何かうまく行かないのでしょうか？
自動的に別ページに行くようにしたいんですが、javascriptでリダイレクトしようとしても移動しません。
なるほど。location.hrefか何かで移動させようとしているのでしょうか？
これだけだと答えようがないので、具体的にどういったコードを書いて、どううまく行かないのか（エラーメッセージまたは挙動）、実行した環境などを教えてください。
このパターンだとメールアドレスの所有者の確認ができないですよね？
「その２」の方のようにアドレスの所有者の確認ができるようにする方法はあるのでしょうか？
「その3」をご覧ください。こちらでメールアドレスの存在確認後にログインが可能になります。
https://blog.katsubemakito.net/firebase/firebase-authentication-email-web3
その３があったのですね。ありがとうございました。全体的にすごく参考になりました
新規ユーザーの登録を制限することはできるのでしょうか？
匿名さん
ブログをご覧いただきありがとうございます。
ここでは「firebaseui-web」を使っているため新規登録などのフローに進めてしまいますが、「firebaseui-web」を使わずご自身でログインだけを行うフォームを作成されれば可能だと思います。ログインを行うコードについて公式ドキュメントを参照くださいませ。
https://firebase.google.com/docs/auth/web/password-auth
初めまして。
私の環境からですとコンソール上に「Web設定」のボタンが表示されません。
kanamiさん
ご覧いただきありがとうございます。
確認したところ、Firebaseの仕様が変更になったようですね。記事の方はまた手が空いたときにでも更新したいと思いますが、以下のページの「ウェブアプリ用の設定スニペットを入手する」の説明に沿って実行してみてください。最終的にこのページのサンプルにあるようなコードが入手できます。
https://support.google.com/firebase/answer/7015592?authuser=0
もしくは最近のFirebaseのHostingには最初から設定ファイルが用意してあるようなので以下のように書くだけでも初期化されるようですね。