Skip to content
Março 29, 2023

Código Fonte

Conteúdo para você se capacitar em programação

  • Início
  • javascript
  • ruby
  • rails
  • php
  • css
  • bash
  • c#
  • nodejs
Main Menu
bootstrap / button / google / javascript / oauth / social login / social login bootstrap

Botão de inicialização de login social JavaScript do Google para OAuth

Objetivo

O guia passo a passo mais simples de JavaScript com código de trabalho completo (<15 linhas) para criar um botão de inicialização de login social para o Google em qualquer página da web com OAuth.io

Resultado

download.png

Código Totalmente Funcional

Para demonstrar a simplicidade desta solução, vamos dar uma olhada no código final que criamos. Você pode experimentar o código instantaneamente aqui: https://tome.oauth.io/providers/google/get-user-info

HTML

<a id="google-button" class="btn btn-block btn-social btn-google">
<i class="fa fa-google"></i> Sign in with Google
</a>

CSS

Nenhum

JS

$('#google-button').on('click', function() {
// Initialize with your OAuth.io app public key
OAuth.initialize('YOUR_OAUTH_KEY');
// Use popup for oauth
OAuth.popup('google').then(google => {
console
.log('google:',google);
// Retrieves user data from oauth provider
// Prompts 'welcome' message with User's email on successful login
// #me() is a convenient method to retrieve user data without requiring you
// to know which OAuth provider url to call
google
.me().then(data => {
console
.log('me data:', data);
alert
('Google says your email is:' + data.email + ".\nView browser 'Console Log' for more details");
});
// Retrieves user data from OAuth provider by using #get() and
// OAuth provider url
google
.get('/plus/v1/people/me').then(data => {
console
.log('self data:', data);
})
});
})

Fontes externas

* OAuth.io: https://oauth.io
* jQuery: https://code.jquery.com/jquery-3.2.1.min.js
* oauth.io JS: https://cdn.rawgit.com/ oauth-io / oauth-js / c5af4519 / dist / oauth.js
* Bootstrap: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
* Font-Aweseome: https: // maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
* Bootstrap-social: https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.12.0/ bootstrap-social.min.css

Passos Gerais

  1. Criar aplicativo do Google
  2. Criar conta OAuth.io
  3. Vincule as chaves do Google app à conta oauth.io
  4. Crie um botão de login social em HTML / CSS / JS com a chave de aplicativo oauth.io

1. Crie o aplicativo Google

Acesse https://console.developers.google.com e faça login ou crie uma nova conta.

Screen Shot 2017-12-20 at 6.02.45 PM.png

Clique em ‘Criar Projeto’ no canto superior esquerdo.

Screen Shot 2017-12-20 at 6.19.19 PM.png

Nomeie seu projeto e clique em ‘Criar’

Screen Shot 2017-12-20 at 6.27.34 PM.png

Verifique se você está no projeto que acabou de criar e clique em ‘Credenciais’

Screen Shot 2017-12-20 at 6.34.13 PM.png

Selecione a tela de consentimento OAuth e insira o endereço de e-mail e o nome do produto. Clique em Salvar.

Screen Shot 2017-12-20 at 6.37.28 PM.png

Clique na guia Credenciais e, em seguida, clique em ‘Criar credenciais’ e selecione ‘ID do cliente OAuth’ no menu suspenso.

Screen Shot 2017-12-20 at 6.40.04 PM.png

Selecione ‘Web application’ e digite https://oauth.io e https://oauth.io/auth para ‘Authorized JavaScript origins’ e Authorized redirect URLs, respectivamente. Clique em Criar.

Screen Shot 2017-12-20 at 6.42.59 PM.png

Agora você tem seu ID de cliente e segredo do cliente, que adicionará ao painel OAuth.io.

Screen Shot 2017-12-20 at 6.44.44 PM.png

2. Crie uma conta oauth.io

Crie uma conta em OAuth.io .

oauthio_signup.png

No painel principal, adicione o nome de domínio da página da web onde você colocará o botão de login social em ‘Domain & URL whitelist’

oauthio_domain_whitelist.png

Clique em ‘APIs integradas’ no menu à esquerda.

oauthio_general.png

No painel ‘APIs de integração’, clique em ‘Adicionar APIs’.

oauthio_api_integration.png

