以前執筆した記事ではFirebase Authenticationの特徴や認証の仕組みについて解説しました。今回は実際に、認証を実装したWebアプリを作っていく様子をお見せしたいと思います。Firebase Authenticationを使うとこんな簡単にログイン画面が作れるんだということを実感していただける内容になっていると思います。今回作成するデモアプリは Angular, React, Vue といったフロントエンドフレームワークを使っていないので、これらのフレームワークに馴染みのない方でも簡単に作ることができると思います。
目次
アプリを作る前の準備
本稿の内容を実際に試すには以下のツールが必要です。バージョンは検証時に筆者が使用したバージョンです。できれば最新版を推奨します。
ツール | バージョン |
---|---|
Node.js | 10.13.0 |
Firebase CLI | 6.0.1 |
これらのツールのインストール手順を紹介します。
すでにインストールしている場合はスキップしてください。
Node.js のインストール
Windows, MacOS
https://nodejs.org/ja/download/ から使用しているOSに対応するインストーラー(推奨版)をダウンロードします。
ダウンロードしたインストーラーを実行してインストールを行います。
Linux
上記のサイトからバイナリをダウンロードするか、こちらのInstallation instructions
の手順に従ってインストールします。
インストールが完了すると node
コマンドが使えるようになります。以下のコマンドを実行するとバージョンを確認できます。
$ node -v
v10.13.0
Firebase CLI のインストール
Node.jsをインストールすると npm
コマンドが使えるようになります。以下のコマンドを実行してFirebase CLI をインストールします。
npm install -g firebase-tools
インストールが完了するとfirebase
コマンドが使えるようになります。バージョンを確認してみましょう。
$ firebase --version
6.0.1
firebase にログインします。
$ firebase login
? Allow Firebase to collect anonymous CLI usage and error reporting information?
(Y/n) Y (好きな方を選択)
(ブラウザが立ち上がりGoogleのログイン画面が現れるのでログインする)
Waiting for authentication...
✔ Success! Logged in as ***@***.jp
Firebase プロジェクトを作成する
https://firebase.google.com/にアクセスします。
右上の「コンソールへ移動」をクリックします。
「プロジェクトを追加」クリックします。
ダイアログが表示されます。
パスワード認証を有効化する
左端のメニューから「Authentication」をクリックすると現れる画面の「ログイン方法を設定」ボタンをクリックします。
「メール / パスワード」をクリックします。
ダイアログが現れるので、上のトグルを有効にした後保存をクリックします。
アプリを追加する
左のメニューバーの歯車マークをクリックし、「プロジェクトの設定」を選択します。
「マイアプリ」の項目の中にプラットフォームを選択するアイコンがあるので「Web」のアイコンをクリックします。(アイコンの上にマウスポインタを置くと「Web」と表示されます)
アプリのニックネームを入力し、「アプリを登録」ボタンをクリックします。
スクリプトが表示されるのでコピーして「次へ」ボタンをクリックします。(このスクリプトはあとで使うのでどこかに保存しておいてください)
「次へ」をクリックします。
「コンソールに進む」をクリックします。
アプリを作る
アプリのルートディレクトリを作成する
どこでもいいので、app
ディレクトリを作って移動します。ここをアプリのルートディレクトリとします。
mkdir app
cd app
app
ディレクトリ内で次のコマンドを実行します。
firebase init
Hostingにカーソルを合わせてSpaceキーを押した後にEnterを押します。
先ほど作成したFirebase プロジェクトを選択します。
Enterを押します。
Noを選択します。
firebase init
が完了するとappディレクトリ直下にfirebase.json
とpublic
ディレクトリが作成されます。
app
├── public
│ ├── 404.html
│ └── index.html
└── firebase.json
HTMLでログイン画面のレイアウトを設定する
public/index.html
でアプリのトップページの画面レイアウトを定義します。デフォルトで定義されているコードを以下のコードに置き換えます。ここで先ほどコピーしたスクリプトを指定位置に貼り付けます。
<!DOCTYPE html>
<html>
<head>
<title>firebase auth テスト</title>
</head>
<body>
<h1>テスト用認証アプリ</h1>
<!-- メールアドレス入力フォーム -->
<div>
<label for="email">Email</label>
<input type="email" id="email" />
</div>
<!-- パスワード入力フォーム -->
<div>
<label for="password">Password</label>
<input type="password" id="password" />
</div>
<!-- ボタン -->
<button id="sign-up" onclick="onSignUpButtonClicked();">sign up</button>
<button id="sign-in" onclick="onSignInButtonClicked();">sign in</button>
<button id="sign-out" onclick="onSignOutButtonClicked();">sign out</button>
<!-- ユーザー情報の出力用エリア -->
<h2>ユーザー情報</h2>
<div id="userinfo">
</div>
<!-- ログ出力エリア -->
<h2>ログ</h2>
<p id="log"></p>
<!-- ↓↓ ここにコピーしたスクリプトを貼り付ける ↓↓ -->
<!-- ↑↑ ここにコピーしたスクリプトを貼り付ける ↑↑ -->
<script src="main.js"></script>
</body>
</html>
こんな感じのレイアウトができます。
javascriptでログイン機能を実装する
public/index.html
ではログイン画面のレイアウトを記述しました。次はユーザーの新規登録(サインアップ)/ログイン/ログアウトの処理を記述する必要があります。といってもfirebaseのライブラリを使うだけなので複雑な処理を書く必要はありません。
public/main.js
を作成します。
app
├── public
│ ├── 404.html
│ ├── index.html
│ └── main.js
└── firebase.json
長くなるので、重要な部分のみ抜粋して解説します。GitHubで全ソースコードを公開していますので興味のある方はこちらをご覧ください。
まずオブザーバーを設定します。onAuthStateChanged
を実行するとオブザーバーがユーザーのログイン/ログアウトを監視し、ユーザーがログイン/ログアウトをすると引数内の関数を実行します。サインインの場合は user
変数にサインインしたユーザーの情報が入力されます。今回はユーザーのメールアドレスとUID(ユーザーID)を取得してブラウザに表示するようにしてみます。
function initApp() {
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
printUserInfo(user.email, user.uid);
log(`ログインしました。: ${user.uid}`);
disableSignUpAndSignIn();
} else {
clearUserInfo();
disableSignOut();
}
clearForm();
});
}
sign up
ボタンをクリックするとonSignUpButtonClicked
関数が実行されます。フォームに入力されたメールアドレスとパスワードをcreateUserWithEmailAndPassword(email, password)
の引数に渡すとユーザーをサインアップ(新規作成)した後にログインします。
onSignUpButtonClicked = function() {
const email = getEmail();
const password = getPassword();
firebase
.auth()
.createUserWithEmailAndPassword(email, password)
.then(function() {
log(`サインアップしました。: ${email}`);
})
.catch(function(error) {
log(`サインアップできませんでした。${error}`);
});
};
sign in
ボタンをクリックすると onSignInButtonClicked
関数が実行されます。signInWithEmailAndPassword(email, password)
は同じメールアドレスを持ったユーザーが存在してパスワードが一致した場合にそのユーザーでログインします。
onSignInButtonClicked = function() {
const email = getEmail();
const password = getPassword();
firebase
.auth()
.signInWithEmailAndPassword(email, password)
.catch(function(error) {
log(`ログインできませんでした。${error}`);
});
};
sign out
ボタンをクリックすると onSignOutButtonClicked
関数が実行されます。signOut
は現在ログインしているユーザーをログアウトさせます。
onSignOutButtonClicked = function() {
firebase
.auth()
.signOut()
.then(function() {
log("ログアウトしました。");
})
.catch(function(error) {
log(`ログアウトできませんでした。${error}`);
});
};
デプロイして触ってみる
Firebase Hosting にデプロイする
次のコマンドを実行するだけでデプロイは完了です。
firebase deploy
デプロイが完了するとコンソールにURLが表示されるのでブラウザでアクセスします。
メールアドレスとパスワードを入力して sign up
をクリックするとユーザーが新規登録されます。Firebaseのコンソールから確認してみましょう。
ユーザーを管理する
FirebaseコンソールにアクセスしてAuthentication
を開くと登録されているユーザーの一覧が表示されています。同じUIDのユーザーが登録されていることが確認できます。
最後に
最後までご覧いただきありがとうございました。今回作ったアプリのソースコードはこちらで公開していますので、興味があったらご覧ください。まだ基礎編をご覧になっていない方はこちらも是非ご覧ください。