Implementera Facebook Social logik (2 / 3 steg)

Steg 2: genomförande

Därefter kommer vi genomföra logga in med Facebook. Allt vi behöver göra är kopiera och klistra in koden från Facebook för att skapa Facebook social logik och ersätta platshållaren med ditt eget Facebook app id till oss. Jag kommer att förklara samma kod med min anpassningen i codepen nedan.

Kan lägga till Facebook login gränssnittet. Du vill placera den här koden i avsnittet kropp i din HTML-kod.

< fb:login-knappen räckvidd = "public_profile, e-post" onlogin="checkLoginState();" >< br >< / fb:login-knappen >< br >< div id = "status" >< br >< / div >

Därefter kommer du märka denna del av koden i slutet av avsnittet JavaScript. Denna kodsträng laddar Facebook SDK JavaScript asynkront. Det ger också JavaScript biblioteket som används för att återge ditt Facebook login-gränssnittet.

Ladda SDK asynkront < br > (funktion (id, s, d) {
var js, fjs = d.getElementsByTagName(s) [0];
om (d.getElementById(id)) tillbaka;
JS = d.createElement(s); JS.ID = id;
JS.src = "/ / connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore (js, fjs);
} (dokument, "script", "facebook-jssdk'));

Nu behöver vi bara att ersätta platshållaren app-id med app-id i din app som du skapade i början. Hittar du platshållaren i denna linje appId: "{your-app-id}". Denna funktion är precis ovanför lastning JavaScript asynkront.

window.fbAsyncInit = function() {< br > FB.init ({
appId: "{your-app-id}",
cookie: sant, / / aktivera cookies för att tillåta att servern kan komma åt sessionen
XFBML: sant, / / tolka sociala plugins på denna sida
version: "v2.1" / / använda version 2.1
{}); < /p >< p > / / nu när vi har initierats av JavaScript SDK, vi kallar FB.getLoginStatus().
Denna funktion blir tillståndet för personen du besöker denna sida.
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
};

Därefter lägger vi till den funktion som hanterar svaret och förändrar sidans innehåll baserat på vilken typ av svar. Jag har denna funktion ligger högst upp i avsnittet skript.

Detta kallas med resultatet från från FB.getLoginStatus(). < br > funktion statusChangeCallback(response) {
Objektet response är tillbaka med ett status-fält som låter app veta aktuell inloggningsstatus för personen.
om (response.status === "ansluten") {
Console.log('Welcome! Hämtar din information... ');
FB.api ('/ mig ", function(response) {
Console.log ("lyckad inloggning för:" + response.name);
document.getElementById('status').innerHTML =
'Tack för loggning i' + response.name + '!';
});
} else om (response.status === 'not_authorized') {
Personen är inloggad på Facebook, men inte din app.
document.getElementById('status').innerHTML = "Vänligen logga" + "till denna app.';
} annat {
Personen är inte inloggad på Facebook, så vi inte är säker på om de är inloggade i denna app eller inte.
document.getElementById('status').innerHTML = "Vänligen logga" + "till Facebook.";
}
}

Som ni kan se, funktionen ovan tar emot ett svar variabel och kontrollerar det är status. Om den är ansluten det hämtar de inloggade användarna information och utgångar denna information i konsolen i webbläsaren, att området är där du kan bygga mer på detta skript för att hantera data. Du märker också not_authorized status. När inloggning inte är godkänt, ändras denna funktion html på sidan för att be er att logga in. Men hur denna funktion få användas? I detta nästa funktion hanteras när någon klickade på Facebook-knappen på sidan. Märka onlogin="checkLoginState(); i din kropp HTML-kod för Facebook-knappen.

Denna funktion kallas när någon slutar med logga in knappen. < br > funktion checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}

Om du sparar den här sidan som index.html och öppna den i en webbläsare bör du nu se knappen Facebook logga in. Du kan använda koden tillhandahålls av facebook på länken ovan eller du kan användas codepen koden som jag har ändrat för att göra det lite kortare förklaring.