Tutorial: Senden von Pushbenachrichtigungen an React Native Apps mithilfe von Azure Notification Hubs über einen Back-End-Dienst

Beispiel herunterladen Beispiel herunterladen

In diesem Tutorial verwenden Sie Azure Notification Hubs zum Pushen von Benachrichtigungen an eine React Native Anwendung für Android und iOS.

Ein ASP.NET Core Web-API-Back-End wird verwendet, um die Geräteregistrierung für den Client mithilfe des neuesten und besten Installationsansatzes zu verarbeiten. Der Dienst sendet auch Pushbenachrichtigungen plattformübergreifend.

Diese Vorgänge werden mit dem Notification Hubs SDK für Back-End-Vorgänge verarbeitet. Weitere Details zum Gesamtansatz finden Sie in der Dokumentation Zum Registrieren von Ihrem App-Back-End .

In diesem Tutorial werden die folgenden Schritte erklärt:

Voraussetzungen

Um weiter zu folgen, benötigen Sie Folgendes:

  • Ein Azure-Abonnement, in dem Sie Ressourcen erstellen und verwalten können.
  • Ein Mac mit Visual Studio für Mac installiert (oder ein PC mit Visual Studio 2019 mit der Workload Mobile Development with .NET).
  • Die Möglichkeit, die App auf Android (physische Geräte oder Emulatorgeräte) oder iOS (nur physische Geräte) auszuführen.

Für Android benötigen Sie Folgendes:

  • Ein vom Entwickler entsperrtes physisches Gerät oder ein Emulator (mit API 26 und höher mit installierten Google Play Services)

Für iOS benötigen Sie Folgendes:

Hinweis

Der iOS-Simulator unterstützt keine Remotebenachrichtigungen und daher ist ein physisches Gerät erforderlich, wenn Sie dieses Beispiel unter iOS erkunden. Sie müssen die App jedoch nicht unter Android und iOS ausführen, um dieses Tutorial abzuschließen.

Sie können die Schritte in diesem Beispiel für erste Prinzipien ohne vorherige Erfahrung ausführen. Sie profitieren jedoch davon, mit den folgenden Aspekten vertraut zu sein.

Die bereitgestellten Schritte gelten für Visual Studio für Mac und Visual Studio Code, aber es ist möglich, mit Visual Studio 2019 zu folgen.

Einrichten von Push Notification Services und Azure Notification Hub

In diesem Abschnitt richten Sie Firebase Cloud Messaging (FCM) und Apple Push Notification Services (APNS) ein. Anschließend erstellen und konfigurieren Sie einen Notification Hub für die Verwendung dieser Dienste.

Erstellen eines Firebase-Projekts und Aktivieren von Firebase Cloud Messaging für Android

  1. Melden Sie sich bei der Firebase-Konsole an. Erstellen Sie ein neues Firebase-Projekt, indem Sie PushDemo als Projektnamen eingeben.

    Hinweis

    Ein eindeutiger Name wird für Sie generiert. Standardmäßig besteht dies aus einer Kleinbuchstabenvariante des angegebenen Namens sowie einer generierten Zahl, die durch einen Bindestrich getrennt ist. Sie können dies ändern, wenn Sie sicherstellen möchten, dass sie immer noch global eindeutig ist.

  2. Nachdem Sie Ihr Projekt erstellt haben, wählen Sie Firebase zu Ihrer Android-App hinzufügen aus.

    Hinzufügen von Firebase zu Ihrer Android-App

  3. Führen Sie auf der Seite Firebase zu Ihrer Android-App hinzufügen die folgenden Schritte aus.

    1. Geben Sie für den Android-Paketnamen einen Namen für Ihr Paket ein. Beispiel: com.<organization_identifier>.<package_name>.

      Angeben des Paketnamens

    2. Wählen Sie App registrieren aus.

    3. Wählen Sie google-services.json herunterladen aus. Speichern Sie die Datei dann in einem lokalen Ordner zur späteren Verwendung, und wählen Sie Weiter aus.

      google-services.json herunterladen

    4. Klicken Sie auf Weiter.

    5. Wählen Sie Weiter zur Konsole aus.

      Hinweis

      Wenn die Schaltfläche Mit Konsole fortfahren aufgrund der Überprüfung der Installation nicht aktiviert ist, wählen Sie Diesen Schritt überspringen aus.

  4. Wählen Sie in der Firebase-Konsole das Zahnrad für Ihr Projekt aus. Wählen Sie dann Projekteinstellungen aus.

    Projekteinstellungen auswählen

    Hinweis

    Wenn Sie die datei google-services.json noch nicht heruntergeladen haben, können Sie sie auf dieser Seite herunterladen.

  5. Wechseln Sie oben zur Registerkarte Cloud Messaging . Kopieren Sie den Serverschlüssel , und speichern Sie diesen zur späteren Verwendung. Sie verwenden diesen Wert, um Ihren Notification Hub zu konfigurieren.

    Kopieren des Serverschlüssels

Registrieren Ihrer iOS-App für Pushbenachrichtigungen

Um Pushbenachrichtigungen an eine iOS-App zu senden, registrieren Sie Ihre Anwendung bei Apple, und registrieren Sie sich auch für Pushbenachrichtigungen.

  1. Wenn Sie Ihre App noch nicht registriert haben, navigieren Sie zum iOS-Bereitstellungsportal im Apple Developer Center. Melden Sie sich mit Ihrer Apple-ID beim Portal an, navigieren Sie zu Zertifikate, Bezeichnern & Profilen, und wählen Sie dann Bezeichner aus. Klicken Sie hier + , um eine neue App zu registrieren.

    App-IDs des iOS-Bereitstellungsportals

  2. Wählen Sie auf dem Bildschirm Neuen Bezeichner registrieren das Optionsfeld App-IDs aus. Klicken Sie anschließend auf Weiter.

    Seite

  3. Aktualisieren Sie die folgenden drei Werte für Ihre neue App, und wählen Sie dann Weiter aus:

    • Beschreibung: Geben Sie einen aussagekräftigen Namen für Ihre App ein.

    • Bundle-ID: Geben Sie eine Bundle-ID des Formulars com.organization_identifier<> ein.<>product_name, wie im App-Verteilungshandbuch erwähnt. Im folgenden Screenshot wird der mobcat Wert als organization-Bezeichner und der PushDemo-Wert als Produktname verwendet.

      App-ID-Registrierungsseite des iOS-Bereitstellungsportals

    • Pushbenachrichtigungen: Aktivieren Sie die Option Pushbenachrichtigungen im Abschnitt Funktionen .

      Formular zum Registrieren einer neuen App-ID

      Diese Aktion generiert Ihre App-ID und fordert sie auf, die Informationen zu bestätigen. Wählen Sie Weiter und dann Registrieren aus, um die neue App-ID zu bestätigen.

      Bestätigen der neuen App-ID

      Nachdem Sie Registrieren ausgewählt haben, wird die neue App-ID als Zeilenelement auf der Seite Zertifikate, Bezeichner & Profile angezeigt .

  4. Suchen Sie auf der Seite Zertifikate, Bezeichner & Profile unter Bezeichner das von Ihnen erstellte App-ID-Zeilenelement. Wählen Sie dann die entsprechende Zeile aus, um den Bildschirm "App ID-Konfiguration bearbeiten " anzuzeigen.

Erstellen eines Zertifikats für Notification Hubs

Ein Zertifikat ist erforderlich, damit der Notification Hub mit Apple Push Notification Services (APNS) arbeiten kann und kann auf zwei Arten bereitgestellt werden:

  1. Erstellen eines p12-Pushzertifikats, das direkt in Notification Hub hochgeladen werden kann (der ursprüngliche Ansatz)

  2. Erstellen eines p8-Zertifikats, das für die tokenbasierte Authentifizierung verwendet werden kann (neuer und empfohlener Ansatz)

Der neuere Ansatz bietet eine Reihe von Vorteilen, wie in der tokenbasierten Authentifizierung (HTTP/2) für APNS dokumentiert. Es sind weniger Schritte erforderlich, aber auch für bestimmte Szenarien vorgeschrieben. Es wurden jedoch Schritte für beide Ansätze bereitgestellt, da beide für die Zwecke dieses Tutorials funktionieren.

OPTION 1: Erstellen eines p12-Pushzertifikats, das direkt in Notification Hub hochgeladen werden kann
  1. Führen Sie auf Ihrem Mac das Keychain-Zugriffstool aus. Sie kann im Ordner Hilfsprogramme oder im Ordner Andere auf dem Launchpad geöffnet werden.

  2. Wählen Sie Schlüsselbundzugriff aus, erweitern Sie Zertifikat-Assistent, und wählen Sie dann Zertifikat von einer Zertifizierungsstelle anfordern aus.

    Verwenden des Schlüsselbundzugriffs zum Anfordern eines neuen Zertifikats

    Hinweis

    Standardmäßig wählt Keychain Access das erste Element in der Liste aus. Dies kann ein Problem sein, wenn Sie sich in der Kategorie Zertifikate befinden und die Apple Worldwide Developer Relations Certification Authority nicht das erste Element in der Liste ist. Stellen Sie sicher, dass Sie über ein Nicht-Schlüsselelement verfügen oder der Apple Worldwide Developer Relations-Zertifizierungsstelle-Schlüssel ausgewählt ist, bevor Sie die CSR (Certificate Signing Request) generieren.

  3. Wählen Sie Ihren Benutzer Email Adresse aus, geben Sie Ihren Allgemeinen Namen ein, stellen Sie sicher, dass Sie Auf Datenträger gespeichert angeben, und wählen Sie dann Weiter aus. Lassen Sie ca Email Address leer, da dies nicht erforderlich ist.

    Erwartete Zertifikatinformationen

  4. Geben Sie unter Speichern unter einen Namen für die Zertifikatsignieranforderungsdatei (Certificate Signing Request, CSR) ein, wählen Sie den Speicherort unter Wo aus, und wählen Sie dann Speichern aus.

    Auswählen eines Dateinamens für das Zertifikat

    Mit dieser Aktion wird die CSR-Datei am ausgewählten Speicherort gespeichert. Der Standardspeicherort ist Desktop. Merken Sie sich den für die Datei ausgewählten Speicherort.

  5. Scrollen Sie zurück auf der Seite Zertifikate, Bezeichner & Profile im iOS-Bereitstellungsportal nach unten zur aktivierten Option Pushbenachrichtigungen , und wählen Sie dann Konfigurieren aus, um das Zertifikat zu erstellen.

    Seite

  6. Das Fenster TLS/SSL-Zertifikate des Apple-Pushbenachrichtigungsdiensts wird angezeigt. Wählen Sie im Abschnitt Tls/SSL-Zertifikat der Entwicklung die Schaltfläche Zertifikat erstellen aus.

    Schaltfläche

    Der Bildschirm Neues Zertifikat erstellen wird angezeigt.

    Hinweis

    In diesem Tutorial wird ein Entwicklungszertifikat verwendet. Der gleiche Prozess wird beim Registrieren eines Produktionszertifikats verwendet. Stellen Sie sicher, dass Sie beim Senden von Benachrichtigungen den gleichen Zertifikattyp verwenden.

  7. Wählen Sie Datei auswählen aus, navigieren Sie zu dem Speicherort, an dem Sie die CSR-Datei gespeichert haben, und doppelklicken Sie dann auf den Zertifikatnamen, um sie zu laden. Klicken Sie anschließend auf Weiter.

  8. Nachdem das Portal das Zertifikat erstellt hat, wählen Sie die Schaltfläche Herunterladen aus. Speichern Sie das Zertifikat, und merken Sie sich den Speicherort, an dem es gespeichert ist.

    Seite zum Herunterladen des generierten Zertifikats

    Das Zertifikat wird heruntergeladen und auf Ihrem Computer im Ordner Downloads gespeichert.

    Suchen der Zertifikatdatei im Ordner

    Hinweis

    Standardmäßig heißt das heruntergeladene Entwicklungszertifikat aps_development.cer.

  9. Doppelklicken Sie auf das heruntergeladene Pushzertifikat aps_development.cer. Mit dieser Aktion wird das neue Zertifikat im Schlüsselbund installiert, wie in der folgenden Abbildung gezeigt:

    Liste der Schlüsselbundzugriffszertifikate mit neuem Zertifikat

    Hinweis

    Obwohl der Name in Ihrem Zertifikat möglicherweise anders ist, wird dem Namen das Präfix Apple Development iOS Push Services vorangestellt und der entsprechende Bundlebezeichner zugeordnet.

  10. Klicken Sie unter Schlüsselbundzugriff, Steuerelement + Klicken Sie in der Kategorie Zertifikate auf das neue Pushzertifikat, das Sie erstellt haben. Wählen Sie Exportieren aus, benennen Sie die Datei, wählen Sie das p12-Format und dann Speichern aus.

    Exportieren des Zertifikats als P12-Format

    Sie können das Zertifikat mit einem Kennwort schützen, aber ein Kennwort ist optional. Klicken Sie auf OK , wenn Sie die Kennworterstellung umgehen möchten. Notieren Sie sich den Dateinamen und den Speicherort des exportierten P12-Zertifikats. Sie werden verwendet, um die Authentifizierung mit APNs zu aktivieren.

    Hinweis

    Ihr P12-Dateiname und -Speicherort unterscheiden sich möglicherweise von den Abbildungen in diesem Tutorial.

