terça-feira, 14 de junho de 2016

Google OAuth 2.0 em ASPX

Neste artigo vamos explorar a identificação de utilizadores através de serviços externos à aplicação web, nomeadamente através de uma conta de utilizador Google.

Para desenvolver o site vamos utilizar o Visual Studio 2015 recorrendo à tecnologia Webforms ASPX e com a linguagem de programação C#.

O site vai incluir uma opção para registo do utilizador e outra para o login que permitirá o acesso a páginas privadas.

Começamos por criar um projeto no VS.


De seguida escolhemos.

Agora a base de dados. Vamos criar uma para guardar os utilizadores. Como não precisamos de guardar palavras passe basta guardar o email do utilizador, o nome, o estado da conta e o id, que será o campo chave.

Primeiro criar a base de dados.

Depois escolher o formato e o nome da base de dados.

E confirmar a sua criação.

Agora adicionar a tabela de utilizadores.

Script para criar a tabela

Fazer o update e verificar que não há nenhum erro.

Após o update confirmar que a tabela foi criada, por ser necessário fazer refresh.

Agora que já temos a estrutura de dados criada vamos à consola de desenvolvimento da Google para criar um projeto com acesso às API de autenticação.
Para tal devemos clicar em Credentials (do lado esquerdo).

Depois Create a Project
Atribuímos um nome e clicamos no botão Create.
A seguir devemos escolher o tipo de credenciais a criar, neste caso OAuth client ID

Na opção seguinte escolhemos o tipo de aplicação, neste caso Web aplication, e fazemos Configure consent Screen, que é a página que o utilizador vai ver quando fizer o registo no nosso site com a sua conta Google.

No ecrã de consent devemos definir o nome da aplicação que será apresentado ao utilizador.

De seguida devemos indicar o links de redirecionamento para autenticação do utilizador, a porta http indicada deve coincidir com a do IIS express.

Por fim temos as credenciais que teremos de adicionar no nosso projeto para que este possa utilizar esta API. (As credenciais apresentadas já foram apagadas)
A nossa conta fica assim.

Agora temos de ativar a API Google+




Sem este passo nada disto funciona.

De volta ao nosso projeto vamos criar uma classe do tipo Owin Startup para definir a configuração inicial da nossa aplicação.

Nesta classe temos de indicar os códigos fornecidos anteriormente pela Google.

O código da função de configuração fica assim:

Agora vamos criar a página de registo.
Atribuímos um nome.
E, como é muito simples, fica com o seguinte html.

Agora temos de adicionar alguns pacotes NuGet, para isso abrimos a console de gestão de pacotes em Tools -> NuGet Package Manager -> Package Manager Console.
Nesta janela executamos os seguintes comandos.

install-package microsoft.owin.security.cookies
install-package microsoft.owin.host.systemweb
install-package microsoft.owin.security.google

O código do botão que vai iniciar o processo de registo fica assim.
Com este código fazemos aparecer a página de login da Google ao utilizador, de seguida este será redirecionado para um Http Handler que guardará os dados do utilizador na base de dados.

Vamos criar uma string de ligação à base de dados e uma classe que ficará responsável pela interação com esta.

Para a string de ligação vamos às propriedades da base de dados e escolhemos properties. Na janela que aparece copiamos a linha da Connection String. Agora adicionamos ao ficheiro Web.config a string de ligação.

  <connectionStrings>
    <add name="sql" connectionString="Data Source=(LocalDB)\MSSQLLocalDB;AttachDbFilename=googleoauth.mdf;Integrated Security=True;Connect Timeout=30"/>
  </connectionStrings>

Agora adicionamos um classe nova com o nome bd.

Esta classe vai ter um construtor que estabelece a ligação à base de dados e um destrutor de fecha essa ligação.

Nesta classe vamos criar funções genéricas para execução de comandos SQL bem como consultas.
 public DataTable devolveconsulta(string sql)
        {

            SqlCommand comando = new SqlCommand(sql, ligacaoBD);
            DataTable registos = new DataTable();


            SqlDataReader dados = comando.ExecuteReader();
            registos.Load(dados);
            comando.Dispose();
            return registos;

        }

        public DataTable devolveconsulta(string sql, List<SqlParameter> parametros)
        {

            SqlCommand comando = new SqlCommand(sql, ligacaoBD);
            comando.Parameters.AddRange(parametros.ToArray());
            DataTable registos = new DataTable();


            SqlDataReader dados = comando.ExecuteReader();
            registos.Load(dados);
            comando.Dispose();
            return registos;

        }
        public bool executacomando(string sql)
        {
            try
            {
                SqlCommand comando = new SqlCommand(sql, ligacaoBD);
                comando.ExecuteNonQuery();
                comando.Dispose();
            }
            catch (Exception erro)
            {
                Console.Write(erro.Message);
                return false;
            }
            return true;
        }

        public bool executacomando(string sql, List<SqlParameter> parametros)
        {

            try
            {
                SqlCommand comando = new SqlCommand(sql, ligacaoBD);
                comando.Parameters.AddRange(parametros.ToArray());
                comando.ExecuteNonQuery();
                comando.Dispose();
            }
            catch (Exception erro)
            {
                Console.Write(erro.Message);
                return false;
            }
            return true;
        }

Com estas funções podemos mais facilmente manipular a base de dados.

Vamos, agora, adicionar o Handler que é chamado após o login na conta da google.

O código deste handler fica assim:

Basicamente este código será executado após a autenticação do utilizador com a sua conta Google e este redireciona para uma página que recolhe os dados fornecidos pela Google e adiciona-os à base de dados.

Agora que já temos a opção que permite aos utilizadores fazer o registo com a sua conta Google de seguida vamos criar uma página para validar o login.

A página em si é muito simples, basta isto:
Com este código:

O handler fica assim:
A página que verifica se a conta exista ou não e que termina a sessão:

O projeto está disponível do GitHub.

Sem comentários:

Enviar um comentário