Webアプリ

【Webアプリ】出退勤管理アプリ⑤ 「管理者専用ログインページ」の作成

 

「管理者専用ログインページ」を作っていきます。

社員用ログインページと管理者用ログインページが分けて、セキュリティを高め、使いやすくしていきます。

✅ やること整理

内容説明
①管理者専用のログインページ（admin-login.html）を作る
②ログイン後、管理者用の一覧ページ（admin.html）に飛ばす
③管理者じゃないとadmin.htmlに入れないようにする

admin-login.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>管理者ログイン</title>
    <script src="https://www.gstatic.com/firebasejs/10.11.0/firebase-app-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/10.11.0/firebase-auth-compat.js"></script>
</head>
<body>
    <h1>管理者ログインページ</h1>

    <input type="email" id="adminEmail" placeholder="メールアドレス"><br>
    <input type="password" id="adminPassword" placeholder="パスワード"><br>
    <button onclick="adminLogin()">ログイン</button>

    <p id="adminResult"></p>

    <script>
        // Firebase設定
        const firebaseConfig = {
 apiKey: "あなたのAPIキー",
            authDomain: "あなたのauthDomain",
            projectId: "あなたのprojectId",
            storageBucket: "あなたのstorageBucket",
            messagingSenderId: "あなたのmessagingSenderId",
            appId: "あなたのappId"
        };

        firebase.initializeApp(firebaseConfig);
        const auth = firebase.auth();

        // 管理者ログイン関数
        function adminLogin() {
            const email = document.getElementById('adminEmail').value;
            const password = document.getElementById('adminPassword').value;

            auth.signInWithEmailAndPassword(email, password)
                .then((userCredential) => {
                    // 管理者かどうかチェック（メールアドレスで判断）
                    if (email === "管理者のメールアドレス") {  // ここを書き換える！
                        window.location.href = "admin.html"; // 管理者ページに移動
                    } else {
                        document.getElementById('adminResult').innerText = "管理者アカウントではありません。";
                        auth.signOut(); // すぐログアウト
                    }
                })
                .catch((error) => {
                    document.getElementById('adminResult').innerText = "ログインエラー：" + error.message;
                });
        }
    </script>
</body>
</html>

ここに注意

ここ👇に、実際の管理者用のメールアドレスを入れます。

if (email === “管理者のメールアドレス”) {

例えば、管理者のアカウントが
admin@example.com
なら、

if (email === “admin@example.com”) {

に書き換えます！

おすすめ記事