OPTION 2: Erstellen eines P8-Zertifikats, das für die tokenbasierte Authentifizierung verwendet werden kann
  1. Notieren Sie sich die folgenden Details:

    • Präfix der App-ID (Team-ID)
    • Bundle-ID
  2. Klicken Sie zurück unter Zertifikate, Bezeichner & Profile auf Schlüssel.

    Hinweis

    Wenn Sie bereits einen Schlüssel für APNS konfiguriert haben, können Sie das p8-Zertifikat, das Sie direkt nach der Erstellung heruntergeladen haben, erneut verwenden. Wenn ja, können Sie die Schritte 3 bis 5 ignorieren.

  3. Klicken Sie auf die + Schaltfläche (oder auf die Schaltfläche Schlüssel erstellen ), um einen neuen Schlüssel zu erstellen.

  4. Geben Sie einen geeigneten Schlüsselnamenwert an, aktivieren Sie dann die Option Apple Push Notifications Service (APNS), und klicken Sie dann auf Weiter, gefolgt von Registrieren auf dem nächsten Bildschirm.

  5. Klicken Sie auf Herunterladen , und verschieben Sie dann die P8-Datei (mit dem Präfix AuthKey_) in ein sicheres lokales Verzeichnis, und klicken Sie dann auf Fertig.

    Hinweis

    Stellen Sie sicher, dass Sie Ihre p8-Datei an einem sicheren Ort aufbewahren (und eine Sicherung speichern). Nach dem Herunterladen des Schlüssels kann er nicht erneut heruntergeladen werden, da die Serverkopie entfernt wird.

  6. Klicken Sie unter Schlüssel auf den schlüssel, den Sie erstellt haben (oder auf einen vorhandenen Schlüssel, wenn Sie diesen stattdessen verwenden möchten).

  7. Notieren Sie sich den Schlüssel-ID-Wert .

  8. Öffnen Sie Ihr p8-Zertifikat in einer geeigneten Anwendung Ihrer Wahl, z. B . Visual Studio Code. Notieren Sie sich den Schlüsselwert (zwischen -----BEGIN PRIVATE KEY----- und -----END PRIVATE KEY-----).

    -----BEGIN PRIVATE KEY-----
    <key_value>
    -----END PRIVATE KEY-----

    Hinweis

    Dies ist der Tokenwert , der später zum Konfigurieren von Notification Hub verwendet wird.

Am Ende dieser Schritte sollten Sie die folgenden Informationen zur späteren Verwendung unter Konfigurieren Ihres Notification Hubs mit APNS-Informationen haben:

  • Team-ID (siehe Schritt 1)
  • Bundle-ID (siehe Schritt 1)
  • Schlüssel-ID (siehe Schritt 7)
  • Tokenwert (P8-Schlüsselwert, der in Schritt 8 abgerufen wurde)

Erstellen eines Bereitstellungsprofils für die App

  1. Kehren Sie zum iOS-Bereitstellungsportal zurück, wählen Sie Zertifikate, Bezeichner & Profile aus, wählen Sie im linken Menü Profile aus, und wählen Sie + dann aus, um ein neues Profil zu erstellen. Der Bildschirm Neues Bereitstellungsprofil registrieren wird angezeigt.

  2. Wählen Sie unter Entwicklung als Bereitstellungsprofiltyp die Option iOS-App-Entwicklung und dann Weiter aus.

    Liste des Bereitstellungsprofils

  3. Wählen Sie als Nächstes die app-ID aus, die Sie in der Dropdownliste App-ID erstellt haben, und wählen Sie Weiter aus.

    Auswählen der App-ID

  4. Wählen Sie im Fenster Zertifikate auswählen das Entwicklungszertifikat aus, das Sie für die Codesignatur verwenden, und wählen Sie Weiter aus.

    Hinweis

    Dieses Zertifikat ist nicht das Pushzertifikat, das Sie im vorherigen Schritt erstellt haben. Dies ist Ihr Entwicklungszertifikat. Wenn keine vorhanden ist, müssen Sie sie erstellen, da dies eine Voraussetzung für dieses Tutorial ist. Entwicklerzertifikate können im Apple Developer Portal, über Xcode oder in Visual Studio erstellt werden.

  5. Kehren Sie zur Seite Zertifikate, Bezeichner & Profile zurück, wählen Sie im linken Menü Profile aus, und wählen Sie + dann aus, um ein neues Profil zu erstellen. Der Bildschirm Neues Bereitstellungsprofil registrieren wird angezeigt.

  6. Wählen Sie im Fenster Zertifikate auswählen das von Ihnen erstellte Entwicklungszertifikat aus. Klicken Sie anschließend auf Weiter.

  7. Wählen Sie als Nächstes die Geräte aus, die zum Testen verwendet werden sollen, und wählen Sie Weiter aus.

  8. Wählen Sie schließlich unter Name des Bereitstellungsprofils einen Namen für das Profil aus, und wählen Sie Generieren aus.

    Auswählen eines Bereitstellungsprofilnamens

  9. Wenn das neue Bereitstellungsprofil erstellt wird, wählen Sie Herunterladen aus. Merken Sie sich den Speicherort, an dem sie gespeichert wird.

  10. Navigieren Sie zum Speicherort des Bereitstellungsprofils, und doppelklicken Sie darauf, um es auf Ihrem Entwicklungscomputer zu installieren.

Erstellen eines Notification Hubs

In diesem Abschnitt erstellen Sie einen Notification Hub und konfigurieren die Authentifizierung mit APNS. Sie können ein p12-Pushzertifikat oder eine tokenbasierte Authentifizierung verwenden. Wenn Sie einen bereits erstellten Notification Hub verwenden möchten, können Sie mit Schritt 5 fortfahren.

  1. Melden Sie sich bei Azure an.

  2. Klicken Sie auf Ressource erstellen, suchen Sie nach Notification Hub, und wählen Sie diese Option aus, und klicken Sie dann auf Erstellen.

  3. Aktualisieren Sie die folgenden Felder, und klicken Sie dann auf Erstellen:

    GRUNDLEGENDE DETAILS

    Abonnement: Auswählen des Zielabonnements aus der Dropdownliste
    Ressourcengruppe: Erstellen einer neuen Ressourcengruppe (oder Auswählen einer vorhandenen Ressourcengruppe)

    NAMESPACEDETAILS

    Notification Hub-Namespace: Geben Sie einen global eindeutigen Namen für den Notification Hub-Namespace ein.

    Hinweis

    Stellen Sie sicher, dass die Option Neu erstellen für dieses Feld ausgewählt ist.

    NOTIFICATION HUB-DETAILS

    Notification Hub: Geben Sie einen Namen für den Notification Hub ein.
    Lage: Auswählen eines geeigneten Standorts aus der Dropdownliste
    Tarif: Behalten Sie die Standardoption Free bei.

    Hinweis

    Es sei denn, Sie haben die maximale Anzahl von Hubs im Free-Tarif erreicht.

  4. Nachdem der Notification Hub bereitgestellt wurde, navigieren Sie zu dieser Ressource.

  5. Navigieren Sie zu Ihrem neuen Notification Hub.

  6. Wählen Sie in der Liste Zugriffsrichtlinien aus (unter VERWALTEN).

  7. Notieren Sie sich die Werte des Richtliniennamens zusammen mit den entsprechenden Verbindungszeichenfolgenwerten .

Konfigurieren Ihres Notification Hubs mit APNS-Informationen

Wählen Sie unter Notification Servicesdie Option Apple aus, und führen Sie dann die entsprechenden Schritte basierend auf dem Ansatz aus, den Sie zuvor im Abschnitt Erstellen eines Zertifikats für Notification Hubs ausgewählt haben.

Hinweis

Verwenden Sie den Produktionsmodus nur, wenn Sie Pushbenachrichtigungen an Benutzer senden möchten, die Ihre App im Store erworben haben.

OPTION 1: Verwenden eines P12-Pushzertifikats

  1. Wählen Sie Certificateaus.

  2. Wählen Sie das Dateisymbol aus.

  3. Wählen Sie die P12-Datei aus, die Sie zuvor exportiert haben, und wählen Sie dann Öffnen aus.

  4. Geben Sie bei Bedarf das richtige Kennwort an.

  5. Wählen Sie den Modus Sandbox aus.

  6. Wählen Sie Speichern aus.

