ASP .NET MVC - One ASP .NET - Miscelânea de templates - MVC, Web Forms e Web API - Autenticando com o Twitter

Neste artigo vou mostrar como usar o template One ASP .NET da ASP .NET MVC 5 e criar um projeto ASP .NET usando as tecnologias MVC,  Web Forms e Web API.

No meu artigo - ASP .NET MVC 5 - Macoratti.net - eu apresentei um breve resumo sobre as novidades do Visual Studio 2013 com foco na ASP .NET.

O advento da ASP .NET MVC veio 'bagunçar' a vida do desenvolvedor, pois agora ele tinha uma importante escolha a fazer ao iniciar um projeto Web :  ASP .NET Web Forms ou ASP .NET MVC ?

Embora ambas as tecnologias sejam parte da família .NET, elas apresentam duas metodologias e abordagens para o desenvolvimento de uma aplicação WEB muito diferentes.

Escolher entre as duas tecnologias iria começar um compromisso com uma maneira específica de desenvolver toda a sua aplicação, o que não era preciso fazer anteriormente, por isso essa escolha é muito importante.

Mas e se você mudar de ideia ?

E se você quiser usar Web Forms com MVC ?

Então para 'embolar' mais ainda o meio de campo, lá vem a Microsoft com a tal da Web API e joga seus planos bem definidos para o 'caos' ?

E agora como é que vamos fazer ?

Neste artigo irei mostrar um exemplo prático onde veremos como implementar um projeto que mescla essas tecnologias. Vamos criar um web site e usar as tecnologias MVC , Web Forms e Web API, iremos realizar a autenticação por terceiros, o leiaute  com o BootStrap, o Attribute Routing e o Authentication Filters.

Enfim teremos uma aplicação ASP .NET com uma miscelânea de templates e tecnologias.
 

Criando o projeto ASP .NET no VS 2013 - Implementando a autenticação pelo Twitter

Abra o Visual Studio 2013 Express for web e clique em New Project;

Selecione a linguagem de sua preferência e clique em  Web;

Informe o nome Aspnet_Misc1;

Observe que agora você tem uma única opção chamada ASP .NET Web Application :

E dentro desta nova opção única para aplicação Web ASP.NET, você verá uma janela de diálogo familiar contendo todos os principais tipos de modelos de projeto que você pode usar ou encontrar ao desenvolver uma aplicação Web ASP.NET:

Para o nosso projeto vamos adicionar referências para Web Forms e Web API além da MVC.

Além disso, clicando no botão Change Authentication podemos ver as seguintes opções de autenticação disponíveis:

Em nosso exemplo iremos usar a opção Individual User Accounts.

Clicando no botão OK será criado o projeto com a estrutura abaixo visualizada na janela Solution Explorer:

Apenas para lembrar vamos declarar qual o conteúdo de cada pasta criada na estrutura do projeto:

Executando a aplicação, pressionando F5, iremos visualizar o seguinte resultado:

Observe no canto superior direito da página o link para Login. Clicando neste link iremos obter a página abaixo :

Observe o aviso que eu destaquei à direita da página de login. Temos aqui uma referência para utilizar outro serviço para realizar o login que não esta ativo pois ainda não existe nenhum serviço externo configurado. (Atualmente as opções de configuração englobam o Twitter, Facebook, Google, e Microsoft)

Vamos começar então configurando o site para usar o serviço de autenticação com o login do Twitter.

Eu vou dar o roteiro básico para configurar a autorização do seu site no provedor de autenticação do Twitter para gerar uma chave (key) e um segredo (secret) que serão usados na aplicação ASP .NET. (A configuração do FaceBook e Google Accounts segue mais ou menos a mesma lógica)

Acessa  a url : https://apps.twitter.com e a seguir clique no link Sign in, ou crie uma conta se você ainda não tiver, clicando em Have an account ? :

A seguir forneça as suas credencias de acesso ao Twitter:

Agora crie uma nova aplicação para autorizar no Twitter clicando no botão - Create New App:

Defina as configurações de Nome, Descrição, url do WebSite e url de callback conforme o exemplo abaixo: (use 127.0.0.1 ao invés de localhost)

