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

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

C# IEnumerable e IEnumerator

Neste artigo vamos aprender como utilizar a interface IEnumerator por forma a permitir utilizar um ciclo foreach num conjunto ou coleção de dados. A maior parte das coleções (listas e outras) já implementam a interface, mas neste caso vamos personalizar a maneira como percorremos a lista. Quando utilizamos código assim: foreach(Class c in Collection) { ... } O compilador converte este código em algo assim: IEnumerator cc = Collection.GetEnumerator() while(cc.MoveNext()) { c=(Class)cc.Current; ... } Ao implementar a interface IEnumerable significa que a classe implementa uma versão da função GetEnumerator() que deve devolver uma classe que implemente a interface IEnumerator. Vamos explorar um exemplo. Começamos pela classe client Esta classe permitirá guardar os dados dos clientes, existindo um campo para indicar se o cliente ainda está ativo ou não. De seguida temos uma classe que define uma lista de clientes e que implementa a interface IEnumerable que de

React - Introdução

 Neste post vamos fazer uma breve introdução ao React. React é uma framework javascript e por isso é importante ter conhecimentos desta linguagem de programação para melhor compreender o seu funcionamento. O que é necessário? Para construir páginas com React é necessário ter instalado a framework Node e o seu instalador de packages o npm. Com o Node instalado basta abrir uma janela da linha de comandos, eu aconselho utilizar o novo Windows Terminal ou o Cmder . Na sua linha de comando escolhida execute o comando: npx create-react-app Tutorial01 Este comando vai criar uma pasta com o nome Tutorial01 e instalar dos os ficheiros necessários para construir a sua primeira aplicação React dentro dessa pasta. De seguida entramos na pasta criada com o comando: cd Tutorial01 E iniciamos a aplicação com o comando: npm start Deve conseguir ver uma página com o seguinte aspeto: A partir daqui, até fechar a linha de comando, todas as alterações feitas aos ficheiros da sua aplicação são automaticam