OPTION 2: Verwenden der tokenbasierten Authentifizierung

  1. Wählen Sie Token aus.

  2. Geben Sie die folgenden Werte ein, die Sie zuvor erworben haben:

    • Schlüssel-ID
    • Bundle-ID
    • Team-ID
    • Token
  3. Wählen Sie Sandbox aus.

  4. Wählen Sie Speichern aus.

Konfigurieren Ihres Notification Hubs mit FCM-Informationen

  1. Wählen Sie im linken Menü im Abschnitt Einstellungen die Option Google (GCM/FCM) aus.
  2. Geben Sie den Serverschlüssel ein, den Sie sich in der Google Firebase-Konsole notiert haben.
  3. Wählen Sie auf der Symbolleiste Speichern aus.

Erstellen einer ASP.NET Core Web-API-Back-End-Anwendung

In diesem Abschnitt erstellen Sie das ASP.NET Core Web-API-Back-End, um die Geräteregistrierung und das Senden von Benachrichtigungen an die React Native mobile App zu verarbeiten.

Erstellen eines Webprojekts

  1. Wählen Sie in Visual StudioDatei>Neue Projektmappe aus.

  2. Wählen Sie .NETCore-App>>ASP.NET Core>API>Weiter aus.

  3. Wählen Sie im Dialogfeld Neue ASP.NET Core Web-API konfigurierendie Option Zielframework von .NET Core 3.1 aus.

  4. Geben Sie pushDemoApi als Projektname ein, und wählen Sie dann Erstellen aus.

  5. Starten Sie das Debuggen (Eingabetaste), + um die app mit Vorlagen zu testen.

    Hinweis

    Die app mit Vorlagen ist so konfiguriert, dass der WeatherForecastController als launchUrl verwendet wird. Dies wird unter Eigenschaften>launchSettings.json festgelegt.

    Wenn Sie zur Meldung Ungültiges Entwicklungszertifikat gefunden aufgefordert werden:

    1. Klicken Sie auf Ja , um der Ausführung des Tools "dotnet dev-certs https" zuzustimmen, um dies zu beheben. Das Tool "dotnet dev-certs https" fordert Sie dann auf, ein Kennwort für das Zertifikat und das Kennwort für Ihren Keychain einzugeben.

    2. Klicken Sie auf Ja , wenn Sie aufgefordert werden, das neue Zertifikat zu installieren und dem neuen Zertifikat zu vertrauen, und geben Sie dann das Kennwort für Ihren Schlüsselbund ein.

  6. Erweitern Sie den Ordner Controller , und löschen Sie dann WeatherForecastController.cs.

  7. Löschen Sie WeatherForecast.cs.

  8. Richten Sie lokale Konfigurationswerte mit dem Geheimnis-Manager-Tool ein. Durch das Entkoppeln der Geheimnisse von der Lösung wird sichergestellt, dass sie nicht in der Quellcodeverwaltung landen. Öffnen Sie Terminal , wechseln Sie dann zum Verzeichnis der Projektdatei, und führen Sie die folgenden Befehle aus:

    dotnet user-secrets init
    dotnet user-secrets set "NotificationHub:Name" <value>
    dotnet user-secrets set "NotificationHub:ConnectionString" <value>
    

    Ersetzen Sie die Platzhalterwerte durch Ihren eigenen Notification Hub-Namen und Verbindungszeichenfolge Werte. Sie haben sich diese im Abschnitt Erstellen eines Notification Hubs notieren. Andernfalls können Sie sie in Azure nachschlagen.

    NotificationHub:Name:
    Weitere Informationen finden Sie unter Name in der Zusammenfassung der Grundlagen oben in der Übersicht.

    NotificationHub:ConnectionString:
    Weitere Informationen finden Sie unter DefaultFullSharedAccessSignature unter Zugriffsrichtlinien.

    Hinweis

    Für Produktionsszenarien können Sie Optionen wie Azure KeyVault anzeigen, um die Verbindungszeichenfolge sicher zu speichern. Der Einfachheit halber werden die Geheimnisse den Azure App Service Anwendungseinstellungen hinzugefügt.

Authentifizieren von Clients mithilfe eines API-Schlüssels (optional)

API-Schlüssel sind nicht so sicher wie Token, reichen aber für die Zwecke dieses Tutorials aus. Ein API-Schlüssel kann einfach über die ASP.NET Middleware konfiguriert werden.

  1. Fügen Sie den lokalen Konfigurationswerten den API-Schlüssel hinzu.

    dotnet user-secrets set "Authentication:ApiKey" <value>
    

    Hinweis

    Ersetzen Sie den Platzhalterwert durch Ihren eigenen Wert, und notieren Sie sich ihn.

  2. Steuerung + Klicken Sie auf das Projekt PushDemoApi, wählen Sie im Menü Hinzufügen die Option Neuer Ordner aus, und klicken Sie dann auf Mithilfe der Authentifizierung als Ordnernamehinzufügen.

  3. Steuerung + Klicken Sie auf den Ordner Authentifizierung, und wählen Sie dann im Menü Hinzufügen die Option Neue Datei... aus.

  4. Wählen Sie Allgemein>Leere Klasse aus, geben Sie ApiKeyAuthOptions.cs als Name ein, und klicken Sie dann auf Neu , um die folgende Implementierung hinzuzufügen.

    using Microsoft.AspNetCore.Authentication;
    
    namespace PushDemoApi.Authentication
    {
        public class ApiKeyAuthOptions : AuthenticationSchemeOptions
        {
            public const string DefaultScheme = "ApiKey";
            public string Scheme => DefaultScheme;
            public string ApiKey { get; set; }
        }
    }
    
  5. Fügen Sie dem Authentifizierungsordnermit dem Namen ApiKeyAuthHandler.cs eine weitere leere Klasse hinzu, und fügen Sie dann die folgende Implementierung hinzu.

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Security.Claims;
    using System.Text.Encodings.Web;
    using System.Threading.Tasks;
    using Microsoft.AspNetCore.Authentication;
    using Microsoft.Extensions.Logging;
    using Microsoft.Extensions.Options;
    
    namespace PushDemoApi.Authentication
    {
        public class ApiKeyAuthHandler : AuthenticationHandler<ApiKeyAuthOptions>
        {
            const string ApiKeyIdentifier = "apikey";
    
            public ApiKeyAuthHandler(
                IOptionsMonitor<ApiKeyAuthOptions> options,
                ILoggerFactory logger,
                UrlEncoder encoder,
                ISystemClock clock)
                : base(options, logger, encoder, clock) {}
    
            protected override Task<AuthenticateResult> HandleAuthenticateAsync()
            {
                string key = string.Empty;
    
                if (Request.Headers[ApiKeyIdentifier].Any())
                {
                    key = Request.Headers[ApiKeyIdentifier].FirstOrDefault();
                }
                else if (Request.Query.ContainsKey(ApiKeyIdentifier))
                {
                    if (Request.Query.TryGetValue(ApiKeyIdentifier, out var queryKey))
                        key = queryKey;
                }
    
                if (string.IsNullOrWhiteSpace(key))
                    return Task.FromResult(AuthenticateResult.Fail("No api key provided"));
    
                if (!string.Equals(key, Options.ApiKey, StringComparison.Ordinal))
                    return Task.FromResult(AuthenticateResult.Fail("Invalid api key."));
    
                var identities = new List<ClaimsIdentity> {
                    new ClaimsIdentity("ApiKeyIdentity")
                };
    
                var ticket = new AuthenticationTicket(
                    new ClaimsPrincipal(identities), Options.Scheme);
    
                return Task.FromResult(AuthenticateResult.Success(ticket));
            }
        }
    }
    

    Hinweis

    Ein Authentifizierungshandler ist ein Typ, der das Verhalten eines Schemas implementiert, in diesem Fall ein benutzerdefiniertes API-Schlüsselschema.

  6. Fügen Sie dem Authentifizierungsordner mit dem Namen ApiKeyAuthenticationBuilderExtensions.cs eine weitere leere Klasse hinzu, und fügen Sie dann die folgende Implementierung hinzu.

    using System;
    using Microsoft.AspNetCore.Authentication;
    
    namespace PushDemoApi.Authentication
    {
        public static class AuthenticationBuilderExtensions
        {
            public static AuthenticationBuilder AddApiKeyAuth(
                this AuthenticationBuilder builder,
                Action<ApiKeyAuthOptions> configureOptions)
            {
                return builder
                    .AddScheme<ApiKeyAuthOptions, ApiKeyAuthHandler>(
                        ApiKeyAuthOptions.DefaultScheme,
                        configureOptions);
            }
        }
    }
    

    Hinweis

    Diese Erweiterungsmethode vereinfacht den Middlewarekonfigurationscode in Startup.cs macht ihn lesbarer und im Allgemeinen einfacher zu befolgen.

  7. Aktualisieren Sie in Startup.cs die ConfigureServices-Methode , um die API-Schlüsselauthentifizierung unterhalb des Aufrufs der Dienste zu konfigurieren . AddControllers-Methode .

    using PushDemoApi.Authentication;
    using PushDemoApi.Models;
    using PushDemoApi.Services;
    
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddControllers();
    
        services.AddAuthentication(options =>
        {
            options.DefaultAuthenticateScheme = ApiKeyAuthOptions.DefaultScheme;
            options.DefaultChallengeScheme = ApiKeyAuthOptions.DefaultScheme;
        }).AddApiKeyAuth(Configuration.GetSection("Authentication").Bind);
    }
    
  8. Aktualisieren Sie noch in Startup.cs die Configure-Methode , um die UseAuthentication - und UseAuthorization-Erweiterungsmethoden für den IApplicationBuilder der App aufzurufen. Stellen Sie sicher, dass diese Methoden nach UseRouting und vor der App aufgerufen werden. UseEndpoints.

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
    
        app.UseHttpsRedirection();
    
        app.UseRouting();
    
        app.UseAuthentication();
    
        app.UseAuthorization();
    
        app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllers();
        });
    }
    

    Hinweis

    Durch Aufrufen von UseAuthentication wird die Middleware registriert, die die zuvor registrierten Authentifizierungsschemas (von ConfigureServices) verwendet. Dies muss vor jeder Middleware aufgerufen werden, die davon abhängt, dass Benutzer authentifiziert werden.

Hinzufügen von Abhängigkeiten und Konfigurieren von Diensten

ASP.NET Core unterstützt das Softwareentwurfsmuster Dependency Injection (DI), bei dem es sich um ein Verfahren zum Erreichen von Inversion of Control (IoC) zwischen Klassen und deren Abhängigkeiten handelt.

