Isifundo seIonic 4: Umzekelo wokuNgena kukaFacebook

Ibhlog

Isifundo seIonic 4: Umzekelo wokuNgena kukaFacebook

Isifundo seIonic 4: Umzekelo wokuNgena kukaFacebook

Kule Ionic 4 isifundo , Siza kukubonisa ukuba ungene njani kwii -apps zakho ze-Ionic usebenzisa i-Ionic yeNative Facebook Qhagamshela. Siza kusebenzisa i-Ionic Angular Facebook Qhagamshela iplagi yokufumana ukufikelela kwisicelo se-FB yemveli kwi-iOS nakwi-Android. Ngamanye amagama, iapp ye-Ionic inefayile yokungena ye-FB ngenjongo yayo yokhuseleko.



Isiqulatho:

Ezi zixhobo zilandelayo, izikhokelo, iilayibrari, kunye neemodyuli ziyafuneka kwesi sifundo:

  1. Iifayile zeNode (Uhlobo olucetyiswayo)
  2. Ionic 4
  3. Angular 8
  4. Apache Cordova
  5. Iplagi yokuNxibelelana noFacebook
  6. Isazisi se-Facebook App
  7. Indawo yokukhwelela okanye Umgca wokuyalela uNode
  8. IDE okanye uMhleli Wokubhaliweyo (Sisebenzisa iKhowudi yeVenkile yeVidiyo)

Ngaphambi kokuya kumanyathelo aphambili, sicinga ukuba kuya kufuneka ufake iiNode. Emva koko, hlaziya okanye ufake entsha Ionic 4 CLI ngokuvula i-terminal okanye i-Node command line emva koko uchwetheze lo myalelo.



eyona nkqubo isebenzayo yovavanyo
sudo npm install -g ionic

Uya kufumana ingxelo yokugqibela ye-Ionic ye-CLI 5 kwisiphelo sakho okanye kumgca wokuyalela. Jonga uhlobo ngohlobo lo myalelo.

ionic -v 5.4.1

Okwangoku, sisebenzisa uhlobo lwamva nje lwe-Ionic CLI 5. Sukuba nexhala malunga nohlobo lweAngular, siya kusebenzisa naluphi na uhlobo oluvelise ii -apps zeIonic.



Cwangcisa iApple ye-Facebook

Eli nyathelo limalunga nokuseta okanye ukwenza i-App ye-Facebook ukuze ufumane i-ID ye-App kunye nemfihlo. Seta kwakhona isiqwenga se-ID yemveli ye-iOS kunye negama lokudlala likaGoogle kwi-Android yemveli. Ukuseta okanye wenze iFacebook App, yiya kwiDashboard yabaPhuhlisi beFacebook https://developers.facebook.com/apps/ . Ngena kwiakhawunti yabaphuhlisi bakho be-Facebook okanye iziqinisekiso.

Ukungena kwe-Ionic yeAngular yeFacebook -Idashboard yeApple yeFacebook

Cofa kwi + Add a New App iqhosha. Ngenisa igama lokubonisa (sisebenzisa MyIonicApp igama) emva koko ucofe i Create App ID iqhosha. Qiniseka ukuba usebenzisa igama elisemthethweni elivunyelweyo ngabaphuhlisi beFacebook.

Ukungena kwe-Ionic Angular ye-Facebook- iNkqubo eNtsha

Emva kokujonga incoko yencoko ye-captcha kwaye ucofe ukungenisa iqhosha, ngoku, ungabona i-App ID kunye neMfihlo, uyibhalele incwadana yakho.

Ukungena kwe-Ionic Angular ye-Facebook-kwiDeshibhodi eNtsha yeApp

Skrolela ezantsi kwaye uya kubona Yongeza imveliso emva koko ucofe i-Facebook yokuLungiselela ukuseta iqhosha.

Ukungena kwe-Ionic Angular ye-Facebook-Khetha iqonga

Khetha i-iOS kuqala emva koko kwi-wizard ye-iOS skrolela ezantsi ukuya ezantsi ukufaka i-ID ye-bundle ye-iOS eya kuthi ibonelele config.xml kamva.

