AJAX と JSON でログイン検証を実装する

はじめに

このプロジェクトでは、AJAX と JSON データ転送を使ってログイン検証機能を実装する方法を学びます。このプロジェクトでは、ログインフォームを作成し、AJAX を使ってフォームの送信を処理し、サーバーサイドでユーザーのログイン資格情報を検証します。

👀 プレビュー

🎯 タスク

このプロジェクトでは、以下のことを学びます。

プロジェクト環境を準備し、必要なファイルと依存関係をセットアップする方法。
HTML を使って AjaxJson.jsp ページにログインフォームを実装する方法。
jQuery と AJAX を使ってログインフォームの送信を処理する方法。
ログインデータを JSON 形式でカプセル化し、サーバーに送信する方法。
サーバーからの JSON 応答を受信して処理し、ログイン状態を判断する方法。
ログイン結果に基づいてユーザーを適切なページにリダイレクトする方法。

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

フルページリフレッシュなしでサーバーにデータを送信するために AJAX を使う。
クライアントとサーバー間のデータ転送に JSON データ形式を使う。
クライアントサイドでのフォーム送信とユーザー入力検証を処理する。
サーバーの応答を処理し、それに応じてユーザーインターフェイスを更新する。
クライアントサイドとサーバーサイドのコンポーネントを統合して、完全なログイン検証機能を作成する。

プロジェクト環境を準備する

このステップでは、プロジェクト環境を準備する方法を学びます。以下の手順に従ってこのステップを完了します。

実験環境を開き、以下のコマンドを使って AjaxJsonProject ディレクトリに移動します。
```
cd AjaxJsonProject/AjaxJsonProject
```
以下のコマンドで Tomcat サーバーを起動します。
```
mvn tomcat7:run
```
環境の上の Web 8080 タブに切り替えて、プロジェクトが実行されていることを確認します。

ログインフォームを実装する

このステップでは、AjaxJson.jsp ページにログインフォームを実装する方法を学びます。以下の手順に従ってこのステップを完了します。

AjaxJsonProject/AjaxJsonProject/src/main/webapp ディレクトリにある AjaxJson.jsp ファイルを開きます。

以下の HTML コードを追加してログインフォームを作成します。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login Form</title>
</head>
<body>
    <h2>Login Form</h2>
    <form id="loginForm">
        <label for="userName">Username:</label>
        <input type="text" id="userName" name="userName"><br><br>

        <label for="userPwd">Password:</label>
        <input type="password" id="userPwd" name="userPwd"><br><br>

        <input type="submit" value="Login">
    </form>
</body>
</html>

<head> セクションに以下のスクリプトタグを追加して jQuery ライブラリを読み込みます。
```
<script src="https://cdn.staticfile.org/jquery/1.12.4/jquery.min.js"></script>
```

AJAX を使ってログインフォームの送信を処理する

このステップでは、AJAX を使ってログインフォームの送信を処理する方法を学びます。以下の手順に従ってこのステップを完了します。

AjaxJson.jsp ファイルの <script> タグの中に以下の JavaScript コードを追加します。

<script>
    $(document).ready(function(){
        $("#loginForm").submit(function(event){
            // デフォルトのフォーム送信動作を防止する
            event.preventDefault();

            // 入力されたユーザー名とパスワードを取得する
            var $userName = $("#userName").val();
            var $userPwd = $("#userPwd").val();

            // ユーザー名とパスワードが空かどうかをチェックする
            if($userName.trim() === "" || $userPwd.trim() === ""){
                alert("Username and password cannot be empty");
                return;
            }

            // 送信するデータをJSON形式でカプセル化する
            var data = {
                "u_name": $userName,
                "u_pwd": $userPwd
            };

            // AJAXリクエストを送信する
            $.ajax({
                type: "POST",
                url: "/AJAXJSONLoginServlet",
                contentType: "application/json",
                data: JSON.stringify(data),
                dataType: "json",
                success: function(response){
                    // 返されたデータに基づいてログインが成功したかどうかをチェックする
                    if(response.code === 200){
                        alert("Login successful");
                        // ログイン成功後にindex.jspにリダイレクトする
                        window.location.href = "index.jsp";
                    } else {
                        alert("Incorrect username or password");
                    }
                },
                error: function(xhr, status, error){
                    console.error("AJAX request failed: " + status + ", " + error);
                }
            });
        });
    });
</script>

このコードは、デフォルトのフォーム動作を防止し、入力されたユーザー名とパスワードを取得し、/AJAXJSONLoginServlet エンドポイントに AJAX リクエストを送信することで、フォームの送信を処理します。
バックエンドは code プロパティを持つ JSON 応答を返します。コードが 200 の場合、ログインは成功し、ユーザーは index.jsp ページにリダイレクトされます。コードが 200 でない場合、ログインは失敗し、エラーメッセージが表示されます。

ログイン機能をテストする

mvn tomcat7:run コマンドで Tomcat サーバーを起動していない場合は起動します。
環境の上の Web 8080 タブを開いて、プロジェクトが動作していることを確認します。再度実行する際は、リフレッシュする必要があります。
有効なユーザー名とパスワードを入力してから、「Login」ボタンをクリックします。
ログインに成功すると、「Login successful」というアラートメッセージが表示され、index.jsp ページにリダイレクトされるはずです。
ログインに失敗すると、「Incorrect username or password」というアラートメッセージが表示されるはずです。

おめでとうございます！AJAX と JSON データ転送を使ってログイン検証機能を正常に実装しました。

まとめ

おめでとうございます！このプロジェクトを完了しました。あなたは実験技術を向上させるために LabEx でさらに多くの実験を行うことができます。

AJAX を使った JSON データ転送