次の方法で共有

方法 : ASP.NET ログイン コントロールの高度な機能を使用する

  • [アーティクル]

更新 : 2007 年 11 月

Login コントロールは、ログイン フォームのすべての共通ユーザー インターフェイス (UI: User Interface) 要素を備える複合コントロールです。このコントロールはモジュール化され、各部分は個々にカスタマイズできます。カスタマイズできる部分には、[ユーザー名] と [パスワード] のテキスト ボックス、[送信] ボタン、新規ユーザーを作成するボタン、[次回のために保存] チェック ボックス、ユーザー向けのヘルプ情報などがあります。新しい要素を定義したり、既定のコンポーネントを再利用したりすることで、ログイン コントロールに独自のユーザー インターフェイスを定義できます。また、Login コントロールのユーザー インターフェイスのテキストおよび外観 (フォントおよび色) もカスタマイズできます。ASP.NET のテーマまたはスキンを適用して、Login コントロールの全体的な外観を変更することもできます。

また、ログイン情報をブラウザの永続的な Cookie に格納するかどうか、ユーザーがログインしているときに既定のログイン ページ以外のページ上にログイン コントロールを表示するかどうかなど、Login コントロールのより高度な機能を使用できます。最終的に、ログイン コントロールをテンプレートに変換し、コントロールの外観を完全に制御できます。

ユーザーがログインしているときにログイン コントロールを表示するかどうかを制御するには

  1. ページに Login コントロールを配置します。

    ms178340.alert_note(ja-jp,VS.90).gifメモ :

    既定では、このコントロールは Login.aspx という名前のログイン ページを操作するように設定されています。FormsAuthentication クラスの LoginUrl プロパティを設定すると、Web.config ファイル内のログイン ページの名前を変更できます。

  2. ユーザーがログインしていないときにだけ Login コントロール (このコントロールは、LoginUrl プロパティによって識別されるログイン ページ上に常に表示されます) を表示する場合は、VisibleWhenLoggedIn プロパティを false に設定します。

  1. コントロールに [次回のために保存] チェック ボックスを表示する場合は、DisplayRememberMe プロパティを true に設定します。ログインするときにユーザーが [次回のために保存] チェック ボックスをオンにすると、認証トークンがブラウザの永続的な Cookie に格納されます。

  2. [次回のために保存] チェック ボックスを既定でオンにする場合は、RememberMeSet プロパティを true に設定します。

  3. ユーザーが [次回のために保存] チェック ボックスをオフにできないようにして認証トークンが永続的な Cookie に格納されるようにするには、RememberMeSet プロパティを true に設定し、DisplayRememberMe プロパティを false に設定します。複数のユーザーを処理する公共のコンピュータからアクセスできるサイトでは、ユーザーの永続的な認証トークンを指定以外のユーザーが使用できるため、この方法はお勧めしません。

Login コントロールにヘルプ リンクを追加するには

  1. 新しいユーザー アカウントを作成できる URL にユーザーを誘導する Login コントロールへのリンクを追加するには、CreateUserText プロパティを "ここをクリックして登録" などのテキストに設定し、CreateUserUrl プロパティを ~/register.aspx などのヘルプ ページの URL に設定します。

    ms178340.alert_note(ja-jp,VS.90).gifメモ :

    この手順および以降の手順では、宛て先の URL が、認証が不要な場所にあることが必要です。

  2. パスワードを回復する URL にユーザーを誘導する Login コントロールへのリンクを追加するには、PasswordRecoveryText プロパティを "パスワードを忘れましたか?" などのテキストに設定し、PasswordRecoveryUrl プロパティを ~/recoverpassword.aspx などのへルプ ページの URL に設定します。

  3. ユーザーをヘルプ URL に誘導する Login コントロールへのリンクを追加するには、HelpPageText プロパティを "ヘルプを表示しますか?" などのテキストに設定し、HelpPageUrl プロパティを ~/userhelp.aspx などのヘルプ ページの URL に設定します。