Selecione ‘Google’ como o provedor OAuth que deseja adicionar.

Screen Shot 2017-12-20 at 6.48.10 PM.png

3. Vincule as chaves do Google app à conta oauth.io

Defina o tipo de acesso como ‘online’. Na página do Google app, copie o ‘ID do cliente’ e o ‘Segredo do cliente’ do Google que você anotou anteriormente nos campos ‘id do cliente ‘ e ‘client_secret’, respectivamente, selecione o escopo desejado e clique em ‘Salvar’.

Captura de tela 20-12-2017 às 6.52.00 PM.png

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

4. Crie um botão de login social em HTML / CSS / JS com a chave de aplicativo oauth.io

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/a7Ljj18e/12/

<html>
<header>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdn.rawgit.com/oauth-io/oauth-js/c5af4519/dist/oauth.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.12.0/bootstrap-social.min.css">
</header>

<body>
<a id="google-button" class="btn btn-block btn-social btn-google">
<i class="fa fa-google"></i> Sign in with google
</a>

<script>
$
('#google-button').on('click', function() {
// Initialize with your OAuth.io app public key
OAuth.initialize('YOUR_OAUTH_KEY');
// Use popup for OAuth
OAuth.popup('google').then(google => {
console
.log('google:',google);
// Retrieves user data from oauth provider
// Prompts 'welcome' message with User's email on successful login
// #me() is a convenient method to retrieve user data without requiring you
// to know which OAuth provider url to call
google
.me().then(data => {
console
.log('me data:', data);
alert
('Google says your email is:' + data.email + ".\nView browser 'Console Log' for more details");
});
// Retrieves user data from OAuth provider by using #get() and
// OAuth provider url
google
.get('/plus/v1/people/me').then(data => {
console
.log('self data:', data);
})
});
})
</script>
</body>
</html>
Taggedbootstrapbuttongooglejavascriptoauthsocial loginsocial login bootstrap

Related Posts

Problema responsivo com Telerik RadWidow e Internet Explorer 9

Fevereiro 22, 2021

Ocultar navegação para carrossel de bootstrap

Fevereiro 17, 2021

Layout de 5 colunas com Twitter Bootstrap

Novembro 29, 2020

Navegação de artigos

Previous Article JavaScript で 配 列 を 空 に す る
Next Article Pesquisando github para solicitação de pull atribuída a você

Javascript

Ver Tudo

Git – correção ortográfica automática

Abril 29, 2021

Reproduza áudio facilmente com Rails: soundmanager-rails 1.0

Abril 27, 2021

Sincronismo preciso em JavaScript com microtímero e nanotempo

Abril 27, 2021

Insira um novo trecho de código contendo a diretiva angularJS em tempo de execução

Abril 23, 2021

Quebre apenas em exceções de JavaScript não travadas

Abril 22, 2021

Botão de inicialização de login social JavaScript do Google para OAuth

Abril 21, 2021

Php

Ver Tudo

5 etapas para acelerar suas páginas PHP

Abril 28, 2021

Não gerencie o semi collin

Abril 27, 2021

Delete Doctrine – PHP

Abril 18, 2021

PHPStorm “Digite hinting”, se você pode chamá-lo assim

Abril 17, 2021

Testando com Sessões (Symfony2)

Abril 16, 2021

Encontre o IP público do servidor

Abril 16, 2021

Python

Ver Tudo

Qualquer otimização da prática é muito mais difícil

Abril 17, 2021

Servidor da web HTTP simples Python com saída de registro

Março 28, 2021

Servidor da web simples em segundos

Março 27, 2021

Remover arquivos .pyc automaticamente

Março 25, 2021

Não use easy_install. Use pip.

Março 7, 2021

Python CSV pode delimitar mais do que vírgulas

Março 7, 2021

Ruby

Ver Tudo

Descubra rapidamente os métodos disponíveis para a aula

Abril 30, 2021

Git – correção ortográfica automática

Abril 29, 2021

Reproduza áudio facilmente com Rails: soundmanager-rails 1.0

Abril 27, 2021

Onde é o melhor lugar para começar a aprender Rails?

Abril 23, 2021

Use Hash # fetch sobre Hash # []

Abril 23, 2021

Execute o Sphinx no Rails usando o Foreman

Abril 22, 2021

Copyright © 2023 Código Fonte.