Denne plugin brukes for å koble til Facebook API. Før du begynner å integrere Facebook, må du opprette Facebook-app her. Du vil lage web app og deretter hoppe hurtigstartskjermen. Deretter må du legge til webområdet plattform på Innstillinger
side. Du kan bruke følgende kode i URL-området mens i utvikling
http:. //Localhost: 8100 /

Etter at du må legge til Gyldig OAuth omdirigere URI
på Innstillinger /avansert
side. Bare kopiere de følgende to urls.
http://www.facebook.com/connect/login_success.html

http://localhost:8100/oauthcallback.html
Installing Facebook Plugin

Vi gjorde alle trinnene ovenfor for å takle noen problemer som ofte dukker opp når du bruker denne plugin. Denne plugin er vanskelig å sette opp, fordi det er mange skritt involvert og dokumentasjon dekker ikke alle av dem. Det er også noen kjente kompatibilitetsproblemer med andre Cordova plugins så vi vil bruke Teleric verifisert plugin
versjon i vår app. Vi vil starte med å leseren plattform installere vår app fra ledeteksten
C:. \\ Users \\ Brukernavn \\ Desktop \\ MyApp> ionisk plattform add leseren

Neste vi trenger å gjøre er å legge root element på toppen av body
koden i index.html

index.html
. & lt; div id = "fb-root" & gt; & lt; /div & gt;

Nå vil vi legge til Cordova Facebook plugin til vår app. Du må endre APP_ID Hotell og APP_NAME
å matche Facebook-applikasjonen du opprettet før
C:. \\ Users \\ Brukernavn \\ Desktop \\ MyApp> Cordova -d plugin legge http: //github.com/Telerik-Verified-Plugins/Facebook/--variable APP_ID = "123456789" --variable APP_NAME = "FbAppName"

Nå åpner index.html Hotell og legge til følgende kode etter kroppen
tag. Igjen må du sørge for at AppID Hotell og versjon
er samsvar Facebook-applikasjonen du opprettet. Dette vil sikre at Facebook SDK er lastet asynkront uten å blokkere resten av programmet

index.html
. & Lt; script & gt; window.fbAsyncInit = function () {FB.init ({AppID: '123456789', Xfbml: true, versjon: 'v2.4'}); }; (funksjon (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);} (dokument, 'script', 'facebook-jssdk')); & lt; /script & gt;
Vinkel Tjenesten

Siden vi installerte alt vi trenger for å lage tjeneste som vil være vår tilknytning til Facebook. Disse tingene kan gjøres med mindre kode inne kontrolleren, men vi prøver å følge de beste praksis, slik at vi vil bruke Vinkel service. Følgende kode viser hele tjenesten. Vi vil forklare det senere.

services.js
.service ('Auth', funksjon ($ q, $ ionicLoading) {this.getLoginStatus = function () {var Utsett = $ q.defer ( ); FB.getLoginStatus (funksjon (respons) {if (response.status === "koblet") {console.log (JSON.stringify (respons));} else {console.log ("Ikke innlogget"); }}); returnere defer.promise;} this.loginFacebook = function () {var Utsett = $ q.defer (); FB.login (funksjon (respons) {if (response.status === "koblet") { console.log (JSON.stringify (respons));} else {console.log ("Ikke innlogget!");}}); returnere defer.promise;} this.logoutFacebook = function () {var utsette = $ q .defer (); FB.logout (funksjon (respons) {console.log ('Du er logget ut!');}); returnere defer.promise;} this.getFacebookApi = function () {var Utsett = $ q. utsette (); FB.api ("? meg /felt = id, e-post", [], funksjon (respons) {if (response.error) {console.log (JSON.stringify (response.error)); } Else {console.log (JSON.stringify (respons)); }}); returnere defer.promise; }});

I ovennevnte tjeneste skaper vi fire funksjoner. Tre første er selvforklarende. Den fjerde funksjonen brukes for å koble til Facebook grafen API. Det vil returnere id Hotell og e
fra Facebook-bruker. Vi skaper løfte objekter å håndtere asynkrone Javascript-funksjoner. Nå må vi skrive vår controller som vil kalle disse funksjonene. Vi vil kalle hver funksjon separat for bedre forståelse, men vil du sannsynligvis trenger å blande noen av dem sammen for å få ønsket effekt.

Controller Kode
.controller ('MyCtrl', funksjon ($ omfang, Auth , $ ionicLoading) {$ scope.checkLoginStatus = function () {getLoginUserStatus ();} $ scope.loginFacebook = function (brukerdata) {loginFacebookUser ();}; $ scope.facebookAPI = function () {getFacebookUserApi ();} $ scope.logoutFacebook = function () {logoutFacebookUser ();}; funksjon loginFacebookUser () {return Auth.loginFacebook ();} funksjon logoutFacebookUser () {return Auth.logoutFacebook ();} funksjon getFacebookUserApi () {return Auth.getFacebookApi ( );} funksjon getLoginUserStatus () {return Auth.getLoginStatus ();}})

Du lurer kanskje på hvorfor ikke vi har kommet Auth
tjeneste direkte fra funksjonsuttrykk (første fire funksjoner). Grunnen til dette er at du sannsynligvis vil legge litt mer oppførsel etter at Auth funksjonen er returnert. Du kan sende noen data til databasen, endre rute etter innlogging etc. Dette kan enkelt gjøres ved hjelp av Javascript da ()
metode for å håndtere alle asynkrone operasjoner i stedet for callbacks.

Nå trenger vi å tillate brukere å samhandle med app. Vår HTML vil inneholde fire knapper for å ringe fire funksjoner vi opprettet

HTML kode
. & Lt; knappen class = "button" ng-klikk = "loginFacebook ()" & gt; LOG IN & lt; /knapp & gt; & lt -knappen class = "button" ng-klikk = "logoutFacebook ()" & gt; LOGG UT & lt; /knapp & gt; & lt; knappen class = "button" ng-klikk = "checkLoginStatus ()" & gt; SJEKK & lt; /knapp & gt; & lt; knappen class = "button" ng-klikk = "facebookAPI ()" & gt; API & lt; /knapp & gt;

Når brukeren trykk LOGG INN
knappen facebook vises. Brukeren vil bli omdirigert til app etter innlogging er vellykkede. Anmeldelser