de Ryan Gordon
Cum să dezvolți un flux excelent de conectare pe Facebook cu Firebase și Ionic
Este util să utilizați conectările sociale cu Ionic pentru utilizatorii dvs. care ar prefera să nu creeze și să-și amintească un alt nume de utilizator: combinație de parole. În schimb, puteți permite utilizatorilor să se conecteze cu conturi pe care le dețin deja. Nu trebuie să stocați parole hash pentru a le compara, nu trebuie să vă ocupați de trimiterea e-mailurilor de înscriere și nu trebuie să resetați parolele. Furnizorul ales de utilizator se va ocupa de toate acestea pentru dvs.
Doriți să verificați codul în loc să urmați postarea? Vă rugăm să dați repo o stea din tine o găsește de ajutor!
O parte din această postare va fi foarte asemănătoare cu celelalte tutoriale de pe pagina mea. Dacă aveți instalat ionic și Node și aveți o configurare a proiectului, puteți accesa codul aici.
Pentru a urma împreună cu acest tutorial, veți avea nevoie de Node.js și Ionic instalate.
Pentru a instala ionic și cordova, care pentru moment sunt necesare pentru pluginuri, rulați următoarele în terminal după instalarea Nodului:
npm install -g ionic cordovaDacă primiți EACCES: permisiunea refuzată, poate fi necesar să executați comanda cu sudo.
Creați o aplicație cu pornire ionică Codul pentru conectarea Facebook va fi plasat într-o clasă de furnizor care va fi apelată de oricare pagină trebuie să utilizeze metoda de conectare respectivă. Pentru ca Firebase să funcționeze cu platforma Facebook, va trebui să parcurgem trei pași: – Configurați o nouă aplicație în portalul dezvoltatorului Facebook – Configurați conectarea Facebook pe Firebase – Implementați fluxul de conectare Portalul pentru dezvoltatori Facebook este o interfață pentru toate instrumentele și API-urile disponibile pentru dezvoltatori. Este ceea ce vom folosi pentru a configura API-ul de conectare de pe partea Facebook. Alegeți un nume și un e-mail de contact pentru aplicația dvs. E-mailul de contact poate fi afișat utilizatorilor, deci asigurați-vă că este profesional. După aceasta, aplicația va fi creată pe facebook și putem adăuga pluginul la aplicația noastră! Vor fi necesare două pluginuri. Plugin-ul cordova conceput pentru a funcționa nativ cu Facebook și un wrapper pentru acesta. Va trebui să înlocuiți valorile sau Celălalt plugin ne va permite să lucrăm cu primul, prin TypeScript. Acum avem pluginul instalat și conectat la consola Facebook. Există doi pași finali pentru aceasta: selectarea platformelor pe care le vom folosi pe portalul FB Developer Portal și importarea în app.module. Aplicația noastră este creată, totuși trebuie să specificăm ce aplicații pot utiliza API-ul nostru de conectare. Acest lucru se face prin adăugarea de platforme cu un ID de pachet pe care îl specificăm. Pentru a începe, faceți clic pe Adăugare platformă, selectați Android sau iOS. Ambele platforme vor trebui să știe ID-ul generat al aplicației dvs. atunci când este în desfășurare. Valoarea ID identificată în partea de sus a config.xml va fi utilizată atât pentru numele pachetului magazinului Google Play, cât și pentru ID-ul Bundle. Nu uitați să importați și pluginul în Configurarea conectării în Firebase va fi cea mai ușoară sarcină. Odată ce aplicația este creată pe portalul dezvoltatorului FB, va avea un APPID și un APPSECRET. Aceste două valori sunt necesare pentru a conecta Firebase la aplicația noastră Facebook. Odată introduse aceste valori, faceți clic pe activate și gata! După toate configurările, am ajuns la partea distractivă: codificarea lucrului și testarea acestuia! Cu condiția să fi urmărit, cele două pluginuri Facebook Ionic sunt acum instalate, iar aplicația este configurată în Firebase și FB Dev Portal. Înainte de a putea folosi pluginul din codul nostru, trebuie să-l importăm și să-l aducem în domeniul de aplicare împreună cu constructorul. După aceasta, suntem liberi să folosim pluginul oriunde în acest furnizor. Codul pentru autentificare în sine va părea foarte familiar dacă ați văzut celelalte postări. Ceea ce facem aici este să folosim pluginul nativ Facebook pentru a face un flux de conectare. Dacă are succes, luați răspunsul de autentificare furnizat și conectați-vă la Firebase. Această funcție poate fi apelată oriunde în aplicație importând furnizorul de autentificare. Modul intenționat de a utiliza acest lucru va fi că unele pagini (cum ar fi Acum, când se apelează această funcție, va apărea o interfață de utilizare nativă pe Facebook care va solicita conectarea. Sau dacă utilizatorul este deja conectat, va cere doar permisiunea OAuth – și asta este! Primim un jeton înapoi pe care îl putem folosi pentru a crea o acreditare, iar această acreditare este apoi utilizată pentru a vă conecta la Firebase. În acest articol, am configurat API-ul de conectare Facebook și am lucrat printr-o soluție pe mai multe platforme pentru conectarea utilizatorilor la Firebase cu Facebook. La fel ca și conectarea la Google, a fost necesară o anumită confirmare (deși nu la fel de mult). Acum, avantajul este că utilizatorii noștri se pot conecta la orice aplicații web pe care le construim cu conturile lor existente de Facebook. Dacă ați urmărit și primul articol, atunci aplicația are acum conectare Google și Facebook! Tot codul pentru acest tutorial (și toate celelalte tutoriale ale mele) poate fi găsit aici. Îmi propun să implementez cât mai multe funcții Firebase, și DA, caut colaboratori! Dacă doriți acces la cod, aici este din nou un link către repo: Ryan-Gordon / Ionic-Firestarter Doriți câteva postări similare pe Ionic? Iată câteva alte postări pe care le-am făcut: Cum să vă temați dinamic aplicația Ionic și să vă bucurați utilizatorii Metode alternative de conectare pentru Firebase cu Ionic #Cum #să #dezvolți #flux #excelent #conectare #Facebook #Firebase #și #Ionicionic g provider authConfigurați aplicația cu Firebase și obțineți acreditări
Portalul dezvoltatorului Facebook
$ ionic plugin add cordova-plugin-facebook4 --variable APP_ID="123456789" --variable APP_NAME="myApplication"APP_ID și APP_NAME pentru acreditările dvs. reale. Îi puteți găsi pe ambii în tabloul de bord al dezvoltatorului dvs. Facebook.npm install --save @ionic-native/facebook Selectarea platformelor în portalul FB
app.module.ts și specificați-l ca furnizor pentru proiect.Configurați conectarea Facebook pe Firebase
Implementați fluxul de conectare
import { Facebook } from '@ionic-native/facebook';
@Injectable()
export class AuthProvider {
constructor(private googlePlus: GooglePlus, private facebook:Facebook) {
}home.ts) va avea AuthProvider în domeniul de aplicare. Când utilizatorul face clic pe un buton de autentificare FB, vom delega autentificarea către AuthProvider.facebookLogin(): Promise<any> {
return this.facebook.login(['email'])
.then( response => {
const facebookCredential = firebase.auth.FacebookAuthProvider
.credential(response.authResponse.accessToken);
firebase.auth().signInWithCredential(facebookCredential)
.then( success => {
console.log("Firebase success: " + JSON.stringify(success));
});
}).catch((error) => { console.log(error) });
}Concluzie
Ionic-Firestarter – Ionic Firestarter este un proiect open source care prezintă diferite caracteristici Firebase implementate în …
github.com
Proiectarea unei scheme de culori elegante pentru aplicația dvs. mobilă poate necesita mult timp. De ce nu lăsați utilizatorul să-și aleagă propriul …
În celelalte postări ale mele de conectare Firebase, accentul a fost pus pe furnizorii de socializare. Principalul punct al acestui accent este să …
Cum să dezvolți un flux excelent de conectare pe Facebook cu Firebase și Ionic