Ukungena kwe-Ionic Angular ye-Facebook-Cwangcisa i-iOS

Khetha i-SDK: Cocoapods njengendawo yophuhliso ngaphambi kokusebenzisa i-Facebook yokuNgena kwi-iOS emva koko ucofe iqhosha elilandelayo.

Ukungena kwe-Ionic Angular ye-Facebook- Yongeza isiKhombisi seNqwaba

Ngenisa i-ID yesixokelelwano se-iOS eya kubonelela nge config.xml kamva (sisebenzisa com.djamware.myionicfacebook) emva koko ucofe ukugcina kwaye ucofe iqhosha lokuqhubeka.

Ukungena kwe-Ionic Angular ye-Facebook-Yenza ukuba ungene ngokuNgenaNye

Inikwe amandla uphawu lokuNgena ngaMnye emva koko ucofe ku Gcina kunye neqhosha elilandelayo amaxesha ambalwa kude kube sekupheleni kwamanyathelo e-iOS. Emva koko, cofa kwi-Android ithebhu emva koko ucofe uKhuphele i-Android SDK.

Ionic I-Angular ye-Facebook yokuNgena- Khuphela i-FacebookSDK ye-Android

Cofa kwiqhosha elilandelayo amaxesha ama-2 emva koko ugcwalise igama leprojekthi ye-Android (sisebenzisa com.djamware.myionicfacebook) kunye negama elingagqibekanga loMsebenzi we-Android.

Ukungena kwe-Ionic yeAngular yeFacebook -Igama lePhakheji ye-Android

Cofa kwiqhosha lokugcina kwaye olu seto luya kujonga kuGoogle Play ubukho beli phakheji. Ungawutyeshela umyalezo ozivelelayo ukuba akukho phakheji ifunyenwe kuGoogle Play. Cofa iqhosha lokuqhubeka.

Ukungena kwe-Ionic Angular ye-Facebook-iiHash Key

Njengoko ubona, kufuneka senze i-Key Hashes. Ukufumana ii-hashes eziphambili, ngakumbi kuphuhliso lwakha uvule i-terminal okanye umgca wokuyalela emva koko uchwetheze lo myalelo.

keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64

Ngena i-Android njengePasi eliPhambili.

Enter keystore password: android K1IC8IKUNGj8tt2BHTpm11c7uRE=

Khuphela kwaye uncamathisele iiHashes eziphambili ezinje ngentla kwicandelo eliKhawulezayo lokuHamba kweFacebook yokuCwangciswa kwe-Facebook emva koko ucofe ekugcineni kwaye uqhubeke iqhosha.

Ukungena kwe-Ionic Angular ye-Facebook-Yenza ukuba ungene kwi-Android

Inikwe amandla ukuSayina ngokuNye emva koko ucofe iqhosha elilandelayo amaxesha ambalwa kude kube sekupheleni kokusetwa kwe-Facebook Android.

Yenza iNkqubo eNtsha yeIonic Angular

Siza kusebenzisa le Ionic CLI 5 ingentla ukwenza entsha Ionic iAngular usetyenziso . Chwetheza lo myalelo ukwenza i-Ionic Angular app entsha kwifolda yeeprojekthi.

ionic start myionicfacebook blank --type=angular

Emva koko, yiya kwifolda yeprojekthi ye-Ionic 4 esandula ukwenziwa.

cd ./myionicfacebook

Jonga uhlobo lwe-Angular kunye ne-CLI kunye nolunye ulwazi ngokuchwetheza lo myalelo.

ionic info Ionic: Ionic CLI : 5.4.1 (/usr/local/lib/node_modules/ionic) Ionic Framework : @ionic/angular 4.10.0 @angular-devkit/build-angular : 0.801.3 @angular-devkit/schematics : 8.1.3 @angular/cli : 8.1.3 @ionic/angular-toolkit : 2.0.0 Utility: cordova-res : not installed native-run : 0.2.5 (update available: 0.2.8) System: NodeJS : v10.15.1 (/usr/local/bin/node) npm : 6.11.3 OS : macOS Mojave

