Eine der Stärken von Ionic liegt in den Services, die es zusätzlich zum Framework bietet. Dazu gehören Dienste zur Authentifizierung von Benutzern Ihrer App, Push-Benachrichtigungen und Analysen. In dieser Serie lernen wir diese drei Dienste kennen, indem wir eine App erstellen, die jeden von ihnen verwendet.
Der erste Dienst, den wir uns ansehen werden, ist der Auth-Dienst. Dies ermöglicht es uns, die Authentifizierung in einer Ionic-App zu implementieren, ohne eine einzige Zeile Back-End-Code zu schreiben. Wenn Sie bereits über ein Authentifizierungssystem verfügen, können Sie auch dieses verwenden. Der Dienst unterstützt die folgenden Authentifizierungsmethoden:
E-Mail Passwort: Der Benutzer wird registriert, indem er seine E-Mail-Adresse und sein Passwort angibt.
Social Login: Der Benutzer ist über sein Social-Media-Profil registriert. Dies umfasst derzeit Facebook, Google, Twitter, Instagram, LinkedIn und GitHub.
Brauch: Benutzer wird registriert, indem ein vorhandenes Authentifizierungssystem verwendet wird.
In diesem Tutorial behandeln wir nur E-Mail / Passwort und soziales Login mit Facebook.
Was Sie erstellen werden
Bevor wir fortfahren, ist es immer gut, eine allgemeine Vorstellung davon zu haben, was wir erstellen werden und wie der Ablauf der App aussehen wird. Die App wird folgende Seiten haben:
Startseite
Anmeldeseite
Benutzerseite
Startseite
Die Startseite ist die Standardseite der App, auf der sich der Benutzer mit seiner E-Mail / Passwort-Adresse oder seinem Facebook-Konto anmelden kann.
Wenn der Benutzer auf die Schaltfläche klickt Mit Facebook einloggen Wenn Sie auf die Schaltfläche klicken, wird ein Bildschirm ähnlich dem folgenden angezeigt, und sobald der Benutzer zustimmt, ist der Benutzer bei der App angemeldet:
Anmeldeseite
Auf der Anmeldeseite kann sich der Benutzer durch Eingabe seiner E-Mail-Adresse und seines Passworts registrieren. Das Facebook-Login erfordert keine Anmeldung, da die Benutzerinformationen von der Facebook-API bereitgestellt werden.
Benutzerseite
Die letzte Seite ist die Benutzerseite, die nur sichtbar ist, wenn sich der Benutzer bereits angemeldet hat.
Bootstrap eine neue Ionic App
Nun, da Sie wissen, was wir machen, können Sie mit dem Erstellen unserer App beginnen!
Zuerst bootstrapieren wir eine neue Ionic-App mit der leeren Starter-Vorlage:
ionic authApp leer
Navigiere innerhalb des neu erstellten authApp Mappe. Dies dient als Stammverzeichnis des Projekts.
Um die Benutzeroberfläche der App schnell einzurichten, habe ich ein GitHub-Repo erstellt, in dem Sie die Starter-Quelldateien finden können. Laden Sie das Repo herunter, navigieren Sie im Anlasser Ordner und kopieren Sie die src Ordner über zum Stammverzeichnis des gerade erstellten Ionic-Projekts. Diese enthält die Vorlagendateien für jede Seite der App. Ich erkläre Ihnen genauer, was jede dieser Dateien in einem späteren Abschnitt macht.
Servieren Sie das Projekt, damit Sie während der Entwicklung der App Ihre Änderungen sofort sehen können:
ionischer Aufschlag
Erstellen Sie ein ionisches Konto
Da wir das Back-End von Ionic für die Benutzerauthentifizierung verwenden, benötigen wir eine Möglichkeit, die Benutzer der App zu verwalten. Hier kommt das Ionic-Konto ins Spiel. Hier können Sie Ihre Ionic-Apps und die von ihnen verwendeten Dienste verwalten. Dies beinhaltet die Verwaltung des Auth-Dienstes. Sie können ein Ionic-Konto erstellen, indem Sie die Ionic.io-Anmeldeseite besuchen.
Verbinden Sie die App mit Ionic Services
Navigieren Sie anschließend zum Stammverzeichnis des Projekts und installieren Sie das Ionic Cloud-Plugin:
npm install @ ionic / cloud-angle --save
Mit diesem Plugin kann die App problemlos mit Ionischen Diensten interagieren.
Danach können Sie die App für die Verwendung von Ionischen Diensten initialisieren:
ionisch io init
Dadurch werden Sie aufgefordert, sich mit Ihrem Ionic-Konto anzumelden. Sobald Sie die korrekten Anmeldedaten eingegeben haben, erstellt das Befehlszeilenprogramm automatisch einen neuen App-Datensatz unter Ihrem Ionic-Konto. Dieser Datensatz ist mit der von Ihnen entwickelten App verbunden.
Sie können überprüfen, ob dieser Schritt funktioniert hat, indem Sie die .io-config.json Datei und die ionic.config.json Datei im Stammverzeichnis Ihres Projekts. Das app_id sollte mit der App-ID identisch sein, die der neu erstellten App in Ihrem Ionic-Dashboard zugewiesen wurde.
Startseite
Navigieren Sie im src / pages / home Verzeichnis, um die Dateien für die Homepage anzuzeigen. Öffne das home.html Datei und Sie sehen Folgendes:
Ionic2 Auth EmailPasswort
Diese Seite fordert den Benutzer zur Eingabe seiner E-Mail-Adresse und seines Passworts oder zur Anmeldung bei seinem Facebook-Konto auf. Wenn der Benutzer noch kein Konto hat, kann er auf die Anmeldeschaltfläche klicken, um auf die Anmeldeseite zuzugreifen. Wir werden später auf die Einzelheiten dieser Seite zurückkommen, während wir uns dem Login-Teil zuwenden. Ich zeige es Ihnen nur, damit Sie den Code zum Navigieren zur Anmeldeseite sehen können.
Als nächstes öffnen Sie die home.ts Datei. Im Moment enthält es nur einen Kurztext für die Navigation zur Anmelde- und Benutzerseite. Später kehren wir zu dieser Seite zurück, um den Code für die Anmeldung des Benutzers hinzuzufügen.
Benutzeranmeldung
Das Layout der Anmeldeseite befindet sich in src /pages / signup-page / signup-page.html. Schauen Sie sich diese Datei an und Sie werden ein einfaches Formular mit einem E-Mail-Feld und einem Kennwort-Feld finden.
Als nächstes wollen wir uns das ansehen Anmeldeseite.ts Datei.
Lass uns das aufteilen. Zunächst werden die Controller zum Erstellen von Warnungen und Ladern importiert:
importieren AlertController, LoadingController von 'ionic-angle';
Anschließend werden die benötigten Klassen vom Cloud-Client importiert:
importiere Auth, UserDetails, IDetailedError von '@ ionic / cloud-angle';
Das Auth Dienst, der sich mit der Benutzerregistrierung, dem Anmelden und dem Abmelden befasst.
Nutzerdetails ist der Typ, der zum Definieren der Benutzerdetails beim Registrieren oder Anmelden eines Benutzers verwendet wird.
IDetailedError wird verwendet, um die genaue Ursache für den aufgetretenen Fehler zu ermitteln. Dies ermöglicht es uns, dem Benutzer benutzerfreundliche Fehlermeldungen zur Verfügung zu stellen, wenn ein Fehler auftritt.
Deklarieren Sie die Variablen, die für die Speicherung der vom Benutzer eingegebenen E-Mail- und Kennworteingaben verwendet werden sollen. Dies sollte der Name sein, den Sie dem Namen gegeben haben Wert und ngModel Attribute in der Layoutdatei.
Exportklasse SignupPage email: string; Passwort: Zeichenfolge; Konstruktor (public auth: Auth, public alertCtrl: AlertController, public loadingCtrl: LoadingController) register () …
Als nächstes ist das registrieren Methode, die aufgerufen wird, wenn die Registrieren Taste wird gedrückt. Lassen Sie uns diese Methode zusammen codieren.
Zuerst wird ein Loader gestartet und nach fünf Sekunden automatisch geschlossen (so dass dem Benutzer keine Ladeanimation bleibt, die sich für immer dreht)..
register () let loader = this.loadingCtrl.create (content: "Sie werden angemeldet ..."); loader.present (); setTimeout (() => loader.dismiss ();, 5000);
Als Nächstes erstellen wir ein Objekt, um die Benutzerdetails zu speichern:
lassen Sie Details: UserDetails = 'email': this.email, 'password': this.password;
Zum Schluss rufen wir die an Anmelden() Methode aus der Auth Dienst und geben Sie die Benutzerdetails als Argument an. Dies gibt ein Versprechen zurück, mit dem wir auspacken dann(). Sobald eine Erfolgsantwort vom Back-End empfangen wird, die erste Funktion, an die Sie übergeben werden dann() wird hingerichtet Andernfalls wird die zweite Funktion ausgeführt.
this.auth.signup (details) .then ((res) => loader.dismiss (); // verbirgt den Loader let alert = this.alertCtrl.create (title: "You're registered!"), Untertitel: 'Jetzt können Sie sich anmelden.', Schaltflächen: ['OK'); alert.present (); // Warnfeld anzeigen, (Fehler: IDetailedError)) => …);
Wenn eine Fehlerantwort von Ionic Auth empfangen wird, durchlaufen wir das Fehlerfeld und erstellen eine Fehlernachricht, die auf der Art des empfangenen Fehlers basiert. Hier finden Sie die Liste der Auth-Anmeldungsfehler, die auftreten können.
loader.dismiss (); var error_message = "; for (lassen Sie e of err.details) if (e === 'conflict_email') error_message + =" Email existiert bereits. "; else error_message + =" Ungültige Anmeldeinformationen. "; let alert = this.alertCtrl.create (title: error_message, Untertitel: 'Bitte erneut versuchen.', Schaltflächen: ['OK']); alert.present ();
Sobald dies erledigt ist, können Sie die App in Ihrem Browser ausprobieren. Das E-Mail- / Passwort-Login hat keine Plugins oder Hardware-Abhängigkeiten, daher sollten Sie es im Browser testen können. Sie finden dann den neu registrierten Benutzer im Auth Registerkarte Ihres Ionic-App-Dashboards.
Einrichten der Facebook-App
Im nächsten Schritt müssen Sie die App so einrichten, dass sie native Facebook-Anmeldungen verarbeiten kann. Zunächst müssen Sie eine Facebook-App erstellen. Sie können dies tun, indem Sie sich bei Ihrem Facebook-Konto anmelden und dann die Facebook-Entwicklerseite aufrufen. Erstellen Sie von dort aus eine neue App:
Sobald die App erstellt ist, klicken Sie auf Produkt hinzufügen Link in der Seitenleiste und wählen Sie Facebook Login. Dies öffnet die Schnellstart Bildschirm standardmäßig. Wir brauchen das nicht wirklich, also klicken Sie auf die Schaltfläche die Einstellungen Link direkt unter dem Facebook Login. Das sollte Ihnen den folgenden Bildschirm zeigen:
Hier müssen Sie das aktivieren Eingebetteter Browser OAuth-Login einstellen und hinzufügen https://api.ionic.io/auth/integrations/facebook als Wert für die Gültige OAuth-Weiterleitungs-URIs. Speichern Sie die Änderungen, wenn Sie fertig sind.
Als Nächstes müssen Sie Ionic Auth mit der gerade erstellten Facebook-App verbinden. Wechseln Sie zu Ihrem Ionic-Dashboard, und wählen Sie die zuvor erstellte App aus (siehe Abschnitt "App mit Ionic-Services verbinden"). Klicke auf das die Einstellungen Tab und dann Benutzerauth. Unter dem Sozialanbieter, klicke auf das Konfiguration Taste neben Facebook:
Geben Sie die App-ID und das App-Geheimnis der zuvor erstellten Facebook-App ein und klicken Sie auf Aktivieren.
Installieren Sie das Facebook Plugin
Installieren Sie anschließend das Facebook-Plugin für Cordova. Im Gegensatz zu den meisten Plugins müssen Sie dazu ein paar Informationen angeben: die Facebook-App-ID und den App-Namen. Sie können diese Informationen einfach aus dem Facebook-App-Dashboard kopieren.
Sobald dies erledigt ist, müssen Sie als letztes wieder zu Ihrem Projekt zurückkehren und das Fenster öffnen src / app / app.module.ts Datei und fügen Sie die CloudSettings und CloudModule Dienstleistungen aus dem wolkenwinklig Paket:
CloudSettings, CloudModule aus '@ ionic / cloud-angle' importieren;
Deklarieren Sie das cloudSettings Objekt. Das enthält die app_id Ihrer Ionic-App und alle zusätzlichen Berechtigungen (Geltungsbereich), die Sie von den Benutzern Ihrer App abfragen möchten. Standardmäßig wird bereits nach dem gefragt Email und öffentliches Profil.
Wenn Sie nach mehr Daten von Ihren Benutzern fragen möchten, finden Sie auf dieser Seite eine Liste mit Berechtigungen: Facebook-Anmeldeberechtigungen.
Lassen Sie als nächstes Ionic von der cloudSettings Sie haben gerade hinzugefügt:
Wenn Sie später weitere soziale Anbieter zu Ihrer App hinzufügen, wird ein ähnlicher Vorgang durchgeführt.
Anmelden des Benutzers
Nun ist es Zeit, zur Startseite zurückzukehren und einige Änderungen vorzunehmen. Die HTML-Vorlage enthält bereits alles, was wir brauchen, also müssen wir nur das Skript aktualisieren. Mach weiter und öffne die src / pages / home / home.ts Datei. Importieren Sie am Anfang der Datei zusätzlich zu dem, was Sie bereits zuvor haben, Folgendes:
NavController, AlertController, LoadingController aus 'ionic-angle' importieren; Auth, FacebookAuth, User, IDetailedError aus '@ ionic / cloud-angle' importieren; UserPage von '… / Benutzerseite / Benutzerseite' importieren;
Stellen Sie im Konstruktor fest, ob ein Benutzer derzeit angemeldet ist oder nicht. Wenn ein Benutzer bereits angemeldet ist, navigieren wir automatisch zur Benutzerseite.
Exportklasse HomePage // deklarieren Sie Variablen zum Speichern des Benutzers und der E-Mail-Adresse, die vom Benutzer eingegeben wurde email: string; Passwort: Zeichenfolge; Konstruktor (public navCtrl: NavController, public auth: Auth, public facebookAuth: FacebookAuth, öffentlicher Benutzer: Benutzer, public alertCtrl: AlertController, public loadingCtrl: LoadingController) if (this.auth.isAuthenticated ()) this.navCtrl.push ( UserPage); …
Als nächstes, wenn die Anmeldung Wenn Sie die Taste drücken, wird zunächst eine ladende Animation angezeigt.
Wie du im gesehen hast src / pages / home / home.html Datei zuvor, wird eine Zeichenfolge, die angibt, welche Anmeldeschaltfläche gedrückt wurde (entweder die E-Mail- / Passwort-Anmeldeschaltfläche oder die Facebook-Anmeldeschaltfläche), an die Anmeldung() Funktion. Dies ermöglicht uns zu bestimmen, welcher Login-Code ausgeführt werden soll. Wenn der Typ ist 'fb', es bedeutet, dass der Facebook-Login-Button gedrückt wurde, also rufen wir die an Anmeldung() Methode der FacebookAuth Bedienung.
if (type == 'fb') this.facebookAuth.login (). dann ((res) => loader.dismiss (); this.navCtrl.push (UserPage);, (err) => / / verbergen Sie den Loader und navigieren Sie zur Benutzerseite loader.dismiss (); lassen Sie alert = this.alertCtrl.create (title: "Fehler beim Anmelden bei Facebook.", Untertitel: "Bitte erneut versuchen.", Schaltflächen: [ 'OK']); alert.present (););
Andernfalls wurde die E-Mail- / Passwort-Anmeldeschaltfläche gedrückt, und der Benutzer sollte sich mit den im Anmeldeformular eingegebenen Daten anmelden.
Sehen Sie sich die endgültige Version der Datei home.ts an, um zu sehen, wie alles aussehen sollte.
Benutzerseite
Die letzte Seite ist die Benutzerseite.
Das Layout in src / pages / benutzerseite / benutzerseite.html, Zeigt das Profilfoto des Benutzers und seinen Benutzernamen an. Wenn sich der Benutzer mit seiner E-Mail-Adresse / Kennwort angemeldet hat, ist der Benutzername die E-Mail-Adresse des Benutzers und das Profilfoto ist das von Ionic zugewiesene Standard-Profilfoto. Wenn sich der Nutzer jedoch bei Facebook angemeldet hat, wird sein Profilfoto sein Facebook-Profilfoto und der Benutzername der vollständige Name.
Als nächstes schauen Sie sich das an user-page.ts Datei.
Unter dem Ionenwinkel Paket importieren wir die Plattform Service abgesehen von NavController. Hiermit erhalten Sie Informationen zum aktuellen Gerät. Es gibt auch Methoden zum Abhören von Hardwareereignissen, z. B. wenn die Hardware-Zurück-Taste in Android gedrückt wird.
NavController, Platform aus 'ionic-angle' importieren;
Und für die wolkenwinklig Paket brauchen wir das Auth, FacebookAuth, und Nutzer Dienstleistungen:
Auth, FacebookAuth, User aus '@ ionic / cloud-angle' importieren;
Stellen Sie im Klassenkonstruktor fest, ob sich der Benutzer mit seinem E-Mail- / Kennwort-Benutzer oder seinem Facebook-Konto angemeldet hat. Füllen Sie das aus Nutzername und Foto darauf bezogen. Weisen Sie anschließend darunter eine Funktion zu, die ausgeführt werden soll, wenn die Hardware-Zurück-Taste gedrückt wird. Das registerBackButtonAction () akzeptiert zwei Argumente: die auszuführende Funktion und die Priorität. Wenn mehr als eine davon in der App vorhanden ist, wird nur die höchste Priorität ausgeführt. Da wir dies aber nur in diesem Bildschirm benötigen, fügen wir es einfach ein 1.
Das logoutUser () Methode enthält die Logik zum Abmelden des Benutzers. Als Erstes wird festgestellt, ob ein Benutzer tatsächlich angemeldet ist. Wenn ein Benutzer angemeldet ist, bestimmen wir, ob es sich bei dem Benutzer um einen Facebook-Benutzer oder einen E-Mail- / Passwort-Benutzer handelt.
Dies kann durch Überprüfen der Email Eigentum unter der Nutzerdetails Objekt. Wenn diese Eigenschaft vorhanden ist, bedeutet dies, dass der Benutzer ein E-Mail- / Kennwortbenutzer ist. Wenn dies nicht der Fall ist, gehen wir davon aus, dass es sich um einen Facebook-Nutzer handelt. Anrufen der Ausloggen() Methode in Auth und FacebookAuth löscht den aktuellen Benutzer der App.
logoutUser () if (this.auth.isAuthenticated ()) if (this.user.details.hasOwnProperty ('email')) this.auth.logout (); else this.facebookAuth.logout (); this.navCtrl.pop (); // zurück zur Startseite
App auf einem Gerät ausführen
Jetzt können wir unsere App ausprobieren! Richten Sie zuerst die Plattform ein und erstellen Sie das Debug-Apk:
Damit das Facebook-Login funktioniert, müssen Sie der Facebook-App den Hash der APK-Datei angeben. Sie können den Hash ermitteln, indem Sie den folgenden Befehl ausführen:
Gehen Sie als Nächstes auf die Seite mit den Grundeinstellungen Ihrer Facebook-App und klicken Sie auf Plattform hinzufügen im unteren Teil des Bildschirms. Wählen Android als Plattform. Sie sehen dann folgendes Formular:
Füllen Sie das aus Google Play-Paketname und Key Hashes. Sie können alles, was Sie wollen, als Wert für den Wert angeben Google Play-Paketname solange es dem gleichen Format wie die Apps in Google Play folgt (z. com.ionicframework.authapp316678). Für die Key Hashes, Sie müssen den von früher zurückgegebenen Hash eingeben. Vergiss nicht zu schlagen Änderungen speichern wenn du fertig bist.
Sobald dies erledigt ist, können Sie das jetzt kopieren android-debug.apk von dem Plattformen / Android / Build / Ausgaben / apk Ordner auf Ihrem Gerät installieren, installieren Sie ihn und führen Sie ihn aus.
Schlussfolgerung und nächste Schritte
Das ist es! In diesem Lernprogramm haben Sie gelernt, wie Sie mit dem Ionic Auth-Dienst die Authentifizierung in Ihrer Ionic-App problemlos implementieren können. Wir haben in diesem Lernprogramm die E-Mail- / Passwort-Authentifizierung und das Facebook-Login verwendet. Es gibt jedoch noch weitere Optionen, und es sollte für Sie leicht sein, diese auch Ihrer App hinzuzufügen.
Nachfolgend einige Schritte, die Sie selbst ausprobieren können, um Ihre App auf die nächste Ebene zu bringen.
Speichern Sie zusätzliche Benutzerinformationen-Neben der E-Mail-Adresse und dem Kennwort können Sie zusätzliche Informationen für Ihre Benutzer speichern.
Verwenden Sie andere Anbieter für soziale Anmeldungen-Wie zu Beginn des Artikels erwähnt, können Sie auch Social Login mit den folgenden Diensten implementieren: Google, Twitter, Instagram, LinkedIn und GitHub.
Fügen Sie eine Funktion zum Zurücksetzen des Kennworts hinzu-Das Zurücksetzen von Kennwörtern kann mithilfe der Formularrücksetzungsformulare von Ionic implementiert werden, oder Sie können eigene erstellen.
Benutzerdefinierte Authentifizierung-Wenn Sie bereits über ein Backend verfügen, das die Benutzerauthentifizierung für Ihren Service übernimmt, müssen Sie möglicherweise eine benutzerdefinierte Authentifizierung implementieren.
Das ist alles für jetzt. Bleiben Sie dran für weitere Artikel zur Verwendung von Ionic-Diensten! Schauen Sie sich in der Zwischenzeit einige unserer weiteren großartigen Beiträge zur Entwicklung plattformübergreifender mobiler Apps an.
Share
Accentsconagua
