Advertisement
  1. Code
  2. Ionic

Erste Schritte mit Ionic Services: Auth

by
Read Time:15 minsLanguages:

German (Deutsch) translation by Alex Grigorovich (you can also view the original English article)

Eine der Stärken von Ionic sind die Services, die es zusätzlich zum Framework anbietet. 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, ist der Auth-Dienst. Auf diese Weise können wir die Authentifizierung in einer Ionic-App implementieren, ohne eine einzige Zeile Back-End-Code schreiben zu müssen. Oder wenn Sie bereits über ein bestehendes Authentifizierungssystem verfügen, können Sie auch dieses verwenden. Der Dienst unterstützt die folgenden Authentifizierungsmethoden:

  • E-Mail/Passwort: Der Benutzer wird durch Angabe seiner E-Mail-Adresse und seines Passworts registriert.
  • Social Login: Der Benutzer wird mit seinem Social-Media-Profil registriert. Dazu gehören derzeit Facebook, Google, Twitter, Instagram, LinkedIn und GitHub.
  • Benutzerdefiniert: Der Benutzer wird mithilfe eines vorhandenen Authentifizierungssystems registriert.

In diesem Tutorial werden wir nur E-Mail/Passwort und Social Login mit Facebook behandeln.

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 die folgenden Seiten haben:

  • Startseite
  • Anmeldeseite
  • Benutzerseite

Startseite

Die Startseite ist die Standardseite der App, auf der sich der Benutzer mit seiner E-Mail/Passwort oder seinem Facebook-Konto anmelden kann.

home pagehome pagehome page

Wenn der Benutzer auf die Schaltfläche Anmelden mit Facebook klickt, wird ein Bildschirm ähnlich dem folgenden angezeigt und sobald der Benutzer zustimmt, wird der Benutzer in der App angemeldet:

Facebook loginFacebook loginFacebook login

Anmeldeseite

Auf der Anmeldeseite kann sich der Benutzer durch Eingabe seiner E-Mail-Adresse und seines Passworts registrieren. Für die Facebook-Anmeldung ist keine Anmeldung erforderlich, da die Benutzerinformationen von der Facebook-API bereitgestellt werden.

Signup pageSignup pageSignup page

Benutzerseite

Die letzte Seite ist die Benutzerseite, die nur angezeigt werden kann, wenn sich der Benutzer bereits angemeldet hat.

Bootstrap eine neue Ionic App

Jetzt, da Sie wissen, was wir machen, können Sie mit dem Erstellen unserer App beginnen!

Zuerst booten wir eine neue Ionic-App mit der leeren Starter-Vorlage:

Navigieren Sie in den neu erstellten authApp-Ordner. Dies dient als Stammverzeichnis des Projekts.

Um schnell mit der Benutzeroberfläche der App einzurichten, habe ich ein GitHub-Repository erstellt, in dem Sie die Starter-Quelldateien finden. Laden Sie das Repo herunter, navigieren Sie in den Starter-Ordner und kopieren Sie den src-Ordner in das Stammverzeichnis des soeben erstellten Ionic-Projekts. Diese enthält die Vorlagendateien für jede der Seiten der App. Ich werde Ihnen in einem späteren Abschnitt detaillierter erklären, was jede dieser Dateien bewirkt.

Stellen Sie das Projekt bereit, damit Sie Ihre Änderungen während der Entwicklung der App sofort sehen können:

Erstellen Sie ein Ionic-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. Es ermöglicht Ihnen, Ihre Ionic-Apps und die von ihnen verwendeten Dienste zu verwalten. Dies umfasst die Verwaltung des Auth-Dienstes. Sie können ein Ionic-Konto erstellen, indem Sie die Anmeldeseite von Ionic.io besuchen.

Verbinden Sie die App mit Ionic Services

Navigieren Sie als Nächstes zum Stammverzeichnis des Projekts und installieren Sie das Ionic Cloud-Plugin:

Mit diesem Plugin kann die App problemlos mit Ionic-Diensten interagieren.

Danach können Sie die App initialisieren, um Ionic-Dienste zu verwenden:

Das fordert Sie auf, sich mit Ihrem Ionic-Konto anzumelden. Sobald Sie die richtigen Anmeldedaten eingegeben haben, erstellt das Befehlszeilentool automatisch einen neuen App-Datensatz unter Ihrem Ionic-Konto. Dieser Datensatz ist mit der App verbunden, die Sie entwickeln.

Sie können überprüfen, ob dieser Schritt funktioniert hat, indem Sie die Datei .io-config.json und die Datei ionic.config.json im Stammverzeichnis Ihres Projekts öffnen. Die app_id sollte mit der app_id übereinstimmen, die der neu erstellten App in Ihrem Ionic-Dashboard zugewiesen wurde.