Emva koko, sebenzisa isicelo se-Ionic 4 okokuqala usebenzisa lo myalelo.

ionic serve -l

Ukuba kukho umbuzo onje ngezantsi, chwetheza Y.

Looks like @ionic/lab isn't installed in this project. This package is required for this command to work properly. The package provides a CLI utility, but the ionic-lab binary was not found in your PATH. ? Install @ionic/lab? (Y/n)

Isicelo seIonic siza kuvula ngokuzenzekelayo kwisikhangeli sakho sewebhu.

Ukungena kwe-Ionic Angular ye-Facebook- ilebhu yeIonic

Faka i-Ionic yeNative Facebook Qhagamshela iplagi

Ukufaka i-Ionic yeNative Facebook Qhagamshela iplagi, chwetheza lo myalelo kwisiphelo sendlela okanye kumgca wokuyalela emva kokuyeka ukusebenza kwe-Ionic ngokucinezela Ctrl+C.

Ungayakha njani eyakho i-stock screener
ionic cordova plugin add cordova-plugin-facebook4 --variable APP_ID='YOUR_APP_ID' --variable APP_NAME='MyIonicFacebook' npm install @ionic-native/facebook

Gcwalisa i-APP_ID kunye ne-APP_NAME ngokufanayo ne-Facebook App eyayenziwe ngaphambili kwi-Facebook Developer Dashboard. Emva koko, vula kwaye uhlele config.xml emva koko utshintshe i-ID yewijethi ngokufanayo kunye nephakheji ebhalisiweyo ngaphambili okanye isazisi se-ID kuseto lwe-Facebook App.

Emva koko, vula kwaye uhlele src/app/app.module.ts emva koko yongeza oku kungenisa imodyuli ye-Facebook.

import { Facebook } from '@ionic-native/facebook/ngx'; Add that module to @NgModule providers array. providers: [ StatusBar, SplashScreen, { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }, Facebook ],

Iphumeza ukungena ngemvume kwi-Facebook kunye nokuPhuma

Siza kusebenzisa iphepha elinye le-Ionic ukusebenzisa ukungena kwe-Facebook kunye nokuphuma. Ngaphambi kokwenza ukungena kwe-FB, iphepha lasekhaya le-Ionic liya kuba neKhonkco lokuNgena ngeFacebook. Emva kokungena kwi-FB ngempumelelo, iphepha lasekhaya le-Ionic liya kubonisa ulwazi olusisiseko lwangoku ungene kwiakhawunti ye-Facebook. Ngoku, vula kwaye uhlele src/app/home.page.ts emva koko yongeza oku kungenisa imodyuli yeFacebook kunye neFacebookLoginResponse.

import { Facebook, FacebookLoginResponse } from '@ionic-native/facebook/ngx';

Fakela imodyuli yeFacebook kumakhi.

constructor(private fb: Facebook) { }

Chaza izinto eziguquguqukayo ukujonga ukuba ngaba umsebenzisi ungene ngemvume kwaye ubambe idatha yomsebenzisi ye-Facebook ngaphambi komakhi.

isLoggedIn = false; users = { id: '', name: '', email: '', picture: { data: { url: '' } } };

Yongeza i-FB yokujonga imeko yokungena emzimbeni womakhi oseta impendulo kwi-isLoggedIn eyahlukileyo.

constructor(private fb: Facebook) { fb.getLoginStatus() .then(res => { console.log(res.status); if (res.status === 'connect') { this.isLoggedIn = true; } else { this.isLoggedIn = false; } }) .catch(e => console.log(e)); }

Yongeza indlela okanye umsebenzi we-FB yokungena emva komakhi.

fbLogin() { this.fb.login(['public_profile', 'user_friends', 'email']) .then(res => { if (res.status === 'connected') { this.isLoggedIn = true; this.getUserDetail(res.authResponse.userID); } else { this.isLoggedIn = false; } }) .catch(e => console.log('Error logging into Facebook', e)); }

Umsebenzi wokungena we-FB useta ukhetho olunokufikelela kuphela kuluntu_profile, kumsebenzisi_umaqabane nakwi-imeyile. Kwakhona, tsalela umnxeba iinkcukacha zomsebenzisi we-FB ukuze usebenze usebenzisa i-Facebook Graph API eyongezwe apha ngezantsi.

