Verwenden der Formularauthentifizierung mit ASP.NET-AJAX

Artikel
10/22/2014

Aktualisiert: November 2007

Sie können den Microsoft AJAX Library-Anwendungsauthentifizierungsdienst verwenden, um die Anmeldeinformationen zu überprüfen, die als Teil des ASP.NET-Mitgliedschaftsdiensts gespeichert sind.

In diesem Thema wird erläutert, wie der Anwendungsauthentifizierungsdienst im Browser mithilfe von JavaScript aufgerufen wird.

Sie können im Clientskript auf den Authentifizierungsdienst zugreifen, indem Sie die AuthenticationService-Klasse verwenden, die die folgenden Methoden unterstützt:

login. Diese Methode überprüft die Benutzeranmeldeinformationen mithilfe des Standardmitgliedschaftsanbieters. Wenn die Anmeldeinformationen überprüft wurden, sendet die Methode ein Formularauthentifizierungscookie an den Browser. Die meisten ASP.NET-AJAX-Anwendungen verwenden die login-Methode, da formularauthentifizierte Anwendungen ein Authentifizierungscookie im Browser erfordern.
logout. Diese Methode löscht das Formularauthentifizierungscookie.

Konfigurieren des Servers

Der Server stellt die Infrastruktur zur Verfügung, um die identifizierenden Anmeldeinformationen eines Benutzers wie Name und Kennwort zu verarbeiten und zu überprüfen. Mit dem Formularauthentifizierungsfeature in ASP.NET können Sie mithilfe eines Anmeldeformulars den Anmeldenamen und das Kennwort eines Benutzers überprüfen. Wenn die Anwendung die Anforderung authentifiziert, wird durch den Server ein Ticket ausgegeben, das einen Schlüssel zur Wiederherstellung der Benutzeridentität in nachfolgenden Anforderungen enthält.

Durch die AuthenticationService-Klasse wird die JavaScript-Proxyklasse bereitgestellt, die Sie im Clientskript aufrufen, um mit dem Authentifizierungsdienst auf dem Server zu kommunizieren.

Hinweis:
Sie können einen eigenen Serverauthentifizierungsdienst erstellen. Weitere Informationen finden Sie unter AuthenticationServiceManager.

Zur Unterstützung der Authentifizierung in Clientskript muss der Server wie in den folgenden Abschnitten beschrieben konfiguriert werden.

Weitere Informationen zum Authentifizieren in ASP.NET finden Sie unter So funktioniert die ASP.NET-Sicherheit und unter Verwalten von Benutzern durch Mitgliedschaft.

Aktivieren des Authentifizierungsdiensts

Zum Verwenden des Authentifizierungsdiensts im Clientskript müssen Sie den Authentifizierungsdienst explizit aktivieren, indem Sie das folgende Element in der Datei Web.config der Anwendung verwenden:

<system.web.extensions>
  <scripting>
    <webServices>
      <authenticationService enabled="true" />
    </webServices>
  </scripting>
</system.web.extensions>

Weitere Informationen finden Sie unter Gewusst wie: Konfigurieren von ASP.NET-Diensten in ASP.NET AJAX.

Der Authentifizierungsdienst erfordert die Aktivierung der Formularauthentifizierung. Im folgenden Beispiel wird dargestellt, wie die Formularauthentifizierung in der Datei Web.config der Anwendung aktiviert wird.

<system.web>
  <authentication mode="Forms">
    <forms cookieless="UseCookies" 
      loginUrl="~/login.aspx"/>
  </authentication>
<system.web>

Hinweis:
Im Browser müssen Cookies aktiviert sein. Der Authentifizierungsdienst verwendet ein Cookie für das Authentifizierungsticket, durch das bei folgenden Anforderungen die Identität des Benutzers wiederhergestellt wird.

Konfigurieren des Zugriffs auf die Mitgliedschaftsdatenbank

Standardmäßig wird durch ASP.NET eine SQL Server Express-Datenbank verwendet, um Mitgliedschaftsinformationen zu speichern. Die Verbindungszeichenfolge für die Datenbank wird in der Datei Machine.config definiert und sieht wie folgt aus:

<connectionStrings>
  <add name="LocalSqlServer" 
  connectionString="data source=.\SQLEXPRESS;Integrated Security=SSPI;
AttachDBFilename=|DataDirectory|aspnetdb.mdf;
User Instance=true" providerName="System.Data.SqlClient" />
</connectionStrings>

