FirebaseとWebpackでAuthenticationユーザー認証テスト環境を作る

FirebaseのAuthentication機能を使ってメールアドレスとパスワードでログインするページをローカル環境で構築します。

Firebaseのおかげでログインページを構築するだけでで済み、後の管理はすべて賄ってくれます。

Firebase SDKのバージョンがv9になり変わったので、webpackを使って実装をしています。

FirebaseのAuthentication機能を実装

本記事では、FirebaseのAuthentication機能を使って、ユーザー認証ページを構築する方法をご紹介します。

本来こういった認証システムは、いわゆる「関所」の様な機能が必ず必要になりますよね。

不正な文字列やコードを入力された場合に、それらを無効にする対処は必須です。

裏方作業を全てやってくれるFirebase

Firebaseの機能を使えばこういった機能を任せる事ができ、簡単に導入ができる訳です。

極端なお話、こちら側で用意するのは「入力欄」のみと言って良いでしょう。

ユーザーのログイン情報はFirebaseのデータベースに登録され、ユーザー管理画面も用意されています。

webpackを使った実装

今回はWebpackを使ってテスト環境を構築（localhostによる確認）するところまで紹介します。

以前まではFirebaseのみで構築できていましたが、今回はwebpackの機能を併用する事になります。

FirebaseのSDKバージョンがv9になったことで、実装方法がこれまでと変わったためですね。

本番環境に実装する方法は、次の記事で紹介する予定です。

Firebaseのプロジェクト作成・設定

新規プロジェクトの作成

では新しくFirebaseのプロジェクトを作成しましょう。

作成の方法についてはホスティングの記事でも紹介していますので、わからない場合は記事を参考にして下さい。

新規にプロジェクトを作成できたことを前提に進めますね。

Authenticationの設定

Firebaseのコンソール画面左にある「構築」から、「Authentication」を選びましょう。

Authenticationの画面に切り替わりますので、中央の「始める」をクリックして下さい。

ログインするプロバイダ

ログインするプロバイダを選択する画面です。

この中から今回はオーソドックスに「メール／パスワード」を選択します。

他にもGoogleアカウントやFacebook・Twitterによる認証もできます。

次の画面で、メール／パスワードの欄にあるトグルマークをONにして有効にします。

下はOFFのままにして、保存ボタンをクリックしましょう。

テストユーザーの追加

すると下の様なユーザー管理画面になります。

メールアドレスとパスワードでユーザー登録がされる度に、ここに表データとして蓄積されていくという訳です。

今回は右上の「ユーザーを追加」を押して1件だけ登録をしておきます。

後ほど作るアプリで、きちんとログインできるかどうかを確かめるためです。

メールアドレスとパスワード登録

上のように任意のメールアドレスとパスワードを入れて、「ユーザーを追加」ボタンをクリックします。

先程のユーザー情報管理画面に、1件情報が追加されたことがわかりますね。

ウェブアプリの追加

では次に、Firebaseコンソール画面の左上にある「プロジェクトの概要」をクリックしましょう。

まだアプリが作成されていない状態なので、「</>」マークをクリックします。

ウェブアプリにFirebaseを追加する

ウェブアプリにFirebaseを追加の画面が出てきます。

まず今回のアプリの「ニックネーム」を決めて入力して下さい。

入力が終わったら「アプリを登録」を押します。

次の画面では一番下に飛んで「コンソールに進む」を押して下さい。

すると今回作成したプロジェクトの中に、アプリが作成されます。

マイアプリの確認

プロジェクトの設定画面が開いた状態になると思います。

上部の横並びメニュー「全般」タブを開くと、下の方に今回作成したアプリの情報が表示されています。

と3種類ありますが、記載されている情報自体はどれも同じです。

アプリ固有の情報

その中で以下の部分をメモするか、いつでも開ける様にしておきましょう。

apiKey: "○○○○○○○○", authDomain: "○○○○○○○○", projectId: "○○○○○○○○", storageBucket: "○○○○○○○○", messagingSenderId: "○○○○○○○○", appId: "○○○○○○○○"

上記情報を、後から作成するアプリ内にコピペしてくるためですね。

開発環境の準備

ではいよいよPC内（開発環境内）にアプリを作成していきます。

Windows11のPCにておこなっていますのでご注意下さい。

コマンドプロンプトからコマンドを実行しつつ、コーディングの準備をしていきます。

今回の準備の前に

今回はFirebaseのhostingやWebpush導入時と違い、firebaseコマンドではなくnpmコマンドを使います。

