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

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

Webアプリケーションでは、同じページ内でユーザーのログイン状態やロールによって表示内容を変える、という処理が頻繁に出てきます。この処理を ASP.NET で実装する場合、まずユーザーのログイン状態やロールを取得するところから始めて、さらにそれぞれの処理をプログラムで記述するなど、手間がかかる作業が必要でした。

しかし、ASP.NET 2.0 で追加された LoginView コントロールを使うと、この処理を簡単に実装できてしまいます。

今回は、「SuperUser」「NormalUser」という 2 つのロールを使用している Web サイトにおいて、次のような条件で表示内容を変えるページを作成します。

1. 未ログインの場合、ログイン画面（Login コントロール）を表示する。

2. ログイン済の場合、ロールの種類を表示する。

   

   図1 今回作成するページ（未ログイン状態の場合）
   
   

今回は、次の手順でログイン中のユーザー情報表示機能を作成します。

1. LoginView コントロールの配置

2. RoleGroups プロパティの設定

3. テンプレートの編集

4. 実行

(1) LoginView コントロールの配置

最初に、LoginViewコントロールを配置します（図2）。このコントロールは、ユーザーの状態（ログイン・未ログイン）やユーザーのロールごとにテンプレートを持っており、各テンプレートを編集することでそれぞれの状態で表示する画面を定義することができます。

(2) RoleGroups プロパティの設定

次に、RoleGroups プロパティの設定をするために、プロパティ ウィンドウの「RoleGroups」欄で [...] ボタンをクリックし、RoleGroup コレクション エディタを起動します。今回は、「NormalUser」「SuperUser」という 2 つのロールを登録します（図3）。

(3) テンプレートの編集

次に、各状態（未ログイン、NormalUser でログイン、SuperUser でログイン）に対応するテンプレートを編集します。LoginView タスクから「ビュー」を選択し、編集するテンプレートを選びます（図4）。

最初に未ログイン時のテンプレート（AnonymousTemplate）を選択し、デザイナ上から Login コントロールを貼り付け、デザインやプロパティを修正します（図5）。

次に、NormalUser ロールに対応するテンプレートを選び、図6 のような画面を作成します。

最後に、SuperUser ロールに対応するテンプレートを選び、図7 のような画面を作成します。

一連の操作によって追加する HTML コードを以下に示します（リスト 1）。

<asp:LoginView ID="LoginView1" runat="server">
    <RoleGroups>
        <asp:RoleGroup Roles="NormalUser">
            <ContentTemplate>
                <div style="width: 250px" >Normalユーザーでログインしました。</div>
                <hr />
                <input type="button" value="閉じる" onClick="javascript:window.close();" />
            </ContentTemplate>
        </asp:RoleGroup>
        <asp:RoleGroup Roles="SuperUser">
            <ContentTemplate>
                <div style="width: 250px" >SuperUserでログインしました。</div>
                <hr />
                <input type="button" value="閉じる" onClick="javascript:window.close();" />
            </ContentTemplate>
        </asp:RoleGroup>
    </RoleGroups>
    <AnonymousTemplate>
        <asp:Login ID="Login1" runat="server" BackColor="#EFF3FB" BorderColor="#B5C7DE" BorderPadding="4"
            BorderStyle="Solid" BorderWidth="1px" DestinationPageUrl="~/Default.aspx" Font-Names="Verdana"
            Font-Size="0.8em" ForeColor="#333333" Width="250px">
            <LoginButtonStyle BackColor="White" BorderColor="#507CD1" BorderStyle="Solid" BorderWidth="1px"
                Font-Names="Verdana" Font-Size="0.8em" ForeColor="#284E98" />
            <TextBoxStyle Font-Size="0.8em" />
            <TitleTextStyle BackColor="#507CD1" Font-Bold="True" Font-Size="0.9em" ForeColor="White" />
            <InstructionTextStyle Font-Italic="True" ForeColor="Black" />
        </asp:Login>
    </AnonymousTemplate>
</asp:LoginView>

リスト1

(4) 実行

以上で準備が整いました。ここであらかじめ、フォーム認証を有効にしてロールを登録したうえで、SuperUser ロールのみをもつユーザーと NormalUser ロールのみをもつユーザーを登録しておきます。

ここで、ログインしない状態で実行すると、ログイン画面が表示されます（図1）。

次に、SuperUser ロールをもつユーザーでログインした場合は、このように画面表示されます（図8）。

NormalUser ロールをもつユーザーでログインした場合は以下のようになります（図9）。

ページのトップへ