Die Verwendung des Notification Hubs und des Notification Hubs SDK für Back-End-Vorgänge wird in einem Dienst gekapselt. Der Dienst wird registriert und durch eine geeignete Abstraktion zur Verfügung gestellt.

  1. Steuerung + Klicken Sie auf den Ordner Abhängigkeiten , und wählen Sie nuGet-Pakete verwalten... aus.

  2. Suchen Sie nach Microsoft.Azure.NotificationHubs , und stellen Sie sicher, dass es aktiviert ist.

  3. Klicken Sie auf Pakete hinzufügen, und klicken Sie dann auf Akzeptieren , wenn Sie aufgefordert werden, die Lizenzbedingungen zu akzeptieren.

  4. Steuerung + Klicken Sie auf das Projekt PushDemoApi, wählen Sie im Menü Hinzufügen die Option Neuer Ordner aus, und klicken Sie dann auf Mithilfe von Modellen als Ordnernamehinzufügen.

  5. Steuerung + Klicken Sie auf den Ordner Modelle, und wählen Sie dann im Menü Hinzufügen die Option Neue Datei... aus.

  6. Wählen Sie Allgemein>Leere Klasse aus, geben Sie als NamePushTemplates.cs ein, und klicken Sie dann auf Neu, um die folgende Implementierung hinzuzufügen.

    namespace PushDemoApi.Models
    {
        public class PushTemplates
        {
            public class Generic
            {
                public const string Android = "{ \"notification\": { \"title\" : \"PushDemo\", \"body\" : \"$(alertMessage)\"}, \"data\" : { \"action\" : \"$(alertAction)\" } }";
                public const string iOS = "{ \"aps\" : {\"alert\" : \"$(alertMessage)\"}, \"action\" : \"$(alertAction)\" }";
            }
    
            public class Silent
            {
                public const string Android = "{ \"data\" : {\"message\" : \"$(alertMessage)\", \"action\" : \"$(alertAction)\"} }";
                public const string iOS = "{ \"aps\" : {\"content-available\" : 1, \"apns-priority\": 5, \"sound\" : \"\", \"badge\" : 0}, \"message\" : \"$(alertMessage)\", \"action\" : \"$(alertAction)\" }";
            }
        }
    }
    

    Hinweis

    Diese Klasse enthält die tokenisierten Benachrichtigungsnutzlasten für die generischen und automatischen Benachrichtigungen, die für dieses Szenario erforderlich sind. Die Nutzlasten werden außerhalb der Installation definiert, um Experimente zu ermöglichen, ohne vorhandene Installationen über den Dienst aktualisieren zu müssen. Die Behandlung von Änderungen an Installationen auf diese Weise liegt außerhalb des Rahmens für dieses Tutorial. Für die Produktion sollten Sie benutzerdefinierte Vorlagen in Betracht ziehen.

  7. Fügen Sie dem Ordner Models mit dem Namen DeviceInstallation.cs eine weitere leere Klasse hinzu, und fügen Sie dann die folgende Implementierung hinzu.

    using System.Collections.Generic;
    using System.ComponentModel.DataAnnotations;
    
    namespace PushDemoApi.Models
    {
        public class DeviceInstallation
        {
            [Required]
            public string InstallationId { get; set; }
    
            [Required]
            public string Platform { get; set; }
    
            [Required]
            public string PushChannel { get; set; }
    
            public IList<string> Tags { get; set; } = Array.Empty<string>();
        }
    }
    
  8. Fügen Sie dem Ordner Models mit dem Namen NotificationRequest.cs eine weitere leere Klasse hinzu, und fügen Sie dann die folgende Implementierung hinzu.

    using System;
    
    namespace PushDemoApi.Models
    {
        public class NotificationRequest
        {
            public string Text { get; set; }
            public string Action { get; set; }
            public string[] Tags { get; set; } = Array.Empty<string>();
            public bool Silent { get; set; }
        }
    }
    
  9. Fügen Sie dem Ordner Models mit dem Namen NotificationHubOptions.cs eine weitere leere Klasse hinzu, und fügen Sie dann die folgende Implementierung hinzu.

    using System.ComponentModel.DataAnnotations;
    
    namespace PushDemoApi.Models
    {
        public class NotificationHubOptions
        {
            [Required]
            public string Name { get; set; }
    
            [Required]
            public string ConnectionString { get; set; }
        }
    }
    
  10. Fügen Sie dem Projekt PushDemoApi einen neuen Ordner mit dem Namen Services hinzu.

  11. Fügen Sie dem Ordner Dienste mit dem Namen INotificationService.cs eine leere Schnittstelle hinzu, und fügen Sie dann die folgende Implementierung hinzu.

    using System.Threading;
    using System.Threading.Tasks;
    using PushDemoApi.Models;
    
    namespace PushDemoApi.Services
    {
        public interface INotificationService
        {
            Task<bool> CreateOrUpdateInstallationAsync(DeviceInstallation deviceInstallation, CancellationToken token);
            Task<bool> DeleteInstallationByIdAsync(string installationId, CancellationToken token);
            Task<bool> RequestNotificationAsync(NotificationRequest notificationRequest, CancellationToken token);
        }
    }
    
  12. Fügen Sie dem Ordner Services mit dem Namen NotificationHubsService.cs eine leere Klasse hinzu, und fügen Sie dann den folgenden Code hinzu, um die INotificationService-Schnittstelle zu implementieren:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Threading;
    using System.Threading.Tasks;
    using Microsoft.Azure.NotificationHubs;
    using Microsoft.Extensions.Logging;
    using Microsoft.Extensions.Options;
    using PushDemoApi.Models;
    
    namespace PushDemoApi.Services
    {
        public class NotificationHubService : INotificationService
        {
            readonly NotificationHubClient _hub;
            readonly Dictionary<string, NotificationPlatform> _installationPlatform;
            readonly ILogger<NotificationHubService> _logger;
    
            public NotificationHubService(IOptions<NotificationHubOptions> options, ILogger<NotificationHubService> logger)
            {
                _logger = logger;
                _hub = NotificationHubClient.CreateClientFromConnectionString(
                    options.Value.ConnectionString,
                    options.Value.Name);
    
                _installationPlatform = new Dictionary<string, NotificationPlatform>
                {
                    { nameof(NotificationPlatform.Apns).ToLower(), NotificationPlatform.Apns },
                    { nameof(NotificationPlatform.Fcm).ToLower(), NotificationPlatform.Fcm }
                };
            }
    
            public async Task<bool> CreateOrUpdateInstallationAsync(DeviceInstallation deviceInstallation, CancellationToken token)
            {
                if (string.IsNullOrWhiteSpace(deviceInstallation?.InstallationId) ||
                    string.IsNullOrWhiteSpace(deviceInstallation?.Platform) ||
                    string.IsNullOrWhiteSpace(deviceInstallation?.PushChannel))
                    return false;
    
                var installation = new Installation()
                {
                    InstallationId = deviceInstallation.InstallationId,
                    PushChannel = deviceInstallation.PushChannel,
                    Tags = deviceInstallation.Tags
                };
    
                if (_installationPlatform.TryGetValue(deviceInstallation.Platform, out var platform))
                    installation.Platform = platform;
                else
                    return false;
    
                try
                {
                    await _hub.CreateOrUpdateInstallationAsync(installation, token);
                }
                catch
                {
                    return false;
                }
    
                return true;
            }
    
            public async Task<bool> DeleteInstallationByIdAsync(string installationId, CancellationToken token)
            {
                if (string.IsNullOrWhiteSpace(installationId))
                    return false;
    
                try
                {
                    await _hub.DeleteInstallationAsync(installationId, token);
                }
                catch
                {
                    return false;
                }
    
                return true;
            }
    
            public async Task<bool> RequestNotificationAsync(NotificationRequest notificationRequest, CancellationToken token)
            {
                if ((notificationRequest.Silent &&
                    string.IsNullOrWhiteSpace(notificationRequest?.Action)) ||
                    (!notificationRequest.Silent &&
                    (string.IsNullOrWhiteSpace(notificationRequest?.Text)) ||
                    string.IsNullOrWhiteSpace(notificationRequest?.Action)))
                    return false;
    
                var androidPushTemplate = notificationRequest.Silent ?
                    PushTemplates.Silent.Android :
                    PushTemplates.Generic.Android;
    
                var iOSPushTemplate = notificationRequest.Silent ?
                    PushTemplates.Silent.iOS :
                    PushTemplates.Generic.iOS;
    
                var androidPayload = PrepareNotificationPayload(
                    androidPushTemplate,
                    notificationRequest.Text,
                    notificationRequest.Action);
    
                var iOSPayload = PrepareNotificationPayload(
                    iOSPushTemplate,
                    notificationRequest.Text,
                    notificationRequest.Action);
    
                try
                {
                    if (notificationRequest.Tags.Length == 0)
                    {
                        // This will broadcast to all users registered in the notification hub
                        await SendPlatformNotificationsAsync(androidPayload, iOSPayload, token);
                    }
                    else if (notificationRequest.Tags.Length <= 20)
                    {
                        await SendPlatformNotificationsAsync(androidPayload, iOSPayload, notificationRequest.Tags, token);
                    }
                    else
                    {
                        var notificationTasks = notificationRequest.Tags
                            .Select((value, index) => (value, index))
                            .GroupBy(g => g.index / 20, i => i.value)
                            .Select(tags => SendPlatformNotificationsAsync(androidPayload, iOSPayload, tags, token));
    
                        await Task.WhenAll(notificationTasks);
                    }
    
                    return true;
                }
                catch (Exception e)
                {
                    _logger.LogError(e, "Unexpected error sending notification");
                    return false;
                }
            }
    
            string PrepareNotificationPayload(string template, string text, string action) => template
                .Replace("$(alertMessage)", text, StringComparison.InvariantCulture)
                .Replace("$(alertAction)", action, StringComparison.InvariantCulture);
    
            Task SendPlatformNotificationsAsync(string androidPayload, string iOSPayload, CancellationToken token)
            {
                var sendTasks = new Task[]
                {
                    _hub.SendFcmNativeNotificationAsync(androidPayload, token),
                    _hub.SendAppleNativeNotificationAsync(iOSPayload, token)
                };
    
                return Task.WhenAll(sendTasks);
            }
    
            Task SendPlatformNotificationsAsync(string androidPayload, string iOSPayload, IEnumerable<string> tags, CancellationToken token)
            {
                var sendTasks = new Task[]
                {
                    _hub.SendFcmNativeNotificationAsync(androidPayload, tags, token),
                    _hub.SendAppleNativeNotificationAsync(iOSPayload, tags, token)
                };
    
                return Task.WhenAll(sendTasks);
            }
        }
    }
    

    Hinweis

    Der für SendTemplateNotificationAsync bereitgestellte Tagausdruck ist auf 20 Tags beschränkt. Er ist für die meisten Operatoren auf 6 beschränkt, aber der Ausdruck enthält in diesem Fall nur ORs (||). Wenn die Anforderung mehr als 20 Tags enthält, müssen diese in mehrere Anforderungen aufgeteilt werden. Weitere Informationen finden Sie in der Dokumentation zu Routing- und Tagausdrücken .

  13. Aktualisieren Sie in Startup.cs die ConfigureServices-Methode , um NotificationHubsService als Singletonimplementierung von INotificationService hinzuzufügen.

    
    using PushDemoApi.Models;
    using PushDemoApi.Services;
    
    public void ConfigureServices(IServiceCollection services)
    {
        ...
    
        services.AddSingleton<INotificationService, NotificationHubService>();
    
        services.AddOptions<NotificationHubOptions>()
            .Configure(Configuration.GetSection("NotificationHub").Bind)
            .ValidateDataAnnotations();
    }
    