getUserDetail(userid: any) { this.fb.api('/' + userid + '/?fields=id,email,name,picture', ['public_profile']) .then(res => { console.log(res); this.users = res; }) .catch(e => { console.log(e); }); }

Impendulo evela kulo msebenzi we-FB API yokufumana abasebenzisi be-Facebook iya kuseta kubasebenzisi abaguqukayo. Okulandelayo, yongeza umsebenzi kwizixhobo zokuphuma ze-FB.

logout() { this.fb.logout() .then( res => this.isLoggedIn = false) .catch(e => console.log('Error logout from Facebook', e)); }

Lowo msebenzi uya kucoca yonke imeko yokungena ye-FB emva koko usete imeko yeLoggedIn kubuxoki. Okulandelayo, siya kuyenza yonke loo misebenzi kwiIonic View. Vula kwaye uhlele src/app/home/home.page.html emva koko ubuyisele zonke iithegi ze-HTML ngezi thegi ziqulethe imeko yemeko yokungena ye-FB, amaqhosha kunye nolwazi lomsebenzisi.

Ionic Facebook Hi, {{users.name}} {{users.email}}

Logout

Login with

Qalisa kwaye Uvavanye i-Ionic 4 ye-Facebook yokuNgena kwi-App

Ngoku, siya kubaleka kwaye sivavanye le Ionic 4 yokungena kwi-Facebook usetyenziso lwezixhobo ze-iOS kunye nezixhobo ze-Android. Ngaphambi kokusebenzisa usetyenziso, kufuneka silungiselele iqonga leCordova le-iOS kunye ne-Android. Chwetheza le miyalelo ukuyongeza emva kokufaka / yokuhlaziya iCordova.

sudo npm i -g cordova ionic cordova platform rm android ionic cordova platform add android ionic cordova platform rm ios ionic cordova platform add ios

Ukuthintela nayiphi na impazamo eza nokungahambelani nohlobo lweFacebookSDK kunye neNative iOS okanye Android inguqulelo qiniseka ukuba uyihlaziyile inguqulelo yeCordova yamva nje ngaphambi kokuba ususe / wongeze amaqonga. Sinolu luhlu lwenguqulo olusebenzayo onokuthi uluthelekise.

Ionic: Ionic CLI : 5.4.1 (/usr/local/lib/node_modules/ionic) Ionic Framework : @ionic/angular 4.10.0 @angular-devkit/build-angular : 0.801.3 @angular-devkit/schematics : 8.1.3 @angular/cli : 8.1.3 @ionic/angular-toolkit : 2.0.0 Cordova: Cordova CLI : 9.0.0 ([email protected]) Cordova Platforms : android 8.1.0, ios 5.0.1 Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.2, (and 4 other plugins) Utility: cordova-res : 0.6.0 native-run : 0.2.8 System: Android SDK Tools : 26.1.1 (/Users/didin/Library/Android/sdk) ios-deploy : 1.9.4 ios-sim : 8.0.2 NodeJS : v10.15.1 (/usr/local/bin/node) npm : 6.11.3 OS : macOS Mojave Xcode : Xcode 10.3 Build version 10G8

ICordova-res kunye neNative-run zinokufaka ngesandla emva kokufaka okanye ukuhlaziya iCordova.

sudo npm install -g cordova-res npm install -g native-run

Ngoku, sebenzisa i-Ionic Angular Facebook yokungena kwi-App kwisixhobo. Ukubalekela kwizixhobo ze-Android chwetheza lo myalelo, kodwa qiniseka ukujonga isixhobo esixhunyiwe se-Android usebenzisa adb devices.

ionic cordova run android

Ukubalekela kwisixhobo se-iOS chwetheza lo myalelo ukuze wakhe kuqala.

ionic cordova build ios

Yenzelwe ngoku, iIonic 4 Tutorial: Facebook Login Example. Ungabamba iikhowudi zomthombo opheleleyo kuthi IGitHub .

#ionic #angular #facebook