Asp .Net - Autenticação com JQuery/JSON

Neste tutorial será explicado como fazer autenticação Asp .Net utilizando JQuery com JSON. Fará a autenticação com AJAX, que dará um efeito super interessante para o login de sua aplicação ou site.

Para iniciar crie um projeto em branco e adicione as seguintes páginas:
Default.aspx - Essa já vem, será nossa página com o formulário de login.
Login.aspx - Essa será nossa página que irá fazer o login e retornar em JSON.
MinhaPagina.aspx - Essa será nossa página de teste para verificar se a autenticação está funcionando.

Vamos configurar nosso Web.config para que a página Default.aspx seja o login e tenhamos acesso a página Login.aspx mesmo sem estar logado.
[Web.config]

<?xml version="1.0"?>
<configuration>
    <configSections>
        <sectionGroup name="system.web.extensions" 
        type="System.Web.Configuration.SystemWebExtensionsSectionGroup, 
        System.Web.Extensions, Version=3.5.0.0, Culture=neutral, 
        PublicKeyToken=31BF3856AD364E35">
        <sectionGroup name="scripting" type="System.Web.Configuration.ScriptingSectionGroup, 
        System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">
        <section name="scriptResourceHandler" 
        type="System.Web.Configuration.ScriptingScriptResourceHandlerSection, 
        System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" 
        requirePermission="false" allowDefinition="MachineToApplication"/>
        <sectionGroup name="webServices" type="System.Web.Configuration.ScriptingWebServicesSectionGroup, 
        System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">
        <section name="jsonSerialization" type="System.Web.Configuration.ScriptingJsonSerializationSection, 
        System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" 
        requirePermission="false" allowDefinition="Everywhere" />
        <section name="profileService" type="System.Web.Configuration.ScriptingProfileServiceSection, 
        System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" 
        requirePermission="false" allowDefinition="MachineToApplication" />
        <section name="authenticationService" 
        type="System.Web.Configuration.ScriptingAuthenticationServiceSection, System.Web.Extensions, 
        Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" 
        allowDefinition="MachineToApplication" />
        <section name="roleService" type="System.Web.Configuration.ScriptingRoleServiceSection, 
        System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" 
        requirePermission="false" allowDefinition="MachineToApplication" />
        </sectionGroup>
        </sectionGroup>
        </sectionGroup>
    </configSections>  

    <appSettings/>
    <connectionStrings/>
    <system.web>
        <compilation debug="false">
            <assemblies>
                <add assembly="System.Core, Version=3.5.0.0, Culture=neutral, 
                PublicKeyToken=B77A5C561934E089"/>
                <add assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, 
                PublicKeyToken=31BF3856AD364E35"/>
                <add assembly="System.Data.DataSetExtensions, Version=3.5.0.0, Culture=neutral, 
                PublicKeyToken=B77A5C561934E089"/>
                <add assembly="System.Xml.Linq, Version=3.5.0.0, Culture=neutral, 
                PublicKeyToken=B77A5C561934E089"/>
          </assemblies>
        </compilation>
        <authentication mode="Forms">
            <forms loginUrl="Default.aspx" path="/" protection="All" timeout="10" />
        </authentication>
        <!--
        <customErrors mode="RemoteOnly" defaultRedirect="GenericErrorPage.htm">
            <error statusCode="403" redirect="NoAccess.htm" />
            <error statusCode="404" redirect="FileNotFound.htm" />
        </customErrors>
        -->
        <pages>
            <controls>
                <add tagPrefix="asp" namespace="System.Web.UI" 
                assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, 
                PublicKeyToken=31BF3856AD364E35"/>
                <add tagPrefix="asp" namespace="System.Web.UI.WebControls" 
                assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, 
                PublicKeyToken=31BF3856AD364E35"/>
            </controls>
        </pages>

        <httpHandlers>
            <remove verb="*" path="*.asmx"/>
            <add verb="*" path="*.asmx" validate="false" 
            type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, 
            Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
            <add verb="*" path="*_AppService.axd" validate="false" 
            type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, 
            Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
            <add verb="GET,HEAD" path="ScriptResource.axd" 
            type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, 
            Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" validate="false"/>
        </httpHandlers>
        <httpModules>
            <add name="ScriptModule" type="System.Web.Handlers.ScriptModule, 
            System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
        </httpModules>
    </system.web>
    <location path="">
        <system.web>
            <authorization>
                <deny users="?"/>
            </authorization>
        </system.web>
    </location>
    <location path="Login.aspx">
        <system.web>
            <authorization>
                <allow users="*"/>
            </authorization>
        </system.web>
    </location>

Após fazer essas alterações no web.config, se tentarmos acessar a página MinhaPagina.aspx seremos redirecionados automaticamente para Default.aspx.

Agora vamos montar nossa rotina de login dentro da página Login.aspx:
[Login.aspx.cs]

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Script.Serialization;
using System.Web.Security;

public partial class Login : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        JavaScriptSerializer jss = new JavaScriptSerializer();

        string user = Request.Params["usuario"] != null ? 
        Request.Params["usuario"].ToString().ToLower() : "";
        string senha = Request.Params["senha"] != null ? 
        Request.Params["senha"].ToString() : "";

        if (user.Equals("user") && senha.Equals("123456"))
        {
            FormsAuthentication.SetAuthCookie(user, true);
            Response.Write(jss.Serialize(new { sucesso = 1, msg = "" }));
        }
        else
        {
            Response.Write(jss.Serialize(new { sucesso = 0, msg = "Dados inválidos." }));
        }
        Response.End();
    }
}

Agora vamos fazer nosso formulário de login. Utilizaremos a API JQUERY que pode ser carregada diretamente com a API do Google (como vou fazer no exemplo), ou baixada no site do fabricante: www.jquery.com
Obs: A partir do VS 2010 o JQuery já vem embutido.
[Default.aspx]

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">
    <title>Login JQuery / JSON</title>
    <script src="https://www.google.com/jsapi" language="javascript" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        google.load("jquery", "1.4.2");
    </script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#btnLogar').click(function() {
                $.post('Login.aspx', { usuario: $('#usuario').val(), senha: $('#senha').val() },
                    function(data) {
                        if (data.sucesso == 1) {
                            document.location = "MinhaPagina.aspx";
                        }
                        else {
                            $('#spnResposta').html(data.msg);
                        }
                    }, 'json');
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <label for="usuario">
            Usuário:
        </label>
        <input type="text" id="usuario" />
        <label for="senha">
            Senha:
        </label>
        <input type="password" id="senha" />
        <input type="button" id="btnLogar" value="Login" />
        

        <span id="spnResposta"></span>
    </div>
    </form>
</body>
</html>

Nossa página em execução.

Ao tentar fazer login com dados inválidos.

E ao fazer o login com os dados corretor vai ser redirecionado para a página MinhaPagina.aspx.

Até a próxima!