Neste post, mostrarei como é fácil implementar o login social do Facebook em uma página da Web usando o SDK JavaScript do Facebook. O legal do Facebook…

Neste post, mostrarei como é fácil implementar o login social do Facebook em uma página da Web usando o SDK JavaScript do Facebook. O bom do login social do Facebook é a excelente documentação e instruções já fornecidas em  https://developers.facebook.com/docs/facebook-login/login-flow-for-web/v2.2 Há também um trecho de código que é fornecido a você pelo Facebook para implementar seu sistema de login. Eu fui em frente e personalizei este código e forneci um codepen  aqui que explicarei.

A primeira coisa que você precisa fazer é criar um aplicativo do Facebook, pois um ID de aplicativo é necessário para implementar o login usando o Facebook. Você pode criar um aplicativo do Facebook acessando  http://developers.facebook.com . Você notará que nada é exibido no codepen, pois não adicionei um ID de aplicativo. Você precisará se lembrar de substituir esse espaço reservado pelo seu próprio ID do aplicativo do Facebook depois de criar seu aplicativo do Facebook.

Em seguida, implementaremos o login usando o Facebook. Tudo o que precisamos fazer é copiar e colar o código fornecido pelo Facebook para criar o login social do Facebook e substituir o espaço reservado pelo seu próprio ID do aplicativo do Facebook. Estarei explicando o mesmo código com minha customização fornecida no codepen abaixo.

Vamos adicionar a interface de login do Facebook. Você vai querer colocar este código na seção do corpo do seu código html.

Em seguida, você notará esta seção de código no final da seção JavaScript. Este trecho de código carrega o JavaScript do SDK do Facebook de forma assíncrona. Ele também fornece a biblioteca JavaScript que é usada para renderizar sua interface de login do Facebook.

Agora só precisamos substituir o espaço reservado do ID do aplicativo pelo ID do aplicativo que você criou no início. Você encontrará o espaço reservado nesta linha appId : ‘{your-app-id}’. Esta função está logo acima do carregamento do JavaScript de forma assíncrona.

Em seguida, adicionaremos a função que manipula a resposta e altera o conteúdo da página com base no tipo de resposta. Eu tenho essa função localizada no topo da seção de scripts.

// This is called with the results from from FB.getLoginStatus().
function statusChangeCallback(response) {
    // The response object is returned with a status field that Let's the app know the current login status of the person.
    if (response.status === 'connected') {
        console.log('Welcome! Fetching your information.... ');
        FB.api('/me', function(response) {
            console.log('Successful login for: ' + response.name);
            document.getElementById('status').innerHTML = 'Thanks for logging in, ' + response.name + '!';
        });
    } else if (response.status === 'not_authorized') {
        // The person is logged into Facebook, but not your app.
        document.getElementById('status').innerHTML = 'Please log ' + 'into this app.';
    } else {
       // The person is not logged into Facebook, so we're not sure if they are logged into this app or not.
       document.getElementById('status').innerHTML = 'Please log ' + 'into Facebook.';
    }
}

Como você pode ver, a função acima recebe uma variável de resposta e verifica seu status. Se estiver conectado, ele busca as informações dos usuários logados e exibe essas informações no console do seu navegador, essa área é onde você pode criar mais neste script para lidar com os dados. Você também notará o status not_authorized. Quando o login não é autorizado, esta função altera o html da sua página para solicitar que você faça o login. Mas como essa função é usada? Nesta próxima função, isso é tratado quando alguém clica no botão do Facebook na página. Observe o onlogin="checkLoginState(); no código html do seu corpo para o botão do Facebook.

Agora, se você salvar esta página como index.html e abri-la em um navegador, deverá ver o botão Login do Facebook. Você pode usar o código fornecido pelo facebook no link listado acima ou pode usar o código codepen que alterei para torná-lo um pouco mais curto para explicação.

Exemplo de página do Facebook

Faça login e observe a saída do console. Agora você verá algumas informações básicas, incluindo id, email, first_name, gender, last_name, link, locale, name, timezone, updated_time, verificada

Isso é tudo. Claro, há muito mais escopos que você pode usar, o que permite coletar mais dados atualmente, este script tem um escopo de public_profile e email, recursos e chamadas de API com os quais você pode brincar para criar o aplicativo desejado, basta explorar a documentação do Facebook para descobrir tudo essas características.