Firebase Hostingのページで認証を実装する方法

2024年3月29日金曜日

Firebase

t f B! P L

Firebase Hostingを使用して、メールアドレスとパスワードによる認証機能を持つウェブアプリケーションを構築する方法について解説します。
このブログ記事では、ログイン画面と認証後のページを実装する方法を詳しく説明します。

ログイン画面の実装

まず、Firebaseの認証機能を利用してユーザーがメールアドレスとパスワードでログインできるログイン画面を実装します。以下はそのための基本的なHTMLコードです。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script type="module">
    import { initializeApp } from "https://www.gstatic.com/firebasejs/10.9.0/firebase-app.js";
    import { getAuth, signInWithEmailAndPassword, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/10.9.0/firebase-auth.js";

    // Firebaseの設定(Firebaseダッシュボードのプロジェクトの設定から確認可能)
    const firebaseConfig = {
      apiKey: "<API KEY>",
      authDomain: "xxxxxxxxx.firebaseapp.com",
      databaseURL: "https://xxxxxxxxx.firebaseio.com",
      projectId: "xxxxxxxxx",
      storageBucket: "xxxxxxxxx.appspot.com",
      messagingSenderId: "xxxxxxxxx",
      appId: "1:xxxxxxxxx:web:xxxxxxxxx"
    };

    // Initialize Firebase
    const app = initializeApp(firebaseConfig);
    const auth = getAuth(app);

    // ログイン認証
    async function login() {
      const email = document.getElementById('email').value;
      const password = document.getElementById('password').value;
      try {
        await signInWithEmailAndPassword(auth, email, password);
        // ログインに成功したら top.html にリダイレクト
        window.location.href = 'top.html';
      } catch (error) {
        // ログイン認証失敗
        document.getElementById('error-message').innerText = error.message;
      }
    }

    window.login = login;
  </script>
</head>

<body>
  <div>
    <input type="email" id="email" placeholder="Enter Email">
    <input type="password" id="password" placeholder="Enter Password">
    <button onclick="login()">Login</button>
    <div id="error-message" style="color: red;"></div>
  </div>
</body>

</html>

上のソースについて、少し解説します。

ログイン機能の実装

signInWithEmailAndPasswordメソッドを使って、メールアドレスとパスワードによるログイン機能を実装します。この関数は非同期関数であるため、awaitキーワードを使用して呼び出します。ログインが成功したら、別のページ(例えばtop.html)にリダイレクトします。ログインが失敗した場合は、エラーメッセージを表示します。

認証後のページを実装

認証が成功した後にユーザーを迎えるページもFirebaseの認証状態を確認して、適切なコンテンツを表示するようにします。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script type="module">
        // Import the functions you need from the SDKs you need
        import { initializeApp } from "https://www.gstatic.com/firebasejs/10.9.0/firebase-app.js";
        import { getAuth, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/10.9.0/firebase-auth.js";
    
	    // Firebaseの設定(Firebaseダッシュボードのプロジェクトの設定から確認可能)
	    const firebaseConfig = {
	      apiKey: "<API KEY>",
	      authDomain: "xxxxxxxxx.firebaseapp.com",
	      databaseURL: "https://xxxxxxxxx.firebaseio.com",
	      projectId: "xxxxxxxxx",
	      storageBucket: "xxxxxxxxx.appspot.com",
	      messagingSenderId: "xxxxxxxxx",
	      appId: "1:xxxxxxxxx:web:xxxxxxxxx"
	    };
    
        const app = initializeApp(firebaseConfig);
        const auth = getAuth(app);
    
        onAuthStateChanged(auth, (user) => {
          if (user) {
            document.getElementById("message").innerText = `ログイン済みです email=${user.email}`;
            // ...
          } else {
            // User is signed out
            document.getElementById("message").innerText = `ログインしていません`;
          }
        });

      </script>
</head>
<body>
    <div id="message"></div>
</body>
</html>

ここでのポイントは、onAuthStateChangedリスナーを使用して、Firebaseの認証状態が変更されたときに動作するコードを実装していることです。このリスナーは、ユーザーがログインしているかどうかを確認し、ログインしている場合はユーザーのメールアドレスを表示します。ログインしていない場合は、「ログインしていません」というメッセージを表示します。

スポンサーリンク
スポンサーリンク

このブログを検索

Profile

自分の写真
Webアプリエンジニア。 日々新しい技術を追い求めてブログでアウトプットしています。
プロフィール画像は、猫村ゆゆこ様に書いてもらいました。

仕事募集もしていたり、していなかったり。

QooQ