Paso 2: aplicación
A continuación implementamos login con Facebook. Todo lo que necesitamos hacer es copia y pega el código que nos brinda Facebook para crear el inicio de sesión de Facebook social y reemplazar el marcador de posición con su propio id de la aplicación de Facebook. Que va explicando el mismo código con mi personalización en el codepen abajo.
Permite añadir la interfaz de inicio de sesión de Facebook. Usted querrá colocar este código en la sección del cuerpo del código html.
<fb:login-button scope="public_profile,email" onlogin="checkLoginState();"><br></fb:login-button><br><div id="status"><br></div>
A continuación, se dará cuenta de esta sección de código al final de la sección de JavaScript. Este fragmento de código carga el JavaScript SDK de Facebook de forma asincrónica. También proporciona la biblioteca de JavaScript que se utiliza para representar la interfaz de inicio de sesión de Facebook.
// Load the SDK asynchronously<br>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); Ahora solo tenemos que reemplazar el marcador de posición de id de la aplicación con el identificador de la aplicación de la aplicación que creó en el principio. Encontrarás el marcador de posición en esta línea appId: '{tu app-id}'. Esta función está justo por encima de la carga del JavaScript asíncronamente.
window.fbAsyncInit = function() {<br>FB.init({ appId : '{your-app-id}', cookie : true, // enable cookies to allow the server to access the session xfbml : true, // parse social plugins on this page version : 'v2.1' // use version 2.1 });</p><p>// Now that we've initialized the JavaScript SDK, we call FB.getLoginStatus(). // This function gets the state of the person visiting this page. FB.getLoginStatus(function(response) { statusChangeCallback(response); }); }; A continuación vamos a añadir la función que controla la respuesta y altera el contenido de la página en función del tipo de respuesta. Tengo esta función que se encuentra en la parte superior de la sección de scripts.
// This is called with the results from from FB.getLoginStatus().<br>function statusChangeCallback(response) { // The response object is returned with a status field that lets 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 se puede ver, la función anterior recibe una variable y comprueba su estado. Si está conectado se obtiene los usuarios registrados en información y esta información en la consola de tu navegador, que zona es donde se podrían construir más en esta secuencia de comandos para manejar los datos. También observará el estado de not_authorized. Cuando el inicio de sesión no está autorizado, esta función cambia el html en su página para pedirle que inicie sesión. ¿Pero cómo esta función Haz utilizada? En esta función siguiente esto se maneja cuando alguien hace clic en el botón de Facebook en la página. Aviso onlogin="checkLoginState(); en el código html de cuerpo para el botón de Facebook.
// This function is called when someone finishes with the Login Button.<br>function checkLoginState() { FB.getLoginStatus(function(response) { statusChangeCallback(response); }); } Ahora si guardar esta página como index.html y ábralo en un navegador debería ver el botón de Facebook Login. Usted puede utilizar el código proporcionado por facebook en el link mencionado anteriormente o puede utilizar el código codepen que he alterado para hacerlo un poco más corto para la explicación.