冒頭でも説明しましたがFirebaseのSDKバージョンがv9になり、実装方法が変わったためですね。

そこで今回は「webpack」という構成パッケージツールを使います。

npmコマンドを使ってwebpackのファイルをインストールし、アプリを構成する流れとなります。

そのため、node.js（npm）をインストールしている事を前提に進めます。

npmのインストール方法は、以下の記事を参考にして下さいね。

フォルダ作成・移動

まずは任意の位置にフォルダを作りましょう。

先程Firebaseで作成したプロジェクトを動かす指定フォルダになります。

本記事ではフォルダ名を「lpeg-auth-test」としています。

作成できたらコマンドラインで、まずはそのディレクトリ（パス）に移動します。

cd C:\Users\info\デスクトップ\lpeg-auth-test

package.jsonの作成

では移動したディレクトリ内に、まずは設定ファイルとなる「package.json」を作成します。

以下のコマンドを入れましょう。

npm init -y

-yの意味

本来は「npm init」なのですが、この場合プロジェクト名やバージョン等を聞かれます。

その全てに対し、Enterや「y」を押さなければならないのですね。

そこで「npm init -y」としておけば、全て省略してpackage.json を作れる訳です。

Firebase SDKのインストール

次にnpmのライブラリである、「Firebase SDK」を一式インストールします。

npm install --save firebase

コマンドを実行すると、インストールされたファイルの数などが英語で表示されます。

これによりディレクトリ内に「node_modules」というファイル群が生成されます（中にたくさんはいってます）。

webpackのインストール

続けてwebpackのインストールです。以下のコマンドを入れましょう。

npm install --save-dev webpack webpack-cli webpack-dev-server

webpackやwebpackの操作ツールwebpack-cli、およびwebpack-dev-serverなどをインストールしていきます。

アプリ構成ファイルの作成

次にtouchコマンドで、アプリの軸となるファイルを作成します。

touch app.js firebase-config.json index.html webpack.config.js

touchコマンドが効かない場合

touchコマンドの入力時にエラーが出る場合があります。

これはtouchコマンドが認識されないために起こる警告エラーですね。

その場合は次のコマンドを入れて、touch-cliをインストールしましょう。

npm install touch-cli -g

これでtouchコマンドが使えるはずですので、改めてtouchコマンドを入力してみましょう。

個別にファイルを作成する

先程のtouchコマンドでは、複数ファイルを同時に生成する命令でしたね。

これでもし最初の「app.js」しか作れてない様であれば、他ファイルも1個ずつtouchコマンドを入れて作成しましょう。

個別に打つことで、それぞれファイルが生成されるはずです。

各ファイルへのコーディング

では生成した各種ファイルにコードを入れていきます。基本的にはコピペして適宜改変して下さい。

webpack.config.js

エディタでwebpack.config.jsを開きましょう。

ファイルは空白の状態ですので、下記の内容をそのまま入力します。

module.exports = { mode: 'development', entry: './app.js', output: { filename: 'js/app.js', }, devtool: false, devServer: { client: false, hot: false, static: { directory: __dirname, }, }, }

本アプリがテスト環境である事や、生成されるjsのパスなどを指定しています。

index.html

エディタでindex.htmlを開きましょう。

ファイルは空白の状態ですので、下記の内容をそのまま入力します。

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Firebase Authentication ログインテスト</title> </head> <body> <h1>Firebase Authentication ログインテスト</h1> <section id="sectionSignin"> <h2>ログイン / 新規登録</h2> <form> <div> <label for="inputEmail">E-mail</label> <input type="email" name="inputEmail" id="inputEmail"> </div> <div> <label for="inputPassword">Password</label> <input type="password" name="inputPassword" id="inputPassword"> </div> <button type="submit" id="buttonSignin" aria-describedby="errorMessage">ログイン</button> or <button type="button" id="buttonSignup" aria-describedby="errorMessage">新規登録</button> <p id="errorMessage"></p> </form> </section> <section id="sectionUser"> <h2>ユーザー情報</h2> <dl> <dt>uid</dt> <dd id="uid"></dd> </dl> </section> <section id="sectionSignout"> <h2>サインアウト</h2> <button type="button" id="buttonSignout">サインアウト</button> </section> <script src="js/app.js"></script> </body> </html>

上記ではログイン後に固有コードを生成したり、ログインと新規登録とを併用させたものになっています。

しかし基本的には、メールアドレスおよびパスワードの入力欄を用意しているだけです。

firebase-config.json

