ログインページを簡単に作る方法

サンプル コードのダウンロード (aspnettips_Login.msi, 233 KB)

※このサンプルをお使いいただくためには、Visual Studio 2005 が必要です。

従来の ASP.NET でログインページを作成する場合、データベースへのアクセスが必要なためコーディングの手間が大きく、開発者にとって悩みの種でした。しかし ASP.NET 2.0 で追加された Login コントロールを利用すれば、コードを追加をすることなく簡単にログイン機能が実現できてしまいます。

今回は、ログイン成功後に特定のページ（Top.aspx）へリダイレクトするような、ごく普通のログイン機能を実装します。なお、あらかじめ Web サイト管理ツールを使って、サイトへのアクセス方法を「インターネットから」に設定し、フォーム認証を有効にしておきます（Web.config を直接編集しても可）。

図1a 今回作成するページ

図1b リダイレクト先のページ（Top.aspx）

今回は、次の手順で Default.aspx 上にログイン機能を作成します（リダイレクト先として使う Web フォーム Top.aspx を、あらかじめ追加しておきます）。

1. Login コントロールを配置

2. コントロールのデザインを設定

3. ボタンやラベルの表示テキストを編集

4. ログイン失敗時の処理を設定

5. ログイン終了後のリダイレクト先 URL を設定

6. 実行

(1) Login コントロールを配置

最初に、Login コントロールを配置します（図2）。HTML ソースではこのような形で記述されることになります（図3）ので、ページを整形する場合はこの <asp:Login ...> ～ </ asp:Login> の部分を誤って変更しないよう注意してください。

図 2 Login コントロール

図3 HTML ソース

(2) コントロールのデザインを設定

次に、Login コントロールに対してデザインを設定します。プロパティの「スタイル」グループ（図4）で細かい設定ができるほか、デザイナ上から「Login タスク」を展開し、[オートフォーマット] を利用することも可能です。今回は、オートフォーマットで「クラシック」を選択します（図5）。

図4 スタイルに関するプロパティ

図5 オートフォーマットによる整形

(3) ボタンやラベルの表示テキストを編集

必要に応じて、ボタンやラベルの表示テキストを変更します。そのために、プロパティの「表示」グループ内の値を編集します。ここでは [ログイン] ボタンの表示テキストを「ログイン」から「Login!」に変更するため、LoginButtonText プロパティを編集します（図6）。

図6 ボタンの表示テキストを変更

(4) ログイン失敗時の処理を設定

ログインに失敗したときの動作やメッセージを設定します。失敗時の動作を設定する場合には FailureAction プロパティを、失敗時のメッセージを編集する場合は FailureText プロパティを編集します。今回は、 FailureText プロパティに「ログイン失敗です。ユーザー名、パスワードを確認してください」を設定し、メッセージを変更します（図7）。

図7 ログイン失敗時のメッセージ

(5) ログイン後のリダイレクト先 URL を設定

ログインが成功したときに、リダイレクトするページの URL を DestinationPageUrl プロパティに指定します。今回は、「~/Top.aspx」を設定します。（図8）。

図8 リダイレクト先の設定

(6) 実行

以上で準備が整いました。ユーザー名「testUser」、パスワード「testUser01#」をもつユーザーが登録されている状態で、ページをブラウザで表示し実行してみます。ユーザー名、パスワードを入力します（図9）。

図9 ユーザー名・パスワードの入力

[Login!] ボタンをクリックすると、ログイン処理が実行されます。ユーザー名とパスワード、いずれかに問題がある場合はログイン失敗となり、エラーメッセージが表示されます（図10）。ログインに成功した場合は、指定したページにリダイレクトされます（図11）。

図10 ログイン失敗

図11 ログイン成功