0 Compartilhamentos 1838 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

Influenciadores digitais que não existem
Artigos
44 visualizações
Artigos
44 visualizações

Influenciadores digitais que não existem

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

Na era da pós-verdade, influenciadores que não são reais estão ganhando espaço para uma multidão que quer ser influenciada

Pais criam aplicativo de código aberto melhor que o da escola, mas a polícia é acionada
Artigos
188 visualizações
Artigos
188 visualizações

Pais criam aplicativo de código aberto melhor que o da escola, mas a polícia é acionada

Carlos L. A. da Silva - 23 de novembro de 2021

Aplicativo oficial do sistema educacional da capital Suécia era ruim demais, mas a lei é a lei...

10 recursos HTML5 úteis que você pode não estar usando
Artigos
441 visualizações
Artigos
441 visualizações

10 recursos HTML5 úteis que você pode não estar usando

Carlos L. A. da Silva - 6 de novembro de 2021

O HyperText Markup Language nos acompanha desde os primórdios da web. É o seu tijolo mais básico. Podem surgir novas tecnologias, plugins, frameworks, conteúdo rico, mas o bom e velho HTML continua sendo a base de tudo e aprender seus mais profundos nuances é fundamental para os desenvolvedores. O HTML5 é a implementação atual da […]

Deixe um Comentário

Your email address will not be published.

Mais publicações

O Metaverso está vindo?
Artigos
505 visualizações
505 visualizações

O Metaverso está vindo?

Carlos L. A. da Silva - 1 de novembro de 2021
Por que eu decidi não migrar para o Windows 11 agora
Artigos
613 visualizações
613 visualizações

Por que eu decidi não migrar para o Windows 11 agora

Carlos L. A. da Silva - 19 de outubro de 2021
Sir Clive Sinclair, o homem adiantado no tempo
Artigos
908 visualizações
908 visualizações

Sir Clive Sinclair, o homem adiantado no tempo

Carlos L. A. da Silva - 18 de setembro de 2021