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の認証状態が変更されたときに動作するコードを実装していることです。このリスナーは、ユーザーがログインしているかどうかを確認し、ログインしている場合はユーザーのメールアドレスを表示します。ログインしていない場合は、「ログインしていません」というメッセージを表示します。
0 件のコメント:
コメントを投稿