Firebase Hosting + Firebase Authenticationで簡単な認証サイトを作ってみよう

以前執筆した記事ではFirebase Authenticationの特徴や認証の仕組みについて解説しました。今回は実際に、認証を実装したWebアプリを作っていく様子をお見せしたいと思います。Firebase Authenticationを使うとこんな簡単にログイン画面が作れるんだということを実感していただける内容になっていると思います。今回作成するデモアプリは Angular, React, Vue といったフロントエンドフレームワークを使っていないので、これらのフレームワークに馴染みのない方でも簡単に作ることができると思います。

アプリを作る前の準備
アプリを作る
デプロイして触ってみる
- Firebase Hosting にデプロイする
- ユーザーを管理する
最後に

アプリを作る前の準備

本稿の内容を実際に試すには以下のツールが必要です。バージョンは検証時に筆者が使用したバージョンです。できれば最新版を推奨します。

ツール	バージョン
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}`);
    });
};