Erstellen der Benachrichtigungs-API

  1. Steuerung + Klicken Sie auf den Ordner Controller, und wählen Sie dann im Menü Hinzufügen die Option Neue Datei... aus.

  2. Wählen Sie ASP.NET Core>Web-API-Controllerklasse aus, geben Sie NotificationsController als Namen ein, und klicken Sie dann auf Neu.

    Hinweis

    Wenn Sie Visual Studio 2019 verwenden, wählen Sie die Vorlage API Controller mit Lese-/Schreibaktionen aus.

  3. Fügen Sie am Anfang der Datei die folgenden Namespaces hinzu.

    using System.ComponentModel.DataAnnotations;
    using System.Net;
    using System.Threading;
    using System.Threading.Tasks;
    using Microsoft.AspNetCore.Authorization;
    using Microsoft.AspNetCore.Mvc;
    using PushDemoApi.Models;
    using PushDemoApi.Services;
    
  4. Aktualisieren Sie den mit Vorlagen versehenen Controller so, dass er von ControllerBase abgeleitet und mit dem ApiController-Attribut ergänzt wird.

    [ApiController]
    [Route("api/[controller]")]
    public class NotificationsController : ControllerBase
    {
        // Templated methods here
    }
    

    Hinweis

    Die Controller-Basisklasse bietet Unterstützung für Ansichten, aber dies ist in diesem Fall nicht erforderlich, sodass stattdessen ControllerBase verwendet werden kann. Wenn Sie Visual Studio 2019 verwenden, können Sie diesen Schritt überspringen.

  5. Wenn Sie den Abschnitt Authentifizieren von Clients mithilfe eines API-Schlüssels ausgewählt haben, sollten Sie den NotificationsController ebenfalls mit dem Attribut Authorize versehen.

    [Authorize]
    
  6. Aktualisieren Sie den Konstruktor, um die registrierte instance von INotificationService als Argument zu akzeptieren und einem schreibgeschützten Member zuzuweisen.

    readonly INotificationService _notificationService;
    
    public NotificationsController(INotificationService notificationService)
    {
        _notificationService = notificationService;
    }
    
  7. Ändern Sie in launchSettings.json (im Ordner Eigenschaften ) die einstellung launchUrl von weatherforecast in api/notifications , um der url zu entsprechen, die im Attribut RegistrationsControllerRoute angegeben ist.

  8. Starten Sie das Debuggen (Eingabetaste), + um zu überprüfen, ob die App mit dem neuen NotificationsController funktioniert, und gibt einen nicht autorisierten status 401 zurück.

    Hinweis

    Visual Studio startet die App möglicherweise nicht automatisch im Browser. Ab diesem Zeitpunkt verwenden Sie Postman , um die API zu testen.

  9. Legen Sie auf einer neuen Postman-Registerkarte die Anforderung auf GET fest. Geben Sie die folgende Adresse ein, und ersetzen Sie den Platzhalter <applicationUrl> durch den https applicationUrl unter Eigenschaften>launchSettings.json.

    <applicationUrl>/api/notifications
    

    Hinweis

    ApplicationUrl sollte für das Standardprofil "https://localhost:5001" sein. Wenn Sie IIS verwenden (Standardeinstellung in Visual Studio 2019 unter Windows), sollten Sie stattdessen die im iisSettings-Element angegebene applicationUrl verwenden. Wenn die Adresse falsch ist, erhalten Sie die Antwort 404.

  10. Wenn Sie den Abschnitt Authentifizieren von Clients mithilfe eines API-Schlüssels ausgewählt haben, müssen Sie die Anforderungsheader so konfigurieren, dass sie Ihren apikey-Wert enthalten.

    Schlüssel Wert
    apikey <your_api_key>
  11. Klicken Sie auf die Schaltfläche Senden .

    Hinweis

    Sie sollten eine 200 OK-status mit JSON-Inhalten erhalten.

    Wenn Sie eine SSL-Zertifikatüberprüfungswarnung erhalten, können Sie die Postman-Einstellung SSL-Zertifikatüberprüfung anfordern in den Einstellungen deaktivieren.

  12. Ersetzen Sie die Methoden der vorlagenbasierten Klasse in NotificationsController.cs durch den folgenden Code.

    [HttpPut]
    [Route("installations")]
    [ProducesResponseType((int)HttpStatusCode.OK)]
    [ProducesResponseType((int)HttpStatusCode.BadRequest)]
    [ProducesResponseType((int)HttpStatusCode.UnprocessableEntity)]
    public async Task<IActionResult> UpdateInstallation(
        [Required]DeviceInstallation deviceInstallation)
    {
        var success = await _notificationService
            .CreateOrUpdateInstallationAsync(deviceInstallation, HttpContext.RequestAborted);
    
        if (!success)
            return new UnprocessableEntityResult();
    
        return new OkResult();
    }
    
    [HttpDelete()]
    [Route("installations/{installationId}")]
    [ProducesResponseType((int)HttpStatusCode.OK)]
    [ProducesResponseType((int)HttpStatusCode.BadRequest)]
    [ProducesResponseType((int)HttpStatusCode.UnprocessableEntity)]
    public async Task<ActionResult> DeleteInstallation(
        [Required][FromRoute]string installationId)
    {
        var success = await _notificationService
            .DeleteInstallationByIdAsync(installationId, CancellationToken.None);
    
        if (!success)
            return new UnprocessableEntityResult();
    
        return new OkResult();
    }
    
    [HttpPost]
    [Route("requests")]
    [ProducesResponseType((int)HttpStatusCode.OK)]
    [ProducesResponseType((int)HttpStatusCode.BadRequest)]
    [ProducesResponseType((int)HttpStatusCode.UnprocessableEntity)]
    public async Task<IActionResult> RequestPush(
        [Required]NotificationRequest notificationRequest)
    {
        if ((notificationRequest.Silent &&
            string.IsNullOrWhiteSpace(notificationRequest?.Action)) ||
            (!notificationRequest.Silent &&
            string.IsNullOrWhiteSpace(notificationRequest?.Text)))
            return new BadRequestResult();
    
        var success = await _notificationService
            .RequestNotificationAsync(notificationRequest, HttpContext.RequestAborted);
    
        if (!success)
            return new UnprocessableEntityResult();
    
        return new OkResult();
    }
    

Erstellen der API-App

Sie erstellen nun eine API-App in Azure App Service zum Hosten des Back-End-Diensts.

  1. Melden Sie sich beim Azure-Portal an.

  2. Klicken Sie auf Ressource erstellen, suchen Sie nach API-App, und wählen Sie sie aus, und klicken Sie dann auf Erstellen.

  3. Aktualisieren Sie die folgenden Felder, und klicken Sie dann auf Erstellen.

    App-Name:
    Geben Sie einen global eindeutigen Namen für die API-App ein.

    Abonnement:
    Wählen Sie dasselbe Zielabonnement aus, in dem Sie den Notification Hub erstellt haben.

    Ressourcengruppe:
    Wählen Sie dieselbe Ressourcengruppe aus, in der Sie den Notification Hub erstellt haben.

    App Service Plan/Standort:
    Erstellen eines neuen App Service Plans

    Hinweis

    Wechseln Sie von der Standardoption zu einem Plan, der SSL-Unterstützung enthält. Andernfalls müssen Sie beim Arbeiten mit der mobilen App die entsprechenden Schritte ausführen, um zu verhindern , dass HTTP-Anforderungen blockiert werden.

    Application Insights:
    Behalten Sie die vorgeschlagene Option bei (eine neue Ressource wird mit diesem Namen erstellt), oder wählen Sie eine vorhandene Ressource aus.

  4. Nachdem die API-App bereitgestellt wurde, navigieren Sie zu dieser Ressource.

  5. Notieren Sie sich die URL-Eigenschaft in der Zusammenfassung von Essentials oben in der Übersicht. Diese URL ist Ihr Back-End-Endpunkt , der später in diesem Tutorial verwendet wird.

    Hinweis

    Die URL verwendet den api-App-Namen, den Sie zuvor angegeben haben, im Format https://<app_name>.azurewebsites.net.

  6. Wählen Sie in der Liste (unter Einstellungen) die Option Konfiguration aus.

  7. Klicken Sie für jede der folgenden Einstellungen auf Neue Anwendungseinstellung , um den Namen und einen Wert einzugeben, und klicken Sie dann auf OK.

    NAME Wert
    Authentication:ApiKey <api_key_value>
    NotificationHub:Name <hub_name_value>
    NotificationHub:ConnectionString <hub_connection_string_value>

    Hinweis

    Dies sind die gleichen Einstellungen, die Sie zuvor in den Benutzereinstellungen definiert haben. Sie sollten in der Lage sein, diese zu kopieren. Die Einstellung Authentication:ApiKey ist nur erforderlich, wenn Sie den Abschnitt Authentifizieren von Clients mithilfe eines API-Schlüssels abgeschlossen haben. Für Produktionsszenarien können Sie Optionen wie Azure KeyVault anzeigen. Diese wurden der Einfachheit halber in diesem Fall als Anwendungseinstellungen hinzugefügt.

  8. Nachdem alle Anwendungseinstellungen hinzugefügt wurden, klicken Sie auf Speichern und dann auf Weiter.

Veröffentlichen des Back-End-Diensts

Als Nächstes stellen Sie die App in der API-App bereit, damit sie von allen Geräten aus zugänglich ist.

Hinweis

Die folgenden Schritte sind spezifisch für Visual Studio für Mac. Wenn Sie Visual Studio 2019 unter Windows verwenden, unterscheidet sich der Veröffentlichungsablauf. Weitere Informationen finden Sie unter Veröffentlichen in Azure App Service unter Windows.

  1. Ändern Sie Ihre Konfiguration von Debuggen in Release , wenn Sie dies noch nicht getan haben.

  2. Steuerung + Klicken Sie auf das Projekt PushDemoApi, und wählen Sie dann im Menü Veröffentlichen die Option In Azure veröffentlichen... aus.

  3. Befolgen Sie den Authentifizierungsflow, wenn Sie dazu aufgefordert werden. Verwenden Sie das Konto, das Sie im vorherigen Erstellen des Abschnitts API-App verwendet haben.

  4. Wählen Sie die Azure App Service API-App, die Sie zuvor erstellt haben, aus der Liste als Veröffentlichungsziel aus, und klicken Sie dann auf Veröffentlichen.

