Unul dintre punctele forte ale lui Ionic este în serviciile pe care le oferă pe partea de sus a cadrului. Acestea includ serviciile pentru autentificarea utilizatorilor aplicației, notificările push și analizele. În această serie, vom învăța despre aceste trei servicii creând o aplicație care utilizează fiecare dintre ele.
Primul serviciu la care ne uităm este serviciul Auth. Acest lucru ne permite să implementăm autentificarea într-o aplicație Ionic fără a scrie o singură linie de cod back-end. Sau dacă aveți deja un sistem de autentificare existent, puteți folosi și el. Serviciul acceptă următoarele metode de autentificare:
E-mail / parolă: utilizatorul este înregistrat furnizând e-mail-ul și parola.
Conectare socială: utilizatorul este înregistrat utilizând profilul social media. Aceasta include în prezent Facebook, Google, Twitter, Instagram, LinkedIn și GitHub.
Personalizat: utilizatorul este înregistrat utilizând un sistem de autentificare existent.
În acest tutorial ne vom referi doar la e-mail / parolă și login social cu Facebook.
Ce veți crea
Înainte de a continua, este întotdeauna bine să aveți o idee generală despre ceea ce vom crea și cum va fi fluxul aplicației. Aplicația va avea următoarele pagini:
pagina principala
pagina de înscriere
pagina de utilizator
Pagina principala
Pagina de pornire este pagina implicită a aplicației, unde utilizatorul se poate conecta prin e-mail / parola sau prin contul de pe Facebook.
Când utilizatorul face clic pe Logheaza-te cu Facebook , este afișat un ecran similar cu cele de mai jos, iar după ce utilizatorul este de acord, utilizatorul este conectat la aplicație:
Pagina de înscriere
Pagina de înscriere este locul în care utilizatorul se poate înregistra prin introducerea e-mailului și a parolei. Intrarea în Facebook nu necesită nicio înscriere, deoarece informațiile despre utilizator sunt furnizate de API-ul Facebook.
Pagina utilizatorului
Pagina finală este pagina de utilizator, care poate fi văzută numai atunci când utilizatorul sa logat deja.
Bootstrap un nou aplicație Ionic
Acum, că știți ce facem, să începem să construim aplicația noastră!
În primul rând, vom bootstrap o nouă aplicație Ionic utilizând șablonul inițial gol:
ionic începe authApp gol
Navigați în interiorul noului creat authApp pliant. Aceasta servește drept directorul rădăcină al proiectului.
Pentru a obține rapid configurarea cu interfața de utilizare a aplicației, am creat un replică GitHub unde puteți găsi fișierele sursă de pornire. Descărcați repo, navigați în interiorul incepator folder și copiați src treceți până la rădăcina proiectului ionic pe care tocmai l-ați creat. Acesta conține fișierele șablon pentru fiecare dintre paginile aplicației. Vă voi explica în detaliu ce se întâmplă în fiecare dintre aceste fișiere într-o secțiune ulterioară.
Serviți proiectul astfel încât să puteți vedea imediat modificările în timp ce dezvoltați aplicația:
ionice
Creați un cont Ionic
Deoarece vom folosi back-end-ul lui Ionic pentru a gestiona autentificarea utilizatorilor, avem nevoie de o modalitate de a gestiona utilizatorii aplicației. Aici intră contul ionic. Vă permite să gestionați aplicațiile dvs. ionice și serviciile pe care le folosesc. Aceasta include gestionarea serviciului Auth. Puteți crea un cont Ionic accesând pagina de înscriere Ionic.io.
Conectați aplicația la servicii ionice
Apoi, navigați la directorul rădăcină al proiectului și instalați pluginul Ionic Cloud:
npm install @ ionic / cloud-unghiular
Acest plugin va permite aplicației să interacționeze cu ușurință cu serviciile ionice.
După aceasta, puteți inițializa aplicația pentru a utiliza serviciile ionice:
ionic io init
Aceasta vă solicită să vă conectați cu contul dvs. Ionic. După ce ați introdus detaliile corecte de conectare, instrumentul de linie de comandă va crea automat o nouă înregistrare de aplicație în contul dvs. Ionic. Această înregistrare este conectată la aplicația pe care o dezvoltați.
Puteți verifica dacă acest pas a funcționat deschizând .io-config.json și fișierul ionic.config.json fișier la baza proiectului dvs. APP_ID ar trebui să fie același cu ID-ul aplicației atribuit aplicației nou create în tabloul dvs. de bord Ionic.
Pagina principala
Navigați în interiorul src / pagini / home pentru a vedea fișierele pentru pagina de pornire. Deschide home.html fișier și veți vedea următoarele:
Ionic2 Auth E-mailParola
Această pagină va solicita utilizatorului e-mailul și parola sau să se conecteze cu contul lor Facebook. Dacă utilizatorul nu are încă un cont, aceștia pot da clic pe butonul de înscriere pentru a accesa pagina de înscriere. Vom reveni la specificul acestei pagini mai târziu pe măsură ce trecem la partea de conectare. Vă arăt doar pentru a vedea codul pentru navigarea la pagina de înscriere.
Apoi, deschideți home.ts fişier. Deocamdată, acesta conține doar un cod de boilerplate pentru navigarea la pagina de înscriere și de utilizator. Mai târziu, vom reveni la această pagină pentru a adăuga codul pentru autentificarea utilizatorului.
Înregistrează-te
Structura paginii de înscriere se găsește în src /pagini / înscriere pagini / înscriere pagină.html. Aruncați o privire la acest fișier și veți găsi un simplu formular cu un câmp de e-mail și un câmp de parolă.
Apoi, să aruncăm o privire la înscriere page.ts fişier.
Hai să ne descurcăm. Mai întâi, importă controlorii pentru crearea de alerte și încărcătoare:
import AlertController, LoadingController de la "ionic-unghiular";
Apoi, importă clasele necesare de la Cloud Client:
import Auth, UserDetails, IDetailedError de la '@ ionic / cloud-angular';
Auth serviciu care se ocupă de înregistrarea utilizatorilor, de conectare și de deconectare.
UserDetails este tipul utilizat pentru definirea detaliilor utilizatorilor la înregistrarea sau conectarea la un utilizator.
IDetailedError este folosit pentru a determina motivul exact pentru eroarea care a avut loc. Acest lucru ne permite să furnizăm utilizatorilor mesaje de eroare prietenoase ori de câte ori apare o eroare.
Declarați variabilele care trebuie utilizate pentru stocarea mesajului de introducere de e-mail și a parolei de către utilizator. Aceasta ar trebui să fie identică cu cea pe care ați dat-o valoare și ngModel atribute în fișierul de aspect.
clasa de export SignupPage email: string; parola: șir; constructor (auth public: Auth, public alertCtrl: AlertController, public loadingCtrl: LoadingController) registru () ...
Înainte este Inregistreaza-te metoda, care este numit atunci când Inregistreaza-te butonul este apăsat. Să codificăm împreună această metodă.
Mai intai incalzeste un incarcatoare si apoi o inchide automat dupa cinci secunde (astfel incat in cazul in care ceva nu merge bine, utilizatorul nu ramane cu o animatie de incarcare care se roteste pentru totdeauna).
În cele din urmă, vom apela Inscrie-te() metoda de la Auth și furnizează detaliile utilizatorului ca argument. Aceasta întoarce o promisiune, cu care ne descurcăm atunci(). Odată ce un răspuns de succes este primit de la back-end, prima funcție la care treci atunci() va fi executat; în caz contrar, va fi executată a doua funcție.
Dacă un răspuns de eroare este primit de la Autorul Ionic, vom trece printr-o serie de erori și vom construi un mesaj de eroare în funcție de tipul de eroare primit. Aici puteți găsi lista erorilor de înscriere Auth care pot apărea.
loader.dismiss (); var error_message = "; pentru (let e de err.details) if (e === 'conflict_email') error_message + =" E-mailul există deja. "; altceva error_message + =" Autentificări nevalide. "; alert = this.alertCtrl.create (title: error_message, subTitle: 'Reîncercați.', butoane: ['OK']);
După ce ați terminat, puteți încerca aplicația în browser. Intrarea prin e-mail / parolă nu are niciun plugin sau dependențe hardware, așa că ar trebui să îl puteți testa în browser. Apoi puteți găsi noul utilizator înregistrat în Auth fila tabloului de bord al aplicației Ionic.
Configurarea aplicației Facebook
Următorul pas este să configurați aplicația astfel încât să se poată ocupa de autentificările native Facebook. În primul rând, trebuie să creați o aplicație Facebook. Puteți face acest lucru conectându-vă la contul dvs. Facebook și apoi mergând la site-ul pentru dezvoltatori Facebook. De acolo, creați o aplicație nouă:
Odată ce aplicația este creată, faceți clic pe Adăugați produsul link pe bara laterală și selectați Logare Facebook. Aceasta va deschide Pornire rapidă ecran în mod implicit. Nu avem nevoie de asta, deci mergeți mai departe și faceți clic pe Setări link-ul de sub login-ul Facebook. Aceasta ar trebui să vă arate următorul ecran:
Aici trebuie să activați Embedded Browser OAuth Login setarea și adăugarea https://api.ionic.io/auth/integrations/facebook ca valoare pentru Valabil URI-uri de redirecționare OAuth. Salvați modificările după ce ați terminat.
Apoi, trebuie să conectați Autorul Ionic la aplicația Facebook pe care tocmai ați creat-o. Accesați tabloul de bord Ionic și selectați aplicația creată mai devreme (consultați secțiunea "Conectați aplicația la servicii Ionic"). Faceți clic pe Setări fila și apoi Autorul utilizatorului. Sub Furnizori sociali, faceți clic pe Înființat butonul de lângă Facebook:
Introduceți ID-ul aplicației și Secret Secret al aplicației Facebook pe care ați creat-o mai devreme și ați lovit-o Permite.
Instalați pluginul Facebook
Apoi, instalați pluginul Facebook pentru Cordova. Spre deosebire de cele mai multe pluginuri, acest lucru necesită furnizarea unor informații: ID-ul aplicației Facebook și numele aplicației. Puteți să copiați aceste informații din tabloul de bord al aplicației Facebook.
Odată ce sa terminat, ultimul lucru pe care trebuie să-l faceți este să vă întoarceți la proiectul dvs., deschideți-l src / app / app.module.ts fișier și adăugați CloudSettings și CloudModule servicii de la nor-unghiular pachet:
import CloudSettings, CloudModule de la '@ ionic / cloud-angular';
Declarați cloudSettings obiect. Aceasta conține APP_ID din aplicația dvs. Ionic și toate permisiunile (domeniul de aplicare) suplimentare pe care doriți să le solicitați de la utilizatorii aplicației dvs. În mod implicit, acest lucru solicită deja e-mail și public_profile.
Dacă doriți să solicitați mai multe date de la utilizatorii dvs., puteți găsi o listă de permisiuni pe această pagină: Permisiuni de conectare Facebook.
Apoi, lăsați-l pe Ionic să știe despre cloudSettings tocmai ați adăugat:
Mai târziu, când adăugați alți furnizori sociali în aplicația dvs., se urmează un proces similar.
Conectarea utilizatorului în
Acum este momentul să vă întoarceți la pagina de pornire și să faceți niște schimbări. Șablonul HTML are deja tot ceea ce avem nevoie, deci trebuie doar să actualizăm scriptul. Mergeți și deschideți src / pagini / home / home.ts fişier. În partea de sus a fișierului, importați următoarele în plus față de ceea ce ați avut deja anterior:
import NavController, AlertController, LoadingController de la "ionic-unghiular"; import Auth, FacebookAuth, User, IDetailedError de la '@ ionic / cloud-angular'; import UserPage din "... / pagina de utilizator / pagina de utilizator";
În interiorul constructorului, determinați dacă un utilizator este în prezent conectat sau nu. Dacă un utilizator este deja conectat, navigăm automat la pagina de utilizator.
clasa de export HomePage // declara variabilele pentru stocarea utilizatorului și emailul introdus de e-mailul utilizatorului: string; parola: șir; constructor (public navCtrl: NavController, public public: Auth, public facebookAuth: FacebookAuth, utilizator public: User, public alertCtrl: AlertController, public loadingCtrl: LoadingController) if.auth.isAuthenticated () this.navCtrl.push userpage); ...
Apoi, atunci când Logare butonul este apăsat, începem prin afișarea unei animații de încărcare.
După cum ați văzut în src / pagini / home / home.html fișierul anterior, un șir care reprezintă butonul de conectare care a fost apăsat (fie butonul de conectare a e-mail / parolă, fie butonul de conectare Facebook) este transmis la Logare() funcţie. Acest lucru ne permite să determinăm ce cod de conectare să execute. Dacă tipul este 'Fb', înseamnă că butonul de conectare Facebook a fost apăsat, așa că sunăm Logare() metodă a FacebookAuth serviciu.
dacă type == 'fb') this.facebookAuth.login (), atunci ((res) => loader.dismiss (); this.navCtrl.push (UserPage); (err) / hide loader și navigați la pagina de utilizator loader.dismiss (); let alert = this.alertCtrl.create (title: "Eroare în timp ce vă conectați la Facebook", subtitlu: "Vă rugăm să încercați din nou.", butoane: 'OK']); alert.present (););
Altfel, a fost apăsat butonul de conectare pentru e-mail / parolă și ar trebui să conectăm utilizatorul cu detaliile introduse în formularul de autentificare.
Aruncați o privire la versiunea finală a fișierului home.ts pentru a vedea cum ar trebui să arate toate.
Pagina utilizatorului
Ultima pagină este pagina Utilizator.
Aspectul, în src / pagini / user-page / user-pagină.html, afișează fotografia de profil a utilizatorului și numele de utilizator al acestuia. Dacă utilizatorul s-a înscris cu e-mail / parola, numele de utilizator va fi adresa de e-mail a utilizatorului și fotografia de profil va fi fotografia de profil prestabilită atribuită de Ionic. Pe de altă parte, dacă utilizatorul sa înscris cu Facebook, fotografia de profil va fi fotografia de profil de pe Facebook și numele de utilizator al acestora va fi numele lor complet.
Apoi, uita-te la user-page.ts fişier.
Sub ionic unghiular pachet, importăm Platformă serviciul în afară de NavController. Acesta este folosit pentru a obține informații despre dispozitivul curent. De asemenea, are metode de ascultare a evenimentelor hardware, cum ar fi atunci când butonul de revenire hardware din Android este apăsat.
import NavController, Platform de la "ionic-unghiular";
Și pentru nor-unghiular pachet, avem nevoie de Auth, FacebookAuth, și Utilizator Servicii:
import Auth, FacebookAuth, User de la '@ ionic / cloud-angular';
În interiorul constructorului de clasă, determinați dacă utilizatorul este conectat cu utilizatorul lor de e-mail / parolă sau contul său Facebook. Completați nume de utilizator și fotografie bazat pe asta. Apoi, sub aceasta, atribuiți o funcție care trebuie executată atunci când este apăsat butonul de revenire hardware. registerBackButtonAction () acceptă două argumente: funcția care trebuie executată și prioritatea. Dacă în aplicație există mai multe dintre acestea, va fi executată numai cea mai mare prioritate. Dar din moment ce avem nevoie doar de acest lucru în acest ecran, tocmai l-am pus 1.
clasa de export UserPage nume utilizator public; fotografie publică; constructor (public navCtrl: NavController, public public: Auth, public facebookAuth: FacebookAuth, utilizator public: utilizator, platformă publică: platformă) if (this.user.details.hasOwnProperty ('email')) this.username = this. user.details.email; this.photo = this.user.details.image; altfel this.username = this.user.social.facebook.data.full_name; this.photo = this.user.social.facebook.data.profile_picture; this.platform.registerBackButtonAction (() => this.logoutUser.call (aceasta);, 1);
logoutUser () metoda conține logica pentru logarea utilizatorului. Primul lucru pe care îl face este să determine dacă un utilizator este autentificat. Dacă un utilizator este conectat, vom determina dacă utilizatorul este un utilizator Facebook sau un utilizator de e-mail / parolă.
Acest lucru se poate face verificând e-mail proprietate în cadrul user.details obiect. Dacă această proprietate există, înseamnă că utilizatorul este un utilizator de e-mail / parolă. Deci, dacă nu este altceva, presupunem că este un utilizator pe Facebook. Apelarea logout () metoda în Auth și FacebookAuth elimină utilizatorul curent al aplicației.
logoutUser () if (this.auth.isAuthenticated ()) dacă (this.user.details.hasOwnProperty ("email")) this.auth.logout (); altceva this.facebookAuth.logout (); this.navCtrl.pop (); // reveni la pagina principală
Rularea aplicației pe un dispozitiv
Acum putem încerca aplicația noastră! Mai întâi, configurați platforma și construiți aplicația de depanare:
platformă ionică adăugați și android Android android construi
Pentru ca login-ul Facebook să funcționeze, trebuie să furnizați hash-ul fișierului apk aplicației Facebook. Puteți determina hash-ul executând următoarea comandă:
Apoi, accesați pagina de setări de bază a aplicației Facebook și faceți clic pe Adăugați platformă butonul din partea de jos a ecranului. Selectați Android ca platformă. Veți vedea apoi următorul formular:
Completați Numele pachetului Google Play și Key Hashes. Puteți pune orice doriți ca valoare pentru Numele pachetului Google Play atâta timp cât are același format ca și aplicațiile din Google Play (de ex. com.ionicframework.authapp316678). Pentru Key Hashes, aveți nevoie pentru a pune în hash revenit de la mai devreme. Nu uitați să loviți Salvează modificările cand esti gata.
După ce sa terminat, puteți copia acum Android-debug.apk de la Platforme / Android / construi / ieșiri / apk folder pe dispozitiv, instalați-l și apoi executați.
Concluziile și pașii următori
Asta e! În acest tutorial, ați învățat cum să utilizați serviciul Ionic Auth pentru a implementa cu ușurință autentificarea în aplicația dvs. Ionic. Am folosit autentificarea prin e-mail / parolă și datele de conectare Facebook în acest tutorial, dar există și alte opțiuni și ar trebui să fie ușor să le adăugați în aplicația dvs..
Iată câțiva pași pe care i-ați putea încerca pe cont propriu, care ar duce aplicația dvs. la nivelul următor.
Stocați informații suplimentare despre utilizator-în afară de e-mail și parola, puteți stoca, de asemenea, informații suplimentare pentru utilizatorii dvs..
Utilizați alți furnizori de login social-după cum sa menționat la începutul articolului, puteți implementa și login social cu următoarele servicii: Google, Twitter, Instagram, LinkedIn și GitHub.
Adăugați o funcție de resetare a parolei-resetarea parolelor poate fi implementată utilizând formularele de resetare a parolei Ionic sau puteți crea propriile dvs..
Autentificare personalizată-dacă aveți deja un back-end existent care gestionează autentificarea utilizatorului pentru serviciul dvs., este posibil să aveți nevoie să implementați autentificarea personalizată.
Asta este tot pentru acum. Rămâi acordat pentru mai multe articole despre utilizarea serviciilor ionice! Între timp, verificați câteva dintre celelalte postări ale noastre despre dezvoltarea aplicațiilor mobile pe mai multe platforme.
Share
Accentsconagua