Startseite

Navigieren Sie in das Verzeichnis src/pages/home, um die Dateien für die Homepage anzuzeigen. Öffnen Sie die Datei home.html und Sie sehen Folgendes:

Auf dieser Seite wird der Benutzer aufgefordert, seine E-Mail-Adresse und sein Passwort einzugeben oder sich mit seinem Facebook-Konto anzumelden. 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 Besonderheiten dieser Seite zurückkommen, wenn wir zum Login-Teil übergehen. Ich zeige es Ihnen nur, damit Sie den Code zum Navigieren zur Anmeldeseite sehen können.

Öffnen Sie als Nächstes die Datei home.ts. Im Moment hat sie nur einen Boilerplate-Code zum Navigieren zur Anmelde- und Benutzerseite. Später kehren wir zu dieser Seite zurück, um den Code zum Anmelden des Benutzers hinzuzufügen.

Benutzeranmeldung

Das Layout der Anmeldeseite finden Sie in src/pages/signup-page/signup-page.html. Schauen Sie sich diese Datei an und Sie finden ein einfaches Formular mit einem E-Mail-Feld und einem Passwortfeld.

Schauen wir uns als Nächstes die Datei signup-page.ts an.

Lassen Sie uns das aufschlüsseln. Zuerst importiert es die Controller zum Erstellen von Alerts und Loadern:

Anschließend importiert es die benötigten Klassen aus dem Cloud-Client:

  • Der Auth-Dienst, der sich mit der Benutzerregistrierung, -anmeldung und -abmeldung befasst.
  • UserDetails ist der Typ, der zum Definieren der Benutzerdetails bei der Registrierung oder Anmeldung eines Benutzers verwendet wird.
  • IDetailedError wird verwendet, um die genaue Ursache des aufgetretenen Fehlers zu ermitteln. Dies ermöglicht es uns, dem Benutzer benutzerfreundliche Fehlermeldungen bereitzustellen, wenn ein Fehler auftritt.

Deklarieren Sie die Variablen, die zum Speichern der E-Mail- und Passworteingabe durch den Benutzer verwendet werden sollen. Dies sollte mit dem Namen übereinstimmen, den Sie den Attributen value und ngModel in der Layoutdatei gegeben haben.

Als nächstes kommt die Methode register, die aufgerufen wird, wenn die Schaltfläche Register gedrückt wird. Lassen Sie uns diese Methode gemeinsam codieren.

Zuerst startet es einen Lader und schließt ihn dann automatisch nach fünf Sekunden (so dass der Benutzer im Falle eines Fehlers nicht mit einer Ladeanimation zurückbleibt, die sich ewig dreht).

Als Nächstes erstellen wir ein Objekt zum Speichern der Benutzerdetails:

Schließlich rufen wir die Methode signup() vom Auth-Dienst auf und geben die Benutzerdetails als Argument an. Dies gibt ein Versprechen zurück, mit dem wir then() auspacken. Sobald eine Erfolgsantwort vom Back-End empfangen wird, wird die erste Funktion, die Sie an then() übergeben, ausgeführt; Andernfalls wird die zweite Funktion ausgeführt.

Wenn eine Fehlerantwort von Ionic Auth empfangen wird, durchlaufen wir das Fehlerarray und erstellen eine Fehlermeldung basierend auf der Art des empfangenen Fehlers. Hier finden Sie die Liste der Auth-Anmeldefehler, die auftreten können.

Sobald dies erledigt ist, können Sie die App in Ihrem Browser ausprobieren. Die E-Mail/Passwort-Anmeldung hat keine Plugin- oder Hardware-Abhängigkeiten, daher sollten Sie sie im Browser testen können. Sie finden den neu registrierten Benutzer dann im Auth-Tab Ihres Ionic-App-Dashboards.

Facebook-App einrichten

Der nächste Schritt besteht darin, die App so einzurichten, dass sie native Facebook-Logins verarbeiten kann. Zuerst müssen Sie eine Facebook-App erstellen. Sie können dies tun, indem Sie sich bei Ihrem Facebook-Konto anmelden und dann zur Facebook-Entwicklerseite gehen. Erstellen Sie von dort aus eine neue App:

Create Facebook AppCreate Facebook AppCreate Facebook App

Sobald die App erstellt wurde, klicken Sie in der Seitenleiste auf den Link Produkt hinzufügen und wählen Sie Facebook Login. Dadurch wird standardmäßig der Schnellstartbildschirm geöffnet. Das brauchen wir nicht wirklich, also klicken Sie auf den Link Einstellungen direkt unter dem Facebook-Login. Das sollte Ihnen den folgenden Bildschirm zeigen:

Facebook SettingsFacebook SettingsFacebook Settings

