Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

Visual Studio 2008とASP.NET 3.5で広がったクライアントサイド開発

Visual Studio 2008徹底入門(4)

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
目次

JavaScriptを使用したフォーム認証の利用

 JavaScriptとScriptManagerコントロールの組み合わせで、ASP.NETのフォーム認証サービスを呼び出して利用できます(図4・図5)。

図4 ログイン画面
図4 ログイン画面
図5 リダイレクト先の画面
図5 リダイレクト先の画面

 この機能を利用すると、クライアントサイドからプロファイルサービスや、ロールサービス(次項で解説)を呼び出して活用することができます。この機能はASP.NET 2.0 AJAX Extensionsでも実装可能でしたが次項の理解を深めるために、ここでも解説します。

 なお、この利用方法は、「[ASP.NET AJAX]クライアントサイド・スクリプトからASP.NETの認証機能を利用するには?」にて詳しく解説されています。

 手順としては以下のようになります。

  1. Web サイト管理ツールからユーザーを登録する
  2. web.configに認証サービスの有効化設定をする
  3. Webフォームを作成する
  4. 認証サービスを呼び出すJavaScriptを記述する

Web サイト管理ツールからユーザーを登録する

 メニューバーの[Webサイト]から[ASP.NET 構成]を選択し、Webサイト管理ツールを起動します。その後、ロールの作成(サンプルではAdminとUser)、ユーザーの作成を行います(図6、図7)。

図6 Adminユーザーの作成
図6 Adminユーザーの作成
図7 Userユーザーの作成
図7 Userユーザーの作成

web.configで認証サービスを有効化する

 続いて、認証サービスを利用するためにweb.configに有効化するためにauthenticationService要素のenabled属性をtrueに設定します。

web.configの設定
<system.web.extensions>
    <scripting>
        <webServices>
            <authenticationService enabled="true"/>
        </webServices>
    </scripting>
</system.web.extensions>

 なお、本稿では認証ユーザーのみがアクセス可能なフォルダとしてRoleフォルダを用意しています。ソリューション エクスプローラ上でRoleフォルダを作成し、その直下に以下の記述をしたweb.configを配置します。これで、ログインしたユーザーのみがRoleフォルダ内にアクセスできます。

<authorization>
    <deny users="?"/>
        <allow users="*"/>
</authorization>

Webフォームを作成する

 それでは、実際に利用するWebフォームの作成をします。

Login.aspx内の設定
<asp:ScriptManager ID="ScriptManager1" runat="server">
    <Scripts>
        <asp:ScriptReference Path="~/Authentications.js" />
    </Scripts>
</asp:ScriptManager>
<table>
    <tr>
        <td>ユーザー名</td>
        <td><input type="text" id="username" /></td>
    </tr>
    <tr>
        <td>パスワード</td>
        <td><input type="password" id="password" /></td>
    </tr>
    <tr>
        <td colspan="2" align="center">
        <button onclick="OnClickLogin(); return false;">Login</button>
        </td>
    </tr>
</table>

 ポイントはASP.NETで提供されているログインコントロールを一切利用していない点です。

認証サービスを呼び出すJavaScriptを記述する

 最後に、認証サービスを呼び出すJavaScriptファイルの記述を行います。前項で設定したLoginボタンをクリックされた時に、Microsoft AJAX LibraryのSys.Services.AuthenticationServiceクラスを利用して認証サービスにアクセスします。

Authentication.jsファイルの一部
/// <reference name="MicrosoftAjax.js"/>

var username;
var password;

//  ページロード時に実行される処理
function pageLoad()
{
    username = $get("username");
    password = $get("password");
}            

//  Loginボタンクリック時に実行される処理
function OnClickLogin() 
{   
    //  認証サービスへのアクセス
    //  今回はユーザー名・パスワード・ログイン認証後の
    //リダイレクト先のURLを設定
    Sys.Services.AuthenticationService.login(username.value, 
        password.value,false,null,"Role/Default.aspx",null,null,null);
} 

 以上の設定でJavaScriptを使用したフォーム認証は完成です。実行すると、登録したユーザー・パスワードを入力した時のみ「Role/Default.aspx」へとリダイレクトされます(図4・図5)。

 Sys.Services.AuthenticationService.loginメソッドでは、次のような構文で記述することになっています。実際に設定した内容と照らし合わせて見てください。

loginメソッドの構文
Sys.Services.AuthenticationService.login(
    ユーザー名(必須),
    パスワード。既定値はnull,
    クッキーを永続的に保持するかどうか。既定値はfalse,
    カスタム情報(将来使用するために予約済)。既定値はnull,
    リダイレクト先のURL。既定値はnull,
    処理成功時のコールバック関数。既定値はnull,
    例外発生時のコールバック関数。既定値はnull,
    ユーザー コンテキスト)

 また、同じような手順でクライアントサイドからプロファイルサービスの呼び出しも可能です。こちらについては、「[ASP.NET AJAX]クライアントサイド・スクリプトからASP.NETのプロファイル機能を利用するには?」にて詳しく解説されているので、そちらを参考にしてください。

 

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

  • WINGSプロジェクト りばてぃ/FUJIKO/ナオキ(リバティ, フジコ, ナオキ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

バックナンバー

連載:Visual Studio 2008徹底入門

もっと読む

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5