Implementierung von Facebook-Login in JavaScript-Anwendungen

fügen sie facebook login zu ihrer javascript app hinzu einführung dieser abschnitt führt sie durch die verwendung der facebook api für javascript in einer parse umgebung über back4app in diesem tutorial lernen sie, wie sie das facebook sdk mit ihrem parse dashboard verknüpfen und wie sie facebook login login , registrierung registrierung , abmeldung abmeldung , verknüpfung verknüpfung und trennung trennung funktionen implementieren wenn sie die unten genannten schritte befolgen, werden sie in der lage sein, ein system wie dieses zu erstellen back4app javascript beispiel facebook login app jederzeit können sie auf das vollständige android projekt zugreifen, das mit diesem tutorial erstellt wurde, in unserem github repository voraussetzungen um dieses tutorial abzuschließen, benötigen sie eine grundlegende javascript app, die mit back4app verbunden ist hinweis sie können die im javascript install parse sdk tutorial erstellte app oder eine beliebige app verwenden, die mit back4app verbunden ist eine domain für ihre app hinweis es ist notwendig, eine domain zu haben, um die facebook login api zu verwenden um mehr über webhosting zu erfahren, schauen sie sich das an back4app webhosting tutorial einen parse server in version 2 6 5 oder höher hinweis das parse facebook sdk funktioniert nur auf parse server versionen höher als 2 6 5, die in diesem tutorial verwendet werden wenn sie eine niedrigere version von parse verwenden, sollten sie ein upgrade in betracht ziehen 1 facebook einrichten um das facebook sdk für javascript zu verwenden, müssen sie die folgenden schritte ausführen gehe zu dem facebook entwickler website , erstelle ein konto und eine app richte deine facebook app ein aktiviere die facebook anmeldung, indem du auf facebook anmeldung > schnellstart klickst, das im linken menü vorhanden ist, und folge dann der facebook schnellstart dokumentation um die aktivierung durchzuführen um back4app mit deiner facebook app zu verknüpfen, melde dich bei deinem back4app konto an, klicke auf servereinstellungen servereinstellungen deiner app und klicke auf einstellungen einstellungen des ''facebook anmelde'' blocks es sollte so aussehen 5\ füge dann deine facebook app id hinzu, die du im dashboard deiner facebook app finden kannst 6\ folge diesen anweisungen zum laden des facebook javascript sdk in deine anwendung 7\ ersetze deinen aufruf von fb init() fb init() durch einen aufruf von parse facebookutils init() parse facebookutils init() zum beispiel, wenn du das facebook javascript sdk asynchron lädst, wird deine fbasyncinit fbasyncinit funktion so aussehen init js 1 // initialize parse 2 parse initialize("your parse app id here", "your javascript key here"); // don't forget to change these keys 3 parse serverurl = "https //parseapi back4app com/"; 4 5 // load the facebook api asynchronous when the window starts loading 6 window\ fbasyncinit = function() { 7 parse facebookutils init({ // this line replaces fb init({ 8 appid '{facebook app id}', // facebook app id 9 cookie true, // enable cookies to allow parse to access the session 10 xfbml true, // initialize facebook social plugins on the page 11 version 'v2 3' // point to the latest facebook graph api version, found in fb's app dashboard 12 }); 13 14 // put here code to run after the facebook sdk is loaded 15 }; 16 17 // include the facebook sdk 18 (function(d, s, id){ 19 var js, fjs = d getelementsbytagname(s)\[0]; 20 if (d getelementbyid(id)) {return;} 21 js = d createelement(s); js id = id; 22 js src = "//connect facebook net/en us/sdk js"; 23 fjs parentnode insertbefore(js, fjs); 24 }(document, 'script', 'facebook jssdk')); 2 einloggen beginne mit der erstellung einer einloggen mit facebook funktion, die den benutzer in der parse datenbank speichert leider ist es nicht möglich, die von facebook bereitgestellte anmeldeschaltfläche zu verwenden, da das einloggen mit ihr den neuen benutzer nicht im parse dashboard parse dashboard wenn du jedoch das parse sdk für facebook , löst es das problem auf der serverseite für ein einfaches design der facebook anmeldeschaltfläche, die html und css verwendet, sieh dir diese implementierung an facebook anmeldeschaltfläche um mit der implementierung der anmeldung zu beginnen, weise ein onclick onclick ereignis zu, das die folgende login funktion zu deiner facebook anmeldeschaltfläche anmeldeschaltfläche aufruft um diese funktion zu erstellen, folge den unten genannten schritten verwende die parse facebookutils login parse facebookutils login um das facebook login zusammen mit parse durchzuführen, diese funktion erhält die berechtigungen von facebook als argumente in diesem beispiel entsprechen diese berechtigungen dem öffentlichen profil und der e mail hinweis siehe facebook login berechtigungsreferenz , um weitere details zu erhalten 2\ überprüfen sie, ob der benutzer bereits in der datenbank ist wenn ja, leiten sie ihn einfach auf eine andere seite weiter 3\ machen sie einen aufruf an fb api fb api , um informationen über den neuen benutzer zu erhalten in diesem beispiel ist es möglich, auf die id, den namen, die e mail und die berechtigungen der benutzer zuzugreifen hinweis um mehr über diese funktion zu erfahren, klicken sie hier 4\ setzen sie die eigenschaften, den benutzernamen und die e mail des benutzers und speichern sie sie in der datenbank 5\ leiten sie die seite weiter der login() code ist wie folgt login js 1 function login() { 2 parse facebookutils login("public profile,email", { 3 success function(user) { 4 if (!user existed()) { 5 fb api('/me?fields=id,name,email,permissions', function (response) { 6 user set('username', response name); 7 user set('email', response email); 8 9 user save(null, { 10 success function(user) { 11 alert('user logged in and sign up through facebook, with username ' + user get('username') + ' and email ' + user get('email')); 12 13 // you should redirect the user to another page after a successful login 14 window\ location replace('http //js fb login back4app io/logout html'); 15 }, 16 error function(user, error) { 17 alert('failed to save user to database with error ' + error message); 18 } 19 }); 20 }); 21 } else { 22 alert("user logged in through facebook!"); 23 // you should redirect the user to another page after a successful login 24 window\ location replace('http //js fb login back4app io/logout html'); 25 } 26 }, 27 error function(user, error) { 28 console log("user cancelled the facebook login or did not fully authorize "); 29 } 30 }); 31 } 3 abmelden die abmeldefunktion ist viel einfacher als die anmeldefunktion diesmal können sie die von facebook bereitgestellte schaltfläche verwenden sie wird jedoch nur für abmeldezwecke verwendet, da es notwendig ist, die funktion von parse zu verwenden, um sich anzumelden daher sollten sie diese schaltfläche nur verwenden, wenn der benutzer bereits bei facebook angemeldet ist und sich abmelden möchte um die offizielle facebook referenz zur facebook schaltfläche zu sehen, klicken sie hier so können sie diese schaltfläche mit dem facebook sdk implementieren logout html 1 hinweis dieses element hat einen callback onlogin onlogin , der unsere funktion logoutwithfacebook logoutwithfacebook aufruft, wenn der benutzer sich abmeldet ja, das ist richtig das onlogin onlogin ereignis wird beim abmelden ausgelöst die logoutwithfacebook logoutwithfacebook funktion wird einfach den benutzer von seiner aktuellen parse sitzung abmelden und ihn auf eine andere seite umleiten, wie unten gezeigt logout js 1 function logoutwithfacebook() { // the callback function 2 parse user logout(); // delete the current session for the user 3 alert('user logged out of facebook!'); 4 window\ location replace('http //js fb login back4app io'); // redirects the user to another webpage 5 } 4 verknüpfen und entkoppeln die letzten funktionen, die für parse facebook verfügbar sind, sind verknüpfen verknüpfen und entkoppeln entkoppeln funktionen während verknüpfen der akt ist, einen bestehenden parse user parse user mit seinem facebook konto zu verbinden und entkoppeln bezieht sich auf das entfernen dieser verbindung diese verbindung kann in ihrem parse dashboard parse dashboard , in der authdata authdata spalte, hier sie können die daten in der spalte verwenden, um ihre verknüpfen verknüpfen und entkoppeln entkoppeln funktionen zu validieren schritt 4 1 link die link link funktion überprüft, ob der aktuelle benutzer verlinkt ist, bevor versucht wird, ihn erneut zu verlinken es ist ziemlich einfach und verwendet das parse facebookutils parse facebookutils sdk, wie unten gezeigt link js 1 function link() { 2 var user = parse user current(); 3 if (!parse facebookutils islinked(user)) { 4 parse facebookutils link(user, null, { 5 success function(user) { 6 alert("woohoo, user logged in with facebook!"); 7 }, 8 error function(user, error) { 9 alert("user cancelled the facebook login or did not fully authorize "); 10 } 11 }); 12 } 13 else { 14 alert("can't link user to facebook because he is already linked"); 15 } 16 } schritt 4 2 unlink für die unlink unlink funktion rufen sie einfach parse facebookutils unlink parse facebookutils unlink für den aktuellen parse benutzer auf, wie sie sehen können unlink js 1 function unlink() { 2 var user = parse user current(); 3 parse facebookutils unlink(user, { 4 success function(user) { 5 alert("the user is no longer associated with their facebook account "); 6 } 7 }); 8 } gehe zur authdata authdata spalte in deinem parse dashboard parse dashboard , um zu bestätigen, dass sie nach dem funktionsaufruf leer ist es ist erledigt! an diesem punkt hast du nicht nur gelernt, wie man die facebook anmeldung anmeldung und abmeldung abmeldung funktionen mit deiner app konfiguriert und verwendet, sondern auch, wie man sie mit back4app und parse verwendet du beherrschst jetzt die verwendung des parse facebook sdk parse facebook sdk und kannst es nach belieben verwenden siehe mehr über das parse sdk bei j javascript sdk api referenz und parse open source dokumentation für das javascript sdk