Hier müssen Sie die Einstellung für die OAuth-Anmeldung des eingebetteten Browsers aktivieren und https://api.ionic.io/auth/integrations/facebook als Wert für die gültigen OAuth-Weiterleitungs-URIs hinzufügen. Speichern Sie die Änderungen, sobald dies erledigt ist.

Als nächstes müssen Sie Ionic Auth mit der gerade erstellten Facebook-App verbinden. Gehen Sie zu Ihrem Ionic-Dashboard und wählen Sie die zuvor erstellte App aus (siehe Abschnitt "Verbinden der App mit Ionic Services"). Klicken Sie auf die Registerkarte Einstellungen und dann auf Benutzerauthentifizierung. Klicken Sie unter Social Providers auf die Schaltfläche Setup neben Facebook:

Ionic app settings social providersIonic app settings social providersIonic app settings social providers

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

Als nächstes installieren Sie 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 Dashboard der Facebook-App kopieren.

Facebook-Dienst konfigurieren

Danach müssen Sie als letztes zu Ihrem Projekt zurückkehren, die Datei src/app/app.module.ts öffnen und die CloudSettings- und CloudModule-Dienste aus dem cloud-angular-Paket hinzufügen:

Deklarieren Sie das cloudSettings-Objekt. Diese enthält die app_id Ihrer Ionic-App und alle zusätzlichen Berechtigungen(Umfang), die Sie von den Benutzern Ihrer App anfordern möchten. Standardmäßig fragt dies bereits nach der email und dem public_profile.

Wenn Sie mehr Daten von Ihren Benutzern anfordern möchten, finden Sie eine Liste der Berechtigungen auf dieser Seite: Facebook-Anmeldeberechtigungen.

Teilen Sie Ionic als Nächstes mit, welche cloudSettings Sie gerade hinzugefügt haben:

Wenn Sie später andere soziale Anbieter zu Ihrer App hinzufügen, wird ein ähnlicher Vorgang ausgeführt.

Anmelden des Benutzers

Jetzt ist es an der 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. Fahren Sie fort und öffnen Sie die Datei src/pages/home/home.ts. Importieren Sie oben in der Datei zusätzlich zu dem, was Sie bereits haben, Folgendes:

Stellen Sie im Konstruktor fest, ob ein Benutzer derzeit angemeldet ist oder nicht. Wenn ein Benutzer bereits angemeldet ist, navigieren wir automatisch zur Benutzerseite.

Als nächstes, wenn die Login-Schaltfläche gedrückt wird, beginnen wir mit der Anzeige einer Ladeanimation.

Wie Sie zuvor in der Datei src/pages/home/home.html gesehen haben, wird eine Zeichenfolge an die Funktion login() übergeben, die angibt, welche Anmeldeschaltfläche gedrückt wurde (entweder die E-Mail- / Kennwort-Anmeldeschaltfläche oder die Facebook-Anmeldeschaltfläche). Dadurch können wir bestimmen, welcher Login-Code ausgeführt werden soll. Wenn der Typ 'fb' ist, bedeutet dies, dass der Facebook-Login-Button gedrückt wurde, also rufen wir die login()-Methode des FacebookAuth-Dienstes auf.

Andernfalls wurde der E-Mail-/Passwort-Login-Button gedrückt und wir sollten den Benutzer mit den im Login-Formular 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/user-page/user-page.html zeigt das Profilfoto des Benutzers und seinen Benutzernamen an. Wenn sich der Benutzer mit seiner E-Mail-Adresse / seinem Passwort angemeldet hat, ist der Benutzername die E-Mail-Adresse des Benutzers und das Profilfoto das von Ionic zugewiesene Standardprofilfoto. Auf der anderen Seite, wenn sich der Benutzer bei Facebook angemeldet hat, ist sein Profilbild sein Facebook-Profilfoto und sein Benutzername sein vollständiger Name.

Schauen Sie sich als Nächstes die Datei user-page.ts an.

Unter dem ionic-angular paket importieren wir den Platform-Dienst neben NavController. Dies wird verwendet, um Informationen über das aktuelle Gerät zu erhalten. Es verfügt auch über Methoden zum Abhören von Hardwareereignissen, z. B. wenn die Hardware-Zurück-Taste in Android gedrückt wird.

Und für das cloud-angular-Paket benötigen wir die Dienste Auth, FacebookAuth und User:

