Oktatóanyag: Leküldéses értesítések küldése React Native alkalmazásoknak az Azure Notification Hubs használatával háttérszolgáltatáson keresztül
A minta letöltéseEbben az oktatóanyagban az Azure Notification Hubs használatával küld értesítéseket egy androidos és iOS rendszerű React Native alkalmazásba.
A ASP.NET Core Webes API-háttérrendszer az ügyfél eszközregisztrációjának kezelésére szolgál a legújabb és legjobb telepítési módszer használatával. A szolgáltatás leküldéses értesítéseket is küld platformfüggetlen módon.
Ezeket a műveleteket a Notification Hubs SDK kezeli a háttérműveletek esetében. Az általános megközelítéssel kapcsolatos további részletekért tekintse meg az alkalmazás háttérrendszerének regisztrálását ismertető dokumentációt .
Ez az oktatóanyag végigvezeti az alábbi lépéseket:
- A Leküldéses értesítési szolgáltatások és az Azure Notification Hubs beállítása.
- Hozzon létre egy ASP.NET Core Webes API háttéralkalmazást.
- Platformfüggetlen React Native alkalmazás létrehozása.
- Konfigurálja a natív Android-projektet leküldéses értesítésekhez.
- Konfigurálja a natív iOS-projektet leküldéses értesítésekhez.
- A megoldás teszteléséhez.
Előfeltételek
A lépések követéséhez a következőkre van szükség:
- Egy Azure-előfizetés ahol létrehozni és -erőforrások kezeléséhez.
- Mac gép Visual Studio for Mac telepítve (vagy a Visual Studio 2019-et futtató pc a Mobile Development with .NET számítási feladattal).
- Az alkalmazás androidos (fizikai vagy emulátoros) vagy iOS rendszeren (csak fizikai eszközökön) való futtatásának képessége.
Android esetén a következőket kell tennie:
- Egy fejlesztő zárolta a fizikai eszközt vagy egy emulátort (az API 26-os vagy újabb verzióját futtatja, amelyen telepítve van a Google Play Services).
iOS esetén a következőket kell tennie:
- Az aktív Apple Developer-fiók.
- Egy fizikai iOS-eszköz, amely regisztrálva van a fejlesztői fiókjában(iOS 13.0-s vagy újabb verziót futtatva).
- A kulcskarikára telepített .p12fejlesztői tanúsítvány lehetővé teszi egy alkalmazás fizikai eszközön való futtatását.
Megjegyzés
Az iOS-szimulátor nem támogatja a távoli értesítéseket, ezért fizikai eszközre van szükség a minta iOS-en való vizsgálatához. Az oktatóanyag elvégzéséhez azonban nem kell futtatnia az alkalmazást Androidon és iOS rendszeren is.
Az első alapelveket tartalmazó példában szereplő lépéseket előzetes tapasztalat nélkül követheti. Az alábbi szempontok ismerete azonban hasznos lehet.
- Apple Fejlesztői portál
- ASP.NET Core
- Google Firebase-konzol
- Microsoft Azure és Leküldéses értesítések küldése iOS-alkalmazásoknak az Azure Notification Hubs használatával.
- React Native.
A megadott lépések a Visual Studio for Mac és a Visual Studio Code-hoz tartoznak, de a Visual Studio 2019-et is használhatja.
Leküldéses értesítési szolgáltatások és az Azure Notification Hub beállítása
Ebben a szakaszban beállítja a Firebase Cloud Messaging (FCM) és az Apple Push Notification Services (APNS) szolgáltatást. Ezután létre kell hoznia és konfigurálnia kell egy értesítési központot, hogy működjön ezekkel a szolgáltatásokkal.
Firebase-projekt létrehozása és a Firebase Cloud Messaging engedélyezése Androidhoz
Jelentkezzen be a Firebase-konzolra. Hozzon létre egy új Firebase-projektet, amely a PushDemo nevet adja meg projektnévként.
Megjegyzés
A rendszer létrehoz egy egyedi nevet. Alapértelmezés szerint ez a megadott név kisbetűs változatából és egy kötőjellel elválasztott generált számból áll. Ezt módosíthatja, ha azt szeretné, hogy az továbbra is globálisan egyedi legyen.
A projekt létrehozása után válassza a Firebase hozzáadása az Android-alkalmazáshoz lehetőséget.
Az Add Firebase to your Android app (Firebase hozzáadása androidos alkalmazáshoz ) lapon hajtsa végre az alábbi lépéseket.
Az Android-csomag neveként adja meg a csomag nevét. Például:
com.<organization_identifier>.<package_name>.
Válassza az Alkalmazás regisztrálása lehetőséget.
Válassza a Letöltés google-services.json lehetőséget. Ezután mentse a fájlt egy helyi mappába későbbi használatra, és válassza a Tovább gombot.
Kattintson a Tovább gombra.
Válassza a Folytatás konzolra lehetőséget
Megjegyzés
Ha a Folytatás konzolra gomb nincs engedélyezve, a telepítés ellenőrzése miatt válassza a Lépés kihagyása lehetőséget.
A Firebase konzolon válassza ki a projekt fogaskerékét. Ezután válassza a Projektbeállítások lehetőséget.
Megjegyzés
Ha még nem töltötte le a google-services.json fájlt, ezen az oldalon töltheti le.
Váltson a felső Cloud Messaging (Felhőbeli üzenetkezelés ) lapra. Másolja és mentse a kiszolgálókulcsot későbbi használatra. Ezzel az értékkel konfigurálhatja az értesítési központot.
iOS-alkalmazás regisztrálása leküldéses értesítésekhez
Ha leküldéses értesítéseket szeretne küldeni egy iOS-alkalmazásnak, regisztrálja az alkalmazást az Apple-ben, és regisztráljon leküldéses értesítésekre is.
Ha még nem regisztrálta az alkalmazást, keresse meg az iOS kiépítési portált az Apple Fejlesztői központban. Jelentkezzen be a portálra az Apple ID azonosítójával, lépjen a Tanúsítványok, azonosítók & Profilok elemre, majd válassza az Azonosítók lehetőséget. Ide kattintva + regisztrálhat egy új alkalmazást.
Az Új azonosító regisztrálása képernyőn válassza az Alkalmazásazonosítók választógombot. Ezután válassza a Folytatás elemet.
Frissítse a következő három értéket az új alkalmazáshoz, majd válassza a Folytatás lehetőséget:
Leírás: Adjon meg egy leíró nevet az alkalmazásnak.
Csomagazonosító: Adja meg a com.organization_identifier<> űrlap csomagazonosítóját.<>product_name az alkalmazásterjesztési útmutatóban leírtak szerint. A következő képernyőképen az
mobcatérték szervezeti azonosítóként, a PushDemo érték pedig a terméknév.
Leküldéses értesítések: Ellenőrizze a Leküldéses értesítések lehetőséget a Képességek szakaszban.
Ez a művelet létrehozza az alkalmazásazonosítót, és kéri, hogy erősítse meg az információkat. Válassza a Folytatás, majd a Regisztráció lehetőséget az új alkalmazásazonosító megerősítéséhez.
Miután kiválasztotta a Regisztráció lehetőséget, az új alkalmazásazonosító sorelemként jelenik meg a Tanúsítványok, azonosítók & Profilok lapon.
A Tanúsítványok, azonosítók & Profilok lapon, az Azonosítók területen keresse meg a létrehozott alkalmazásazonosító sorelemet. Ezután válassza ki a sorát az Alkalmazásazonosító konfigurációjának szerkesztése képernyő megjelenítéséhez.
Tanúsítvány létrehozása a Notification Hubshoz
Tanúsítvány szükséges ahhoz, hogy az értesítési központ működjön az Apple Push Notification Services (APNS) szolgáltatással, és kétféleképpen nyújtható:
P12 leküldéses tanúsítvány létrehozása, amely közvetlenül a Notification Hubra tölthető fel (az eredeti megközelítés)
Jogkivonatalapú hitelesítéshez használható p8-tanúsítvány létrehozása (az újabb és javasolt megközelítés)
Az újabb megközelítés számos előnnyel rendelkezik az APNS tokenalapú (HTTP/2) hitelesítésében leírtak szerint. Kevesebb lépésre van szükség, de adott forgatókönyvekhez is kötelező megadni. A lépések azonban mindkét megközelítéshez meg lettek adva, mivel mindkét módszer az oktatóanyag céljaira fog működni.
1. LEHETŐSÉG: Közvetlenül a Notification Hubra feltölthető p12 leküldéses tanúsítvány létrehozása
Mac gépén futtassa a Keychain Access eszközt. A Utilities mappából vagy a Launchpad Egyéb mappájából nyitható meg.
Válassza a Kulcskarika-hozzáférés lehetőséget, bontsa ki a Tanúsítványsegéd elemet, majd válassza a Tanúsítvány kérése hitelesítésszolgáltatótól lehetőséget.
Megjegyzés
Alapértelmezés szerint a Keychain Access kiválasztja a lista első elemét. Ez akkor lehet probléma, ha a Tanúsítványok kategóriában van, és az Apple Worldwide Developer Relations Hitelesítésszolgáltató nem az első elem a listában. A CSR (tanúsítvány-aláírási kérelem) létrehozása előtt győződjön meg arról, hogy van egy nem kulcseleme, vagy az Apple Worldwide Developer Relations hitelesítésszolgáltatói kulcs van kiválasztva.
Válassza ki a Felhasználó Email címét, adja meg a Köznapi név értékét, győződjön meg arról, hogy a Lemezre mentve értéket adja meg, majd válassza a Folytatás lehetőséget. Hagyja üresen a hitelesítésszolgáltató Email Cím mezőt, mert nincs rá szükség.
Adja meg a Tanúsítvány-aláírási kérelem (CSR) fájl nevét a Mentés másként területen, válassza ki a helyet a Hol, majd válassza a Mentés lehetőséget.
Ez a művelet a CSR-fájlt a kiválasztott helyre menti. Az alapértelmezett hely az Asztal. Jegyezze meg a fájlhoz kiválasztott helyet.
Térjen vissza a Tanúsítványok, azonosítók & Profilok lapra az iOS kiépítési portálon, görgessen le a bejelölt leküldéses értesítések beállításhoz, majd válassza a Konfigurálás lehetőséget a tanúsítvány létrehozásához.
Megjelenik az Apple Push Notification szolgáltatás TLS/SSL-tanúsítványok ablaka . Válassza a Tanúsítvány létrehozása gombot a Fejlesztési TLS/SSL-tanúsítvány szakasz alatt.
Megjelenik az Új tanúsítvány létrehozása képernyő.
Megjegyzés
Ez az oktatóanyag fejlesztési tanúsítványt használ. Ugyanezt a folyamatot használják az éles tanúsítvány regisztrálásakor. Csak győződjön meg arról, hogy ugyanazt a tanúsítványtípust használja az értesítések küldésekor.
Válassza a Fájl kiválasztása lehetőséget, keresse meg azt a helyet, ahová a CSR-fájlt mentette, majd a betöltéshez kattintson duplán a tanúsítvány nevére. Ezután válassza a Folytatás elemet.
Miután a portál létrehozta a tanúsítványt, válassza a Letöltés gombot. Mentse a tanúsítványt, és jegyezze meg a mentés helyét.
A rendszer letölti és menti a tanúsítványt a számítógépre a Letöltések mappában.
Megjegyzés
Alapértelmezés szerint a letöltött fejlesztési tanúsítvány neve aps_development.cer.
Kattintson duplán a letöltött leküldéses tanúsítványra aps_development.cer. Ez a művelet telepíti az új tanúsítványt a kulcskarikán az alábbi képen látható módon:
Megjegyzés
Bár a tanúsítványban szereplő név eltérő lehet, a név az Apple Development iOS Push Services előtaggal lesz ellátva, és a megfelelő csomagazonosítóval van társítva.
A Kulcskarika-hozzáférés + területenkattintson a Tanúsítványok kategóriában létrehozott új leküldéses tanúsítványra. Válassza az Exportálás lehetőséget, nevezze el a fájlt, válassza ki a p12 formátumot, majd válassza a Mentés lehetőséget.
Dönthet úgy, hogy jelszóval védi a tanúsítványt, de a jelszó megadása nem kötelező. Ha meg szeretné kerülni a jelszó létrehozását, kattintson az OK gombra . Jegyezze fel az exportált p12-tanúsítvány fájlnevét és helyét. Ezek az APN-ekkel történő hitelesítés engedélyezésére szolgálnak.
Megjegyzés
A p12-fájl neve és helye eltérhet az oktatóanyagban láthatótól.
2. LEHETŐSÉG: Jogkivonatalapú hitelesítéshez használható p8-tanúsítvány létrehozása
Jegyezze fel a következő adatokat:
- Alkalmazásazonosító előtagja (csapatazonosító)
- Csomagazonosító
A Tanúsítványok, azonosítók & profilok területen kattintson a Kulcsok elemre.
Megjegyzés
Ha már rendelkezik az APNS-hez konfigurált kulccsal, használhatja újra a közvetlenül a létrehozása után letöltött p8-tanúsítványt. Ha igen, figyelmen kívül hagyhatja a 3 – 5. lépést.
Új kulcs létrehozásához kattintson a + gombra (vagy a Kulcs létrehozása gombra).
Adjon meg egy megfelelő kulcsnevet , majd ellenőrizze az Apple Push Notifications szolgáltatás (APNS) beállítását, majd kattintson a Folytatás gombra, majd a következő képernyőn a Regisztrálás elemre.
Kattintson a Letöltés gombra, majd helyezze át a p8 fájlt ( AuthKey_ előtaggal) egy biztonságos helyi könyvtárba, majd kattintson a Kész gombra.
Megjegyzés
Ügyeljen arra, hogy a p8-fájl biztonságos helyen legyen (és mentsen biztonsági másolatot). A kulcs letöltése után nem tölthető le újra a kiszolgálópéldány eltávolításakor.
A Kulcsok területen kattintson a létrehozott kulcsra (vagy egy meglévő kulcsra, ha ezt választotta).
Jegyezze fel a Kulcsazonosító értéket.
Nyissa meg a p8-tanúsítványt egy tetszőleges alkalmazásban, például a Visual Studio Code-ban. Jegyezze fel a kulcs értékét ( -----BEGIN PRIVATE KEY----- és -----END PRIVATE KEY----- között).
-----BEGIN TITKOS KULCS-----
<key_value>
-----END TITKOS KULCS-----Megjegyzés
Ez az a tokenérték , amelyet később a Notification Hub konfigurálásához fog használni.
A lépések végén a következő információkkal kell rendelkeznie, amelyeket később használhat az Értesítési központ konfigurálása APNS-adatokkal című cikkben:
- Csapatazonosító (lásd az 1. lépést)
- Csomagazonosító (lásd az 1. lépést)
- Kulcsazonosító (lásd a 7. lépést)
- Jogkivonat értéke (a 8. lépésben beszerzett p8 kulcsérték)
Üzembe helyezési profil létrehozása az alkalmazáshoz
Térjen vissza az iOS kiépítési portálra, válassza a Tanúsítványok, azonosítók & Profilok lehetőséget, a bal oldali menüben válassza a Profilok lehetőséget, majd válassza az + új profil létrehozásához lehetőséget. Megjelenik az Új kiépítési profil regisztrálása képernyő.
A kiépítési profil típusaként válassza az iOS-alkalmazásfejlesztés lehetőséget a Fejlesztés területen, majd válassza a Folytatás lehetőséget.
Ezután válassza ki a létrehozott alkalmazásazonosítót az Alkalmazásazonosító legördülő listából, majd válassza a Folytatás lehetőséget.
A Tanúsítványok kiválasztása ablakban válassza ki a kódaláíráshoz használt fejlesztési tanúsítványt, majd válassza a Folytatás lehetőséget.
Megjegyzés
Ez a tanúsítvány nem az előző lépésben létrehozott leküldéses tanúsítvány. Ez az Ön fejlesztési tanúsítványa. Ha nem létezik, létre kell hoznia, mivel ez az oktatóanyag előfeltétele . A fejlesztői tanúsítványok az Apple Fejlesztői portálon, az Xcode-on vagy a Visual Studióban hozhatók létre.
Térjen vissza a Tanúsítványok, azonosítók & Profilok lapra, válassza a bal oldali menü Profilok elemét, majd válassza a lehetőséget + egy új profil létrehozásához. Megjelenik az Új kiépítési profil regisztrálása képernyő.
A Tanúsítványok kiválasztása ablakban válassza ki a létrehozott fejlesztési tanúsítványt. Ezután válassza a Folytatás elemet.
Ezután válassza ki a teszteléshez használni kívánt eszközöket, majd válassza a Folytatás lehetőséget.
Végül válassza ki a profil nevét a Kiépítési profil neve területen, majd válassza a Létrehozás lehetőséget.
Az új kiépítési profil létrehozásakor válassza a Letöltés lehetőséget. Jegyezze meg a mentés helyét.
Tallózással keresse meg a kiépítési profil helyét, majd kattintson rá duplán a fejlesztői gépen való telepítéshez.
Értesítési központ létrehozása
Ebben a szakaszban létrehoz egy értesítési központot, és konfigurálja az APNS-hitelesítést. Használhat p12 leküldéses tanúsítványt vagy jogkivonatalapú hitelesítést. Ha már létrehozott értesítési központot szeretne használni, ugorjon az 5. lépésre.
Jelentkezzen be az Azure-ba.
Kattintson az Erőforrás létrehozása elemre, keresse meg és válassza az Értesítési központ lehetőséget, majd kattintson a Létrehozás gombra.
Frissítse a következő mezőket, majd kattintson a Létrehozás gombra:
ALAPSZINTŰ RÉSZLETEK
Előfizetés: Válassza ki a cél előfizetést a legördülő listából
Erőforráscsoport: Új erőforráscsoport létrehozása (vagy meglévő kiválasztása)NÉVTÉR RÉSZLETEI
Notification Hub-névtér: Adjon meg egy globálisan egyedi nevet a Notification Hub-névtérhez
Megjegyzés
Győződjön meg arról, hogy az Új létrehozása lehetőség van kiválasztva ehhez a mezőhöz.
ÉRTESÍTÉSI KÖZPONT RÉSZLETEI
Értesítési központ: Adja meg az értesítési központ nevét
Helyen: Válasszon egy megfelelő helyet a legördülő listából
Tarifacsomag: Az alapértelmezett Ingyenes beállítás megtartásaMegjegyzés
Hacsak nem érte el az ingyenes szinten található központok maximális számát.
A Notification Hub kiépítése után keresse meg az erőforrást.
Lépjen az új Értesítési központra.
Válassza a hozzáférési szabályzatok elemet a listából (a KEZELÉS területen).
Jegyezze fel a Szabályzatnév értékeket és a hozzájuk tartozó kapcsolati sztringértékeket .
Az Értesítési központ konfigurálása APNS-adatokkal
A Notification Services (Értesítési szolgáltatások) területen válassza az Apple lehetőséget, majd kövesse a megfelelő lépéseket a Korábban a Tanúsítvány létrehozása a Notification Hubshoz szakaszban kiválasztott módszer alapján.
Megjegyzés
Csak akkor használja az Éles alkalmazás üzemmódot, ha leküldéses értesítéseket szeretne küldeni azoknak a felhasználóknak, akik az alkalmazást az áruházból vásárolták meg.
1. LEHETŐSÉG: .p12 leküldéses tanúsítvány használata
Válassza a Tanúsítvány elemet.
Válassza a fájl ikont.
Jelölje ki a korábban exportált .p12 fájlt, majd válassza a Megnyitás lehetőséget.
Ha szükséges, adja meg a megfelelő jelszót.
Válassza a Védőfal módot.
Kattintson a Mentés gombra.
2. LEHETŐSÉG: Jogkivonatalapú hitelesítés használata
Válassza a Jogkivonat lehetőséget.
Adja meg a korábban beszerzett alábbi értékeket:
- Kulcsazonosító
- Csomagazonosító
- Csapatazonosító
- Token
Válassza a Tesztkörnyezet lehetőséget.
Kattintson a Mentés gombra.
Az értesítési központ konfigurálása FCM-adatokkal
- A bal oldali menü Beállítások szakaszában válassza a Google (GCM/FCM) lehetőséget.
- Adja meg a Google Firebase-konzolról feljegyzett kiszolgálókulcsot.
- Válassza az eszköztár Save (Mentés) elemét.
ASP.NET Core Webes API háttéralkalmazás létrehozása
Ebben a szakaszban a ASP.NET Core Webes API-háttérrendszert hozza létre az eszközregisztráció és az értesítések React Native mobilalkalmazásba való küldéséhez.
Webes projekt létrehozása
A Visual Studióban válassza az Új megoldás fájlja>lehetőséget.
Válassza a .NETCore-alkalmazás>>ASP.NET Core>API>Tovább lehetőséget.
Az új ASP.NET Core webes API konfigurálása párbeszédpanelen válassza a .NET Core 3.1Célkerete lehetőséget.
Adja meg a PushDemoApi nevet a projekt neveként , majd válassza a Létrehozás lehetőséget.
Indítsa el a hibakeresést (Command + Enter) a sablonalapú alkalmazás teszteléséhez.
Megjegyzés
A sablonalapú alkalmazás úgy van konfigurálva, hogy a WeatherForecastControllerthasználja launchUrlként. Ezt a Tulajdonságok>launchSettings.json adhatja meg.
Ha a rendszer érvénytelen fejlesztési tanúsítványt talált üzenettel kéri:
A probléma megoldásához kattintson az Igen gombra a dotnet dev-certs https eszköz futtatásának elfogadásához. A "dotnet dev-certs https" eszköz ezután megkéri, hogy adja meg a tanúsítvány jelszavát és a kulcskarika jelszavát.
Kattintson az Igen gombra, amikor a rendszer az új tanúsítvány telepítését és megbízhatóságát kéri, majd adja meg a kulcskarika jelszavát.
Bontsa ki a Controllers mappát, majd törölje WeatherForecastController.cs.
Törölje WeatherForecast.cs.
Állítson be helyi konfigurációs értékeket a Secret Manager eszközzel. A titkos kulcsok megoldástól való leválasztása biztosítja, hogy ne kerülnek a verziókövetésbe. Nyissa meg a Terminált , majd nyissa meg a projektfájl könyvtárát, és futtassa a következő parancsokat:
dotnet user-secrets init dotnet user-secrets set "NotificationHub:Name" <value> dotnet user-secrets set "NotificationHub:ConnectionString" <value>Cserélje le a helyőrző értékeket a saját értesítési központ nevére és kapcsolati karakterlánc értékekre. Ezeket az értesítési központ létrehozása szakaszban jegyezte fel. Ellenkező esetben megkeresheti őket az Azure-ban.
NotificationHub:Név:
Lásd: Név az Áttekintés felső részén található Essentials-összefoglalásban.NotificationHub:ConnectionString:
Lásd: DefaultFullSharedAccessSignature a hozzáférési szabályzatokbanMegjegyzés
Éles forgatókönyvek esetén olyan lehetőségeket tekinthet meg, mint az Azure KeyVault a kapcsolati karakterlánc biztonságos tárolásához. Az egyszerűség kedvéért a titkos kulcsok hozzá lesznek adva a Azure App Service alkalmazás beállításaihoz.
Ügyfelek hitelesítése API-kulccsal (nem kötelező)
Az API-kulcsok nem olyan biztonságosak, mint a tokenek, de elegendőek az oktatóanyag céljaira. Az API-kulcsok egyszerűen konfigurálhatók a ASP.NET Köztes szoftveren keresztül.
Adja hozzá az API-kulcsot a helyi konfigurációs értékekhez.
dotnet user-secrets set "Authentication:ApiKey" <value>Megjegyzés
Cserélje le a helyőrző értékét a saját értékére, és jegyezze fel.
Ellenőrzés + Kattintson a PushDemoApi projektre, válassza az Új mappa lehetőséget a Hozzáadás menüben, majd kattintson a Hozzáadáshitelesítésselmappanévként elemre.
Ellenőrzés + Kattintson a Hitelesítés mappára, majd válassza az Új fájl... lehetőséget a Hozzáadás menüben.
Válassza az Általános>üres osztály lehetőséget, adja meg anév ApiKeyAuthOptions.cs, majd kattintson az Új elemre a következő implementáció hozzáadásakor.
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; } } }Adjon hozzá egy másik üres osztályt a ApiKeyAuthHandler.cs nevű hitelesítési mappához, majd adja hozzá a következő implementációt.
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)); } } }Megjegyzés
A hitelesítési kezelő egy séma viselkedését megvalósító típus, amely ebben az esetben egy egyéni API-kulcsséma.
Adjon hozzá egy másik Üres osztályt a ApiKeyAuthenticationBuilderExtensions.cs nevű hitelesítési mappához, majd adja hozzá a következő implementációt.
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); } } }Megjegyzés
Ez a bővítménymetódus leegyszerűsíti a köztes szoftver konfigurációs kódját Startup.cs olvashatóbbá és általában könnyebben követhetővé teszi.
A Startup.cs frissítse a ConfigureServices metódust, hogy konfigurálja az API-kulcs hitelesítését a szolgáltatások hívása alatt . AddControllers metódus.
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); }Továbbra is Startup.cs frissítse a Configure metódust, hogy meghívja a UseAuthentication és a UseAuthorization bővítménymetódusokat az alkalmazás IApplicationBuilderjén. Győződjön meg arról, hogy ezek a metódusok a UseRouting és az alkalmazás előtt lettek meghívva . 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(); }); }Megjegyzés
A UseAuthentication hívása regisztrálja a korábban regisztrált hitelesítési sémákat használó köztes szoftvereket (a ConfigureServicesből). Ezt minden olyan köztes szoftver előtt meg kell hívni, amely a felhasználók hitelesítésétől függ.
Függőségek hozzáadása és szolgáltatások konfigurálása
ASP.NET Core támogatja a függőséginjektálási (DI) szoftvertervezési mintát, amely az osztályok és függőségeik közötti vezérlés inverziójának (IoC) elérésére szolgáló technika.
Az értesítési központ és a Notification Hubs SDK háttérműveletekhez való használata egy szolgáltatásba van beágyazva. A szolgáltatás regisztrálva van, és megfelelő absztrakción keresztül érhető el.
Ellenőrzés + Kattintson a Függőségek mappára, majd válassza a NuGet-csomagok kezelése... lehetőséget.
Keressen rá a Microsoft.Azure.NotificationHubs kifejezésre , és győződjön meg arról, hogy ellenőrizve van.
Kattintson a Csomagok hozzáadása, majd az Elfogadás gombra, amikor a rendszer a licencfeltételek elfogadására kéri.
Ellenőrzés + Kattintson a PushDemoApi projektre, válassza az Új mappa lehetőséget a Hozzáadás menüben, majd kattintson a Hozzáadásmodellek használatával mappanévként elemre.
Ellenőrzés + Kattintson a Modellek mappára, majd válassza az Új fájl... lehetőséget a Hozzáadás menüben.
Válassza az Általános>üres osztály lehetőséget, adja meg a név PushTemplates.cs, majd kattintson az Új gombra az alábbi implementáció hozzáadása gombra.
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)\" }"; } } }Megjegyzés
Ez az osztály az ebben a forgatókönyvben megkövetelt általános és csendes értesítések jogkivonatos értesítési hasznos adatait tartalmazza. A hasznos adatok a telepítésen kívül vannak definiálva, hogy lehetővé tegyék a kísérletezést anélkül, hogy a szolgáltatáson keresztül frissíteni kellene a meglévő telepítéseket. Az oktatóanyag hatókörén kívül esik a telepítések ilyen módon végzett módosításainak kezelése. Éles környezetben fontolja meg az egyéni sablonokat.
Vegyen fel egy másik Üres osztályt a Modellek mappába DeviceInstallation.cs, majd adja hozzá a következő implementációt.
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>(); } }Vegyen fel egy másik Üres osztályt a Models (Modellek ) mappába NotificationRequest.cs, majd adja hozzá a következő implementációt.
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; } } }Vegyen fel egy másik Üres osztályt a Models (Modellek ) mappába NotificationHubOptions.cs, majd adja hozzá a következő implementációt.
using System.ComponentModel.DataAnnotations; namespace PushDemoApi.Models { public class NotificationHubOptions { [Required] public string Name { get; set; } [Required] public string ConnectionString { get; set; } } }Adjon hozzá egy új mappát a Szolgáltatások nevű PushDemoApi projekthez.
Adjon hozzá egy üres felületet a INotificationService.cs nevű Services mappához, majd adja hozzá a következő implementációt.
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); } }Adjon hozzá egy üres osztályt a NotificationHubsService.cs nevű Services mappához, majd adja hozzá a következő kódot az INotificationService felület implementálásához:
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); } } }Megjegyzés
A SendTemplateNotificationAsync számára megadott címkekifejezés legfeljebb 20 címke lehet. A legtöbb operátor esetében 6-ra van korlátozva, de a kifejezés ebben az esetben csak ARS-eket (||) tartalmaz. Ha a kérelemben több mint 20 címke szerepel, akkor több kérelemre kell felosztani őket. További részletekért tekintse meg az Útválasztási és címkekifejezések dokumentációját.
A Startup.cs frissítse a ConfigureServices metódust, hogy az INotificationService egyetlentonos implementációjaként adja hozzá a NotificationHubsService-t.
using PushDemoApi.Models; using PushDemoApi.Services; public void ConfigureServices(IServiceCollection services) { ... services.AddSingleton<INotificationService, NotificationHubService>(); services.AddOptions<NotificationHubOptions>() .Configure(Configuration.GetSection("NotificationHub").Bind) .ValidateDataAnnotations(); }
Az értesítések API létrehozása
Ellenőrzés + Kattintson a Vezérlők mappára, majd válassza az Új fájl... lehetőséget a Hozzáadás menüben.
Válassza a ASP.NET Core>Web API Controller Class (Api-vezérlőosztály) lehetőséget, írja be a Név mezőben a NotificationsController kifejezést, majd kattintson az Új gombra.
Megjegyzés
Ha a Visual Studio 2019-et használja, válassza ki az OLVASÁSI/írási műveleteket tartalmazó API-vezérlőt .
Adja hozzá a következő névtereket a fájl elejéhez.
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;Frissítse a sablonos vezérlőt úgy, hogy a ControllerBase-ből származik, és az ApiController attribútummal van díszítve.
[ApiController] [Route("api/[controller]")] public class NotificationsController : ControllerBase { // Templated methods here }Megjegyzés
A Controller alaposztály támogatja a nézeteket, de erre ebben az esetben nincs szükség, ezért a ControllerBase használható helyette. Ha a Visual Studio 2019-et követi, kihagyhatja ezt a lépést.
Ha úgy döntött, hogy befejezi az ügyfelek hitelesítése API-kulcs használatával szakaszt , akkor az NotificationsControllert is az Engedélyezés attribútummal kell díszítenie.
[Authorize]Frissítse a konstruktort, hogy fogadja el az INotificationService regisztrált példányát argumentumként, és rendelje hozzá egy olvasható taghoz.
readonly INotificationService _notificationService; public NotificationsController(INotificationService notificationService) { _notificationService = notificationService; }A launchSettings.json -ben (a Tulajdonságok mappában) módosítsa a launchUrl értéket api/notifications értékre
weatherforecast, hogy megfeleljen a RegistrationsControllerRoute attribútumban megadott URL-címnek.Indítsa el a hibakeresést (Command + Enter) annak ellenőrzéséhez, hogy az alkalmazás működik-e az új NotificationsControllerrel , és 401 Jogosulatlan állapotot ad vissza.
Megjegyzés
Előfordulhat, hogy a Visual Studio nem indítja el automatikusan az alkalmazást a böngészőben. Mostantól a Postman használatával tesztelheti az API-t.
Egy új Postman lapon állítsa a kérést GET értékre. Írja be az alábbi címet a helyőrző <applicationUrl> helyett a Tulajdonságok>launchSettings.json található https applicationUrl értékre.
<applicationUrl>/api/notificationsMegjegyzés
Az applicationUrl értékének az alapértelmezett profilhoz "https://localhost:5001" értéknek kell lennie. Ha IIS-t használ (windowsos Visual Studio 2019-ben alapértelmezés szerint), az iisSettings elemben megadott applicationUrl parancsot kell használnia. Ha a cím helytelen, 404-et kap.
Ha úgy döntött, hogy befejezi az ügyfelek hitelesítése API-kulcs használatával szakaszt , mindenképpen konfigurálja a kérésfejléceket úgy, hogy az tartalmazza az apikey értékét.
Kulcs Value apikey <your_api_key> Kattintson a Küldés gombra.
Megjegyzés
200 OK állapotúnak kell lennie néhány JSON-tartalommal.
Ha SSL-tanúsítvány-ellenőrzési figyelmeztetést kap, a beállítások között kikapcsolhatja az SSL-tanúsítvány-ellenőrzés Postman kérését.
Cserélje le a NotificationsController.cs sablonalapú osztálymetszetét a következő kódra.
[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(); }
Az API-alkalmazás létrehozása
Most létrehoz egy API-alkalmazásta Azure App Service a háttérszolgáltatás üzemeltetéséhez.
Jelentkezzen be az Azure Portalra.
Kattintson az Erőforrás létrehozása elemre, keresse meg és válassza az API-alkalmazás lehetőséget, majd kattintson a Létrehozás gombra.
Frissítse a következő mezőket, majd kattintson a Létrehozás gombra.
Alkalmazás neve:
Adja meg az API-alkalmazás globálisan egyedi nevétElőfizetés:
Válassza ki ugyanazt a cél-előfizetést , amelyben létrehozta az értesítési központot.Erőforráscsoport:
Válassza ki ugyanazt az erőforráscsoportot , amelyben létrehozta az értesítési központot.App Service csomag/hely:
Új App Service-csomag létrehozásaMegjegyzés
Váltson az alapértelmezett beállításról az SSL-támogatást tartalmazó csomagra. Ellenkező esetben meg kell tennie a megfelelő lépéseket, amikor a mobilalkalmazással dolgozik, hogy megakadályozza a HTTP-kérések blokkolását.
Application Insights:
Tartsa meg a javasolt beállítást (új erőforrás jön létre ezzel a névvel), vagy válasszon ki egy meglévő erőforrást.Az API-alkalmazás kiépítése után keresse meg az erőforrást.
Jegyezze fel az URL-tulajdonságot az Áttekintés tetején található Essentials-összefoglalásban. Ez az URL-cím a háttérbeli végpont , amelyet az oktatóanyag későbbi részében fogunk használni.
Megjegyzés
Az URL-cím a korábban megadott API-alkalmazásnevet használja a formátummal
https://<app_name>.azurewebsites.net.Válassza a Konfiguráció lehetőséget a listából (a Beállítások területen).
Az alábbi beállítások mindegyikéhez kattintson az Új alkalmazásbeállítás elemre a Név és az Érték megadásához, majd kattintson az OK gombra.
Name (Név) Value Authentication:ApiKey<api_key_value> NotificationHub:Name<hub_name_value> NotificationHub:ConnectionString<hub_connection_string_value> Megjegyzés
Ezek ugyanazok a beállítások, amelyeket korábban a felhasználói beállításokban definiált. Ezeket át kell tudnia másolni. A Hitelesítés:ApiKey beállítás csak akkor szükséges, ha az ügyfelek hitelesítése API-kulcs használatával szakaszt választotta. Éles forgatókönyvek esetén olyan lehetőségeket tekinthet meg, mint az Azure KeyVault. Ezek az egyszerűség kedvéért alkalmazásbeállításokként lettek hozzáadva ebben az esetben.
Az összes alkalmazásbeállítás hozzáadása után kattintson a Mentés, majd a Folytatás gombra.
A háttérszolgáltatás közzététele
Ezután üzembe helyezi az alkalmazást az API-alkalmazásban, hogy minden eszközről elérhető legyen.
Megjegyzés
Az alábbi lépések a Visual Studio for Mac vonatkoznak. Ha windowsos Visual Studio 2019-et követ, a közzétételi folyamat eltérő lesz. Lásd: Közzététel Azure App Service Windows rendszeren.
Ha még nem tette meg, módosítsa a konfigurációt HibakeresésrőlKiadásra .
Ellenőrzés + Kattintson a PushDemoApi projektre, majd válassza a Közzététel az Azure-ban... lehetőséget a Közzététel menüben.
Kövesse a hitelesítési folyamatot, ha a rendszer erre kéri. Használja az előző létrehozási API-alkalmazás szakaszban használt fiókot.
Jelölje ki a közzétételi célként korábban létrehozott Azure App Service API-alkalmazást a listából, majd kattintson a Közzététel gombra.
A varázsló befejezése után közzéteszi az alkalmazást az Azure-ban, majd megnyitja az alkalmazást. Jegyezze fel az URL-címet , ha még nem tette meg. Ez az URL-cím az oktatóanyag későbbi részében használt háttérbeli végpont .
A közzétett API ellenőrzése
A Postmanben nyisson meg egy új lapot, állítsa a kérést PUT értékre , és adja meg az alábbi címet. Cserélje le a helyőrzőt az előző közzétételi háttérszolgáltatás szakaszában jegyzett alapcímre.
https://<app_name>.azurewebsites.net/api/notifications/installationsMegjegyzés
Az alapcím formátuma
https://<app_name>.azurewebsites.net/Ha úgy döntött, hogy befejezi az ügyfelek hitelesítése API-kulcs használatával szakaszt , mindenképpen konfigurálja a kérésfejléceket úgy, hogy az tartalmazza az apikey értékét.
Kulcs Value apikey <your_api_key> Válassza ki a törzs nyers beállítását, majd a formátumbeállítások listájában válassza a JSON lehetőséget, majd adjon meg néhány helyőrző JSON-tartalmat:
{}Kattintson a küldése.
Megjegyzés
422 UnprocessableEntity állapotot kell kapnia a szolgáltatástól.
Végezze el ismét az 1–4. lépést, de ezúttal adja meg a kérések végpontot annak ellenőrzéséhez, hogy 400 hibás kérésre adott válasz érkezik-e.
https://<app_name>.azurewebsites.net/api/notifications/requests
Megjegyzés
Az API-t még nem lehet érvényes kérelemadatokkal tesztelni, mivel ehhez platformspecifikus információkra lesz szükség az ügyfél-mobilalkalmazásból.
Platformfüggetlen React Native-alkalmazás létrehozása
Ebben a szakaszban egy React Native mobilalkalmazást hoz létre, amely platformfüggetlen módon implementálja a leküldéses értesítéseket.
Lehetővé teszi, hogy regisztráljon és töröljön egy értesítési központból a létrehozott háttérszolgáltatáson keresztül.
Riasztás jelenik meg, ha egy művelet meg van adva, és az alkalmazás az előtérben van. Ellenkező esetben az értesítések megjelennek az Értesítési központban.
Megjegyzés
A regisztrációs (és deregisztrációs) műveleteket általában az alkalmazás életciklusának megfelelő pontján (vagy az első futtatási folyamat részeként) hajtaná végre explicit felhasználói regisztráció/regisztráció törlése nélkül. Ez a példa azonban explicit felhasználói bevitelt igényel, hogy a funkció könnyebben megvizsgálható és tesztelhető legyen.
A React Native megoldás létrehozása
A fájlban
Terminalfrissítse a környezeti eszközöket, és az alábbi parancsokkal kell együttműködnie React Native:# 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 cocoapodsA fájlban
Terminalfuttassa a következő parancsot, ha telepítve vanReact Nativea parancssori felület az eltávolításához. A használatávalnpxautomatikusan elérheti az elérhető legújabb React Native CLI-verziót:npm uninstall -g react-native-cliMegjegyzés
React Native beépített parancssori felülettel rendelkezik. A parancssori felület egy adott verziójának globális telepítése és kezelése helyett azt javasoljuk, hogy a futtatókörnyezetben
npxaz aktuális verziót használja, amely Node.js szállít. A paranccsalnpx react-native <command>a parancssori felület aktuális stabil verziója lesz letöltve és végrehajtva a parancs futtatásakor.Lépjen a projektek mappájába, ahol létre szeretné hozni az új alkalmazást. Használja a Typescript-alapú sablont a
--templateparaméter megadásával:# init new project with npx npx react-native init PushDemo --template react-native-template-typescriptFuttassa a metrókiszolgálót, amely JavaScript-csomagokat épít ki, és figyeli a kódfrissítéseket a csomagok valós idejű frissítéséhez:
cd PushDemo npx react-native startFuttassa az iOS-alkalmazást a beállítás ellenőrzéséhez. A következő parancs végrehajtása előtt győződjön meg arról, hogy elindított egy iOS-szimulátort vagy csatlakoztatott egy iOS-eszközt:
npx react-native run-iosFuttassa az Android alkalmazást a beállítás ellenőrzéséhez. Néhány további lépésre van szükség egy Android emulátor vagy eszköz konfigurálásához, hogy hozzáférhessen a React Native metrókiszolgálóhoz. Az alábbi parancsok létrehoznak egy kezdeti JavaScript-csomagot Androidhoz, és helyezik el az assets mappába.
# 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:8081Ez a szkript az alkalmazás kezdeti verziójával lesz előre üzembe helyezve. Az üzembe helyezés után konfigurálja az emulátort vagy az eszközt a metrókiszolgáló eléréséhez a kiszolgáló IP-címének megadásával. Futtassa a következő parancsot az Android-alkalmazás létrehozásához és futtatásához:
npx react-native run-androidAz alkalmazásba való belépés után nyomja le
CMD+Maz (emulátort) vagy rázza meg az eszközt a fejlesztői beállítások feltöltéséhez, lépjenChange Bundle LocationSettings> a területre, és adja meg a metrókiszolgáló IP-címét az alapértelmezett porttal: .<metro-server-ip-address>:8081App.tsxA fájlban alkalmazzon bármilyen módosítást az oldalelrendezésre, mentse, és a módosítás automatikusan tükröződjön az iOS- és Android-alkalmazásokban is.Megjegyzés
A fejlesztési környezet beállításának részletes útmutatója a hivatalos dokumentációban érhető el
Szükséges csomagok telepítése
A minta működéséhez a következő három csomagra van szüksége:
leküldéses értesítések React Native iOS - Project GitHub
Ez a csomag akkor jött létre, amikor a PushNotificationIOS a React Native magjából lett felosztva. A csomag natív módon implementálja az iOS leküldéses értesítéseit, és React Native felületet biztosít a hozzáféréshez. Futtassa a következő parancsot a csomag telepítéséhez:
yarn add @react-native-community/push-notification-iosReact Native leküldéses értesítések platformfüggetlen
Ez a csomag platformfüggetlen módon valósítja meg a helyi és távoli értesítéseket iOS-en és Androidon. Futtassa a következő parancsot a csomag telepítéséhez:
yarn add react-native-push-notificationEszközinformációs csomag A csomag információt nyújt egy futtatókörnyezetben lévő eszközről. Segítségével meghatározhat egy eszközazonosítót, amely a leküldéses értesítésre való regisztrációhoz használható. Futtassa a következő parancsot a csomag telepítéséhez:
yarn add react-native-device-info
Platformfüggetlen összetevők implementálása
Létrehozás és implementálás
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;Létrehozás és implementálás
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(); } }Létrehozás és implementálás
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}`; } } }Konfigurálja az alkalmazást. Nyissa meg
package.jsonés adja hozzá a következő szkriptdefiníciót:"configure": "cp .app.config.tsx src/config/AppConfig.tsx"Ezután futtassa ezt a szkriptet, amely az alapértelmezett konfigurációt másolja a
configmappába.yarn configureAz utolsó lépés az előző lépésben másolt konfigurációs fájl frissítése az API hozzáférési adataival. Adja meg
apiKeyésapiUrlparaméterek:module.exports = { appName: "PushDemo", env: "production", apiUrl: "https://<azure-push-notifications-api-url>/api/", apiKey: "<api-auth-key>", };
A platformfüggetlen felhasználói felület implementálása
Oldalelrendezés definiálása
<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>Stílusok alkalmazása
const styles = StyleSheet.create({ container: { flex: 1, alignItems: "center", justifyContent: 'flex-end', margin: 50, }, button: { margin: 5, width: "100%", } });Az oldalösszetevő inicializálása
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, ); }Kattintáskezelők definiálása gomb
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 }); } }Fogadott jogkivonat-regisztrációk és leküldéses értesítések kezelése
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`); } } };
A natív Android-projekt konfigurálása leküldéses értesítésekhez
Szükséges Android-csomagok konfigurálása
A csomag automatikusan csatolva lesz az alkalmazás létrehozásakor. A konfigurációs folyamat befejezéséhez alább talál néhány további lépést.
Android-jegyzék konfigurálása
Az "android/app/src/main/AndroidManifest.xml" lapon ellenőrizze a csomag nevét, az engedélyeket és a szükséges szolgáltatásokat. Győződjön meg arról, hogy regisztrált RNPushNotificationPublisher és RNPushNotificationBootEventReceiver fogadókat, és regisztrálta a RNPushNotificationListenerService szolgáltatást. Az értesítések metaadataival testre szabhatja a leküldéses értesítések megjelenését.
<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>
Google-szolgáltatások konfigurálása
Az "android/app/build.gradle" területen regisztrálja a Google Services szolgáltatást:
dependencies {
...
implementation 'com.google.firebase:firebase-analytics:17.3.0'
...
}
apply plugin: 'com.google.gms.google-services'
Másolja az FCM beállítása során letöltött "google-services.json" fájlt az "android/app/" projektmappába.
Leküldéses értesítések kezelése Android rendszeren
Konfigurálta a meglévő RNPushNotificationListenerService szolgáltatást a bejövő Android leküldéses értesítések kezelésére. Ezt a szolgáltatást korábban regisztrálták az alkalmazásjegyzékben. Feldolgozza a bejövő értesítéseket, és a platformfüggetlen React Native részre űzi őket. Nincs szükség további lépésekre.
A natív iOS-projekt konfigurálása leküldéses értesítésekhez
Szükséges iOS-csomagok konfigurálása
A csomag automatikusan csatolva lesz az alkalmazás létrehozásakor. Mindössze annyit kell tennie, hogy telepíti a natív podokat:
npx pod-install
Az Info.plist és a Entitlements.plist konfigurálása
Lépjen a "PushDemo/ios" mappába, és nyissa meg a "PushDemo.xcworkspace" munkaterületet, válassza ki a "PushDemo" felső projektet, és válassza az "Aláírási & képességek" lapot.
Frissítse a csomagazonosítót, hogy megfeleljen a kiépítési profilban használt értéknek.
Adjon hozzá két új képességet a - "+" gombbal:
- A háttérmód képessége, és a Távoli értesítések jelölőnégyzet bejelölve.
- Leküldéses értesítések képessége
Leküldéses értesítések kezelése iOS rendszeren
Nyissa meg az "AppDelegate.h" fájlt, és adja hozzá a következő importálást:
#import <UserNotifications/UNUserNotificationCenter.h>Frissítse az "AppDelegate" által támogatott protokollok listáját a következő hozzáadásával
UNUserNotificationCenterDelegate:@interface AppDelegate : UIResponder <UIApplicationDelegate, RCTBridgeDelegate, UNUserNotificationCenterDelegate>Nyissa meg az AppDelegate.m fájlt, és konfigurálja az összes szükséges iOS-visszahívást:
#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); }
A megoldás teszteléséhez
Mostantól tesztelheti az értesítések küldését a háttérszolgáltatáson keresztül.
Tesztértesítés küldése
Nyisson meg egy új lapon Postman.
A kérelem beállítása POST, és adja meg a következő címre:
https://<app_name>.azurewebsites.net/api/notifications/requestsHa úgy döntött, hogy befejezi az ügyfelek hitelesítése API-kulcs használatával szakaszt , mindenképpen konfigurálja a kérésfejléceket úgy, hogy az tartalmazza az apikey értékét.
Kulcs Value apikey <your_api_key> Válassza ki a törzs nyers beállítását, majd a formátumbeállítások listájában válassza a JSON lehetőséget, majd adjon meg néhány helyőrző JSON-tartalmat:
{ "text": "Message from Postman!", "action": "action_a" }Válassza a Kód gombot, amely az ablak jobb felső sarkában található Mentés gomb alatt található. A kérésnek az alábbi példához hasonlóan kell kinéznie a HTML-ben való megjelenítéskor (attól függően, hogy tartalmazott-e apikey fejlécet):
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" }Futtassa a PushDemo alkalmazást az egyik vagy mindkét célplatformon (Android és iOS).
Megjegyzés
Ha Androidon teszteli, győződjön meg arról, hogy nem a Hibakeresésben fut, vagy ha az alkalmazást az alkalmazás futtatásával telepítették, kényszerítse be az alkalmazást, és indítsa újra a indítóból.
A PushDemo alkalmazásban koppintson a Regisztráció gombra.
A Postmanben zárja be a Kódrészletek létrehozása ablakot (ha még nem tette meg), majd kattintson a Küldés gombra.
Ellenőrizze, hogy kap-e 200 OK-választ a Postmanben , és a riasztás megjelenik az alkalmazásban, amelyen az ActionA művelet érkezett.
Zárja be a PushDemo alkalmazást, majd kattintson ismét a Küldés gombra a Postmanben.
Ellenőrizze, hogy ismét 200 OK-választ kap-e a Postmanben . Ellenőrizze, hogy a megfelelő üzenettel jelenik-e meg egy értesítés a PushDemo alkalmazás értesítési területén.
Koppintson az értesítésre annak megerősítéséhez, hogy megnyitja az alkalmazást, és megjeleníti a kapott ActionA művelet riasztását.
A Postmanben módosítsa az előző kérelemtörzset úgy, hogy csendes értesítést küldjön, amely action_b a műveletértékaction_a helyett.
{ "action": "action_b", "silent": true }Ha az alkalmazás továbbra is nyitva van, kattintson a Küldés gombra a Postmanben.
Ellenőrizze, hogy 200 OK-választ kap-e a Postmanben, és hogy a riasztás megjelenik-e az alkalmazásban, amely a kapott ActionA művelet helyett az ActionB-műveletet jeleníti meg.
Zárja be a PushDemo alkalmazást, majd kattintson ismét a Küldés gombra a Postmanben.
Ellenőrizze, hogy 200 OK-választ kap-e a Postmanben , és hogy a csendes értesítés nem jelenik-e meg az értesítési területen.
Hibaelhárítás
Nincs válasz a háttérszolgáltatástól
Helyi teszteléskor győződjön meg arról, hogy a háttérszolgáltatás fut, és a megfelelő portot használja.
Ha az Azure API-alkalmazáson tesztel, ellenőrizze, hogy a szolgáltatás fut-e, és üzembe lett-e helyezve, és hiba nélkül elindult-e.
Győződjön meg arról, hogy helyesen adta meg az alapcímet a Postmanben vagy a mobilalkalmazás konfigurációjában az ügyfélen keresztüli teszteléskor. Az alapcímnek indikatív módon vagy https://localhost:5001/ helyi teszteléskor kell lenniehttps://<api_name>.azurewebsites.net/.
Hibakeresési munkamenet indítása vagy leállítása után nem érkezik értesítés Androidon
Győződjön meg arról, hogy a hibakeresési munkamenet elindítása vagy leállítása után ismét regisztrál. A hibakereső új Firebase-jogkivonatot hoz létre. Az értesítési központ telepítését is frissíteni kell.
401-es állapotkód fogadása a háttérszolgáltatásból
Ellenőrizze, hogy az apikey-kérelem fejlécét állítja-e be, és ez az érték megegyezik a háttérszolgáltatáshoz konfigurált értékkel.
Ha ezt a hibát a helyi tesztelés során kapja, győződjön meg arról, hogy az ügyfélkonfigurálásban megadott kulcsérték megegyezik az API által használt Authentication:ApiKey felhasználóbeállítási értékkel.
Ha API-alkalmazással tesztel, győződjön meg arról, hogy az ügyfél konfigurációs fájljának kulcsértéke megegyezik az API-alkalmazásban használt Authentication:ApiKey alkalmazásbeállítással.
Megjegyzés
Ha ezt a beállítást a háttérszolgáltatás üzembe helyezése után hozta létre vagy módosította, a szolgáltatás érvénybe lépéséhez újra kell indítania a szolgáltatást.
Ha úgy döntött, hogy nem végzi el az ügyfelek hitelesítése API-kulcs használatával szakaszt , győződjön meg arról, hogy nem alkalmazta az Authorize attribútumot az NotificationsController osztályra.
404-es állapotkód fogadása a háttérszolgáltatásból
Ellenőrizze, hogy a végpont és a HTTP-kérelem metódusa helyes-e. A végpontoknak például a következőnek kell lenniük:
- [PUT]
https://<api_name>.azurewebsites.net/api/notifications/installations - [TÖRLÉS]
https://<api_name>.azurewebsites.net/api/notifications/installations/<installation_id> - [POST]
https://<api_name>.azurewebsites.net/api/notifications/requests
Vagy helyi tesztelés esetén:
- [PUT]
https://localhost:5001/api/notifications/installations - [TÖRLÉS]
https://localhost:5001/api/notifications/installations/<installation_id> - [POST]
https://localhost:5001/api/notifications/requests
Amikor megadja az alapcímet az ügyfélalkalmazásban, győződjön meg arról, hogy a végződése egy /. Az alapcímnek indikatív módon vagy https://localhost:5001/ helyi teszteléskor kell lenniehttps://<api_name>.azurewebsites.net/.
Nem lehet regisztrálni, és megjelenik egy értesítési központ hibaüzenete
Ellenőrizze, hogy a teszteszköz rendelkezik-e hálózati kapcsolattal. Ezután határozza meg a Http-válasz állapotkódját úgy, hogy beállít egy töréspontot a HttpResponseStatusCode tulajdonságértékének vizsgálatához.
Ha lehetséges, tekintse át az előző hibaelhárítási javaslatokat az állapotkód alapján.
Állítson be egy töréspontot azokra a sorokra, amelyek ezeket a konkrét állapotkódokat adják vissza a megfelelő API-hoz. Ezután próbálja meg meghívni a háttérszolgáltatást helyi hibakereséskor.
Ellenőrizze, hogy a háttérszolgáltatás a várt módon működik-e a Postmanen keresztül a megfelelő hasznos adatok használatával. Használja a szóban forgó platform ügyfélkódja által létrehozott tényleges hasznos adatokat.
Tekintse át a platformspecifikus konfigurációs szakaszokat, hogy biztosan ne maradjon le a lépésekről. Ellenőrizze, hogy a megfelelő értékek és token változók feloldása installation id folyamatban van-e a megfelelő platformon.
Nem sikerült feloldani az eszköz azonosítóját hibaüzenet jelenik meg
Tekintse át a platformspecifikus konfigurációs szakaszokat, hogy biztosan ne maradjon le a lépésekről.
Kapcsolódó hivatkozások
- Az Azure Notification Hubs – áttekintés
- Visual Studio for Mac telepítése
- A Visual Studio Code telepítése
- A React Native fejlesztési környezet beállítása
- Notification Hubs SDK háttér-műveletek
- A Notification Hubs SDK a Githubon
- Regisztráció az alkalmazás háttérrendszerével
- Regisztrációkezelés
- Címkék használata
- Egyéni sablonok használata
További lépések
Most már rendelkeznie kell egy alapszintű React Native alkalmazással, amely egy háttérszolgáltatáson keresztül csatlakozik egy értesítési központhoz, és értesítéseket küldhet és fogadhat.
Az oktatóanyagban használt példát valószínűleg a saját forgatókönyvéhez kell igazítania. Robusztusabb hibakezelés, újrapróbálkozási logika és naplózás megvalósítása is ajánlott.
A Visual Studio App Center gyorsan beépíthető mobilalkalmazásokba , amelyek elemzést és diagnosztikát biztosítanak a hibaelhárításhoz.