Nota: a url da sua aplicação pode ser obtida na janela de propriedades do projeto clique na guia Web e copie a URL indica em Project Url. O formato é http://localhost:9999)

Concluída esta etapa será gerada uma chave e um segredo que você deverá usar na aplicação ASP .NET.

Na sua aplicação ASP .NET, abra a pasta App_Start e a seguir abra o arquivo Startup_Auth.vb.

Neste arquivo existe a classe Startup que é responsável por configurar os mecanismos de autenticação do site.

Observe que já temos o código pronto para autenticação com o Microsoft Account, Twitter, Facebook e Google Accounts. Eles estão comentados e para usá-los basta escolher qual autenticação vai usar e descomentar.

Eu vou usar a autenticação via Twitter e por isso vou descomentar o código referente a essa autenticação. Veja abaixo o trecho de código e note que eu tenho que preencher o valor de consumerKey e consumerSecret com os valores obtidos no site do Twitter:

Veja como ficou o código no arquivo :(Os valores preenchidos acima estão alterados e não são válidos)

Pronto ! agora podemos usar a autenticação do Twitter em nosso site.

Executando a aplicação novamente e clicando no link para login iremos obter a página abaixo, que agora nos mostra o botão para autenticar via Twitter:

Clicando no botão iremos para a página de autorização do Twitter conforme página abaixo:

Clicando  em - Autorizar aplicativo  - iremos retornar para página de callback definida conforme a  seguir:

Nesta pagina temos que registrar o usuário no site com um username:

Clicando em Register retornaremos à página da aplicação com o usuário autenticado conforme vemos abaixo:

A partir desse momento toda vez que o usuário desejar se logar no sistema pode usar seu login do Twitter que já estará autenticado no site.

A sua aplicação esta armazenando os dados compartilhados pelo Twitter na autenticação. Tudo bem, mas e se você precisar armazenar mais informações do usuário, como fica ?

Esta é a deixa para eu falar do ASP .NET Identity, o novo sistema de membership para aplicações ASP .NET.

Uma das principais características do ASP .NET Identity é de tornar muito fácil a inclusão de informação sobre o dados relacionados ao perfil do usuário.

Se você abrir a pasta Models do projeto vai encontrar dois arquivos :

1. IdentityModels.vb - permite incluir mais informações relacionadas ao perfil do usuário
2. AccountViewModels.vb - contém as models responsáveis pelo registro do usuário no site

Vamos supor que desejamos armazenar as informações sobre a data de nascimento e telefone do usuário.

Para fazer isso vamos ter que realizar os seguintes procedimentos :

• incluir duas propriedades nos arquivos ExternalLoginConfirmationViewModel e RegistrerIVewModel na pasta Models;
• alterar o controller AccountController.vb na pasta Controllers;
• alterar as views ExternalLoginConfirmation.vbhtml e Register.vbhtml na pasta Views->Account;
• Habilitar o Migrations(Entity Framework) para recriar a estrutura do banco de dados para os novos campos

Abrindo o arquivo IdentityModels.vb na pasta Models vamos incluir as linhas de código conforme abaixo:

Após isso abra o arquivo AccountViewModels.vb na pasta Models e inclua as novas propriedades nas Models ExternalLoginConfirmationViewModel e RegisterViewModel:

1- ExternalLoginConfirmationViewModel

Public Class ExternalLoginConfirmationViewModel
    <Required>
    <Display(Name:="User name")>
    Public Property UserName As String

    <Required>
    <Display(Name:="Data de Nascimento")>
    Public Property DataNascimento As DateTime
    <Required>
    Public Property Telefone As String

End Class

2 - RegisterViewModel

Public Class RegisterViewModel
    <Required>
    <Display(Name:="User name")>
    Public Property UserName As String

    <Required>
    <StringLength(100, ErrorMessage:="The {0} must be at least {2} characters long.", MinimumLength:=6)>
    <DataType(DataType.Password)>
    <Display(Name:="Password")>
    Public Property Password As String

    <DataType(DataType.Password)>
    <Display(Name:="Confirm password")>
    <Compare("Password", ErrorMessage:="The password and confirmation password do not match.")>
    Public Property ConfirmPassword As String

    <Required>
    <Display(Name:="Data de Nascimento")>
    <DataType(DataType.Date)>
    Public Property DataNascimento As DateTime

    <Required>
    Public Property Telefone As String

