Artigos

Criando um sistema de Login com o VWD

O Visual Web Developer nos trouxe além de diversas novidades, objetos intrinsecos a .NET Framework 2.0 que permitem uma melhor integração e uma melhor codificação de partes de códigos que antes tomam tempo e redundância de códigos.

Neste artigo, pretendo demonstrar algumas das novidades e formas de implementação para que tudo funcione como projetado pelo time de desenvolvimento do Visual Studio.NET 2005 - Whidbey.

Guia Login

Uma nova guia denominada Login foi adicionada a toolbox. Nesa guia tesmos a disposição vários controles pré-definidos para nos auxiliar na construção de sistemas de login e manutenção dos mesmos em nossos sites, como visto na Figura 1.

Figura 1 - Diversos novos controles foram adicionados a toolbox.

Veremos abaixo a utilização e implementação de todos os controles dessa categoria:

Login - Controle relacionado a criação de código (HTML) para a construção de um formulário de login. O controle possui várias propriedades que nos auxiliarão na construção do código para esse controle.

Ao inserirmos esse controle na área de design, o código necessário para a criação do controle será automaticamente gerado. Podemos formatar e personalizar esse controle clicando no pequeno ícone na forma de seta que aparece quando selecionamos o controle depois de inserido, como vemos na Figura 2.

Figura 2 - Ao clicarmos na pequena seta no canto direito superior, um menu flutuante é exibido para que possamos personalizar o controle.

Selecionamos então a opção Auto Format para formatarmos o controle em um um dos vários formatos prontos, como visto na Figura 3 e Figura 4

.

Figura 3 - Escolhemos o modo Elegant de formatação. O preview da formatação é exibido como mostrado na figura.

Figura 4 - Após formatado, eis a apresentação do formulário.

Para deixarmos o formulário com a cara do desenvolvedor, podemos usar as propriedades do controle para definirmos todos os detalhes, desde a cor de fundo, até os labels que são exibidos.
Para mudar os labels onde aparecem escritos User Name, Password, Remember me next time e o botão de submit, acessamos as propriedades UserNameLabelText, PasswordLabelText, RememberLabelText e SubmitButtonText.

Obs - O botão de submit pode ser substituido por imagem ou link, de acordo com as necesidades do sistema. Para esse fim, acesse a propriedade SubmitButtonType.

Para mudarmos o título da caixa (Log In) e as cores da borda e do fundo, acessamos as propriedades TitleText (título), BackColor (cor de fundo) e BorderColor (cor da borda). Depois de atualizarmos todas as propriedades, o formulário será semelhante ao apresentado na Figura 5.

Figura 5 - O formulário foi personalizado para o idioma local e cores escolhidas pelo desenvolvedor.

É importante também que a propriedade FailureText (caso o login não seja válido) seja alterada para caso o login não seja válido, uma mensagem personalizada ser exibida de acordo com as configurações personalizadas, e a propriedade DestinationPageUrl, que será a página de destino, caso o acesso seja validado.

Por padrão, o controle Login já vem configurado para ter os dois campos (Login e Senha) válidados quando o botão submit for acionado. Essa validação no entanto, é apenas para checagem de ausência de valores - Se os dois, ou apenas um campo não for preenchido, um asterisco aparece ao lado da caixa deixada em branco, informando ao usuário que o campo deve ser preenchido.

Após definirmos todos os detalhes acima, podemos codificar o controle para que seja usado com um formulário de login com validação em banco de dados.

Para isso, acionamos o botão Events (icone na forma de raio) presente na caixa Properties. Esse botão, antes presente somente em projetos usando C#, agora esta disponível também para projetos usando outras linguagens, como visto na Figura 6.

Figura 6 - O botão Events agora esta disponível para todas as linguagens utilizadas no projeto.

Essa área da caixa Properties permite que não necessáriamente seja codificado um evento para aquele objeto. Podemos selecionar subs que estejam prontas e associalas aos eventos disponíveis - Ação muito comum em Delphi.

Os eventos mostrados na Figura 6 são usados para:

Authenticate - Ocorre quando o acesso esta sendo validado;
LoggedIn - Ocorre após o acesso ser validado e o usuário passa a estar logado no sistema;
LoggingIn - Ocorre após o usuário submeter as informações de login. Esse evento é executado antes do Authenticate;
LoginError - Ocorre quando algum tipo de erro é detectado durante o login;
DataBinding - Ocorre quando o controle é preenchido de alguma maneira por uma fonte de dados;
Disposed - Ocorre quando o controle é excluído da memória manualmente ou pelo Garbage Collector;
Init - Ocorre quando o controle é inicializado;
Load - Ocorre quando o controle é executado, geralemente na execução da página no browser;
PreRender - Ocorre toda vez que o controle é desenhado na página.
Unload - Ocorre quando o controle é finalizado.

Para a codificação, iremos dar um duplo click no evento Authenticate, que será o responsável por validar as informações submetidas, dar ou negar o acesso baseado no login e na senha informados. Eis o código:

Partial Class Default_aspx

    Sub LoginSistema_Authenticate(ByVal sender As Object, ByVal e _
        As System.Web.UI.WebControls.AuthenticateEventArgs)
        'Aqui, inserimos o código que irá realizar
        'a validação dos dados submetidos, baseado
        'no usuário e na senha informados.

        'Teremos algo como:
        If LoginSistema.UserName = "Max" And _
           LoginSistema.Password = "123456" Then
            'Caso o usuário e senha estejam corretos,
           'o acesso é concedido.
            e.Authenticated = True
        Else
            'Caso o usuário ou a senha sejam inválidos,
            'o acesso é negado
            e.Authenticated = False
        End If
    End Sub

End Class

De maneira simples, podemos criar códigos para autenticação de usuários em nossos sistesmas.
No próximo artigo, mas novidades sobre controles do Visual Web Developer.

Abraços,
Max Mosimann Netto

Written By: labreu
Date Posted: 4/14/2006
Number of Views: 487

Return