Compartilhar via


Usando Formulários de Autenticação com AJAX do ASP.NET

Você pode usar o serviço de autenticação de aplicativo Microsoft AJAX Library para verificar as credenciais que são armazenadas como parte do serviço de associação do ASP.NET.

Este tópico mostra como chamar o serviço de autenticação do aplicativo a partir do navegador usando JavaScript.

Você pode acessar o serviço de autenticação de script de cliente, usando a classe AuthenticationService, que oferece suporte aos seguintes métodos:

  • loginEsse método valida as credenciais do usuário, usando as provedor de associações padrão.Se as credenciais são verificadas, o método envia um cookie de autenticação por formulários para o navegador.A maioria dos aplicativos ASP.NET AJAX usará o método login, pois aplicativos autenticados por formulário exigem um cookie de autenticação no navegador.

  • logout.Este método limpa o cookie de autenticação por formulários.

Configurando o Servidor

O servidor fornece a infraestrutura para processar as credenciais de identificação, como nome e senha de um usuário e validar essas credenciais.O recurso de autenticação por formulários no ASP.NET permite que você autentique nome de login e senha do usuário usando um formulário de login.Se o aplicativo autentica a solicitação, o sistema emite uma permissão que contém uma chave para restabelecer a identidade do usuário para solicitações subsequentes.

A classe AuthenticationService fornece a classe de proxy de JavaScript que você chama a partir do script de cliente para se comunicar com o serviço de autenticação no servidor.

Observação:

Você pode criar seu próprio serviço de autenticação no servidor.Para obter mais informações, consulte AuthenticationServiceManager.

Para dar suporte à autenticação no script de cliente, o servidor deve ser configurado conforme descrito nas seções as seguir.

Para obter mais informações sobre a funcionalidade de AJAX no ASP.NET, consulte Como: A Segurança ASP.NET Funciona e Gerenciando usuários usando Associação.

Habilitando o serviço de autenticação

Para usar o serviço de autenticação a partir do script de cliente, você deve ativar explicitamente o serviço de autenticação usando o seguinte elemento no arquivo Web.config do aplicativo:

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

Para obter mais informações, consulte Como: Configurar os serviços do ASP.NET ASP.NET AJAX.

O serviço de autenticação requer autenticação por formulários para ser ativado.O exemplo a seguir mostra como habilitar a autenticação por formulários no arquivo Web.config do aplicativo.

<system.web>
  <authentication mode="Forms">
    <forms cookieless="UseCookies" 
      loginUrl="~/login.aspx"/>
  </authentication>
<system.web>
Observação:

O navegador deve ter cookies permitidos.O serviço de autenticação usa um cookie para a permissão de autenticação que restabelece a identidade do usuário durante as solicitações subsequentes.

Configurando o Acesso ao Banco de Dados de Membro

Por padrão, o ASP.NET usa um banco de dados do SQL Server Express para armazenar informações de membros.O cadeia de caracteres de conexão para o banco de dados está definido no arquivo Machine.config e é parecido com o seguinte:

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

Se você estiver usando um banco de dados diferente para informações de membros, você pode criar um elemento <connectionStrings> no arquivo Web.config do aplicativo que aponta para esse banco de dados.Para obter mais informações, consulte Configurando um aplicativo ASP.NET para usar associação.

Criar uma Pasta Restrita

Se você desejar limitar o acesso às informações de modo que somente os usuários conectados podem acessá-lo, você cria uma área do site restrita.Isso é geralmente uma pasta na raiz do aplicativo.Para limitar o acesso para a pasta restrita, você criar um arquivo Web.config na pasta restrita e adicione uma seção <authorization> nele.O exemplo a seguir mostra o conteúdo de um arquivo Web.config que restringe o acesso somente para usuários autenticados.

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

Exemplo

O exemplo a seguir mostra um página da Web do ASP.NET que autentica o usuário usando script de cliente.O exemplo requer que você tenha configurado o servidor conforme descrito anteriormente neste tópico.O nome da pasta restrita é assumido ser Secured.

A página contém um elemento <asp:ScriptManager>.Quando esse elemento é incluído na página, o objeto AuthenticationService está automaticamente disponível para qualquer script de cliente na página.

A página tem um botão com um manipulador de eventos associado chamado OnClickLogin.Código no manipulador de método chama o método login da classe AuthenticationService.

Após você estar conectado, o texto do botão altera e o texto na parte superior da página altera para indicar o seu status de login.Clique no link na parte inferior da página para ir para uma página localizada na pasta Secured.Porque agora você está agora conectado, você pode acessar as páginas na pasta sem ser redirecionado para a página de login.

Na página de exemplo, você pode clicar um botão para desconectar.Isso chama o botão manipulador de eventos OnClickLogout, que chama o método logout.Após você ter desconectado, o texto na parte superior da página é alterado.Se você tentar acessar a página na pasta protegida, você será redirecionado para a página de login, porque o navegador não tem um cookie de autenticação por formulários.

O código de exemplo fornece funções assíncronas para retorno de chamadas concluídas para os métodos login e logout.Você também pode criar funções para falhas de retorno de chamada para ambos os métodos.Para obter mais informações, consulte o exemplo fornecido na visão geral da 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();

Consulte também

Tarefas

Como: Configurar os serviços do ASP.NET ASP.NET AJAX

Conceitos

Usando Serviço Web AJAX ASP.NET

Chamando Serviços da Web de Scripts Clientes

Usando Funções de Informações com AJAX do ASP.NET

Usando Perfis de Informações com AJAX do ASP.NET

Classe Sys.Services.AuthenticationService

Classe Sys.Services.ProfileService

Configurando um aplicativo ASP.NET para usar associação

Outros recursos

Como: A Segurança ASP.NET Funciona

Gerenciando usuários usando Associação