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!