Wenn Sie eine andere Datenbank für Mitgliedschaftsinformationen verwenden, können Sie ein <connectionStrings>-Element in der Datei Web.config der Anwendung erstellen, das auf die Datenbank zeigt. Weitere Informationen finden Sie unter Konfigurieren einer ASP.NET-Anwendung für die Verwendung der Mitgliedschaft.

Erstellen eines zugriffsbeschränkten Ordners

Wenn Sie den Zugriff auf Informationen so beschränken möchten, dass nur angemeldete Benutzer darauf zugreifen können, können Sie auf der Website einen zugriffsbeschränkten Bereich erstellen. Dies ist in der Regel ein Ordner unterhalb des Anwendungsstammverzeichnisses. Um den Zugriff auf den zugriffsbeschränkten Ordner einzuschränken, erstellen Sie im zugriffsbeschränkten Ordner eine Web.config-Datei und fügen dieser dann einen <authorization>-Abschnitt hinzu. Im folgenden Beispiel wird der Inhalt einer Web.config-Datei gezeigt, die den Zugriff nur für authentifizierte Benutzer zulässt.

<?xml version="1.0"?>
<configuration>
  <system.web>
    <authorization>
      <deny users="?"/>
      <allow users="*"/>
    </authorization>
  </system.web>
</configuration>

Beispiel

Das folgende Beispiel enthält eine ASP.NET-Webseite, die den Benutzer mithilfe von Clientskript authentifiziert. Das Beispiel erfordert eine Konfiguration des Servers, wie weiter oben in diesem Thema beschrieben. Als Name für den zugriffsbeschränkten Ordner wird Secured angenommen.

Die Seite enthält ein <asp:ScriptManager>-Element. Wenn dieses Element auf der Seite enthalten ist, steht das AuthenticationService-Objekt automatisch für jedes Clientskript in der Seite zur Verfügung.

Die Seite verfügt über eine Schaltfläche mit einem verknüpften Ereignishandler mit dem Namen OnClickLogin. Durch Code im Methodenhandler wird die login-Methode der AuthenticationService-Klasse aufgerufen.

Nach der Anmeldung wechselt der Text der Schaltfläche, und der Text oben auf der Seite gibt nun den Anmeldestatus an. Klicken Sie auf den Link unten auf der Seite, um zu einer Seite im Ordner Secured zu wechseln. Da Sie jetzt angemeldet sind, können Sie auf Seiten in diesem Ordner zugreifen, ohne auf die Anmeldeseite umgeleitet zu werden.

Auf der Beispielseite können Sie auf eine Schaltfläche klicken, um sich abzumelden. Dies ruft den OnClickLogout-Schaltflächenereignishandler auf, der die logout-Methode aufruft. Nachdem Sie sich abgemeldet haben, ändert sich der Text oben auf der Seite. Wenn Sie versuchen, auf die Seite im gesicherten Ordner zuzugreifen, werden Sie auf die Anmeldeseite umgeleitet, da Ihr Browser nicht mehr über das Formularauthentifizierungscookie verfügt.

Der Beispielcode enthält asynchrone vollständige Rückruffunktionen für die login-Methode und die logout-Methode. Sie können auch Fehlerrückruffunktionen für beide Methoden erstellen. Weitere Informationen finden Sie im Beispiel in der Übersicht über die AuthenticationService-Klasse.

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
    <title>Authentication Service</title>
    <style type="text/css">
        body {  font: 11pt Trebuchet MS;
                font-color: #000000;
                padding-top: 72px;
                text-align: center }

        .text { font: 8pt Trebuchet MS }
    </style>