Stellen Sie im Klassenkonstruktor fest, ob sich der Benutzer mit seinem E-Mail-/Passwortbenutzer oder seinem Facebook-Konto angemeldet hat. Geben Sie den Benutzernamen und das Foto basierend darauf ein. Weisen Sie dann darunter eine Funktion zu, die ausgeführt werden soll, wenn die Hardware-Zurück-Taste gedrückt wird. Die registerBackButtonAction() akzeptiert zwei Argumente: die auszuführende Funktion und die Priorität. Sind mehrere davon in der App vorhanden, wird nur die höchste Priorität ausgeführt. Da wir dies jedoch nur in diesem Bildschirm benötigen, geben wir einfach 1 ein.

Die Methode logoutUser() enthält die Logik zum Abmelden des Benutzers. Als erstes wird festgestellt, ob ein Benutzer tatsächlich angemeldet ist. Wenn ein Benutzer angemeldet ist, stellen wir fest, ob es sich bei dem Benutzer um einen Facebook-Benutzer oder einen E-Mail-/Passwortbenutzer handelt.

Dies kann durch Überprüfen der email-Eigenschaft unter dem user.details-Objekt erfolgen. Wenn diese Eigenschaft vorhanden ist, bedeutet dies, dass der Benutzer ein E-Mail-/Passwortbenutzer ist. Wenn es anders ist, gehen wir davon aus, dass es sich um einen Facebook-Nutzer handelt. Der Aufruf der Methode logout() in Auth und FacebookAuth löscht den aktuellen Benutzer der App.

Ausführen der App auf einem Gerät

Jetzt können wir unsere App ausprobieren! Richten Sie zuerst die Plattform ein und erstellen Sie die Debug-Apk:

Damit die Facebook-Anmeldung funktioniert, müssen Sie der Facebook-App den Hash der APK-Datei bereitstellen. Sie können den Hash ermitteln, indem Sie den folgenden Befehl ausführen:

Rufen Sie als Nächstes die Seite mit den Grundeinstellungen Ihrer Facebook-App auf und klicken Sie im unteren Teil des Bildschirms auf die Schaltfläche Plattform hinzufügen. Wählen Sie Android als Plattform aus. Sie sehen dann das folgende Formular:

Android platform settingsAndroid platform settingsAndroid platform settings

Füllen Sie den Google Play-Paketnamen und die Schlüssel-Hashes aus. Sie können alles, was Sie wollen, als Wert für den Google Play-Paketnamen eingeben, solange er das gleiche Format wie die Apps in Google Play hat (z. B. com.ionicframework.authapp316678). Für die Schlüssel-Hashes müssen Sie den zuvor zurückgegebenen Hash eingeben. Vergessen Sie nicht, auf Änderungen speichern zu klicken, wenn Sie fertig sind.

Anschließend können Sie die android-debug.apk aus dem Ordner platform/android/build/outputs/apk auf Ihr Gerät kopieren, installieren und dann ausführen.

Abschluss und nächste Schritte

Das ist es! In diesem Tutorial haben Sie erfahren, wie Sie den Ionic Auth-Dienst verwenden, um die Authentifizierung in Ihrer Ionic-App einfach zu implementieren. Wir haben in diesem Tutorial die E-Mail-/Passwort-Authentifizierung und die Facebook-Anmeldung verwendet, aber es gibt noch andere Optionen, und es sollte für Sie einfach sein, diese auch zu Ihrer App hinzuzufügen.

Hier sind einige nächste Schritte, die Sie selbst ausprobieren können, um Ihre App auf die nächste Stufe zu heben.

  • Zusätzliche Benutzerinformationen speichern - Neben der E-Mail-Adresse und dem Kennwort können Sie auch zusätzliche Informationen für Ihre Benutzer speichern.
  • Nutzen Sie andere Social Login-Anbieter – wie am Anfang des Artikels erwähnt, können Sie Social Login auch mit folgenden Diensten implementieren: Google, Twitter, Instagram, LinkedIn und GitHub.
  • Fügen Sie eine Funktion zum Zurücksetzen des Passworts hinzuPasswortzurücksetzungen können mithilfe der Formulare zum Zurücksetzen von Passwörtern von Ionic implementiert werden, oder Sie können eigene Formulare erstellen.
  • Benutzerdefinierte Authentifizierung: Wenn Sie bereits über ein Back-End verfügen, das die Benutzerauthentifizierung für Ihren Dienst ü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! Sehen Sie sich in der Zwischenzeit einige unserer anderen großartigen Beiträge zur plattformübergreifenden Entwicklung mobiler Apps an.

  • Ionic 2
    Einführung in Ionic 2
    Wernher-Bel Ancheta
  • Ionic 2
    Codieren Sie Ihre erste Ionic 2-App: Eine App zum Teilen von Fotos
    Wernher-Bel Ancheta
  • App-Vorlagen
    15 besten Ionic App-Vorlagen
    Ashraff Hathibelagal
  • Mobile Entwicklung
    Back-End als Service für mobile Apps
    Bala Durage Sandamal Siripathi
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.