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:
- Cwangcisa iApple ye-Facebook
- Yenza iNkqubo eNtsha yeIonic Angular
- Faka i-Ionic yeNative Facebook Qhagamshela iplagi
- Iphumeza ukungena ngemvume kwi-Facebook kunye nokuPhuma
- Qalisa kwaye Uvavanye i-Ionic 4 ye-Facebook yokuNgena kwi-App
Ezi zixhobo zilandelayo, izikhokelo, iilayibrari, kunye neemodyuli ziyafuneka kwesi sifundo:
- Iifayile zeNode (Uhlobo olucetyiswayo)
- Ionic 4
- Angular 8
- Apache Cordova
- Iplagi yokuNxibelelana noFacebook
- Isazisi se-Facebook App
- Indawo yokukhwelela okanye Umgca wokuyalela uNode
- 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.
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.
Emva kokujonga incoko yencoko ye-captcha kwaye ucofe ukungenisa iqhosha, ngoku, ungabona i-App ID kunye neMfihlo, uyibhalele incwadana yakho.
Skrolela ezantsi kwaye uya kubona Yongeza imveliso emva koko ucofe i-Facebook yokuLungiselela ukuseta iqhosha.
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.
Khetha i-SDK: Cocoapods njengendawo yophuhliso ngaphambi kokusebenzisa i-Facebook yokuNgena kwi-iOS emva koko ucofe iqhosha elilandelayo.
Ngenisa i-ID yesixokelelwano se-iOS eya kubonelela nge config.xml kamva (sisebenzisa com.djamware.myionicfacebook) emva koko ucofe ukugcina kwaye ucofe iqhosha lokuqhubeka.
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.
Cofa kwiqhosha elilandelayo amaxesha ama-2 emva koko ugcwalise igama leprojekthi ye-Android (sisebenzisa com.djamware.myionicfacebook) kunye negama elingagqibekanga loMsebenzi we-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.
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.
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.
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