Nachdem Sie den Assistenten abgeschlossen haben, veröffentlicht er die App in Azure und öffnet dann die App. Notieren Sie sich die URL , falls Sie dies noch nicht getan haben. Diese URL ist Ihr Back-End-Endpunkt , der später in diesem Tutorial verwendet wird.

Überprüfen der veröffentlichten API

  1. Öffnen Sie in Postman eine neue Registerkarte, legen Sie die Anforderung auf PUT fest, und geben Sie die folgende Adresse ein. Ersetzen Sie den Platzhalter durch die Basisadresse, die Sie im vorherigen Abschnitt zum Veröffentlichen des Back-End-Diensts notieren haben.

    https://<app_name>.azurewebsites.net/api/notifications/installations
    

    Hinweis

    Die Basisadresse sollte das Format aufweisen. https://<app_name>.azurewebsites.net/

  2. Wenn Sie den Abschnitt Authentifizieren von Clients mithilfe eines API-Schlüssels abgeschlossen haben, müssen Sie die Anforderungsheader so konfigurieren, dass sie Ihren apikey-Wert enthalten.

    Schlüssel Wert
    apikey <your_api_key>
  3. Wählen Sie die Raw-Option für den Text aus, wählen Sie dann JSON aus der Liste der Formatoptionen aus, und fügen Sie dann einige Platzhalter-JSON-Inhalte ein:

    {}
    
  4. Klicken Sie auf Send.

    Hinweis

    Sie sollten eine 422 UnprocessableEntity-status vom Dienst erhalten.

  5. Führen Sie die Schritte 1 bis 4 erneut aus, aber geben Sie diesmal den Anforderungsendpunkt an, um zu überprüfen, dass Sie eine Antwort mit 400 fehlerhaften Anforderungen erhalten.

    https://<app_name>.azurewebsites.net/api/notifications/requests
    

Hinweis

Es ist noch nicht möglich, die API mit gültigen Anforderungsdaten zu testen, da dies plattformspezifische Informationen aus der mobilen Client-App erfordert.

Erstellen einer plattformübergreifenden React Native-Anwendung

In diesem Abschnitt erstellen Sie eine React Native mobilen Anwendung, die Pushbenachrichtigungen plattformübergreifend implementiert.

Sie können sich über den von Ihnen erstellten Back-End-Dienst bei einem Notification Hub registrieren und die Registrierung aufheben.

Eine Warnung wird angezeigt, wenn eine Aktion angegeben wird und sich die App im Vordergrund befindet. Andernfalls werden Benachrichtigungen im Notification Center angezeigt.

Hinweis

In der Regel führen Sie die Registrierungsaktionen (und die Registrierung aufheben) während des entsprechenden Punkts im Anwendungslebenszyklus (oder vielleicht als Teil Ihrer Ersten Ausführung) ohne explizite Benutzerregistrierungs-/Deregistrierungseingaben aus. Dieses Beispiel erfordert jedoch eine explizite Benutzereingabe, damit diese Funktionalität leichter untersucht und getestet werden kann.

Erstellen der React Native Lösung

  1. Aktualisieren TerminalSie in Ihre Umgebungstools, die für die Arbeit mit React Native erforderlich sind, mithilfe der folgenden Befehle:

    # install node
    brew install node
    # or update
    brew update node
    # install watchman
    brew install watchman
    # or update
    brew upgrade watchman
    # install cocoapods
    sudo gem install cocoapods
    
  2. Führen TerminalSie in den folgenden Befehl aus, wenn Sie die CLI installiert haben React Native , um ihn zu deinstallieren. Verwenden Sienpx, um automatisch auf die neueste verfügbare React Native CLI-Version zuzugreifen:

    npm uninstall -g react-native-cli
    

    Hinweis

    React Native verfügt über eine integrierte Befehlszeilenschnittstelle. Anstatt eine bestimmte Version der CLI global zu installieren und zu verwalten, wird empfohlen, auf die aktuelle Version zur Laufzeit zuzugreifen, indem npxSie verwenden, die mit Node.js ausgeliefert wird. Mit npx react-native <command>wird die aktuelle stabile Version der CLI heruntergeladen und zum Zeitpunkt der Befehlsausführung ausgeführt.

  3. Navigieren Sie zu Ihrem Projektordner, in dem Sie die neue Anwendung erstellen möchten. Verwenden Sie die Typescript-basierte Vorlage, indem Sie den --template Parameter angeben:

    # init new project with npx
    npx react-native init PushDemo --template react-native-template-typescript
    
  4. Führen Sie den Metro-Server aus, der JavaScript-Bundles erstellt und alle Codeupdates überwacht, um die Bundles in Echtzeit zu aktualisieren:

    cd PushDemo
    npx react-native start
    
  5. Führen Sie die iOS-App aus, um das Setup zu überprüfen. Stellen Sie sicher, dass Sie einen iOS-Simulator gestartet oder ein iOS-Gerät verbunden haben, bevor Sie den folgenden Befehl ausführen:

    npx react-native run-ios
    
  6. Führen Sie die Android-App aus, um das Setup zu überprüfen. Es sind einige zusätzliche Schritte erforderlich, um einen Android-Emulator oder ein Android-Gerät zu konfigurieren, um auf den React Native Metro-Server zugreifen zu können. Mit den folgenden Befehlen wird ein erstes JavaScript-Bundle für Android generiert und im Ressourcenordner abgelegt.

    # create assets folder for the bundle
    mkdir android/app/scr/main/assets
    # build the bundle
    npx react-native bundle --platform android --dev true --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
    # enable ability for sim to access the localhost
    adb reverse tcp:8081 tcp:8081
    

    Dieses Skript wird mit der ersten Version der App vorab bereitgestellt. Konfigurieren Sie nach der Bereitstellung Ihren Emulator oder Ihr Gerät für den Zugriff auf den Metro-Server, indem Sie die Server-IP-Adresse angeben. Führen Sie den folgenden Befehl aus, um die Android-Anwendung zu erstellen und auszuführen:

    npx react-native run-android
    

    Sobald Sie sich in der App befinden, drücken CMD+M Sie (Emulator) oder schütteln Sie das Gerät, um die Entwicklereinstellungen aufzufüllen, navigieren Sie zuChange Bundle LocationSettings> , und geben Sie die IP-Adresse des Metro-Servers mit dem Standardport an: . <metro-server-ip-address>:8081

  7. Wenden Sie in der App.tsx Datei jede Änderung auf das Seitenlayout an, speichern Sie sie, und die Änderung wird automatisch in iOS- und Android-Apps widerspiegelt.

    Hinweis

    Ausführliche Anleitung zum Einrichten der Entwicklungsumgebung finden Sie in der offiziellen Dokumentation.

Installieren erforderlicher Pakete

Sie benötigen die folgenden drei Pakete, damit dieses Beispiel funktioniert:

  1. React Native Pushbenachrichtigungen für iOS-Projekt - GitHub

    Dieses Paket wurde erstellt, als PushNotificationIOS vom Kern von React Native getrennt wurde. Das Paket implementiert nativ Pushbenachrichtigungen für iOS und stellt React Native Schnittstelle für den Zugriff bereit. Führen Sie den folgenden Befehl aus, um das Paket zu installieren:

    yarn add @react-native-community/push-notification-ios
    
  2. plattformübergreifende React Native Pushbenachrichtigungen

    Dieses Paket implementiert lokale und Remotebenachrichtigungen unter iOS und Android plattformübergreifend. Führen Sie den folgenden Befehl aus, um das Paket zu installieren:

    yarn add react-native-push-notification
    
  3. Geräteinformationspaket Das Paket enthält Informationen zu einem Gerät in der Laufzeit. Verwenden Sie ihn, um einen Gerätebezeichner zu definieren, der zum Registrieren für Pushbenachrichtigungen verwendet wird. Führen Sie den folgenden Befehl aus, um das Paket zu installieren:

    yarn add react-native-device-info
    

Implementieren der plattformübergreifenden Komponenten

  1. Erstellen und Implementieren:DemoNotificationHandler

    import PushNotification from 'react-native-push-notification';
    
    class DemoNotificationHandler {
      private _onRegister: any;
      private _onNotification: any;
    
      onNotification(notification: any) {
        console.log('NotificationHandler:', notification);
    
        if (typeof this._onNotification === 'function') {
          this._onNotification(notification);
        }
      }
    
      onRegister(token: any) {
        console.log('NotificationHandler:', token);
    
        if (typeof this._onRegister === 'function') {
          this._onRegister(token);
        }
      }
    
      attachTokenReceived(handler: any) {
        this._onRegister = handler;
      }
    
      attachNotificationReceived(handler: any) {
        this._onNotification = handler;
      }
    }
    
    const handler = new DemoNotificationHandler();
    
    PushNotification.configure({
      onRegister: handler.onRegister.bind(handler),
      onNotification: handler.onNotification.bind(handler),
      permissions: {
        alert: true,
        badge: true,
        sound: true,
      },
      popInitialNotification: true,
      requestPermissions: true,
    });
    
    export default handler;
    
  2. Erstellen und Implementieren:DemoNotificationService

    import PushNotification from 'react-native-push-notification';
    import DemoNotificationHandler from './DemoNotificationHandler';
    
    export default class DemoNotificationService {
      constructor(onTokenReceived: any, onNotificationReceived: any) {
        DemoNotificationHandler.attachTokenReceived(onTokenReceived);
        DemoNotificationHandler.attachNotificationReceived(onNotificationReceived);
        PushNotification.getApplicationIconBadgeNumber(function(number: number) {
          if(number > 0) {
            PushNotification.setApplicationIconBadgeNumber(0);
          }
        });
      }
    
      checkPermissions(cbk: any) {
        return PushNotification.checkPermissions(cbk);
      }
    
      requestPermissions() {
        return PushNotification.requestPermissions();
      }
    
      cancelNotifications() {
        PushNotification.cancelLocalNotifications();
      }
    
      cancelAll() {
        PushNotification.cancelAllLocalNotifications();
      }
    
      abandonPermissions() {
        PushNotification.abandonPermissions();
      }
    }
    
  3. Erstellen und Implementieren:DemoNotificationRegistrationService

    export default class DemoNotificationService {
        constructor(
            readonly apiUrl: string,
            readonly apiKey: string) {
        }
    
    async registerAsync(request: any): Promise<Response> {
            const method = 'PUT';
            const registerApiUrl = `${this.apiUrl}/notifications/installations`;
            const result = await fetch(registerApiUrl, {
                method: method,
                headers: {
                    Accept: 'application/json',
                    'Content-Type': 'application/json',
                    'apiKey': this.apiKey
                },
                body: JSON.stringify(request)
            });
    
            this.validateResponse(registerApiUrl, method, request, result);
            return result;
        }
    
        async deregisterAsync(deviceId: string): Promise<Response> {
            const method = 'DELETE';
            const deregisterApiUrl = `${this.apiUrl}/notifications/installations/${deviceId}`;
            const result = await fetch(deregisterApiUrl, {
                method: method,
                headers: {
                    Accept: 'application/json',
                    'Content-Type': 'application/json',
                    'apiKey': this.apiKey
                }
            });
    
            this.validateResponse(deregisterApiUrl, method, null, result);
            return result;
        }
    
        private validateResponse(requestUrl: string, method: string, requestPayload: any, response: Response) {
            console.log(`Request: ${method} ${requestUrl} => ${JSON.stringify(requestPayload)}\nResponse: ${response.status}`);
            if (!response || response.status != 200) {
                throw `HTTP error ${response.status}: ${response.statusText}`;
            }
        }
    }
    
  4. Konfigurieren Sie die App. Öffnen Sie package.json die folgende Skriptdefinition, und fügen Sie sie hinzu:

    "configure": "cp .app.config.tsx src/config/AppConfig.tsx"
    

    Führen Sie dann dieses Skript aus, das die Standardkonfiguration in den config Ordner kopiert.

    yarn configure
    

    Der letzte Schritt besteht darin, die im vorherigen Schritt kopierte Konfigurationsdatei mit den API-Zugriffsinformationen zu aktualisieren. Geben Sie apiKey Parameter an:apiUrl

    module.exports = {
        appName: "PushDemo",
        env: "production",
        apiUrl: "https://<azure-push-notifications-api-url>/api/",
        apiKey: "<api-auth-key>",
    };
    