</head>
<body>
      <form id="form1" >

        <asp:ScriptManager  ID="ScriptManagerId">
            <Scripts>
                <asp:ScriptReference Path="Authentication.js" />
            </Scripts>
        </asp:ScriptManager>

        <h2>Authentication Service</h2>

            <span id="loggedin" 
                style="visibility:hidden; color:Green; font-weight:bold; font-size:large" 
                visible="false"><b>You are logged in! </b>
            </span> 

            <span id="notloggedin" 
                style="visibility:visible;color:Red; font-weight:bold; font-size:large">
                You are logged out!    
                <br /> <br />
                <span style="font-weight:normal; font-size:medium; color:Black">
                    Please, use one of the following [username, password] 
                    combinations:<br />
                    [user1, u$er1] <br/>
                    [user2, u$er2] <br/> 
                    [user3, u$er3]   
                </span>   
            </span>


        <br /><br />
        <div>
        <table>
            <tr id="NameId"  style="visibility:visible;">
                <td style="background-color:Yellow; font-weight:bold; color:Red">
                    User Name:
                </td>
                <td>
                    <input type="text" id="username"/>
                </td> 
            </tr>
            <tr id="PwdId"  style="visibility:visible;">
               <td style="background-color:Yellow; font-weight:bold; color:Red">
                    Password:
                </td>
                <td>
                    <input type="password" id="password" />
                </td> 
            </tr>   
            <tr>
                <td colspan="2" align="center">
                    <button id="ButtonLogin"   
                        style="background-color:Aqua;"
                        onclick="OnClickLogin(); return false;">Login</button>
                    <button id="ButtonLogout"   
                        style="background-color:Aqua; visibility:hidden;"
                        onclick="OnClickLogout(); return false;">Logout</button>
                </td> 
            </tr>          
        </table>
        <br />
        <br />
        <a href="secured/Default.aspx" target="_top2" >
            Attempt to access a page 
            that requires authenticated users.</a>
        <br />
        <br />
        <!-- <a href="CreateNewUser.aspx"><b>Create a new user.</b></a>
        -->        
        </div>

   </form>

   <hr />

   <div id="FeedBackID" style="visibility:visible" />


</body>
</html>

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>Authentication Service</title>
    <style type="text/css">
        body {  font: 11pt Trebuchet MS;
                font-color: #000000;
                padding-top: 72px;
                text-align: center }

        .text { font: 8pt Trebuchet MS }
    </style>
</head>
<body>
      <form id="form1" >

        <asp:ScriptManager  ID="ScriptManagerId">
            <Scripts>
                <asp:ScriptReference Path="Authentication.js" />
            </Scripts>
        </asp:ScriptManager>

        <h2>Authentication Service</h2>

            <span id="loggedin" 
                style="visibility:hidden; color:Green; font-weight:bold; font-size:large" 
                visible="false"><b>You are logged in! </b>
            </span> 

            <span id="notloggedin" 
                style="visibility:visible;color:Red; font-weight:bold; font-size:large">
                You are logged out!    
                <br /> <br />
                <span style="font-weight:normal; font-size:medium; color:Black">
                    Please, use one of the following [username, password] 
                    combinations:<br />
                    [user1, u$er1] <br/>
                    [user2, u$er2] <br/> 
                    [user3, u$er3]   
                </span>   
            </span>


        <br /><br />
        <div>
        <table>
            <tr id="NameId"  style="visibility:visible;">
                <td style="background-color:Yellow; font-weight:bold; color:Red">
                    User Name:
                </td>
                <td>
                    <input type="text" id="username"/>
                </td> 
            </tr>
            <tr id="PwdId"  style="visibility:visible;">
               <td style="background-color:Yellow; font-weight:bold; color:Red">
                    Password:
                </td>
                <td>
                    <input type="password" id="password" />
                </td> 
            </tr>   
            <tr>
                <td colspan="2" align="center">
                    <button id="ButtonLogin"   
                        style="background-color:Aqua;"
                        onclick="OnClickLogin(); return false;">Login</button>
                    <button id="ButtonLogout"   
                        style="background-color:Aqua; visibility:hidden;"
                        onclick="OnClickLogout(); return false;">Logout</button>
                </td> 
            </tr>          
        </table>
        <br />
        <br />
        <a href="secured/Default.aspx" target="_top2" >
            Attempt to access a page 
            that requires authenticated users.</a>
        <br />
        <br />
        <!-- <a href="CreateNewUser.aspx"><b>Create a new user.</b></a>
        -->        
        </div>

   </form>

   <hr />

   <div id="FeedBackID" style="visibility:visible" />


</body>
</html>

var usernameEntry;
var passwordEntry;
var username;
var password;
var textLoggedIn;
var textNotLoggedIn;
var buttonLogin;  
var buttonLogout; 

function pageLoad()
{
    usernameEntry = $get("NameId");
    passwordEntry = $get("PwdId");
    username = $get("username");
    password = $get("password");
    textLoggedIn = $get("loggedin");
    textNotLoggedIn = $get("notloggedin");
    buttonLogin = $get("ButtonLogin");  
    buttonLogout = $get("ButtonLogout"); 
}            

// This function sets and gets the default
// login completed callback function.
function SetDefaultLoginCompletedCallBack()
{
    // Set the default callback function.
    Sys.Services.AuthenticationService.set_defaultLoginCompletedCallback(OnLoginCompleted);

    // Get the default callback function.
    var callBack =     
        Sys.Services.AuthenticationService.get_defaultLoginCompletedCallback();
}

