0 Compartilhamentos 25 Views

Autenticação através do GitHub com JavaScript e OAuth

17 de julho de 2019

Esse guia tem como propósito apresentar a inclusão de um botão de autenticação (Social Login) através do Github utilizando o serviço OAuth.io.
Através de um passo a passo com um código simples escrito em JavaScript.

Resultado

Código

Para demonstrar a simplicidade dessa solução vamos ver o código final criado. Você pode testar o código automaticamente aqui: https://jsfiddle.net/dg9h7dse/30/

HTML

JS

Fontes Externas

Passo a Passo:

  1. Criar aplicativo GitHub
  2. Criar conta OAuth.io
  3. Conectar as app keys do GitHub com a conta da oauth.io
  4. Criar botão social de login em HTML/CSS/JS com a app key do oauth.io

1. Criar aplicativo GitHub

Acesse https://github.com/settings/developers
Se você ainda não estiver logado no github, será redirecionado para tal. Clique em “Register a new application”.

Preencha o formulário com seus detalhes. A URL de homepage deve ser https://oauth.io e a URL de autorização de callback deve ser https://oauth.io/auth

Clique em “Register application
O app deve ter sido criado com sucesso. Aqui você encontra a ID de cliente (Client ID) e Segredo de cliente (Client Secret) que você precisa adicionar em seu painel OAuth.io

2. Criar conta OAuth.io

Crie uma conta em OAuth.io

No painel principal, adicione o nome do domínio da página onde o botão social será adicionado em ‘Domain & URL whitelist’

Clique em ‘Integrated APIs’ no menu esquerdo.

No painel ‘Integration APIs’ clique em ‘Add APIs’

Selecione ‘GitHub’ como provedor OAuth que você deseja adicionar.

3. Conectar as app keys do GitHub com a conta da oauth.io

Da sua página GitHub, copie o ‘client ID’ e “Client Secret” que você anotou antes nos campos ‘clientid’ e clientsecret’, respectivamente, selecione o escopo e então clique em ‘Salvar’.

Clique em ‘Try Auth’ para ver se você configurou corretamente o oauth.io para acessar seu app GitHub corretamente.

4. Criar botão social de login em HTML/CSS/JS com a app key do oauth.io

Após o passo a passo detalhado, vamos apresentar um exemplo completo de implementação.

Hospede o código abaixo em seu servidor. Se você ainda não tem um servidor, pode testar o código aqui: https://jsfiddle.net/dg9h7dse/30/

Você pode se interessar

7 Passos para preparar sua loja online para a Black Friday e o Natal
Artigos
6 visualizações
Artigos
6 visualizações

7 Passos para preparar sua loja online para a Black Friday e o Natal

Carlos L. A. da Silva - 12 de novembro de 2019

Chegou aquela época do ano que os lojistas adoram e o desafio está lançado: sua loja online está preparada?

Pipeline (CD/CI) // Dicionário do Programador
Vídeos
9 visualizações
Vídeos
9 visualizações

Pipeline (CD/CI) // Dicionário do Programador

Thais Cardoso de Mello - 11 de novembro de 2019

Continuous Integration e Continuous Delivery Pipeline ou CI/CD Pipeline, ou ainda Continuous Delivery Pipeline, ou Pipeline para os íntimos é um processo que vem sendo amplamente utilizado nas empresas de desenvolvimento.

Promoções de Jogos do Final de Semana (09/11)
Notícias
17 visualizações
Notícias
17 visualizações

Promoções de Jogos do Final de Semana (09/11)

Carlos L. A. da Silva - 9 de novembro de 2019

Confira as melhores ofertas de jogos de PC para o final de semana.

Mais publicações

Como se Tornar um Cientista de Dados de Sucesso // Vlog #105
Vídeos
9 visualizações
9 visualizações

Como se Tornar um Cientista de Dados de Sucesso // Vlog #105

Thais Cardoso de Mello - 7 de novembro de 2019
Aprenda a acelerar a performance de sites com “premonição”
Artigos
18 visualizações
18 visualizações

Aprenda a acelerar a performance de sites com “premonição”

Carlos L. A. da Silva - 5 de novembro de 2019
Swift (a linguagem do iOS) // Dicionário do Programador
Vídeos
8 visualizações
8 visualizações

Swift (a linguagem do iOS) // Dicionário do Programador

Thais Cardoso de Mello - 4 de novembro de 2019
Promoções de Jogos do Final de Semana (01/11)
Notícias
12 visualizações
12 visualizações

Promoções de Jogos do Final de Semana (01/11)

Carlos L. A. da Silva - 1 de novembro de 2019