Uno dei punti di forza di Ionic è nei servizi che offre in cima alla struttura. Questo include servizi per l'autenticazione degli utenti della tua app, notifiche push e analisi. In questa serie, impareremo a conoscere questi tre servizi creando un'app che utilizza ciascuno di essi.
Il primo servizio che andremo a vedere è il servizio Auth. Questo ci consente di implementare l'autenticazione in un'app Ionic senza scrivere una singola riga di codice back-end. O se hai già un sistema di autenticazione esistente, puoi anche usarlo. Il servizio supporta i seguenti metodi di autenticazione:
E-mail / password: l'utente è registrato fornendo la propria email e password.
Accesso sociale: l'utente è registrato utilizzando il proprio profilo di social media. Questo attualmente include Facebook, Google, Twitter, Instagram, LinkedIn e GitHub.
costume: l'utente è registrato utilizzando un sistema di autenticazione esistente.
In questo tutorial, riguarderemo solo l'email / password e l'accesso social con Facebook.
Cosa starai creando
Prima di procedere, è sempre bene avere un'idea generale di ciò che stiamo per creare e come sarà il flusso dell'app. L'app avrà le seguenti pagine:
home page
pagina di registrazione
pagina utente
Home Page
La home page è la pagina predefinita dell'app in cui l'utente può accedere con la propria e-mail / password o il proprio account Facebook.
Quando l'utente fa clic su Fai il login con facebook pulsante, viene visualizzata una schermata simile alla seguente e, una volta che l'utente è d'accordo, l'utente ha effettuato il login all'app:
Pagina di registrazione
La pagina di registrazione è dove l'utente può registrarsi inserendo la propria email e password. L'accesso a Facebook non richiede alcuna registrazione perché le informazioni dell'utente sono fornite dall'API di Facebook.
Pagina utente
La pagina finale è la pagina utente, che può essere vista solo quando l'utente ha già effettuato l'accesso.
Avvia una nuova app Ionica
Ora che sai cosa stiamo facendo, iniziamo a creare la nostra app!
Innanzitutto, eseguiamo il bootstrap di una nuova app Ionic utilizzando il modello di avvio vuoto:
ionic start authApp blank
Naviga all'interno del nuovo creato authApp cartella. Questo serve come la directory principale del progetto.
Per configurare rapidamente l'interfaccia utente dell'app, ho creato un repository GitHub in cui è possibile trovare i file di origine dello starter. Scarica il repository, naviga all'interno del antipasto cartella e copia il file src cartella fino alla radice del progetto Ionic appena creato. Questo contiene i file modello per ciascuna delle pagine dell'app. Ti spiegherò più in dettaglio che cosa fanno ognuno di questi file in una sezione successiva.
Offri il progetto in modo da poter vedere immediatamente le tue modifiche mentre sviluppi l'app:
servire ionico
Crea un account ionico
Poiché utilizzeremo il back-end di Ionic per gestire l'autenticazione dell'utente, abbiamo bisogno di un modo per gestire gli utenti dell'app. È qui che entra in gioco l'account Ionic. Ti consente di gestire le tue app Ionic e i servizi che utilizzano. Ciò include la gestione del servizio di autenticazione. Puoi creare un account Ionic visitando la pagina di registrazione di Ionic.io.
Collega l'app a Ionic Services
Successivamente, vai alla directory principale del progetto e installa il plug-in Ionic Cloud:
npm install @ ionic / cloud-angular --save
Questo plug-in consentirà all'app di interagire facilmente con i servizi Ionic.
Successivamente, puoi inizializzare l'app per utilizzare i servizi Ionic:
ionico io init
Questo ti chiede di accedere con il tuo account Ionic. Dopo aver inserito i dettagli di accesso corretti, lo strumento da riga di comando creerà automaticamente un nuovo record di app sotto il tuo account Ionic. Questo record è collegato all'app che stai sviluppando.
È possibile verificare che questo passaggio abbia funzionato aprendo il file .io-config.json file e il ionic.config.json file alla radice del tuo progetto. Il APP_ID dovrebbe essere uguale all'ID app assegnato all'app appena creata nella dashboard Ionic.
Home Page
Navigare all'interno del src / pagine / home directory per vedere i file per la home page. Apri il home.html file e vedrai quanto segue:
Ionic2 Auth E-mailParola d'ordine
Questa pagina chiederà all'utente l'e-mail e la password o di accedere con il proprio account Facebook. Se l'utente non ha ancora un account, può fare clic sul pulsante di registrazione per accedere alla pagina di registrazione. Torneremo alle specifiche di questa pagina in seguito mentre passiamo alla parte di accesso. Te lo sto solo mostrando in modo da poter vedere il codice per navigare nella pagina di registrazione.
Quindi, apri il home.ts file. Per ora, contiene solo un codice per l'accesso alla pagina di registrazione e utente. In seguito, torneremo su questa pagina per aggiungere il codice per la registrazione dell'utente.
Registrazione dell'utente
Il layout della pagina di registrazione si trova in src /pagine / iscrizione-page / iscrizione-page.html. Dai un'occhiata a questo file e troverai un semplice modulo con un campo email e un campo password.
Quindi, diamo un'occhiata al iscrizione-page.ts file.
Rompiamo questo. Innanzitutto, importa i controller per la creazione di avvisi e caricatori:
import AlertController, LoadingController da 'ionic-angular';
Quindi, importa le classi necessarie dal client Cloud:
import Auth, UserDetails, IDetailedError da '@ ionic / cloud-angular';
Il auth servizio che si occupa della registrazione dell'utente, dell'accesso e della disconnessione.
UserDetails è il tipo utilizzato per definire i dettagli dell'utente quando si registra o si accede a un utente.
IDetailedError viene utilizzato per determinare il motivo esatto dell'errore che si è verificato. Questo ci consente di fornire all'utente messaggi di errore intuitivi ogni volta che si verifica un errore.
Dichiarare le variabili da utilizzare per memorizzare l'e-mail e la password immesse dall'utente. Questo dovrebbe essere uguale al nome che hai dato al valore e ngModel attributi nel file di layout.
export class SignupPage email: string; password: string; costruttore (auth pubblica: Auth, public alertCtrl: AlertController, public loadingCtrl: LoadingController) register () ...
Il prossimo è il Registrare metodo, che viene chiamato quando il Registrare pulsante viene premuto. Calcoliamo insieme questo metodo.
Innanzitutto fa partire un caricatore e lo fa automaticamente chiudere dopo cinque secondi (in modo che, nel caso qualcosa vada storto, all'utente non rimanga un'animazione di caricamento che gira per sempre).
register () let loader = this.loadingCtrl.create (content: "Firma su ..."); loader.present (); setTimeout (() => loader.dismiss ();, 5000);
Quindi, creiamo un oggetto per memorizzare i dettagli dell'utente:
let details: UserDetails = 'email': this.email, 'password': this.password;
Infine, chiameremo il Iscriviti() metodo dal auth servizio e fornire i dettagli dell'utente come argomento. Ciò restituisce una promessa, che scartiamo con poi(). Una volta ricevuta una risposta positiva dal back-end, la prima funzione a cui si passa poi() verrà eseguito; altrimenti, la seconda funzione verrà eseguita.
this.auth.signup (dettagli) .then ((res) => loader.dismiss (); // nasconde il loader lascia alert = this.alertCtrl.create (title: "Sei registrato!", sottotitolo: 'È ora possibile accedere.', Pulsanti: ['OK']); alert.present (); // mostra casella di avviso, (err: IDetailedError) => ...);
Se viene ricevuta una risposta di errore da Ionic Auth, eseguiremo un ciclo attraverso l'array di errori e costruiremo un messaggio di errore in base al tipo di errore ricevuto. Qui puoi trovare l'elenco degli errori di registrazione Auth che possono verificarsi.
loader.dismiss (); var error_message = "; for (lascia e di err.details) if (e === 'conflict_email') error_message + =" Email già esistente. "; else error_message + =" Credenziali non valide. "; let alert = this.alertCtrl.create (title: error_message, subTitle:" Per favore riprova. ", pulsanti: ['OK']); alert.present ();
Una volta fatto, puoi provare l'app nel tuo browser. Il login email / password non ha alcun plugin o dipendenze hardware, quindi dovresti essere in grado di testarlo nel browser. È quindi possibile trovare l'utente appena registrato nel auth scheda della dashboard dell'app Ionic.
Impostazione dell'app Facebook
Il passaggio successivo consiste nel configurare l'app in modo che possa gestire gli accessi nativi a Facebook. Innanzitutto, è necessario creare un'app Facebook. Puoi farlo collegandoti al tuo account Facebook e poi andando al sito degli sviluppatori di Facebook. Da lì, crea una nuova app:
Una volta creata l'app, fai clic su Aggiungi prodotto link nella barra laterale e selezionare Accesso a Facebook. Questo aprirà il Avvio veloce schermo di default. Non ne abbiamo davvero bisogno, quindi vai avanti e clicca su impostazioni link proprio sotto il login di Facebook. Questo dovrebbe mostrarti la seguente schermata:
Qui è necessario abilitare il Login OAuth del browser integrato impostazione e aggiungi https://api.ionic.io/auth/integrations/facebook come valore per il URI di reindirizzamento OAuth validi. Salva le modifiche una volta fatto.
Successivamente, è necessario connettere Ionic Auth all'app Facebook che hai appena creato. Vai alla tua dashboard Ionic e seleziona l'app che è stata creata in precedenza (consulta la sezione "Connetti l'app ai servizi ionici"). Clicca sul impostazioni scheda e poi Autenticazione dell'utente. Sotto il Fornitori sociali, clicca sul Impostare pulsante accanto a Facebook:
Inserisci l'ID app e il segreto dell'app dell'app Facebook che hai creato in precedenza e premi Abilitare.
Installa il plugin di Facebook
Quindi, installa il plug-in di Facebook per Cordova. A differenza della maggior parte dei plugin, questo richiede di fornire un po 'di informazioni: l'ID dell'app Facebook e il nome dell'app. Puoi semplicemente copiare queste informazioni dalla dashboard dell'app Facebook.
cordova plug-in aggiungi cordova-plugin-facebook4 --save - variabile APP_ID = "IL TUO ID APP FACEBOOK" - variabile APP_NAME = "IL TUO NOME APP FACEBOOK"
Configura il servizio di Facebook
Una volta fatto, l'ultima cosa che devi fare è tornare al tuo progetto, aprire il src / app / app.module.ts file e aggiungere il CloudSettings e CloudModule servizi dal cloud-angolare pacchetto:
import CloudSettings, CloudModule da '@ ionic / cloud-angular';
Dichiara il cloudSettings oggetto. Questo contiene il APP_ID della tua app Ionic e di eventuali ulteriori permessi (scope) che vuoi chiedere agli utenti della tua app. Di default, questo richiede già il e-mail e profilo pubblico.
const cloudSettings: CloudSettings = 'core': 'app_id': 'IL TUO ID APP IONIC', 'auth': 'facebook': 'scope': [];
Se vuoi chiedere più dati ai tuoi utenti, puoi trovare un elenco di permessi su questa pagina: Autorizzazioni di accesso di Facebook.
Quindi, lascia che Ionic lo sappia cloudSettings hai appena aggiunto:
Successivamente, quando aggiungi altri provider social alla tua app, viene seguito un processo simile.
Registrazione dell'utente
Ora è il momento di tornare alla pagina iniziale e apportare alcune modifiche. Il modello HTML ha già tutto ciò di cui abbiamo bisogno, quindi è sufficiente aggiornare lo script. Vai avanti e apri il src / pagine / home / home.ts file. Nella parte superiore del file, importa quanto segue in aggiunta a ciò che hai già in precedenza:
import NavController, AlertController, LoadingController da 'ionico-angolare'; import Auth, FacebookAuth, User, IDetailedError da '@ ionic / cloud-angular'; importare UserPage da '... / user-page / user-page';
All'interno del costruttore, determinare se un utente è attualmente connesso o meno. Se un utente ha già effettuato l'accesso, passiamo automaticamente alla pagina utente.
export class HomePage // dichiara le variabili per la memorizzazione dell'utente e dell'e-mail immesse dall'utente: string; password: string; costruttore (public navCtrl: NavController, public auth: Auth, public FacebookAuth: FacebookAuth, utente pubblico: Utente, public alertCtrl: AlertController, public loadingCtrl: LoadingController) if (this.auth.isAuthenticated ()) this.navCtrl.push ( Pagina utente); ...
Successivamente, quando il Accesso viene premuto il tasto, iniziamo visualizzando un'animazione di caricamento.
login (type) let loader = this.loadingCtrl.create (content: "Login in ..."); loader.present (); setTimeout (() => loader.dismiss ();, 5000); ...
Come hai visto nel src / pages / home / home.html file precedente, una stringa che rappresenta il pulsante di accesso che è stato premuto (sia il pulsante di accesso e-mail / password o il pulsante di accesso di Facebook) viene passato al accesso() funzione. Questo ci consente di determinare quale codice di accesso eseguire. Se il tipo è 'Fb', significa che il pulsante di login di Facebook è stato premuto, quindi chiamiamo il accesso() metodo del FacebookAuth servizio.
if (type == 'fb') this.facebookAuth.login (). then ((res) => loader.dismiss (); this.navCtrl.push (UserPage);, (err) => / / nascondi il loader e vai alla pagina utente loader.dismiss (); lascia alert = this.alertCtrl.create (title: "Errore durante l'accesso a Facebook.", sottotitolo: "Per favore riprova.", pulsanti: [ 'OK']); alert.present (););
In caso contrario, è stato premuto il pulsante di accesso e-mail / password e dovremmo registrare l'utente con i dettagli inseriti nel modulo di accesso.
Dai un'occhiata alla versione finale del file home.ts per vedere come dovrebbe apparire.
Pagina utente
L'ultima pagina è la pagina utente.
Il layout, in src / pagine / user-page / user-page.html, visualizza la foto del profilo dell'utente e il suo nome utente. Se l'utente si è registrato con la propria email / password, il nome utente sarà l'indirizzo e-mail dell'utente e la foto del profilo sarà la foto del profilo predefinita assegnata da Ionic. D'altra parte, se l'utente si è iscritto a Facebook, la sua foto del profilo sarà la sua foto del profilo di Facebook e il loro nome utente sarà il loro nome completo.
Quindi, guarda il user-page.ts file.
Sotto il ionici angolare pacchetto, stiamo importando il piattaforma servizio a parte NavController. Questo è usato per ottenere informazioni sul dispositivo corrente. Dispone inoltre di metodi per ascoltare eventi hardware come quando viene premuto il pulsante Indietro hardware in Android.
import NavController, Platform da 'ionic-angular';
E per il cloud-angolare pacchetto, abbiamo bisogno del auth, FacebookAuth, e Utente Servizi:
importare Auth, FacebookAuth, User da '@ ionic / cloud-angular';
All'interno del costruttore della classe, determinare se l'utente ha effettuato l'accesso con il proprio utente di email / password o il proprio account Facebook. Compila il nome utente e foto basato su questo. Quindi, al di sotto di questo, assegnare una funzione da eseguire quando viene premuto il pulsante back hardware. Il registerBackButtonAction () accetta due argomenti: la funzione da eseguire e la priorità. Se ce ne sono più di uno nell'app, verrà eseguita solo la priorità più alta. Ma dal momento che abbiamo solo bisogno di questo in questa schermata, abbiamo appena messo 1.
export class UserPage nome utente pubblico; foto pubblica; costruttore (public navCtrl: NavController, public auth: Auth, public FacebookAuth: FacebookAuth, utente pubblico: User, piattaforma pubblica: Platform) if (this.user.details.hasOwnProperty ('email')) this.username = this. user.details.email; this.photo = this.user.details.image; else this.username = this.user.social.facebook.data.full_name; this.photo = this.user.social.facebook.data.profile_picture; this.platform.registerBackButtonAction (() => this.logoutUser.call (this);, 1);
Il logoutUser () il metodo contiene la logica per la registrazione dell'utente. La prima cosa che fa è determinare se un utente è effettivamente loggato. Se un utente è loggato, determiniamo se l'utente è un utente di Facebook o un utente di email / password.
Questo può essere fatto controllando il e-mail proprietà sotto il user.details oggetto. Se questa proprietà esiste, significa che l'utente è un utente di email / password. Quindi, se è il contrario, supponiamo che sia un utente di Facebook. Chiamando il disconnettersi() metodo in auth e FacebookAuth cancella l'utente corrente dell'app.
logoutUser () if (this.auth.isAuthenticated ()) if (this.user.details.hasOwnProperty ('email')) this.auth.logout (); else this.facebookAuth.logout (); this.navCtrl.pop (); // torna alla pagina principale
Esecuzione dell'applicazione su un dispositivo
Ora possiamo provare la nostra app! Innanzitutto, imposta la piattaforma e crea l'apk di debug:
Affinché l'accesso di Facebook funzioni, è necessario fornire l'hash del file apk all'app Facebook. È possibile determinare l'hash eseguendo il seguente comando:
Successivamente, vai alla pagina delle impostazioni di base dell'app Facebook e fai clic su Aggiungi piattaforma pulsante nella parte inferiore dello schermo. Selezionare androide come la piattaforma. Vedrai quindi il seguente modulo:
Compila il Nome pacchetto Google Play e Key Hash. Puoi mettere tutto ciò che vuoi come valore per il Nome pacchetto Google Play a condizione che segua lo stesso formato delle app in Google Play (ad es. com.ionicframework.authapp316678). Per il Key Hash, è necessario inserire l'hash restituito da prima. Non dimenticare di colpire Salva I Cambiamenti quando hai fatto.
Una volta fatto, è ora possibile copiare il file Android-debug.apk dal piattaforme / android / costruire / uscite / apk cartella sul dispositivo, installarlo e quindi eseguirlo.
Conclusione e prossimi passi
Questo è tutto! In questo tutorial, hai imparato come utilizzare il servizio Ionic Auth per implementare facilmente l'autenticazione nella tua app Ionic. Abbiamo utilizzato l'autenticazione via email / password e l'accesso a Facebook in questo tutorial, ma ci sono altre opzioni, e dovrebbe essere facile aggiungerle anche alla tua app.
Ecco alcuni passaggi successivi che potresti provare da soli per portare la tua app al livello successivo.
Memorizza informazioni utente aggiuntive-Oltre all'email e alla password, puoi anche memorizzare ulteriori informazioni per i tuoi utenti.
Utilizzare altri provider di accesso social-come menzionato all'inizio dell'articolo, puoi anche implementare l'accesso social con i seguenti servizi: Google, Twitter, Instagram, LinkedIn e GitHub.
Aggiungi una funzionalità di reimpostazione della password-le reimpostazioni della password possono essere implementate utilizzando i moduli di reimpostazione della password di Ionic, oppure è possibile crearne di proprie.
Autenticazione personalizzata-se si dispone già di un back-end esistente che gestisce l'autenticazione dell'utente per il proprio servizio, potrebbe essere necessario implementare l'autenticazione personalizzata.
È tutto per ora. Restate sintonizzati per ulteriori articoli sull'utilizzo dei servizi Ionic! E nel frattempo, dai uno sguardo agli altri fantastici post sullo sviluppo di app per dispositivi mobili multipiattaforma.
Share
Accentsconagua