Login コントロールにイメージを追加するには

  • [ログイン] ボタンの代わりにイメージを使用するには、LoginButtonImageUrl プロパティを ~/images/login.gif などのログイン イメージ ファイルの URL に設定します。

    CreateUserIconUrl、PasswordRecoveryIconUrl、および HelpPageIconUrl の各プロパティを使用して、それぞれ、ユーザーを作成する URL、パスワードを回復する URL、およびヘルプの URL へのリンクのイメージを含めることができます。

ログイン コントロールのテンプレートへの変換

Login コントロールは、Label や TextBox などの ASP.NET コントロールを含むテーブルとしてマークアップに定義されているテンプレートに変換できます。これらの要素を使用するか、独自の要素を追加することで、Login コントロールのカスタム テンプレートを作成できます。既定のテンプレートと同じコントロール ID が、ログイン テンプレートのマークアップを設定したコントロールに使用されます。

ログイン コントロールのあるテンプレートを使用するには

  1. デザイン ビューのページに Login コントロールを配置します。

  2. コントロールを右クリックし、ショートカット メニューの [テンプレートに変換] を選択します。

Login の変換方法は、DOCTYPE の宣言によって変わります。DOCTYPE の宣言が XHTML 1.0 Transitional (<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">) に設定されている場合、Login コントロールがテンプレートに変換されるときに作成されるテーブルにスタイルが適用されます。DOCTYPE の宣言が XHTML 1.0 Transitional に設定されていないか、宣言がない場合、生成される外部テーブルではスタイル情報が保持されません。

たとえば、Login コントロールの相対フォント サイズを設定し、コントロールをテンプレートに変換した場合、相対フォント サイズはテーブルに保持されません。フォント サイズを X-Large に設定した Login コントロールの例を次に示します。

<asp:login id="Login2" runat="server" font-size="X-Large" BackColor="#F7F6F3" BorderColor="#E6E2D8" BorderPadding="4" BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" ForeColor="#333333">
    <TitleTextStyle BackColor="#5D7B9D" Font-Bold="True" Font-Size="0.9em" ForeColor="White" />
    <InstructionTextStyle Font-Italic="True" ForeColor="Black" />
   <TextBoxStyle Font-Size="0.8em" />
    <LoginButtonStyle BackColor="#FFFBFF" BorderColor="#CCCCCC" BorderStyle="Solid" BorderWidth="1px"
    Font-Names="Verdana" Font-Size="0.8em" ForeColor="#284775" />
</asp:login>

上記のコードの Login コントロールをテンプレートに変換すると、作成されたテーブルでは、どのスタイルも適用されません。次の例は、テンプレートに変換するときに、上記のコントロールから生成されるコードのスニペットです。

<asp:login id="Login2" runat="server" font-size="X-Large" BackColor="#F7F6F3" BorderColor="#E6E2D8" BorderPadding="4" BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" ForeColor="#333333">
    <TitleTextStyle BackColor="#5D7B9D" Font-Bold="True" Font-Size="0.9em" ForeColor="White" />
    <InstructionTextStyle Font-Italic="True" ForeColor="Black" />
    <TextBoxStyle Font-Size="0.8em" />
    <LoginButtonStyle BackColor="#FFFBFF" BorderColor="#CCCCCC" BorderStyle="Solid" BorderWidth="1px"
    Font-Names="Verdana" Font-Size="0.8em" ForeColor="#284775" />
    <LayoutTemplate>
    <table border="0" cellpadding="4" cellspacing="0" style="border-collapse: collapse">
...

Login コントロールをテンプレートに変換するときに作成されるテーブルに、スタイル属性も適用する場合、デザイン ビューのコントロール メニューから [テンプレートに変換] を選択する前に、ページの DOCTYPE を XHTML 1.0 Transitional に設定します。

参照

概念

ASP.NET ログイン コントロールの外観のカスタマイズ

ASP.NET のテーマとスキンの概要

その他の技術情報

ログイン ツールボックス コントロール