// This function sets and gets the default
// logout completed callback function.
function SetDefaultLogoutCompletedCallBack()
{
    // Set the default callback function.
    Sys.Services.AuthenticationService.set_defaultLogoutCompletedCallback(OnLogoutCompleted);

    // Get the default callback function.
    var callBack =     
        Sys.Services.AuthenticationService.get_defaultLogoutCompletedCallback();
}

// This function sets and gets the default
// failed callback function.
function SetDefaultFailedCallBack()
{
    // Set the default callback function.
    Sys.Services.AuthenticationService.set_defaultFailedCallback(OnFailed);

    // Get the default callback function.
    var callBack =     
        Sys.Services.AuthenticationService.get_defaultFailedCallback();
}

// This function calls the login method of the
// authentication service to verify 
// the credentials entered by the user.
// If the credentials are authenticated, the
// authentication service issues a forms 
// authentication cookie. 
function OnClickLogin() 
{   
    // Set the default callback functions.
    SetDefaultLoginCompletedCallBack();
    SetDefaultLogoutCompletedCallBack();
    SetDefaultFailedCallBack();

    // Call the authetication service to authenticate
    // the credentials entered by the user.
    Sys.Services.AuthenticationService.login(username.value, 
        password.value, false,null,null,null,null,"User Context");
}

// This function calls the logout method of the
// authentication service to clear the forms 
// authentication cookie.
function OnClickLogout() 
{  
   // Clear the forms authentication cookie. 
   Sys.Services.AuthenticationService.logout(null, 
        null, null, null); 
} 

// This is the callback function called 
// if the authentication fails.      
function OnFailed(error, 
    userContext, methodName)
{           
    // Display feedback message.
    DisplayInformation("error:message = " + 
        error.get_message());
    DisplayInformation("error:timedOut = " + 
        error.get_timedOut());
    DisplayInformation("error:statusCode = " + 
        error.get_statusCode());            
}


// The callback function called 
// if the authentication completed successfully.
function OnLoginCompleted(validCredentials, 
    userContext, methodName)
{
    
    // Clear the user password.
    password.value = "";

    // On success there will be a forms 
    // authentication cookie in the browser.
    if (validCredentials == true) 
    {

        // Clear the user name.
        username.value = "";

        // Hide login fields.
        buttonLogin.style.visibility = "hidden";
        usernameEntry.style.visibility = "hidden";
        passwordEntry.style.visibility = "hidden";
        textNotLoggedIn.style.visibility = "hidden";  

        // Display logout fields.
        buttonLogout.style.visibility = "visible";
        textLoggedIn.style.visibility = "visible";

        // Clear the feedback area.
        DisplayInformation(""); 
    }
    else 
    {
        textLoggedIn.style.visibility = "hidden";
        textNotLoggedIn.style.visibility = "visible";
        DisplayInformation(
            "Login Credentials Invalid. Could not login"); 
    }
}

// This is the callback function called 
// if the user logged out successfully.
function OnLogoutCompleted(result) 
{
    // Display login fields.
    usernameEntry.style.visibility = "visible";
    passwordEntry.style.visibility = "visible";
    textNotLoggedIn.style.visibility = "visible";  
    buttonLogin.style.visibility = "visible";

    // Hide logout fields.
    buttonLogout.style.visibility = "hidden";
    textLoggedIn.style.visibility = "hidden";
}                   

// This function displays feedback
// information for the user.    
function DisplayInformation(text)
{
    document.getElementById("FeedBackID").innerHTML = 
        "<br/>" + text;

    // Display authentication service information.


    var userLoggedIn =
        Sys.Services.AuthenticationService.get_isLoggedIn();
    
    var authServiceTimeout =       
        Sys.Services.AuthenticationService.get_timeout();

    var userLoggedInfo = 
        "<br/> User logged in:                 " + userLoggedIn;

    var timeOutInfo = 
        "<br/> Authentication service timeout: " + authServiceTimeout;

    document.getElementById("FeedBackID").innerHTML = 
        userLoggedInfo + timeOutInfo; 
}

if (typeof(Sys) !== "undefined") Sys.Application.notifyScriptLoaded();

Siehe auch

Freigeben über

Verwenden der Formularauthentifizierung mit ASP.NET-AJAX

Konfigurieren des Servers

Aktivieren des Authentifizierungsdiensts

Konfigurieren des Zugriffs auf die Mitgliedschaftsdatenbank

Erstellen eines zugriffsbeschränkten Ordners

Beispiel

Siehe auch

Aufgaben

Konzepte

Weitere Ressourcen

Zusätzliche Ressourcen