Implementieren der plattformübergreifenden Benutzeroberfläche

  1. Definieren des Seitenlayouts

    <View style={styles.container}>
      {this.state.isBusy &&
        <ActivityIndicator></ActivityIndicator>
      }
      <View style={styles.button}>
        <Button title="Register" onPress={this.onRegisterButtonPress.bind(this)} disabled={this.state.isBusy} />
      </View>
      <View style={styles.button}>
        <Button title="Deregister" onPress={this.onDeregisterButtonPress.bind(this)} disabled={this.state.isBusy} />
      </View>
    </View>
    
  2. Anwenden von Formatvorlagen

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        alignItems: "center",
        justifyContent: 'flex-end',
        margin: 50,
      },
      button: {
        margin: 5,
        width: "100%",
      }
    });
    
  3. Initialisieren der Seitenkomponente

      state: IState;
      notificationService: DemoNotificationService;
      notificationRegistrationService: DemoNotificationRegistrationService;
      deviceId: string;
    
      constructor(props: any) {
        super(props);
        this.deviceId = DeviceInfo.getUniqueId();
        this.state = {
          status: "Push notifications registration status is unknown",
          registeredOS: "",
          registeredToken: "",
          isRegistered: false,
          isBusy: false,
        };
    
        this.notificationService = new DemoNotificationService(
          this.onTokenReceived.bind(this),
          this.onNotificationReceived.bind(this),
        );
    
        this.notificationRegistrationService = new DemoNotificationRegistrationService(
          Config.apiUrl,
          Config.apiKey,
        );
      }
    
  4. Definieren von Schaltflächenklickhandlern

      async onRegisterButtonPress() {
        if (!this.state.registeredToken || !this.state.registeredOS) {
          Alert.alert("The push notifications token wasn't received.");
          return;
        }
    
        let status: string = "Registering...";
        let isRegistered = this.state.isRegistered;
        try {
          this.setState({ isBusy: true, status });
          const pnPlatform = this.state.registeredOS == "ios" ? "apns" : "fcm";
          const pnToken = this.state.registeredToken;
          const request = {
            installationId: this.deviceId,
            platform: pnPlatform,
            pushChannel: pnToken,
            tags: []
          };
          const response = await this.notificationRegistrationService.registerAsync(request);
          status = `Registered for ${this.state.registeredOS} push notifications`;
          isRegistered = true;
        } catch (e) {
          status = `Registration failed: ${e}`;
        }
        finally {
          this.setState({ isBusy: false, status, isRegistered });
        }
      }
    
      async onDeregisterButtonPress() {
        if (!this.notificationService)
          return;
    
        let status: string = "Deregistering...";
        let isRegistered = this.state.isRegistered;
        try {
          this.setState({ isBusy: true, status });
          await this.notificationRegistrationService.deregisterAsync(this.deviceId);
          status = "Deregistered from push notifications";
          isRegistered = false;
        } catch (e) {
          status = `Deregistration failed: ${e}`;
        }
        finally {
          this.setState({ isBusy: false, status, isRegistered });
        }
      }
    
  5. Behandeln empfangener Tokenregistrierungen und Pushbenachrichtigungen

      onTokenReceived(token: any) {
        console.log(`Received a notification token on ${token.os}`);
        this.setState({ registeredToken: token.token, registeredOS: token.os, status: `The push notifications token has been received.` });
    
        if (this.state.isRegistered && this.state.registeredToken && this.state.registeredOS) {
          this.onRegisterButtonPress();
        }
      }
    
      onNotificationReceived(notification: any) {
        console.log(`Received a push notification on ${this.state.registeredOS}`);
        this.setState({ status: `Received a push notification...` });
    
        if (notification.data.message) {
          Alert.alert(AppConfig.appName, `${notification.data.action} action received`);
        }
      }
    };
    

Konfigurieren des nativen Android-Projekts für Pushbenachrichtigungen

Konfigurieren erforderlicher Android-Pakete

Das Paket wird beim Erstellen der App automatisch verknüpft . Im Folgenden sind einige zusätzliche Schritte erforderlich, um den Konfigurationsprozess abzuschließen.

Konfigurieren des Android-Manifests

Überprüfen Sie in "android/app/src/Standard/AndroidManifest.xml" den Paketnamen, die Berechtigungen und die erforderlichen Dienste. Stellen Sie sicher, dass Sie RNPushNotificationPublisher die Empfänger und RNPushNotificationBootEventReceiver den RNPushNotificationListenerService Dienst registriert haben. Die Benachrichtigungsmetadaten können verwendet werden, um die Darstellung Ihrer Pushbenachrichtigungen anzupassen.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="YOUR_PACKAGE_NAME">

      <uses-permission android:name="android.permission.INTERNET" />
      <uses-permission android:name="android.permission.WAKE_LOCK" />
      <uses-permission android:name="android.permission.VIBRATE" />
      <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>

      <application
        android:name=".MainApplication"
        android:label="@string/app_name"
        android:usesCleartextTraffic="true"
        android:icon="@mipmap/ic_launcher"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:allowBackup="false"
        android:theme="@style/AppTheme">

        <meta-data  android:name="com.dieam.reactnativepushnotification.notification_channel_name"
                    android:value="PushDemo Channel"/>
        <meta-data  android:name="com.dieam.reactnativepushnotification.notification_channel_description"
                    android:value="PushDemo Channel Description"/>
        <meta-data  android:name="com.dieam.reactnativepushnotification.notification_foreground"
                    android:value="true"/>
        <meta-data  android:name="com.dieam.reactnativepushnotification.notification_color"
                    android:resource="@android:color/white"/>

        <receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationPublisher" />
        <receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationBootEventReceiver">
            <intent-filter>
                <action android:name="android.intent.action.BOOT_COMPLETED" />
            </intent-filter>
        </receiver>

        <service
            android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationListenerService"
            android:exported="false" >
            <intent-filter>
                <action android:name="com.google.firebase.MESSAGING_EVENT" />
            </intent-filter>
        </service>

        <activity
          android:name=".MainActivity"
          android:label="@string/app_name"
          android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
          android:launchMode="singleTask"
          android:windowSoftInputMode="adjustResize">
          <intent-filter>
              <action android:name="android.intent.action.MAIN" />
              <category android:name="android.intent.category.LAUNCHER" />
          </intent-filter>
        </activity>
        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
      </application>

</manifest>

Konfigurieren von Google-Diensten

Registrieren Sie unter "android/app/build.gradle" Google Services:

dependencies {
  ...
  implementation 'com.google.firebase:firebase-analytics:17.3.0'
  ...
}

apply plugin: 'com.google.gms.google-services'

Kopieren Sie die datei "google-services.json", die Sie während des FCM-Setups heruntergeladen haben, in den Projektordner "android/app/".

Behandeln von Pushbenachrichtigungen für Android

Sie haben den vorhandenen RNPushNotificationListenerService Dienst so konfiguriert, dass eingehende Android-Pushbenachrichtigungen verarbeitet werden. Dieser Dienst wurde zuvor im Anwendungsmanifest registriert. Es verarbeitet eingehende Benachrichtigungen und leitet diese an den plattformübergreifenden React Native Teil weiter. Es sind keine zusätzlichen Schritte erforderlich.

Konfigurieren des nativen iOS-Projekts für Pushbenachrichtigungen

Konfigurieren erforderlicher iOS-Pakete

Das Paket wird beim Erstellen der App automatisch verknüpft . Sie müssen lediglich die nativen Pods installieren:

npx pod-install

Konfigurieren von Info.plist und Entitlements.plist

  1. Wechseln Sie in Ihren Ordner "PushDemo/ios", öffnen Sie den Arbeitsbereich "PushDemo.xcworkspace", wählen Sie das oberste Projekt "PushDemo" aus, und wählen Sie die Registerkarte "Signieren & Funktionen" aus.

  2. Aktualisieren Sie den Bundle-Bezeichner so, dass er dem im Bereitstellungsprofil verwendeten Wert entspricht.

  3. Fügen Sie mithilfe der Schaltfläche "+" zwei neue Funktionen hinzu:

    • Hintergrundmodusfunktion, und aktivieren Sie Remotebenachrichtigungen.
    • Funktion "Pushbenachrichtigungen"

