Tutorial: Mengirim pemberitahuan push ke aplikasi React Native menggunakan Azure Notification Hubs melalui layanan backend
Unduh sampel- Xamarin.Forms
- Flutter
- React Native
Dalam tutorial ini, Anda menggunakan Azure Notification Hubs
Backend
Operasi ini ditangani menggunakan SDK Notification Hubs untuk operasi backend. Detail lebih lanjut tentang pendekatan keseluruhan disediakan dalam dokumentasi Mendaftar dari backend aplikasi Anda.
Tutorial ini membawa Anda melalui langkah-langkah berikut:
Prasyarat
Untuk mengikutinya, Anda memerlukan:
- Langganan Azure tempat Anda dapat membuat dan mengelola sumber daya.
- Mac dengan Visual Studio for Mac terinstal (atau PC yang menjalankan Visual Studio 2019 dengan Mobile Development dengan beban kerja .NET).
- Kemampuan untuk menjalankan aplikasi di Android (perangkat fisik atau emulator) atau iOS (hanya perangkat fisik).
Untuk Android, Anda harus memiliki:
- Pengembang membuka kunci perangkat fisik atau emulator (menjalankan API 26 ke atas dengan Google Play Services terinstal).
Untuk iOS, Anda harus memiliki:
- Akun Pengembang Apple aktif.
- Perangkat iOS fisik yang terdaftar ke akun pengembang Anda(menjalankan iOS 13.0 ke atas).
- Sertifikat pengembangan
.p12 yang diinstal di rantai kunci memungkinkan Anda menjalankan aplikasi di perangkat fisik .
Nota
Simulator iOS tidak mendukung pemberitahuan jarak jauh sehingga perangkat fisik diperlukan saat menjelajahi sampel ini di iOS. Namun, Anda tidak perlu menjalankan aplikasi di Android dan iOS untuk menyelesaikan tutorial ini.
Anda dapat mengikuti langkah-langkah dalam contoh prinsip pertama ini tanpa pengalaman sebelumnya. Namun, Anda akan mendapat manfaat dari memiliki keakraban dengan aspek-aspek berikut.
- Portal Pengembang Apple
- Core
ASP.NET - Google Firebase Console
- Microsoft Azure dan Mengirim pemberitahuan push ke aplikasi iOS menggunakan Azure Notification Hubs.
- React Native.
Langkah-langkah yang disediakan adalah untuk Visual Studio untuk Mac dan Visual Studio Code tetapi dimungkinkan untuk mengikuti menggunakan Visual Studio 2019.
Menyiapkan Push Notification Services dan Azure Notification Hub
Di bagian ini, Anda menyiapkan Firebase Cloud Messaging (FCM) dan Apple Push Notification Services (APNS). Anda kemudian membuat dan mengonfigurasi hub pemberitahuan untuk bekerja dengan layanan tersebut.
Membuat proyek Firebase dan mengaktifkan Firebase Cloud Messaging untuk Android
Masuk kekonsol Firebase
. Buat proyek Firebase baru yang memasukkan PushDemo sebagai nama Proyek . Nota
Nama unik akan dibuat untuk Anda. Secara default ini terdiri dari varian huruf kecil dari nama yang Anda berikan ditambah angka yang dihasilkan yang dipisahkan oleh tanda hubung. Anda dapat mengubah ini jika Anda ingin asalkan masih unik secara global.
Setelah membuat proyek, pilih Tambahkan Firebase ke aplikasi Android anda.
aplikasi Android AndaDi halaman Tambahkan Firebase ke aplikasi Android Anda, lakukan langkah-langkah berikut.
Untuk nama paket Android, masukkan nama untuk paket Anda. Misalnya:
com.<organization_identifier>.<package_name>.
Pilih Daftarkan aplikasi.
Pilih Unduh google-services.json. Kemudian simpan file ke folder lokal untuk digunakan nanti dan pilih Berikutnya.
Pilih Berikutnya.
Pilih Lanjutkan ke konsol
Nota
Jika tombol Lanjutkan ke konsol tidak diaktifkan, karena memverifikasi pemeriksaan penginstalan, pilih Lewati langkah ini.
Di konsol Firebase, pilih cog untuk proyek Anda. Lalu pilih Pengaturan Proyek.
Pengaturan ProyekNota
Jika Anda belum mengunduh file google-services.json, Anda dapat mengunduhnya di halaman ini.
Beralih ke tab
Cloud Messaging di bagian atas. Salin dan simpan kunci Serveruntuk digunakan nanti. Anda menggunakan nilai ini untuk mengonfigurasi hub pemberitahuan Anda. 
Mendaftarkan aplikasi iOS Anda untuk pemberitahuan push
Untuk mengirim pemberitahuan push ke app iOS, daftarkan aplikasi Anda dengan Apple, dan daftarkan juga pemberitahuan push.
Jika Anda belum mendaftarkan aplikasi, telusuri portal provisi iOS di Pusat Pengembang Apple. Masuk ke portal dengan ID Apple Anda, navigasikan ke Sertifikat , Pengidentifikasi & Profil, lalu pilih Pengidentifikasi . Klik + untuk mendaftarkan aplikasi baru.
Pada layar
Daftarkan Pengidentifikasi Baru , pilih tombol radio ID Aplikasi. Kemudian pilih Lanjutkan. 
Perbarui tiga nilai berikut untuk aplikasi baru Anda, lalu pilih Lanjutkan:
Deskripsi: Ketik nama deskriptif untuk aplikasi Anda.
ID Bundel: Masukkan ID Bundel formulir com.<organization_identifier>.<product_name> seperti yang disebutkan dalam Panduan Distribusi Aplikasi . Dalam cuplikan layar berikut, nilai
mobcatdigunakan sebagai pengidentifikasi organisasi dan nilai PushDemo digunakan sebagai nama produk.
Pemberitahuan Push : Periksa opsi Pemberitahuan Pushdi bagian Kemampuan . Formulir
ID Aplikasi baruTindakan ini menghasilkan ID Aplikasi dan permintaan yang Anda konfirmasi informasinya. Pilih Lanjutkan, lalu pilih Daftarkan untuk mengonfirmasi ID Aplikasi baru.
ID Aplikasi baruSetelah Anda memilih
Daftarkan , Anda akan melihat ID Aplikasi baru sebagai item baris di halaman Sertifikat, Pengidentifikasi & Profil.
Di halaman Sertifikat
, Pengidentifikasi & Profil, di bawahPengidentifikasi , temukan item baris ID Aplikasi yang Anda buat. Kemudian, pilih barisnya untuk menampilkan layar Edit Konfigurasi ID Aplikasi Anda.
Membuat sertifikat untuk Notification Hubs
Sertifikat diperlukan untuk mengaktifkan hub pemberitahuan agar berfungsi dengan
Membuat sertifikat push p12 yang dapat diunggah langsung ke Notification Hub (pendekatan asli)
Membuat sertifikat p8 yang dapat digunakan untuk autentikasi berbasis token (pendekatan yang lebih baru dan direkomendasikan)
Pendekatan yang lebih baru memiliki sejumlah manfaat seperti yang didokumentasikan dalam autentikasi berbasis Token (HTTP/2) untuk APNS. Lebih sedikit langkah yang diperlukan tetapi juga diamanatkan untuk skenario tertentu. Namun, langkah-langkah telah disediakan untuk kedua pendekatan karena keduanya akan berfungsi untuk tujuan tutorial ini.
OPSI 1: Membuat sertifikat push p12 yang dapat diunggah langsung ke Notification Hub
Di Mac Anda, jalankan alat Akses Rantai Kunci. Ini dapat dibuka dari folder Utilitas
atau folder lain di Launchpad. PilihAkses Rantai Kunci
, perluasAsisten Sertifikat , lalu pilih Minta Sertifikat dari Otoritas Sertifikat .
Nota
Secara default, Akses Rantai Kunci memilih item pertama dalam daftar. Ini bisa menjadi masalah jika Anda berada dalam kategori Sertifikat
dan Otoritas Sertifikasi Hubungan Pengembang Di Seluruh Dunia AppleOtoritas Sertifikasi Hubungan Pengembang Seluruh Dunia Apple bukan item pertama dalam daftar. Pastikan Anda memiliki item non-kunci, atau kuncidipilih, sebelum membuat CSR (Permintaan Penandatanganan Sertifikat). PilihAlamat Email Pengguna
Anda , masukkan nilai Nama Umum Anda, pastikan Anda menentukan Disimpan ke disk, lalu pilihLanjutkan . Biarkan Alamat Email CA kosong karena tidak diperlukan.informasi sertifikat yang diharapkan
Masukkan nama untuk file Permintaan Penandatanganan Sertifikat (CSR) di Simpan Sebagai, pilih lokasi di Tempat, lalu pilih Simpan.
Tindakan ini menyimpan file CSR di lokasi yang dipilih. Lokasi default adalahDesktop
. Ingat lokasi yang dipilih untuk file. Kembali ke halaman
Sertifikat, Pengidentifikasi & Profil diPortal Provisi iOS, gulir ke bawah ke opsi Pemberitahuan Push yang dicentang, lalu pilih Konfigurasikan untuk membuat sertifikat.
Jendela layanan Pemberitahuan Push Apple
TLS/SSL muncul. Pilih tombol Buat Sertifikatdi bawah bagian Sertifikat TLS/SSL Pengembangan . 
Layar Buat Sertifikat baru ditampilkan.
Nota
Tutorial ini menggunakan sertifikat pengembangan. Proses yang sama digunakan saat mendaftarkan sertifikat produksi. Pastikan Anda menggunakan jenis sertifikat yang sama saat mengirim pemberitahuan.
Pilih Pilih File, telusuri ke lokasi tempat Anda menyimpan file CSR , lalu klik dua kali nama sertifikat untuk memuatnya. Kemudian pilih Lanjutkan.
Setelah portal membuat sertifikat, pilih tombol Unduh. Simpan sertifikat, dan ingat lokasi penyimpanannya.
Sertifikat diunduh dan disimpan ke komputer Anda di folder
Unduhan Anda. 
Nota
Secara default, sertifikat pengembangan yang diunduh diberi nama aps_development.cer.
Klik dua kali sertifikat push yang diunduh aps_development.cer. Tindakan ini menginstal sertifikat baru di Rantai Kunci, seperti yang ditunjukkan pada gambar berikut:
Nota
Meskipun nama dalam sertifikat Anda mungkin berbeda, nama akan diawali dengan Apple Development iOS Push Services dan memiliki pengidentifikasi bundel yang sesuai yang terkait dengannya.
Di Akses Rantai Kunci,
Kontrol Klik pada sertifikat push baru yang Anda buat di kategori Sertifikat. Pilih Ekspor , beri nama file, pilih formatp12, lalu pilih Simpan .
Anda dapat memilih untuk melindungi sertifikat dengan kata sandi, tetapi kata sandi bersifat opsional. Klik OK jika Anda ingin melewati pembuatan kata sandi. Catat nama file dan lokasi sertifikat p12 yang diekspor. Mereka digunakan untuk mengaktifkan autentikasi dengan APN.
Nota
Nama dan lokasi file p12 Anda mungkin berbeda dari apa yang digambarkan dalam tutorial ini.
OPSI 2: Membuat sertifikat p8 yang dapat digunakan untuk autentikasi berbasis token
Catat detail berikut:
- Awalan ID Aplikasi
(ID Tim ) - ID Bundel
- Awalan ID Aplikasi
Kembali ke Sertifikat , Pengidentifikasi & Profil, klik Kunci .
Nota
Jika Anda sudah memiliki kunci yang dikonfigurasi untuk APNS, Anda dapat menggunakan kembali sertifikat p8 yang Anda unduh tepat setelah dibuat. Jika demikian, Anda dapat mengabaikan langkah-langkah 3 melalui 5.
Klik tombol + (atau tombol Buat kunci) untuk membuat kunci baru.
Berikan nilai Nama Kunci
yang sesuai, lalu periksa opsi layanan Pemberitahuan Push Apple (APNS) , lalu klik Lanjutkan , diikuti denganDaftar di layar berikutnya.Klik
Unduh lalu pindahkan filep8 (diawali dengan AuthKey_ ) ke direktori lokal yang aman, lalu klikSelesai .Nota
Pastikan untuk menyimpan file p8 Anda di tempat yang aman (dan simpan cadangan). Setelah mengunduh kunci Anda, kunci tidak dapat diunduh ulang karena salinan server dihapus.
Pada Keys, klik kunci yang Anda buat (atau kunci yang ada jika Anda telah memilih untuk menggunakannya).
Catat nilai ID Kunci
. Buka sertifikat p8 Anda dalam aplikasi pilihan Anda yang sesuai seperti Visual Studio Code. Catat nilai kunci (antara -----BEGIN PRIVATE KEY----- dan -----END PRIVATE KEY-----).
KUNCI PRIVAT -----BEGIN-----
<key_value>
----- KUNCI PRIVAT-----Nota
Ini adalah nilai token yang akan digunakan nanti untuk mengonfigurasi Notification Hub.
Di akhir langkah-langkah ini, Anda harus memiliki informasi berikut untuk digunakan nanti di Mengonfigurasi hub pemberitahuan Anda dengan informasi APNS:
- ID Tim
(lihat langkah 1) - ID Bundel
(lihat langkah 1) - ID Kunci
(lihat langkah 7) - nilai Token (nilai kunci p8 yang diperoleh pada langkah 8)
Membuat profil provisi untuk aplikasi
Kembali kePortal Provisi iOS
, pilih Sertifikat , Pengidentifikasi & Profil , pilih profildari menu kiri, lalu pilih untuk membuat profil baru. Layar Daftarkan Profil Provisi Baru muncul. Pilih Pengembangan Aplikasi iOS
di bawah Pengembangan sebagai jenis profil provisi, lalu pilih Lanjutkan .daftar profil provisi
Selanjutnya, pilih ID aplikasi yang Anda buat dari daftar drop-down ID Aplikasi, dan pilih Lanjutkan.
ID AplikasiDi jendela Pilih sertifikat, pilih sertifikat pengembangan yang Anda gunakan untuk penandatanganan kode, dan pilih Lanjutkan.
Nota
Sertifikat ini bukan sertifikat push yang Anda buat di langkah sebelumnya. Ini adalah sertifikat pengembangan Anda. Jika tidak ada, Anda harus membuatnya karena ini adalah prasyarat untuk tutorial ini. Sertifikat pengembang dapat dibuat diPortal Pengembang Apple
, melalui Xcode atau di Visual Studio .Kembali ke halaman Sertifikat
, Pengidentifikasi & Profil, pilih profil dari menu sebelah kiri, lalu pilih untuk membuat profil baru. Layar Daftarkan Profil Provisi Baru muncul. Di jendela Pilih sertifikat, pilih sertifikat pengembangan yang Anda buat. Kemudian pilih Lanjutkan.
Selanjutnya, pilih perangkat yang akan digunakan untuk pengujian, dan pilih Lanjutkan.
Terakhir, pilih nama untuk profil di Nama Profil Provisi, dan pilih Hasilkan.
Saat profil provisi baru dibuat, pilih Unduh. Ingat lokasi penyimpanannya.
Telusuri ke lokasi profil provisi, lalu klik dua kali untuk menginstalnya di komputer pengembangan Anda.
Membuat Notification Hub
Di bagian ini, Anda membuat hub pemberitahuan dan mengonfigurasi autentikasi dengan APNS . Anda dapat menggunakan sertifikat pendorongan p12 atau autentikasi berbasis token. Jika Anda ingin menggunakan hub pemberitahuan yang telah Anda buat, Anda dapat melompat ke langkah 5.
Masuk ke Azure.
Klik Buat sumber daya, lalu cari dan pilih Notification Hub, lalu klik Buat.
Perbarui bidang berikut, lalu klik Buat:
DETAIL DASAR
Langganan
: Pilih Langganantarget dari daftar drop-down Grup Sumber Daya
Grup Sumber Daya: Membuatbaru (atau memilih yang sudah ada) DETAIL NAMESPACE
Namespace Notification Hub: Masukkan nama unik global untuk namespaceNotification Hub Nota
Pastikan opsi Buat baru dipilih untuk bidang ini.
DETAIL HUB PEMBERITAHUAN
Notification Hub: Masukkan nama untukNotification Hub
Lokasi: Pilih lokasi yang sesuai dari daftar drop-down
Tingkat Harga : Pertahankan opsi Gratis defaultNota
Kecuali Anda telah mencapai jumlah maksimum hub pada tingkat gratis.
Setelah Hub Pemberitahuan
disediakan, navigasikan ke sumber daya tersebut. Navigasi keHub Pemberitahuan
baru Anda. Pilih Kebijakan Akses
dari daftar (di bawah KELOLA ).Catat nilai Nama Kebijakan
bersama dengan nilai String Koneksi yang sesuai.
Mengonfigurasi Notification Hub Anda dengan informasi APNS
Di bawah
Nota
Gunakan Produksi
OPSI 1: Menggunakan sertifikat push .p12
PilihSertifikat
. Pilih ikon file.
Pilih file .p12 yang Anda ekspor sebelumnya, lalu pilih Buka.
Jika perlu, tentukan kata sandi yang benar.
Pilih mode Sandbox.
Pilih Simpan.
OPSI 2: Menggunakan autentikasi berbasis token
PilihToken
. Masukkan nilai berikut yang Anda peroleh sebelumnya:
- ID Kunci
- ID Bundel
- ID Tim
- Token
Pilih
Sandbox . Pilih Simpan.
Mengonfigurasi hub pemberitahuan Anda dengan informasi FCM
- Pilih
Google (GCM/FCM) di bagian Pengaturan di menu sebelah kiri. - Masukkan kunci server
Anda catat dari Google Firebase Console . - Pilih Simpan pada toolbar.
Membuat aplikasi backend ASP.NET Core Web API
Di bagian ini, Anda membuat
Membuat proyek web
Di
Visual Studio, pilih File Solusi Baru .Pilih .NET Core>App>ASP.NET Core>API>Next.
Dalam dialog
Mengonfigurasi ASP.NET Core Web API baru Anda, pilihKerangka Kerja Target .NET Core 3.1 .Masukkan
PushDemoApi untuk Nama Proyeklalu pilih Buat .Mulai penelusuran kesalahan (perintah + Masukkan) untuk menguji aplikasi yang di-template.
Nota
Aplikasi templat dikonfigurasi untuk menggunakan
WeatherForecastController sebagai launchUrl . Ini diatur dalamlaunchSettings.json Properti. Jika Anda diminta dengan sertifikat pengembangan tidak valid yang ditemukan pesan:
Klik Ya untuk menyetujui menjalankan alat 'dotnet dev-certs https' untuk memperbaikinya. Alat 'dotnet dev-certs https' kemudian meminta Anda untuk memasukkan kata sandi untuk sertifikat dan kata sandi untuk Rantai Kunci Anda.
Klik Ya saat diminta untuk Menginstal dan mempercayai sertifikat baru, lalu masukkan kata sandi untuk Rantai Kunci Anda.
Perluas folder Pengontrol
, lalu hapus WeatherForecastController.cs .Hapus WeatherForecast.cs.
Siapkan nilai konfigurasi lokal menggunakan alat Secret Manager. Memisahkan rahasia dari solusi memastikan bahwa rahasia tersebut tidak berakhir di kontrol sumber. Buka Terminal
lalu buka direktori file proyek dan jalankan perintah berikut: dotnet user-secrets init dotnet user-secrets set "NotificationHub:Name" <value> dotnet user-secrets set "NotificationHub:ConnectionString" <value>Ganti nilai tempat penampung dengan nama hub pemberitahuan dan nilai string koneksi Anda sendiri. Anda mencatatnya di bagian membuat hub pemberitahuan. Jika tidak, Anda dapat mencarinya di Azure.
NotificationHub:Name:
Lihat Namadi ringkasan Essentials di bagian atasGambaran Umum . NotificationHub:ConnectionString:
Lihat DefaultFullSharedAccessSignature dalam Kebijakan Akses
Mengautentikasi klien menggunakan Kunci API (Opsional)
Kunci API tidak seaman token, tetapi cukup untuk tujuan tutorial ini. Kunci API dapat dikonfigurasi dengan mudah melalui ASP.NET Middleware.
Tambahkan kunci API ke nilai konfigurasi lokal.
dotnet user-secrets set "Authentication:ApiKey" <value>Nota
Anda harus mengganti nilai tempat penampung dengan nilai Anda sendiri dan mencatatnya.
Control Klik pada proyekPushDemoApi, pilih Folder Baru dari menu Tambahkan , lalu klikTambahkan menggunakan Autentikasisebagai Nama Folder . Kontrol Klik pada folder Autentikasi, lalu pilih File Baru... dari menu tambahkan. Pilih
Kelas Kosong Umum , masukkan ApiKeyAuthOptions.cs untukNama, lalu klik Baru menambahkan implementasi berikut.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; } } }Tambahkan Kelas Kosong
lain ke folder Autentikasi yang disebut ApiKeyAuthHandler.cs , lalu tambahkan implementasi berikut.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)); } } }Nota
Handler Autentikasi
adalah jenis yang mengimplementasikan perilaku skema, dalam hal ini skema Kunci API kustom. Tambahkan Kelas Kosong
lain ke folder Autentikasi yang disebut ApiKeyAuthenticationBuilderExtensions.cs , lalu tambahkan implementasi berikut.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); } } }Nota
Metode ekstensi ini menyederhanakan kode konfigurasi middleware dalam Startup.cs membuatnya lebih mudah dibaca dan umumnya lebih mudah diikuti.
Di
Startup.cs , perbarui metodeConfigureServices untuk mengonfigurasi autentikasi Kunci API di bawah panggilan ke layanan . Metode AddControllers.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); }Masih dalam Startup.cs, perbarui metode Konfigurasikan untuk memanggil metode ekstensi UseAuthentication dan UseAuthorization pada aplikasi IApplicationBuilder. Pastikan metode tersebut dipanggil setelah UseRouting dan sebelum aplikasi . 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(); }); }Nota
Memanggil UseAuthentication mendaftarkan middleware yang menggunakan skema autentikasi yang terdaftar sebelumnya (dari ConfigureServices). Ini harus dipanggil sebelum middleware apa pun yang bergantung pada pengguna yang diautentikasi.
Menambahkan dependensi dan mengonfigurasi layanan
ASP.NET Core mendukung pola desain perangkat lunak injeksi dependensi (DI)
Penggunaan hub pemberitahuan dan SDK Notification Hubs untuk operasi backend dienkapsulasi dalam layanan. Layanan ini terdaftar dan tersedia melalui abstraksi yang sesuai.
Control Klik pada folder Dependensi, lalu pilih Kelola Paket NuGet... .Cari Microsoft.Azure.NotificationHubs dan pastikan telah diperiksa.
Klik Tambahkan Paket, lalu klik Terima saat diminta untuk menerima persyaratan lisensi.
Control + Klik pada proyek PushDemoApi, pilih Folder Baru dari menu Tambahkan, lalu klik Tambahkan menggunakan Model sebagai Nama Folder .
Control Klik pada folder Model, lalu pilih File Baru... dari menuTambahkan .PilihKelas Kosong
Umum , masukkan PushTemplates.cs untukNama, lalu klik Baru menambahkan implementasi berikut. 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)\" }"; } } }Nota
Kelas ini berisi payload pemberitahuan yang ditokenisasi untuk pemberitahuan generik dan senyap yang diperlukan oleh skenario ini. Payload didefinisikan di luar Penginstalan
untuk memungkinkan eksperimen tanpa harus memperbarui penginstalan yang ada melalui layanan. Menangani perubahan pada penginstalan dengan cara ini di luar cakupan untuk tutorial ini. Untuk produksi, pertimbangkan templat kustom . Tambahkan Kelas Kosong
lain ke folder Model yang disebut DeviceInstallation.cs , lalu tambahkan implementasi berikut.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>(); } }Tambahkan
Kelas Kosong lainnya ke folder Model yang disebut NotificationRequest.cs , lalu tambahkan implementasi berikut.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; } } }Tambahkan Kelas Kosong
lain ke folder Model yang disebut NotificationHubOptions.cs , lalu tambahkan implementasi berikut.using System.ComponentModel.DataAnnotations; namespace PushDemoApi.Models { public class NotificationHubOptions { [Required] public string Name { get; set; } [Required] public string ConnectionString { get; set; } } }Tambahkan folder baru ke proyek
PushDemoApi yang disebut Services .Tambahkan Antarmuka Kosong
ke folder Layanan yang disebut INotificationService.cs , lalu tambahkan implementasi berikut.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); } }Tambahkan Kelas Kosong
ke folder Layanan yang disebut NotificationHubsService.cs , lalu tambahkan kode berikut untuk mengimplementasikan antarmuka INotificationService: 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); } } }Nota
Ekspresi tag yang disediakan untuk SendTemplateNotificationAsync dibatasi hingga 20 tag. Ini dibatasi hingga 6 untuk sebagian besar operator tetapi ekspresi hanya berisi OU (||) dalam kasus ini. Jika ada lebih dari 20 tag dalam permintaan, tag tersebut harus dibagi menjadi beberapa permintaan. Lihat dokumentasi Perutean dan Ekspresi Tag
untuk detail selengkapnya. Di
Startup.cs , perbarui metodeConfigureServices untuk menambahkan NotificationHubsService sebagai implementasi singleton INotificationService .using PushDemoApi.Models; using PushDemoApi.Services; public void ConfigureServices(IServiceCollection services) { ... services.AddSingleton<INotificationService, NotificationHubService>(); services.AddOptions<NotificationHubOptions>() .Configure(Configuration.GetSection("NotificationHub").Bind) .ValidateDataAnnotations(); }
Membuat API pemberitahuan
Kontrol Klik pada folder Pengontrol, lalu pilih File Baru... dari menuTambahkan .Pilih
ASP.NET Core Web API Controller Class , masukkanNotificationsController untukNama, lalu klik New .Nota
Jika Anda mengikuti
Visual Studio 2019 , pilih Pengontrol API dengan tindakan baca/tulis templat.Tambahkan namespace berikut ke bagian atas file.
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;Perbarui pengontrol templat sehingga berasal dari
ControllerBase dan dihiasi dengan atribut ApiController . [ApiController] [Route("api/[controller]")] public class NotificationsController : ControllerBase { // Templated methods here }Nota
Kelas dasar Controller menyediakan dukungan untuk tampilan tetapi ini tidak diperlukan dalam hal ini sehingga ControllerBase dapat digunakan sebagai gantinya. Jika Anda mengikuti
Visual Studio 2019 , Anda dapat melewati langkah ini. Jika Anda memilih untuk menyelesaikan
Mengautentikasi klien menggunakan bagian Kunci API, Anda juga harus menghiasNotificationsController dengan atribut Otorisasi. [Authorize]Perbarui konstruktor untuk menerima instans terdaftar INotificationService sebagai argumen dan tetapkan ke anggota readonly.
readonly INotificationService _notificationService; public NotificationsController(INotificationService notificationService) { _notificationService = notificationService; }Di
launchSettings.json (dalam folder Properti), ubah launchUrl dari menjadi api/pemberitahuan agar sesuai dengan URL yang ditentukan dalam atribut RegistrationsController Route .Mulai penelusuran kesalahan (perintah
Masukkan ) untuk memvalidasi aplikasi bekerja dengan NotificationsControllerbaru dan mengembalikan status tidak sah 401. Nota
Visual Studio mungkin tidak secara otomatis meluncurkan aplikasi di browser. Anda akan menggunakan
Postman untuk menguji API mulai saat ini. Pada tab
Postman baru, atur permintaan ke GET . Masukkan alamat di bawah ini menggantikan tempat penampung <applicationUrl> dengan aplikasi httpsUrl ditemukan di properti >launchSettings.json.<applicationUrl>/api/notificationsNota
applicationUrl harus 'https://localhost:5001' untuk profil default. Jika Anda menggunakan IIS
(default di Visual Studio 2019 di Windows), Anda harus menggunakan aplikasi Url ditentukan dalam itemiisSettings. Anda akan menerima respons 404 jika alamat salah. Jika Anda memilih untuk menyelesaikan
Mengautentikasi klien menggunakan bagian Kunci API, pastikan untuk mengonfigurasi header permintaan untuk menyertakan nilai apikeyAnda. Kunci Nilai apikey <your_api_key> Klik tombol Kirim
. Nota
Anda akan menerima status OK
200 dengan beberapa konten JSON . Jika Anda menerima peringatan verifikasi sertifikat SSL
, Anda dapat mengalihkan permintaan verifikasi sertifikat SSL Postman . Ganti metode kelas templat di NotificationsController.cs dengan kode berikut.
[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(); }
Membuat aplikasi API
Anda sekarang membuat Aplikasi API
Klik
Buat sumber daya, lalu cari dan pilihAplikasi API, lalu klik Buat .Perbarui bidang berikut, lalu klik Buat.
Nama aplikasi:
Masukkan nama unik global untuk Aplikasi APILangganan :
Pilih target yang sama Langganan Anda membuat hub pemberitahuan.Grup Sumber Daya :
Pilih Grup Sumber Daya yang sama Anda membuat hub pemberitahuan.Paket/Lokasi App Service:
Membuat Paket App Servicebaru Nota
Ubah dari opsi default ke paket yang menyertakan dukungan SSL
. Jika tidak, Anda harus mengambil langkah-langkah yang sesuai saat bekerja dengan aplikasi seluler untuk mencegah permintaan httpdiblokir. Application Insights:
Pertahankan opsi yang disarankan (sumber daya baru akan dibuat menggunakan nama tersebut) atau pilih sumber daya yang sudah ada.Setelah aplikasi API disediakan, navigasikan ke sumber daya tersebut.
Catat properti URL
di ringkasan Essentials di bagian atasGambaran Umum . URL ini adalah titik akhir backend Anda yang akan digunakan nanti dalam tutorial ini. Nota
URL menggunakan nama aplikasi API yang Anda tentukan sebelumnya, dengan format
https://<app_name>.azurewebsites.net.Pilih Konfigurasi
dari daftar (di bawah pengaturan ). Untuk setiap pengaturan di bawah ini, klik
Pengaturan aplikasi baru untuk memasukkan NamadanNilai , lalu klik OK .Nama Nilai Authentication:ApiKey<api_key_value> NotificationHub:Name<hub_name_value> NotificationHub:ConnectionString<hub_connection_string_value> Nota
Ini adalah pengaturan yang sama dengan yang Anda tentukan sebelumnya di pengaturan pengguna. Anda harus dapat menyalin ini. Pengaturan Authentication:ApiKey diperlukan hanya jika Anda memilih untuk menyelesaikan klien Authenticate menggunakan bagian Kunci API. Untuk skenario produksi, Anda dapat melihat opsi seperti Azure KeyVault. Ini telah ditambahkan sebagai pengaturan aplikasi untuk kesederhanaan dalam hal ini.
Setelah semua pengaturan aplikasi ditambahkan, klik Simpan, lalu Lanjutkan.
Menerbitkan layanan backend
Selanjutnya, Anda menyebarkan aplikasi ke Aplikasi API untuk membuatnya dapat diakses dari semua perangkat.
Nota
Langkah-langkah berikut khusus untuk Visual Studio untuk Mac. Jika Anda mengikuti
Ubah konfigurasi Anda dari
Debug menjadi Rilis jika Anda belum melakukannya. Control + KlikPushDemoApi project, lalu pilih Terbitkan ke Azure... dari menu Terbitkan.
Ikuti alur autentikasi jika diminta untuk melakukannya. Gunakan akun yang Anda gunakan di sebelumnya untuk membuat bagian Aplikasi API.
Pilih Aplikasi API Azure App Service yang Anda buat sebelumnya dari daftar sebagai target penerbitan Anda, lalu klik Terbitkan.
Setelah Anda menyelesaikan wizard, wizard menerbitkan aplikasi ke Azure lalu membuka aplikasi. Catat url jika Anda belum melakukannya. URL ini adalah titik akhir backend Anda yang digunakan nanti dalam tutorial ini.
Memvalidasi API yang diterbitkan
Di Postman buka tab baru, atur permintaan ke PUT dan masukkan alamat di bawah ini. Ganti tempat penampung dengan alamat dasar yang Anda catat di bagian sebelumnya menerbitkan layanan backend.
https://<app_name>.azurewebsites.net/api/notifications/installationsNota
Alamat dasar harus dalam format
https://<app_name>.azurewebsites.net/Jika Anda memilih untuk menyelesaikan
Mengautentikasi klien menggunakan bagian Kunci API, pastikan untuk mengonfigurasi header permintaan untuk menyertakan nilai apikeyAnda. Kunci Nilai apikey <your_api_key> Pilih opsi mentah
untukIsi , lalu pilih JSON dari daftar opsi format, lalu sertakan beberapa tempat penampung konten JSON:{}Klik Kirim.
Nota
Anda harus menerima status UnprocessableEntity
422 dari layanan. Lakukan langkah 1-4 lagi tetapi kali ini menentukan titik akhir permintaan untuk memvalidasi Anda menerima respons 400 Permintaan Buruk.
https://<app_name>.azurewebsites.net/api/notifications/requests
Nota
Belum dimungkinkan untuk menguji API menggunakan data permintaan yang valid karena ini akan memerlukan informasi khusus platform dari aplikasi seluler klien.
Membuat aplikasi React Native lintas platform
Di bagian ini, Anda membangun aplikasi seluler React Native yang menerapkan pemberitahuan push secara lintas platform.
Ini memungkinkan Anda untuk mendaftar dan membatalkan pendaftaran dari hub pemberitahuan melalui layanan backend yang Anda buat.
Pemberitahuan ditampilkan saat tindakan ditentukan dan aplikasi berada di latar depan. Jika tidak, pemberitahuan muncul di pusat pemberitahuan.
Nota
Anda biasanya akan melakukan tindakan pendaftaran (dan deregistrasi) selama titik yang sesuai dalam siklus hidup aplikasi (atau sebagai bagian dari pengalaman eksekusi pertama Anda mungkin) tanpa input pendaftaran/deregister pengguna eksplisit. Namun, contoh ini akan memerlukan input pengguna eksplisit untuk memungkinkan fungsionalitas ini dieksplorasi dan diuji dengan lebih mudah.
Membuat solusi React Native
Di
Terminal, perbarui alat lingkungan Anda, yang diperlukan untuk bekerja dengan React Native menggunakan perintah berikut:# 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 cocoapodsDi
Terminal, jalankan perintah berikut, jika Anda telah menginstal CLIReact Nativeuntuk menghapus instalannya. Gunakannpxuntuk mengakses versi React Native CLI terbaru yang tersedia secara otomatis:npm uninstall -g react-native-cliNota
React Native memiliki antarmuka baris perintah bawaan. Daripada menginstal dan mengelola versi CLI tertentu secara global, kami sarankan Anda mengakses versi saat ini saat runtime menggunakan
npx, yang dikirim dengan Node.js. Dengannpx react-native <command>, versi stabil CLI saat ini akan diunduh dan dijalankan pada saat perintah dijalankan.Navigasikan ke folder proyek tempat Anda ingin membuat aplikasi baru. Gunakan templat berbasis Typescript dengan menentukan parameter
--template:# init new project with npx npx react-native init PushDemo --template react-native-template-typescriptJalankan server metro, yang membangun bundel JavaScript dan memantau pembaruan kode apa pun untuk merefresh bundel secara real time:
cd PushDemo npx react-native startJalankan aplikasi iOS untuk memverifikasi penyiapan. Pastikan Anda memulai simulator iOS atau menghubungkan perangkat iOS, sebelum menjalankan perintah berikut:
npx react-native run-iosJalankan aplikasi Android untuk memverifikasi penyiapan. Diperlukan beberapa langkah tambahan untuk mengonfigurasi emulator atau perangkat Android agar dapat mengakses server metro React Native. Perintah berikut menghasilkan bundel JavaScript awal untuk Android dan memasukkannya ke dalam folder aset.
# 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:8081Skrip ini akan disebarkan sebelumnya dengan versi awal aplikasi. Setelah disebarkan, konfigurasikan emulator atau perangkat Anda untuk mengakses server metro dengan menentukan alamat ip server. Jalankan perintah berikut untuk membangun dan menjalankan aplikasi Android:
npx react-native run-androidSetelah berada di aplikasi, tekan
CMD+M(emulator) atau goyangkan perangkat untuk mengisi pengaturan pengembang, navigasikan keSettings>Change Bundle Location, dan tentukan alamat ip server metro dengan port default:<metro-server-ip-address>:8081.Dalam file
App.tsx, terapkan perubahan apa pun pada tata letak halaman, simpan dan buat perubahan secara otomatis tercermin di aplikasi iOS dan Android.
Menginstal paket yang diperlukan
Anda memerlukan tiga paket berikut agar sampel ini berfungsi:
React Native Push Notifications iOS - Project GitHub
Paket ini dibuat ketika PushNotificationIOS dibagi dari inti React Native. Paket ini secara asli mengimplementasikan pemberitahuan push untuk iOS dan menyediakan antarmuka React Native untuk mengaksesnya. Jalankan perintah berikut untuk menginstal paket:
yarn add @react-native-community/push-notification-iosReact Native Push Notifications Lintas platform
Paket ini menerapkan pemberitahuan lokal dan jarak jauh di iOS dan Android dengan cara lintas platform. Jalankan perintah berikut untuk menginstal paket:
yarn add react-native-push-notificationPaket info perangkat Paket menyediakan informasi tentang perangkat dalam runtime. Gunakan untuk menentukan pengidentifikasi perangkat, yang digunakan untuk mendaftar untuk pemberitahuan push. Jalankan perintah berikut untuk menginstal paket:
yarn add react-native-device-info
Menerapkan komponen lintas platform
Buat dan terapkan
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;Buat dan terapkan
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(); } }Buat dan terapkan
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}`; } } }Konfigurasikan aplikasi. Buka
package.jsondan tambahkan definisi skrip berikut:"configure": "cp .app.config.tsx src/config/AppConfig.tsx"Kemudian jalankan skrip ini, yang akan menyalin konfigurasi default ke folder
config.yarn configureLangkah terakhir adalah memperbarui file konfigurasi yang disalin pada langkah sebelumnya dengan informasi akses API. Tentukan parameter
apiKeydanapiUrl:module.exports = { appName: "PushDemo", env: "production", apiUrl: "https://<azure-push-notifications-api-url>/api/", apiKey: "<api-auth-key>", };
Menerapkan UI lintas platform
Tentukan tata letak halaman
<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>Terapkan gaya
const styles = StyleSheet.create({ container: { flex: 1, alignItems: "center", justifyContent: 'flex-end', margin: 50, }, button: { margin: 5, width: "100%", } });Menginisialisasi komponen halaman
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, ); }Tentukan penangan klik tombol
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 }); } }Menangani pendaftaran token yang diterima dan pemberitahuan push
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`); } } };
Mengonfigurasi proyek Android asli untuk pemberitahuan push
Mengonfigurasi paket Android yang diperlukan
Paket ini secara otomatis ditautkan saat membangun aplikasi. Anda memiliki beberapa langkah tambahan di bawah ini untuk menyelesaikan proses konfigurasi.
Mengonfigurasi manifes Android
Di "android/app/src/main/AndroidManifest.xml", verifikasi nama paket, izin, dan layanan yang diperlukan. Pastikan Anda mendaftarkan penerima RNPushNotificationPublisher dan RNPushNotificationBootEventReceiver, dan mendaftarkan layanan RNPushNotificationListenerService. Metadata pemberitahuan dapat digunakan untuk menyesuaikan tampilan pemberitahuan push Anda.
<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>
Mengonfigurasi layanan Google
Di "android/app/build.gradle" daftarkan Google Services:
dependencies {
...
implementation 'com.google.firebase:firebase-analytics:17.3.0'
...
}
apply plugin: 'com.google.gms.google-services'
Salin file "google-services.json" yang Anda unduh selama penyiapan FCM ke folder proyek "android/app/".
Menangani pemberitahuan push untuk Android
Anda mengonfigurasi layanan RNPushNotificationListenerService yang ada untuk menangani pemberitahuan push Android yang masuk. Layanan ini terdaftar sebelumnya dalam manifes aplikasi. Ini memproses pemberitahuan masuk dan memproksinya ke bagian React Native lintas platform. Tidak ada langkah tambahan yang diperlukan.
Mengonfigurasi proyek iOS asli untuk pemberitahuan push
Mengonfigurasi paket iOS yang diperlukan
Paket ini secara otomatis ditautkan saat membangun aplikasi. Yang perlu Anda lakukan adalah menginstal pod asli:
npx pod-install
Mengonfigurasi Info.plist dan Entitlements.plist
Buka folder "PushDemo/ios" Anda dan buka ruang kerja "PushDemo.xcworkspace", pilih proyek teratas "PushDemo" dan pilih tab "Kemampuan & Penandatanganan".
Perbarui Pengidentifikasi Bundel agar sesuai dengan nilai yang digunakan dalam profil provisi.
Tambahkan dua Kemampuan baru menggunakan tombol - "+":
- Kemampuan Mode Latar Belakang dan centang Pemberitahuan Jarak Jauh.
- Kemampuan Pemberitahuan Push
Menangani pemberitahuan push untuk iOS
Buka "AppDelegate.h" dan tambahkan impor berikut:
#import <UserNotifications/UNUserNotificationCenter.h>Perbarui daftar protokol, didukung oleh "AppDelegate", dengan menambahkan
UNUserNotificationCenterDelegate:@interface AppDelegate : UIResponder <UIApplicationDelegate, RCTBridgeDelegate, UNUserNotificationCenterDelegate>Buka "AppDelegate.m" dan konfigurasikan semua panggilan balik iOS yang diperlukan:
#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); }
Menguji solusi
Anda sekarang dapat menguji pengiriman pemberitahuan melalui layanan backend.
Mengirim pemberitahuan pengujian
Buka tab baru di Postman.
Atur permintaan ke POST, dan masukkan alamat berikut:
https://<app_name>.azurewebsites.net/api/notifications/requestsJika Anda memilih untuk menyelesaikan
Mengautentikasi klien menggunakan bagian Kunci API, pastikan untuk mengonfigurasi header permintaan untuk menyertakan nilai apikeyAnda. Kunci Nilai apikey <your_api_key> Pilih opsi mentah
untukIsi , lalu pilih JSON dari daftar opsi format, lalu sertakan beberapa tempat penampung konten JSON:{ "text": "Message from Postman!", "action": "action_a" }Pilih tombol Kode
, yang berada di bawah tombol HTMLSimpan di kanan atas jendela. Permintaan akan terlihat mirip dengan contoh berikut saat ditampilkan untuk(tergantung pada apakah Anda menyertakan header apikey ): 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" }Jalankan aplikasi PushDemo
pada satu atau kedua platform target ( Android daniOS ). Nota
Jika Anda menguji di Android memastikan bahwa Anda tidak berjalan di Debug, atau jika aplikasi telah disebarkan dengan menjalankan aplikasi, tutup paksa aplikasi dan mulai lagi dari peluncur.
Di aplikasi
PushDemo, ketuk tombol Daftarkan .Kembali ke
Postman , tutup jendela Generate Code Snippets (jika Anda belum melakukannya) lalu klik tombol Kirim .Validasi bahwa Anda mendapatkan respons
200 OK di Postman dan pemberitahuan muncul di aplikasi yang menunjukkan tindakan ActionA yang diterima .Tutup aplikasi
PushDemo, lalu klik tombol Kirim lagi diPostman . Validasi bahwa Anda mendapatkan respons
200 OK di Postman lagi. Validasi bahwa pemberitahuan muncul di area pemberitahuan untuk aplikasi PushDemo dengan pesan yang benar. Ketuk pemberitahuan untuk mengonfirmasi bahwa aplikasi membuka dan menampilkan tindakan ActionA yang diterima pemberitahuan.
Kembali ke
Postman , ubah isi permintaan sebelumnya untuk mengirim pemberitahuan senyap yang menentukan action_b alih-alihaction_a untuk tindakannilai .{ "action": "action_b", "silent": true }Dengan aplikasi masih terbuka, klik tombol Kirim di Postman.
Validasi bahwa Anda mendapatkan respons
200 OK di Postman dan bahwa pemberitahuan muncul di aplikasi yang menunjukkan tindakan TindakanB yang diterima alih-alih tindakan ActionAditerima .Tutup aplikasi
PushDemo, lalu klik tombol Kirim lagi diPostman . Validasi bahwa Anda mendapatkan respons
200 OK di Postman dan bahwa pemberitahuan senyap tidak muncul di area pemberitahuan.
Pemecahan masalah
Tidak ada respons dari layanan backend
Saat menguji secara lokal, pastikan bahwa layanan backend berjalan dan menggunakan port yang benar.
Jika pengujian terhadapAplikasi Azure API
Pastikan untuk memeriksa bahwa Anda telah menentukan alamat dasar dengan benar di Postman atau dalam konfigurasi aplikasi seluler saat menguji melalui klien. Alamat dasar harus secara indikatif https://<api_name>.azurewebsites.net/ atau https://localhost:5001/ saat pengujian secara lokal.
Tidak menerima pemberitahuan di Android setelah memulai atau menghentikan sesi debug
Pastikan Anda mendaftar lagi setelah memulai atau menghentikan sesi debug. Debugger akan menyebabkan token Firebase baru dibuat. Penginstalan hub pemberitahuan juga harus diperbarui.
Menerima kode status 401 dari layanan backend
Validasi bahwa Anda mengatur apikey header permintaan dan nilai ini cocok dengan yang telah Anda konfigurasi untuk layanan backend.
Jika Anda menerima kesalahan ini saat menguji secara lokal, pastikan nilai kunci yang Anda tentukan dalam konfigurasi klien, cocok dengan nilai Autentikasi :ApiKey pengaturan pengguna yang digunakan oleh API .
Jika Anda menguji denganAplikasi API
Nota
Jika Anda telah membuat atau mengubah pengaturan ini setelah Anda menyebarkan layanan backend, maka Anda harus memulai ulang layanan agar berlaku.
Jika Anda memilih untuk tidak menyelesaikan Mengautentikasi klien menggunakan bagian Kunci API, pastikan Anda tidak menerapkan atribut Otorisasi ke kelas NotificationsController.
Menerima kode status 404 dari layanan backend
Validasi bahwa titik akhir dan metode permintaan HTTP sudah benar. Misalnya, titik akhir harus secara indikatif:
[PUT] -
[HAPUS]
https://<api_name>.azurewebsites.net/api/notifications/installations/<installation_id> -
[POST]
https://<api_name>.azurewebsites.net/api/notifications/requests
Atau saat menguji secara lokal:
[PUT] -
[HAPUS]
https://localhost:5001/api/notifications/installations/<installation_id> -
[POST]
https://localhost:5001/api/notifications/requests
Saat menentukan alamat dasar di aplikasi klien, pastikan alamat tersebut berakhir dengan /. Alamat dasar harus secara indikatif https://<api_name>.azurewebsites.net/ atau https://localhost:5001/ saat pengujian secara lokal.
Tidak dapat mendaftar dan pesan kesalahan hub pemberitahuan ditampilkan
Verifikasi bahwa perangkat pengujian memiliki konektivitas jaringan. Kemudian, tentukan kode status respons Http dengan mengatur titik henti untuk memeriksa nilai properti
Tinjau saran pemecahan masalah sebelumnya jika berlaku berdasarkan kode status.
Atur titik henti pada baris yang mengembalikan kode status khusus ini untuk API masing-masing. Kemudian coba panggil layanan backend saat menelusuri kesalahan secara lokal.
Validasi layanan backend berfungsi seperti yang diharapkan melalui Postman menggunakan payload yang sesuai. Gunakan payload aktual yang dibuat oleh kode klien untuk platform yang dimaksud.
Tinjau bagian konfigurasi khusus platform untuk memastikan bahwa tidak ada langkah yang terlewatkan. Periksa apakah nilai yang sesuai sedang diselesaikan untuk variabel installation id dan token untuk platform yang sesuai.
Tidak dapat mengatasi ID untuk pesan kesalahan perangkat ditampilkan
Tinjau bagian konfigurasi khusus platform untuk memastikan bahwa tidak ada langkah yang terlewatkan.
Tautan terkait
- gambaran umum Azure Notification Hubs
- Menginstal Visual Studio untuk Mac
- Menginstal Visual Studio Code
- Menyiapkan lingkungan pengembangan React Native
- Notification Hubs SDK untuk operasi back-end
- Notification Hubs SDK di GitHub
- Daftar dengan backend aplikasi
- Manajemen pendaftaran
- Bekerja dengan tag
- Bekerja dengan templat kustom
Langkah berikutnya
Anda sekarang harus memiliki aplikasi React Native dasar yang terhubung ke hub pemberitahuan melalui layanan backend dan dapat mengirim dan menerima pemberitahuan.
Anda mungkin perlu menyesuaikan contoh yang digunakan dalam tutorial ini agar sesuai dengan skenario Anda sendiri. Menerapkan penanganan kesalahan yang lebih kuat, logika coba lagi, dan pengelogan juga disarankan.