End Class

O código incluído esta destacado em azul.

Terminada essa etapa temos que alterar também os Controllers e as Views das páginas de confirmação de registro externo  e do registro interno (quando os dados são armazenados na base local).

1- Alterando o Controller

Abra o arquivo AccountController.vb na pasta Controllers e nos métodos Register() e ExternalLoginConfirmation() faça o seguinte:

Subsitua a linha de código : Dim user = New ApplicationUser() With {.UserName = model.UserName }

pela linha de código : Dim user = New ApplicationUser() With {.UserName = model.UserName, .DataNascimento = model.DataNascimento, .Telefone = model.Telefone}

2- Alterando as Views

Abra o arquivo ExternalLoginConfirmation.vbhtml na pasta Views->Account e inclua o trecho de código abaixo logo após a definição do usuário:

     <div class="form-group">
        @Html.LabelFor(Function(m) m.DataNascimento, New With {.class = "col-md-2 control-label"})
        <div class="col-md-10">
            @Html.TextBoxFor(Function(m) m.DataNascimento, New With {.class = "form-control"})
            @Html.ValidationMessageFor(Function(m) m.DataNascimento)
        </div>
    </div> 
    <div class="form-group">
        @Html.LabelFor(Function(m) m.Telefone, New With {.class = "col-md-2 control-label"})
        <div class="col-md-10">
            @Html.TextBoxFor(Function(m) m.Telefone, New With {.class = "form-control"})
            @Html.ValidationMessageFor(Function(m) m.Telefone)
        </div>
    </div>

A seguir abra o arquivo Register.vbhtml na mesma pasta e inclua o trecho de código acima após a definição de confirmar a senha.

Agora para encerrar o processo precisamos recriar a estrutura das tabelas do usuário no banco de dados para incluir esses campos.

Para isso abra a pasta App_Data  e exclua o arquivo do banco de dados existente nesta pasta:

Clique com o botão direito sobre o arquivo e selecione Delete.(Se não estiver visualizando o arquivo clique no ícone Show All Files na janela Solution Explorer)

Após isso temos que recriar o banco de dados usando o Package Manager Console.

No menu TOOLS clique em Library Package e a seguir em Package Manger Console;

Na janela Package Manager Console digite os seguintes comandos:

1- Enable-Migrations (aguarde o término da execução)

2- Add-Migration 'Init' (aguarde o término da execução)

3- Update-Database (aguarde o término da execução)

O resultado obtido deverá estar parecido com o exibido na figura abaixo:

Ao final as  novas propriedades DataNascimento e Telefone deverão estar presentes como colunas das tabelas de usuário no banco de dados que foi criado na pasta App_Data.

Para conferir abra o banco de dados e a seguir a tabela AspNetUsers na janela Server Explorer e visualize a sua estrutura:

Em um outro artigo eu vou abordar o leiaute e o BootStrap.

Pegue o projeto completo aqui: Aspnet_Misc1.zip

             Gostou ?   Compartilhe no Facebook   Compartilhe no Twitter
 

Referências:

• Seção VB .NET do Site Macoratti.net

• Super DVD .NET - A sua porta de entrada na plataforma .NET

• Super DVD Vídeo Aulas - Vídeo Aula sobre VB .NET, ASP .NET e C#

• Seção C# do site Macoratti.net

• Seção ASP .NET MVC - Macoratti .NET

• Super DVD C#

• Super DVD Visual Basic

• Curso Básico VB .NET - Vídeo Aulas

• Curso C# Básico - Vídeo Aulas

• Seção de Jogos do site Macoratti .net

• ASP .NET - MVC - Introdução - Macoratti.net

• Usando ASP .NET MVC Framework - Macoratti.net

• ASP .NET MVC 5 - Macoratti.net

• Macoratti .net | Facebook

José Carlos Macoratti