Condividi tramite


Utilizzo dell'autenticazione basata su form con ASP.NET AJAX

Aggiornamento: novembre 2007

È possibile utilizzare il servizio di autenticazione dell'applicazione°della°Microsoft AJAX Library per verificare le credenziali archiviate come parte del servizio di appartenenza ASP.NET.

In questo argomento viene illustrato come chiamare il servizio di autenticazione dell'applicazione dal browser utilizzando JavaScript.

È possibile accedere al servizio di autenticazione dallo script client utilizzando la classe AuthenticationService che supporta i metodi seguenti:

  • accesso. Questo metodo convalida le credenziali utente utilizzando il provider di appartenenze predefinito. Se le credenziali vengono verificate, il metodo invia al browser un cookie di autenticazione basato su form. La maggior parte delle applicazioni ASP.NET AJAX utilizza il metodo accesso, poiché le applicazioni che si avvalgono dell'autenticazione basata su form richiedono un cookie di autenticazione nel browser.

  • chiusura sessione. Questo metodo elimina il cookie di autenticazione basata su form.

Configurazione del server

Il server fornisce l'infrastruttura per elaborare le credenziali di identificazione di un utente, quali nome e password, e per convalidare tali credenziali. La funzionalità di autenticazione basata su form di ASP.NET consente di autenticare il nome di acceso e la password degli utenti utilizzando un form di accesso. Se l'applicazione autentica la richiesta, il server elabora un ticket contenente una chiave per la ridefinizione dell'identità dell'utente per le richieste successive.

La classe AuthenticationService fornisce la classe proxy JavaScript chiamata dallo script client per comunicare con il servizio di autenticazione sul server.

Nota:

È possibile creare un servizio di autenticazione server personalizzato. Per ulteriori informazioni, vedere AuthenticationServiceManager.

Per supportare l'autenticazione nello script client, il server deve essere configurato come descritto nelle sezioni seguenti.

Per ulteriori informazioni sull'autenticazione in ASP.NET, vedere Funzionamento della protezione di ASP.NET e Gestione di utenti tramite l'appartenenza.

Attivazione del servizio di autenticazione

Per utilizzare il servizio di autenticazione dallo script è necessario attivarlo in modo esplicito utilizzando l'elemento seguente nel file Web.config dell'applicazione:

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

Per ulteriori informazioni, vedere Procedura: configurare servizi ASP.NET in ASP.NET AJAX.

Il servizio di autenticazione richiede l'attivazione dell'autenticazione basata su form. Nell'esempio seguente viene illustrato come attivare l'autenticazione basata su form nel file Web.config dell'applicazione.

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

È necessario che siano attivati i cookie nel browser. Il servizio di autenticazione utilizza un cookie per il ticket di autenticazione che ridefinisce l'identità dell'utente durante le richieste successive.

Configurazione dell'accesso al database delle appartenenze

Per impostazione predefinita, ASP.NET utilizza un database di SQL Server Express per archiviare le informazioni sull'appartenenza. La stringa di connessione per il database viene definita nel file Machine.config ed è analoga a quella riportata di seguito:

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

Se si utilizza un database diverso per le informazioni sull'appartenenza, è possibile creare un elemento <connectionStrings> nel file Web.config dell'applicazione che punti a quel database. Per ulteriori informazioni, vedere Configurazione di un'applicazione ASP.NET per l'utilizzo delle appartenenze.

Creazione di una cartella con restrizioni

Se si desidera limitare l'accesso alle informazioni in modo che solo gli utenti connessi possano accedervi, creare un'area del sito con restrizioni. Si tratta in genere di una cartella inclusa nella radice dell'applicazione. Per limitare l'accesso alla cartella con restrizioni, creare un file Web.config nella cartella con restrizioni e aggiungervi la sezione <authorization>. Nell'esempio seguente viene illustrato il contenuto di un file Web.config che limita l'accesso solo agli utenti autenticati.

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

Esempio

Nell'esempio seguente viene illustrata una pagina Web ASP.NET in cui l'utente viene autenticato utilizzando lo script client. Per eseguire l'esempio, è necessario che il server sia stato configurato come descritto precedentemente in questo argomento. Si presuppone che il nome della cartella con restrizioni sia "Secured".

La pagina contiene un elemento <asp:ScriptManager>. Quando questo elemento viene incluso nella pagina, l'oggetto AuthenticationService diventa automaticamente disponibile per qualsiasi script client nella pagina.

La pagina contiene un pulsante con un gestore eventi associato denominato OnClickLogin. Il codice nel gestore metodi chiama il metodo login della classe AuthenticationService.

Dopo aver effettuato l'accesso, il testo del pulsante cambia e cambia anche il testo situato nella parte superiore della pagina per indicare lo stato di accesso. Fare clic sul collegamento che si trova nella parte inferiore della pagina per spostarsi in una pagina situata all'interno della cartella "Secured". Poiché è già stato effettuato l'accesso, è possibile accedere alle pagine presenti in questa cartella senza essere reindirizzati alla pagina di accesso.

Nella pagina di esempio è possibile fare clic su un pulsante per disconnettersi. Viene chiamato il gestore eventi del pulsante OnClickLogout che chiama il metodo logout. Dopo essersi disconnessi, il testo nella parte superiore della pagina cambia. Se si tenta di accedere alla pagina nella cartella protetta, si verrà reindirizzati alla pagina di accesso, poiché il browser non dispone più di un cookie di autenticazione basata su form.

Nel codice di esempio vengono fornite le funzioni di callback asincrono completate per i metodi login e logout. È anche possibile creare le funzioni di callback in errore per entrambi i metodi. Per ulteriori informazioni, vedere l'esempio fornito nei cenni preliminari sulla classe AuthenticationService.

<%@ 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();

Vedere anche

Attività

Procedura: configurare servizi ASP.NET in ASP.NET AJAX

Concetti

Utilizzo dei servizi Web in ASP.NET AJAX

Chiamata a servizi Web da script client

Utilizzo delle informazioni sui ruoli con ASP.NET AJAX

Utilizzo delle informazioni sul profilo con ASP.NET AJAX

Classe Sys.Services.AuthenticationService

Classe Sys.Services.ProfileService

Configurazione di un'applicazione ASP.NET per l'utilizzo delle appartenenze

Altre risorse

Funzionamento della protezione di ASP.NET

Gestione di utenti tramite l'appartenenza