Avançar para o conteúdo principal

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.

Comentários

Mensagens populares deste blogue

Upgrade do Windows Home para Pro sem formatar

 Há algum tempo que tentava fazer o upgrade do meu Windows 10 da versão Home para a versão Pro, mas chegava sempre a um ponto em que me era solicitado para formatar o sistema e não estava para isso. Finalmente conseguinte seguindo estes passos: - seguinte estes passos  utilizei uma das chaves genéricas para o Windows 10 Pro e fui a Settings > Update & Security > Activation > Change the product key; - após inserir uma das chaves o Windows instala as funcionalidades Pro e pede para reiniciar; - agora tem o Windows Pro mas não está ativado, assim fui ao site urcdkeys  onde comprei uma chave para o Windows Pro por menos de €20; - com essa chave voltei a funcionalidade Change the product key e ativei o Windows; - e pronto, Windows Pro ativado sem formatar ou reinstalar. Importante : eu não tenho nada a ver com o site urcdkeys por isso a vossa experiência pode correr de forma diferente da minha.

Vamos fazer um carro com o Unity 3D

Neste artigo vamos fazer um carro, simples, com o Unity 3D. A ideia é utilizar o motor de física do Unity 3D para simular o comportamento do carro. Os passos a seguir são: [1] - Criar um projeto novo

Tem troco

Para hoje um pequeno programa que dá troco, bem dar não dá mas calcula o troco a dar em função das moedas disponíveis. Neste projeto vamos utilizar o novo Visual Studio 2012. Como era de se esperar vamos iniciar um projeto novo: Agora adicionamos os seguintes elementos:  - um botão para calcular as moedas a dar de troco  - um botão para repor o número de moedas iniciais disponíveis  - uma textbox para introduzir o valor a pagar  - uma textbox para introduzir o valor entregue  - umas labels para informar o utilizador do que deve introduzir e outra para mostrar o troco  - por fim uma grelha para mostrar os valores das moedas e as quantidades disponíveis de cada uma. A janela principal do programa fica assim: Agora o código, primeiro o evento load do formulário, neste vamos definir os valores das moedas e as respetivas quantidades Para guardar estes valores vamos necessitar de uma variável definida ao nível do formulário, logo abaixo da definição da class: Public Class Form1     Public mo