Behandeln von Pushbenachrichtigungen für iOS

  1. Öffnen Sie "AppDelegate.h", und fügen Sie den folgenden Import hinzu:

    #import <UserNotifications/UNUserNotificationCenter.h>
    
  2. Aktualisieren Sie die Liste der Protokolle, die von "AppDelegate" unterstützt werden, indem Sie hinzufügen UNUserNotificationCenterDelegate:

    @interface AppDelegate : UIResponder <UIApplicationDelegate, RCTBridgeDelegate, UNUserNotificationCenterDelegate>
    
  3. Öffnen Sie "AppDelegate.m", und konfigurieren Sie alle erforderlichen iOS-Rückrufe:

    #import <UserNotifications/UserNotifications.h>
    #import <RNCPushNotificationIOS.h>
    
    ...
    
    // Required to register for notifications
    - (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings
    {
     [RNCPushNotificationIOS didRegisterUserNotificationSettings:notificationSettings];
    }
    
    // Required for the register event.
    - (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken
    {
     [RNCPushNotificationIOS didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
    }
    
    // Required for the notification event. You must call the completion handler after handling the remote notification.
    - (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo
    fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler
    {
      [RNCPushNotificationIOS didReceiveRemoteNotification:userInfo fetchCompletionHandler:completionHandler];
    }
    
    // Required for the registrationError event.
    - (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error
    {
     [RNCPushNotificationIOS didFailToRegisterForRemoteNotificationsWithError:error];
    }
    
    // IOS 10+ Required for localNotification event
    - (void)userNotificationCenter:(UNUserNotificationCenter *)center
    didReceiveNotificationResponse:(UNNotificationResponse *)response
             withCompletionHandler:(void (^)(void))completionHandler
    {
      [RNCPushNotificationIOS didReceiveNotificationResponse:response];
      completionHandler();
    }
    
    // IOS 4-10 Required for the localNotification event.
    - (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification
    {
     [RNCPushNotificationIOS didReceiveLocalNotification:notification];
    }
    
    //Called when a notification is delivered to a foreground app.
    -(void)userNotificationCenter:(UNUserNotificationCenter *)center willPresentNotification:(UNNotification *)notification withCompletionHandler:(void (^)(UNNotificationPresentationOptions options))completionHandler
    {
      completionHandler(UNAuthorizationOptionSound | UNAuthorizationOptionAlert | UNAuthorizationOptionBadge);
    }
    

Testen der Lösung

Sie können jetzt das Senden von Benachrichtigungen über den Back-End-Dienst testen.

Senden einer Testbenachrichtigung

  1. Öffnen Sie in Postman eine neue Registerkarte.

  2. Legen Sie die Anforderung auf POST fest, und geben Sie die folgende Adresse ein:

    https://<app_name>.azurewebsites.net/api/notifications/requests
    
  3. Wenn Sie den Abschnitt Authentifizieren von Clients mithilfe eines API-Schlüssels abgeschlossen haben, müssen Sie die Anforderungsheader so konfigurieren, dass sie Ihren apikey-Wert enthalten.

    Schlüssel Wert
    apikey <your_api_key>
  4. Wählen Sie die Raw-Option für den Text aus, wählen Sie dann JSON aus der Liste der Formatoptionen aus, und fügen Sie dann einige Platzhalter-JSON-Inhalte ein:

    {
        "text": "Message from Postman!",
        "action": "action_a"
    }
    
  5. Wählen Sie die Schaltfläche Code aus, die sich unter der Schaltfläche Speichern oben rechts im Fenster befindet. Die Anforderung sollte ähnlich wie das folgende Beispiel aussehen, wenn sie für HTML angezeigt wird (je nachdem, ob Sie einen apikey-Header enthalten haben):

    POST /api/notifications/requests HTTP/1.1
    Host: https://<app_name>.azurewebsites.net
    apikey: <your_api_key>
    Content-Type: application/json
    
    {
        "text": "Message from backend service",
        "action": "action_a"
    }
    
  6. Führen Sie die PushDemo-Anwendung auf einer oder beiden Zielplattformen (Android und iOS) aus.

    Hinweis

    Wenn Sie unter Android testen, stellen Sie sicher, dass Sie nicht in Debuggen ausgeführt werden, oder wenn die App bereitgestellt wurde, indem Sie die Anwendung ausführen, dann erzwingen Sie das Schließen der App, und starten Sie sie über das Startprogramm erneut.

  7. Tippen Sie in der PushDemo-App auf die Schaltfläche Registrieren .

  8. Zurück zu Postman, schließen Sie das Fenster Codeausschnitte generieren (falls sie dies noch nicht getan haben), und klicken Sie dann auf die Schaltfläche Senden .

  9. Überprüfen Sie, ob Sie eine 200 OK-Antwort in Postman erhalten und die Warnung in der App angezeigt wird, die AktionA-Aktion empfangen.

  10. Schließen Sie die PushDemo-App, und klicken Sie dann in Postman erneut auf die Schaltfläche Senden.

  11. Überprüfen Sie, ob Sie in Postman erneut eine Antwort mit 200 OK erhalten. Überprüfen Sie, ob eine Benachrichtigung im Infobereich für die PushDemo-App mit der richtigen Nachricht angezeigt wird.

  12. Tippen Sie auf die Benachrichtigung, um zu bestätigen, dass die App geöffnet und die AktionA-Warnung empfangen wurde .

  13. Ändern Sie zurück in Postman den vorherigen Anforderungstext, um eine unbeaufsichtigte Benachrichtigung zu senden, die action_b anstelle von action_a für den Aktionswert angibt.

    {
        "action": "action_b",
        "silent": true
    }
    
  14. Wenn die App weiterhin geöffnet ist, klicken Sie in Postman auf die Schaltfläche Senden.

  15. Überprüfen Sie, ob Sie eine 200 OK-Antwort in Postman erhalten und dass die Warnung in der App angezeigt wird, die Die Aktion B-Aktion empfangen anstelle der empfangenen AktionA-Aktion anzeigt.

  16. Schließen Sie die PushDemo-App, und klicken Sie dann in Postman erneut auf die Schaltfläche Senden.

  17. Überprüfen Sie, ob Sie eine Antwort mit 200 OK in Postman erhalten und dass die unbeaufsichtigte Benachrichtigung nicht im Benachrichtigungsbereich angezeigt wird.

Problembehandlung

Keine Antwort vom Back-End-Dienst

Stellen Sie beim lokalen Testen sicher, dass der Back-End-Dienst ausgeführt wird und den richtigen Port verwendet.

Wenn Sie mit der Azure-API-App testen, überprüfen Sie, ob der Dienst ausgeführt wird und bereitgestellt wurde und ohne Fehler gestartet wurde.

Vergewissern Sie sich, dass Sie die Basisadresse beim Testen über den Client in Postman oder in der Konfiguration der mobilen App korrekt angegeben haben. Die Basisadresse sollte indikativ oder beim lokalen Testen sein https://<api_name>.azurewebsites.net/https://localhost:5001/ .

Keine Benachrichtigungen unter Android nach dem Starten oder Beenden einer Debugsitzung

Stellen Sie sicher, dass Sie sich nach dem Starten oder Beenden einer Debugsitzung erneut registrieren. Der Debugger bewirkt, dass ein neues Firebase-Token generiert wird. Auch die Notification Hub-Installation muss aktualisiert werden.

Empfangen eines 401-status-Codes vom Back-End-Dienst

Überprüfen Sie, ob Sie den apikey-Anforderungsheader festlegen und dieser Wert mit dem Wert übereinstimmt, den Sie für den Back-End-Dienst konfiguriert haben.

Wenn Sie diesen Fehler beim lokalen Testen erhalten, stellen Sie sicher, dass der Schlüsselwert, den Sie in der Clientkonfiguration definiert haben, dem von der API verwendeten Wert für die Benutzereinstellung Authentication:ApiKey entspricht.

Wenn Sie mit einer API-App testen, stellen Sie sicher, dass der Schlüsselwert in der Clientkonfigurationsdatei der Anwendungseinstellung Authentication:ApiKey entspricht, die Sie in der API-App verwenden.

Hinweis

Wenn Sie diese Einstellung erstellt oder geändert haben, nachdem Sie den Back-End-Dienst bereitgestellt haben, müssen Sie den Dienst neu starten, damit er wirksam wird.

Wenn Sie den Abschnitt Clients mithilfe eines API-Schlüssels authentifizieren nicht abschließen möchten, stellen Sie sicher, dass Sie das Authorize-Attribut nicht auf die NotificationsController-Klasse angewendet haben.

Empfangen eines 404-status-Codes vom Back-End-Dienst

Überprüfen Sie, ob der Endpunkt und die HTTP-Anforderungsmethode korrekt sind. Die Endpunkte sollten z. B. indikativ sein:

  • [PUT]https://<api_name>.azurewebsites.net/api/notifications/installations
  • [LÖSCHEN]https://<api_name>.azurewebsites.net/api/notifications/installations/<installation_id>
  • [POST]https://<api_name>.azurewebsites.net/api/notifications/requests

Oder beim lokalen Testen:

  • [PUT]https://localhost:5001/api/notifications/installations
  • [LÖSCHEN]https://localhost:5001/api/notifications/installations/<installation_id>
  • [POST]https://localhost:5001/api/notifications/requests

Wenn Sie die Basisadresse in der Client-App angeben, stellen Sie sicher, dass sie mit einem /endet. Die Basisadresse sollte indikativ oder beim lokalen Testen sein https://<api_name>.azurewebsites.net/https://localhost:5001/ .

Registrierung nicht möglich, und eine Notification Hub-Fehlermeldung wird angezeigt

Vergewissern Sie sich, dass das Testgerät über Netzwerkkonnektivität verfügt. Bestimmen Sie dann die HTTP-Antwort status Code, indem Sie einen Haltepunkt festlegen, um den StatusCode-Eigenschaftswert in der HttpResponse zu überprüfen.

Überprüfen Sie ggf. die vorherigen Problembehandlungsvorschläge basierend auf dem status Code.

Legen Sie einen Haltepunkt für die Zeilen fest, die diese spezifischen status Codes für die jeweilige API zurückgeben. Versuchen Sie dann, den Back-End-Dienst beim lokalen Debuggen aufzurufen.

Überprüfen Sie, ob der Back-End-Dienst über Postman mit der entsprechenden Nutzlast wie erwartet funktioniert. Verwenden Sie die tatsächliche Nutzlast, die vom Clientcode für die betreffende Plattform erstellt wurde.

Überprüfen Sie die abschnitte zur plattformspezifischen Konfiguration, um sicherzustellen, dass keine Schritte verpasst wurden. Überprüfen Sie, ob geeignete Werte für installation id und token Variablen für die entsprechende Plattform aufgelöst werden.

Eine ID für die Angezeigte Gerätefehlermeldung kann nicht aufgelöst werden.

Überprüfen Sie die abschnitte zur plattformspezifischen Konfiguration, um sicherzustellen, dass keine Schritte verpasst wurden.

Nächste Schritte

Sie sollten jetzt über eine einfache React Native-App verfügen, die über einen Back-End-Dienst mit einem Notification Hub verbunden ist und Benachrichtigungen senden und empfangen kann.

Wahrscheinlich müssen Sie das in diesem Tutorial verwendete Beispiel an Ihr eigenes Szenario anpassen. Es wird auch empfohlen, eine robustere Fehlerbehandlung, Wiederholungslogik und Protokollierung zu implementieren.

Visual Studio App Center kann schnell in mobile Apps integriert werden, die Analysen und Diagnose bereitstellen, um die Problembehandlung zu unterstützen.