エディタでfirebase-config.jsonを開きましょう。

ここに先程FirebaseConsole画面に表示されていたSDKの設定内容を、1行ずつコピペしてくる事になります。

{ "apiKey": "AIzaSCp0GQzzarV1fEiabiip0GQzzarV1fEiA", "authDomain": "lpeg-auth-test.firebaseapp.com", "projectId": "lpeg-auth-test", "storageBucket": "lpeg-auth-test.appspot.com", "messagingSenderId": "555147666313", "appId": "1:333147666313:web:3e0786f5b83e0786f5b88" }

これにより管理者固有のアプリである事を証明している訳です（上の情報はダミーです）。

app.js

エディタでapp.jsを開きましょう。

ファイルは空白の状態ですので、下記の内容をそのまま入力します。

import {initializeApp} from "firebase/app" import { getAuth, signInWithEmailAndPassword, createUserWithEmailAndPassword, onAuthStateChanged, signOut, } from "firebase/auth" main() async function main () { const el = { sectionSignin: document.querySelector('#sectionSignin'), sectionUser: document.querySelector('#sectionUser'), sectionSignout: document.querySelector('#sectionSignout'), inputEmail: document.querySelector('#inputEmail'), inputPassword: document.querySelector('#inputPassword'), buttonSignin: document.querySelector('#buttonSignin'), buttonSignup: document.querySelector('#buttonSignup'), buttonSignout: document.querySelector('#buttonSignout'), errorMessage: document.querySelector('#errorMessage'), uid: document.querySelector('#uid'), } const response = await fetch('firebase-config.json') const firebaseConfig = await response.json() const app = initializeApp(firebaseConfig) const auth = getAuth(app) onAuthStateChanged(auth, (user) => { if (user) { el.sectionSignin.style.display = 'none' el.sectionUser.style.display = 'block' el.sectionSignout.style.display = 'block' el.uid.innerHTML = user.uid } else { el.sectionSignin.style.display = 'block' el.sectionUser.style.display = 'none' el.sectionSignout.style.display = 'none' } }) el.buttonSignin.addEventListener('click', async (event) => { try { event.preventDefault() const email = el.inputEmail.value const password = el.inputPassword.value await signInWithEmailAndPassword(auth, email, password) } catch (err) { el.errorMessage.innerHTML = err.message console.error(err) } }) el.buttonSignup.addEventListener('click', async (event) => { try { event.preventDefault() const email = el.inputEmail.value const password = el.inputPassword.value await createUserWithEmailAndPassword(auth, email, password) } catch (err) { el.errorMessage.innerHTML = err.message console.error(err) } }) el.buttonSignout.addEventListener('click', async (event) => { try { event.preventDefault() await signOut(auth) } catch (err) { console.error(err) } }) }

上記は大まかに言うと、ログイン・新規登録時の入力画面、および成功時のUID表示・失敗時のエラー表示画面を出し分けている部分です。

メールアドレスやパスワードの精査・登録・判定などは行っていない事がわかりますね。

動作確認

ではローカル環境での実行のため、下記コマンドを入れます。

webpack serve

無事成功したら、ブラウザでhttp://localhost:8080/にアクセスしてみましょう。

ログイン／ユーザー登録のページが表示されることを確認して下さいね。

Authenticationテストアプリの仕組み

では実際に入力テストをしてみましょう。

登録済み情報でログイン

既にFirebase Console上で1件登録していた情報をいれてみます。

これで「ログイン」ボタンをすると、UIDが表示されます。正常にログインした状態ですね

違う情報を入力して「ログイン」しても、当然登録が無いのでエラーが出ます。

情報入力にミスした場合も同様にエラーが出る訳ですね。

新ログイン情報を登録

次に、新しく情報を入力して「新規登録」ボタンの方を押しましょう。

するとUIDが表示されログインができました。Firebase Console画面に1件情報が追加されたのがわかりますね。

次からは同じ情報で「ログイン」する事ができる様になる訳です。

webpack serveが効かない場合

コマンドでwebpack serveと入力したのに、エラーでうまくいかない場合があります。

「内部または外部コマンド、操作可能なプログラム、またはバッチファイルとして認識されません」と出る場合ですね。

webpack-cliが働いていない事が原因です。

以下のコマンドを入力して、改めてwebpack-cliをインストールします。

npm install -g webpack-cli

これでwebpack serveが有効になり、ローカル環境で確認する事ができるはずです。

参考サイト

以下のWEB記事を参考にしています。感謝です。

人気記事

Firebase関連記事