Objetivo
O guia passo a passo de Javascript mais simples com código de trabalho completo (<15 linhas) para criar um botão de login social para o Facebook em qualquer página da web
Resultado
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://jsfiddle.net/s3egg5h7/44/
HTML
<a id="facebook-button" class="btn btn-block btn-social btn-facebook">
<i class="fa fa-facebook"></i> Sign in with Facebook
</a>CSS
Nenhum
JS
$('#facebook-button').on('click', function() {
// Initialize with your OAuth.io app public key
OAuth.initialize('HwAr2OtSxRgEEnO2-JnYjsuA3tc');
// Use popup for oauth
OAuth.popup('facebook').then(facebook => {
console.log('facebook:',facebook);
// 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
facebook.me().then(data => {
console.log('me data:', data);
alert('Facebook 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
facebook.get('/v2.5/me?fields=name,first_name,last_name,email,gender,location,locale,work,languages,birthday,relationship_status,hometown,picture').then(data => {
console.log('self data:', data);
})
});
})Fontes externas
- 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
- Criar aplicativo do Facebook
- Crie uma conta oauth.io
- Vincule as chaves do aplicativo do Facebook à conta oauth.io
- Crie um botão de login social em HTML / CSS / JS com a chave de aplicativo oauth.io
1. Crie um aplicativo do Facebook
Vá para https://developers.facebook.com e clique em ‘Login’ no canto superior direito.
Se você ainda não estiver conectado ao Facebook, será solicitado.
Se você não for levado diretamente para a página de criação do aplicativo. clique em ‘Começar’ no canto superior direito.
O Facebook tem muitos ‘Produtos’ de desenvolvedor, mas o que queremos é ‘Login do Facebook’
Preencha o aplicativo ‘Nome de exibição’ e ‘E-mail de contato’.
Clique em ‘WWW’ para criar um aplicativo da web
Para “URL do site”, insira , clique em “Salvar” e em “Continuar”. Você pode clicar em “Avançar” até o final, pois as outras etapas mostram snippets de Javascripts de que você não precisa.https://oauth.io
Agora você deve ver ‘Configurações’ no menu esquerdo, clique nele.
Preencha os ‘URIs de redirecionamento OAuth válidos’ com .https://oauth.io/auth
Alterne a chave para tornar seu aplicativo público.
Em ‘Domínios de aplicativos’, preencha . Observe o ‘ID do aplicativo’ e a ‘Chave secreta’.oauth.io
2. Crie uma conta oauth.io
Crie uma conta em https://oauth.io/signup .
No painel principal, adicione o nome de domínio, por exemplo, abc.com, de onde você criará o botão de login social.
Clique em ‘APIs integradas’ no menu à esquerda.
No painel ‘APIs de integração’, clique em ‘Adicionar APIs’.
Selecione ‘Facebook’ como o provedor OAuth que deseja adicionar.
3. Vincule as chaves do aplicativo do Facebook à conta oauth.io
Selecione a última ‘ versão da API ‘, copie a ‘ID do aplicativo’ e a ‘Chave secreta’ do Facebook que você anotou anteriormente nos campos ‘id do cliente ‘ e ‘client_secret’ respectivamente e clique em ‘Salvar’.
Clique em ‘Try Auth’ para ver se você configurou oauth.io para acessar seu aplicativo do Facebook 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/s3egg5h7/44/
<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="facebook-button" class="btn btn-block btn-social btn-facebook">
<i class="fa fa-facebook"></i> Sign in with Facebook
</a>
<script>
$('#facebook-button').on('click', function() {
// Initialize with your OAuth.io app public key
OAuth.initialize('YOUR_OAUTH_KEY');
// Use popup for oauth
OAuth.popup('facebook').then(facebook => {
console.log('facebook:',facebook);
// 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
facebook.me().then(data => {
console.log('me data:', data);
alert('Facebook 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
facebook.get('/v2.5/me?fields=name,first_name,last_name,email,gender,location,locale,work,languages,birthday,relationship_status,hometown,picture').then(data => {
console.log('self data:', data);
})
});
})
</script>
</body>
</html>