0 Compartilhamentos 394 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/

Carregando...

Você pode se interessar

15 ferramentas de desenvolvimento para melhorar sua produtividade em 2021 sem gastar nada
Artigos
111 visualizações
Artigos
111 visualizações

15 ferramentas de desenvolvimento para melhorar sua produtividade em 2021 sem gastar nada

Carlos L. A. da Silva - 2 de abril de 2021

O cenário de desenvolvimento está em constante mudança e muitas vezes uma ferramenta nova pode agilizar muito seu trabalho.

A tecnologia por trás do deep fake de Deep Nostalgia
Artigos
111 visualizações
Artigos
111 visualizações

A tecnologia por trás do deep fake de Deep Nostalgia

Carlos L. A. da Silva - 22 de março de 2021

Serviço do My Heritage permite "animar" fotos do passado, trazendo vida para seus antepassados. Como isso é possível?

Como se tornar um Engenheiro DevOps em 2021
Artigos
108 visualizações
Artigos
108 visualizações

Como se tornar um Engenheiro DevOps em 2021

Carlos L. A. da Silva - 1 de março de 2021

A consultora de DevOps e evangelista Nana Janashia apresenta um passo a passo de tudo que você precisa saber para dominar o DevOps em 2021.

Deixe um Comentário

Your email address will not be published.

Mais publicações

Seus dados vazaram. E agora?
Artigos
86 visualizações
86 visualizações

Seus dados vazaram. E agora?

Carlos L. A. da Silva - 19 de fevereiro de 2021
Entendendo o elemento time em HTML 5
Artigos
100 visualizações
100 visualizações

Entendendo o elemento time em HTML 5

Carlos L. A. da Silva - 5 de fevereiro de 2021
Como cortar texto sem usar uma linha de script
Dicas
99 visualizações
99 visualizações

Como cortar texto sem usar uma linha de script

Carlos L. A. da Silva - 11 de janeiro de 2021