Tutorial: Kirim pemberitahuan push ke aplikasi React Native menggunakan Azure Notification Hubs melalui layanan backend
Unduh sampelDalam tutorial ini, Anda menggunakan Azure Notification Hubs untuk mendorong pemberitahuan ke aplikasi React Native yang menargetkan Android dan iOS.
Backend API Web ASP.NET Core digunakan untuk menangani pendaftaran perangkat untuk klien yang menggunakan pendekatan Instalasi terbaru dan terbaik. Layanan ini juga akan mengirimkan pemberitahuan push secara lintas platform.
Operasi ini ditangani menggunakan Notification Hubs SDK untuk operasi backend. Detail lebih lanjut tentang pendekatan keseluruhan disediakan dalam dokumentasi Mendaftar dari backend aplikasi Anda.
Tutorial ini akan membawa Anda melalui langkah-langkah berikut:
Prasyarat
Untuk mengikutinya, Anda memerlukan:
- Langganan Azure tempa Anda dapat membuat dan mengelola sumber daya.
- Mac dengan Visual Studio untuk Mac terpasang (atau PC yang menjalankan Visual Studio 2019 dengan Pengembangan Seluler 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 dan di atasnya dengan Google Play Services terinstal).
Untuk iOS, Anda harus memiliki:
- Akun Pengembang Apple aktif.
- Perangkat iOS fisik yang didaftarkan ke akun pengembang Anda(menjalankan iOS 13.0 dan di atasnya).
- Sertifikat pengembangan.p12 yang diinstal di rantai kunci Anda, yang memungkinkan Anda menjalankan aplikasi di perangkat fisik.
Catatan
Simulator iOS tidak mendukung pemberitahuan jarak jauh sehingga diperlukan perangkat fisik ketika menjelajahi sampel ini di iOS. Namun, Anda tidak perlu menjalankan aplikasi pada Android dan iOS untuk menyelesaikan tutorial ini.
Anda dapat mengikuti langkah-langkah dalam contoh prinsip-prinsip pertama ini tanpa pengalaman sebelumnya. Namun, Anda akan mendapatkan keuntungan dari memiliki keakraban dengan aspek-aspek berikut.
- Portal Pengembang Apple
- Inti 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 Layanan Pemberitahuan Push dan Azure Notification Hub
Di bagian ini, Anda menyiapkan Olahpesan Firebase Cloud (FCM) dan Layanan Pemberitahuan Push Apple (APNS). Kemudian, Anda membuat dan mengonfigurasikan notification hub untuk bekerja dengan layanan tersebut.
Buat proyek Firebase dan aktfikan Olahpesan Firebase Cloud untuk Android
Masuk ke Konsol Firebase. Buat proyek Firebase baru yang memasuki Demo Dorong sebagai Nama proyek.
Catatan
Nama unik akan dibuat untuk Anda. Secara default, nama ini terdiri dari varian huruf kecil dari nama yang Anda berikan ditambah nomor yang dihasilkan dan dipisahkan oleh tanda hubung. Anda dapat mengubah nama ini jika Anda mau asalkan masih unik secara global.
Setelah membuat proyek, pilih Tambahkan Firebase ke aplikasi Android Anda.
Di halaman Tambahkan Firestone ke aplikasi Android, lakukan langkah-langkah berikut ini.
Untuk nama paket Android, masukkan nama untuk paket Anda. Contoh:
com.<organization_identifier>.<package_name>.
Pilih Daftarkan aplikasi.
Pilih Unduh google-services.json. Lalu simpan file ke dalam folder lokal untuk digunakan nanti dan pilih Berikutnya.
Pilih Selanjutnya.
Pilih Lanjutkan ke konsol
Catatan
Jika tombol Lanjutkan ke konsol tidak diaktifkan, karena periksa instalasi, lalu pilih Lompati langkah ini.
Di konsol Firebase, pilih cog untuk proyek Anda. Pilih Pengaturan Proyek.
Catatan
Jika Anda belum mengunduh file google-services.json, Anda dapat mengunduhnya di halaman ini.
Alihkan ke tab Perpesanan Cloud di bagian atas. Salin dan simpan Kunci Server untuk digunakan nanti. Anda menggunakan nilai ini untuk mengonfigurasi hub pemberitahuan Anda.
Daftarkan aplikasi iOS untuk pemberitahuan push
Untuk mengirim pemberitahuan push ke app iOS, daftarkan aplikasi Anda dengan Apple, dan juga daftarkan untuk pemberitahuan push.
Jika Anda belum mendaftarkan aplikasi, telusuri ke Portal Provisi iOS di Pusat Pengembang Apple. Masuk ke portal dengan ID Apple Anda, navigasikan ke Sertifikat, Pengenal & Profil, lalu pilih Pengenal. Klik + untuk mendaftarkan aplikasi baru.
Pada layar Daftarkan Pengidentifikasi Baru, pilih tombol radio App ID. Lalu pilih Lanjutkan.
Perbarui tiga nilai berikut untuk aplikasi baru Anda, lalu pilih Lanjutkan:
Deskripsi: Ketikkan nama deskriptif untuk aplikasi Anda.
ID Bundel: Masukkan ID Bundel formulir com.<pengenal_organisasi>.<PRODUCT_name> sebagaimana disebutkan di Panduan Distribusi Aplikasi. Di cuplikan layar berikut,
mobcatnilai digunakan sebagai pengidentifikasi organisasi dan nilai PushDemo digunakan sebagai nama produk.
Pemberitahuan Push: Periksa opsi Pemberitahuan Push di bagian Kapabilitas.
Tindakan ini menghasilkan ID Aplikasi Anda dan meminta Anda mengonfirmasi informasi tersebut. Pilih Lanjutkan, lalu pilih Daftar untuk mengonfirmasi ID Aplikasi baru.
Setelah Anda memilih Mendaftar, Anda akan melihat ID aplikasi baru sebagai item baris di halaman Sertifikat, Profil & Pengidentifikasi.
Di halaman Sertifikat, Profil & Pengidentifikasi, di bawah Pengidentifikasi, temukan item baris ID aplikasi yang telah Anda buat. Kemudian, pilih barisnya untuk menampilkan layar Edit Konfigurasi ID Aplikasi Anda.
Membuat sertifikat untuk Notification Hubs
Sertifikat diperlukan untuk mengaktifkan notification hub agar bisa bekerja dengan Layanan Pemberitahuan Push Apple (APNS) dan dapat disediakan dengan salah satu dari dua cara berikut:
Membuat sertifikat push p12 yang dapat diunggah secara 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 didokumentasikan di Autentikasi berbasis token (HTTP/2) untuk APN. Lebih sedikit langkah yang diperlukan, tetapi juga dimandatkan untuk skenario tertentu. Namun, langkah-langkah telah disediakan untuk kedua pendekatan tersebut karena keduanya akan bekerja untuk tujuan tutorial ini.
OPSI 1: Membuat sertifikat push p12 yang dapat diunggah langsung ke Notification Hub
Di Mac Anda, jalankan alat Keychain Access. Ini dapat dibuka dari folder Utilitas atau folder Lainnya di Launchpad.
Pilih Keychain Access, perluas Asisten Sertifikat , lalu pilih Minta Sertifikat dari Otoritas Sertifikat.
Catatan
Secara default, Keychain Access memilih item pertama dalam daftar. Ini bisa menjadi masalah jika Anda berada dalam kategori Sertifikat dan Otoritas Sertifikasi Hubungan Pengembang Seluruh Dunia Apple bukan item pertama dalam daftar. Pastikan Anda memiliki item non-kunci, atau kunci Otoritas Sertifikasi Hubungan Pengembang Seluruh Dunia Apple dipilih, sebelum membuat CSR (Permintaan Penandatanganan Sertifikat).
Pilih Alamat Email Pengguna Anda, masukkan nilai Nama Umum Anda, pastikan Anda menentukan Disimpan ke disk, lalu pilih Lanjutkan. Biarkan Alamat Email CA kosong karena tidak diperlukan.
Masukkan nama untuk file permintaan Penandatanganan Sertifikat (CSR) di Simpan sebagai, pilih lokasi di di mana, lalu pilih Simpan.
Tindakan ini menyimpan file CSR di lokasi yang dipilih. Lokasi default adalah di Desktop. Ingat lokasi yang dipilih untuk file.
Kembali pada halaman Sertifikat, Pengenal & Profil di Portal Penetapan iOS, gulir ke bawah ke opsi Pemberitahuan Push yang ditandai, lalu pilih Konfigurasi untuk membuat sertifikat.
Jendela Layanan Dorong Pemberitahuan Apple TLS/SSL Certificates muncul. Pilih tombol Buat Sertifikat di bawah bagian Sertifikat TSL/SSL Pengembangan.
Layar Buat Sertifikat Baru ditampilkan.
Catatan
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 ganda nama sertifikat untuk memuatnya. Lalu pilih Lanjutkan.
Setelah portal membuat sertifikat, pilih tombol Unduh. Simpan sertifikat, dan ingat lokasi penyimpanannya.
Sertifikat diunduh dan disimpan pada komputer di folder Unduhan Anda.
Catatan
Secara default, sertifikat pengembangan yang diunduh diberi nama aps_development.cer.
Klik dua kali pada sertifikat push yang diunduh aps_development.cer. Tindakan ini menginstal sertifikat baru di Keychain, seperti yang diperlihatkan dalam gambar berikut:
Catatan
Meskipun nama dalam sertifikat Anda mungkin berbeda, nama akan diawali dengan Apple Development iOS Push Services dan memiliki pengenal paket yang sesuai yang terkait dengannya.
Pada Akses Rantai Kunci, Klik + Kontrol pada sertifikat push baru yang Anda buat di kategori Sertifikat. Pilih Ekspor, beri nama file, pilih format p12, kemudian pilih Simpan.
Anda bisa memilih untuk melindungi sertifikat dengan kata sandi, tapi kata sandi bersifat opsional. Klik OK jika Anda ingin melewati pembuatan kata sandi. Catat nama file dan lokasi sertifikat p12 yang diekspor. Keduanya digunakan untuk mengaktifkan autentikasi dengan APN.
Catatan
Nama dan lokasi file p12 Anda mungkin berbeda dengan yang digambarkan dalam tutorial ini.
OPSI 2: Membuat sertifikat p8 yang dapat digunakan untuk autentikasi berbasis token
Catat hal-hal berikut ini:
- Awalan ID Aplikasi (ID Tim)
- ID Bundel
Kembali ke Sertifikat, Profil & Pengidentifikasi, klik Kunci.
Catatan
Jika Anda sudah mempunyai kunci yang dikonfigurasi untuk APN, Anda dapat menggunakan ulang sertifikat p8 yang Anda unduh langsung setelah dibuat. Jika demikian, Anda dapat mengabaikan langkah 3 sampai 5.
Klik tombol + (atau tombol +) untuk membuat kunci baru.
Berikan nilai Nama Kunci yang cocok, lalu centang opsi Layanan Pemberitahuan Push Apple (APN), lalu klik Lanjutkan, diikuti oleh Daftarkan pada layar berikutnya.
Klik Unduh lalu pindahkan file p8 (diawali dengan AuthKey_) ke direktori lokal yang aman, lalu klik Selesai.
Catatan
Pastikan Anda menyimpan file p8 di tempat yang aman (dan menyimpan cadangan). Setelah mengunduh kunci Anda, kunci tersebut tidak dapat diunduh ulang dan salinan server dihapus.
Pada Kunci, klik kunci yang Anda buat (atau kunci yang ada jika Anda telah memilih untuk menggunakannya sebagai gantinya).
Catat nilai ID Kunci.
Buka sertifikat p8 Anda dalam aplikasi yang sesuai dengan pilihan Anda seperti Kode Visual Studio. Catat nilai kuncinya (antara -----KUNCI PRIVAT MULAI----- dan -----KUNCI PRIVAT AKHIR-----).
-----KUNCI PRIVAT MULAI-----
<key_value>
-----KUNCI PRIVAT AKHIR-----Catatan
Ini adalah nilai token yang akan digunakan nanti untuk mengonfigurasi Notification Hub.
Di akhir langkah ini, Anda harus memiliki informasi berikut untuk digunakan nanti di Konfigurasi hub pemberitahuan dengan informasi APN:
- ID Tim (lihat langkah 1)
- ID Bundel (lihat langkah 1)
- ID Kunci (lihat langkah 7)
- nilai kunci token (nilai kunci p8 diperoleh di langkah 8)
Membuat profil provisi untuk aplikasi
Kembali ke Portal Provisi iOS, pilih Sertifikat, Profil & Pengidentifikasi, pilih Profil dari menu sebelah kiri, lalu pilih + buat profil baru. Layar Mendaftarkan Profil Provisi Baru muncul.
Pilih Pengembangan Aplikasi iOS di Pengembangan sebagai jenis profil provisi, lalu pilih Lanjutkan.
Berikutnya, pilih ID aplikasi yang Anda buat dari daftar drop-down ID Aplikasi, lalu pilih Lanjutkan.
Di jendela Pilih sertifikat, pilih sertifikat pengembangan yang Anda gunakan untuk penandatanganan kode, dan pilih Lanjutkan.
Catatan
Sertifikat ini bukan sertifikat dorong yang Anda buat di langkah sebelumnya. Ini adalah sertifikat pengembangan Anda. Jika tidak ada, Anda harus membuatnya karena sertifikat ini adalah prasyarat untuk tutorial ini. Sertifikat pengembang dapat dibuat di Portal Pengembang Apple, melalui Xcode atau di Visual Studio.
Kembali ke halaman Sertifikat, Profil & Pengidentifikasi, pilih Profil dari menu sebelah kiri, lalu pilih + untuk membuat profil baru. Layar Mendaftarkan Profil Provisi Baru muncul.
Dalam jendela Pilih sertifikat, pilih sertifikat pengembangan yang Anda buat. Lalu pilih Lanjutkan.
Selanjutnya, pilih perangkat yang akan digunakan untuk pengujian, dan pilih Lanjutkan.
Terakhir, pilih nama untuk profil di Nama Profil Provisi, lalu pilih Buat.
Saat profil provisi baru dibuat, pilih Unduh. Ingat lokasi tempat profil disimpan.
Telusuri ke lokasi profil penetapan, lalu klik dua kali untuk menginstalnya pada mesin pengembangan Anda.
Buat Hub Pemberitahuan
Dalam bagian ini, Anda membuat hub pemberitahuan dan mengonfigurasi autentikasi dengan APN. Anda dapat menggunakan sertifikat push p12 atau autentikasi berbasis token. Jika Anda ingin menggunakan hub pemberitahuan yang sudah Anda buat, Anda bisa langsung melewati ke langkah 5.
Masuk ke Azure.
Klik Buat sumber daya, lalu cari dan pilih Hub Pemberitahuan, lalu klik Buat.
Perbarui bidang berikut, lalu klik Buat:
DETAIL DASAR
Langganan: Pilih target Langganan dari daftar tarik turun
Grup Sumber Daya: Buat Grup Sumber Daya baru (atau pilih yang sudah ada)DETAIL NAMESPACE
Namespace Notification Hub: Masukkan nama yang unik secara global untuk namespace Notification Hub
Catatan
Pastikan opsi Buat baru dipilih untuk bidang ini.
DETAIL HUB PEMBERITAHUAN
Notification Hub: Masukkan nama untuk Notification Hub
Lokasi: Pilih lokasi yang cocok dari daftar tarik-turun
Tingkat Harga: Pertahankan opsi Gratis defaultCatatan
Kecuali Anda telah mencapai jumlah maksimum hub di tier gratis.
Setelah Notification Hub disediakan, navigasikan ke sumber daya tersebut.
Navigasikan ke Notification Hub Anda yang baru.
Pilih Kebijakan Akses dari daftar (di bawah KELOLA).
Catat nilai Nama Kebijakan beserta nilai String Koneksi yang terkait.
Konfigurasikan Notification Hub Anda dengan informasi APN
Di bawah Notification Services, pilih Apple lalu ikuti langkah-langkah yang sesuai berdasarkan pendekatan yang Anda pilih sebelumnya di bagian Membuat Sertifikat untuk Notification Hubs.
Catatan
Gunakan Produksi untuk Mode Aplikasi hanya jika Anda ingin mengirim pemberitahuan push ke pengguna yang membeli aplikasi Anda dari toko.
OPSI 1: Gunakan sertifikat push .p12
Pilih Sertifikat.
Pilih ikon file.
Pilih file .p12 yang Anda ekspor sebelumnya, lalu pilih Buka.
Jika perlu, tentukan kata sandi yang benar.
Pilih mode Kotak pasir.
Pilih Simpan.
OPSI 2: Gunakan autentikasi berbasis token
Pilih Token.
Masukkan nilai berikut yang Anda peroleh sebelumnya:
- ID Kunci
- ID Bundel
- ID tim
- Token
Pilih kotak pasir.
Pilih Simpan.
Konfigurasikan hub pemberitahuan Anda dengan informasi FCM
- Pilih Google (GCM/FCM) di bagian Pengaturan pada menu kiri.
- Masukkan kunci server yang Anda catat dari Konsol Firebase Google.
- Pilih Simpan pada toolbar.
Membuat aplikasi backend API Web ASP.NET Core
Di bagian ini, Anda membuat backend API Web ASP.NET Core untuk menangani pendaftaran perangkat dan pengiriman pemberitahuan ke aplikasi ponsel React Native.
Buat proyek web
Di Visual Studio, pilih File>Solusi Baru.
Pilih Aplikasi>.NET Core>API>ASP.NET Core>Berikutnya.
Dalam dialog Konfigurasikan API Web ASP.NET Core baru Anda, pilih Kerangka Kerja Target.NET Core 3.1.
Masukkan PushDemoApi untuk Nama Proyek lalu pilih Buat.
Mulai penelusuran kesalahan (Command + Enter) untuk menguji aplikasi templat.
Catatan
Aplikasi berpelat dikonfigurasikan untuk menggunakan WeatherForecastController sebagai laUrl. Ini diatur dalam Properti>launchSettings.json.
Jika Anda diminta dengan pesan Ditemukan sertifikat pengembangan yang tidak valid:
Klik Ya untuk menyetujui menjalankan alat 'dotnet dev-certs https' untuk memperbaikinya. Alat 'dotnet dev-certs https' kemudian akan meminta Anda untuk memasukkan kata sandi untuk sertifikat dan kata sandi untuk Rantai Kunci Anda.
Klik Ya saat diminta untuk Memasang 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 Manajer Rahasia. Memisahkan rahasia dari solusi memastikan bahwa mereka tidak berakhir di kontrol sumber. Buka Terminal lalu masuk ke 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 notification hub dan nilai string koneksi Anda. Anda mencatatnya di bagian membuat notification hub. Jika tidak, Anda dapat mencarinya di Azure.
NotificationsHub:Name:
Lihat Nama dalam ringkasan Esensial di bagian atas Gambaran Umum.NotificationHub:ConnectionString:
Lihat DefaultFullSharedAccessSignature di Kebijakan AksesCatatan
Untuk skenario produksi, Anda dapat melihat opsi seperti Azure KeyVault untuk menyimpan string koneksi dengan aman. Untuk kesederhanaan, rahasia akan ditambahkan ke pengaturan aplikasi Azure App Service.
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>Catatan
Anda harus mengganti nilai tempat penampung dengan nilai Anda sendiri dan membuat catatan.
Klik + Kontrol pada proyek PushDemoApi, pilih Folder Baru dari menu Tambahkan, lalu klik Tambahkan menggunakan Autentikasi sebagai Nama Folder.
Klik + Kontrol pada folder Autentikasi, lalu pilih File Baru... dari menu Tambahkan.
Pilih Kelas> GeneralEmpty, masukkan ApiKeyAuthOptions.cs untuk Nama, 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 dengan 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)); } } }Catatan
Pengelola Autentikasi adalah tipe yang menerapkan perilaku skema, dalam hal ini skema Kunci API kustom.
Tambahkan Kelas Kosong lain ke folder Autentikasi yang disebut dengan 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); } } }Catatan
Metode ekstensi ini menyederhanakan kode konfigurasi middleware di Startup.cs sehingga lebih mudah dibaca dan biasanya lebih mudah diikuti.
Di Startup.cs, perbarui metode ConfigureServices untuk mengonfigurasi autentikasi Kunci API di bawah panggilan ke metode services.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 di Startup.cs, perbarui metode Konfigurasi untuk memanggil metode ekstensi UseAuthentication dan UseAuthorization di iApplicationBuilder aplikasi. Pastikan metode-metode tersebut dipanggil setelah UseRouting dan sebelum app.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(); }); }Catatan
Memanggil UseAuthentication akan mendaftarkan perangkat lunak perantara yang menggunakan skema autentikasi yang telah didaftarkan sebelumnya (dari Layanan Konfig). Ini harus dipanggil sebelum middleware yang bergantung pada pengguna yang diautentikasi.
Menambahkan dependensi dan mengonfigurasi layanan
ASP.NET Core mendukung pola desain perangkat lunak injeksi dependensi (DI), yang merupakan teknik untuk mencapai Inversi Kontrol (IoC) antara kelas dan dependensinya.
Penggunaan notification hub dan Notification Hubs SDK untuk operasi backend dienkapsulasi dalam sebuah layanan. Layanan tersebut terdaftar dan tersedia melalui abstraksi yang sesuai.
Klik + Kontrol pada folder Dependensi, lalu pilih Kelola Paket NuGet....
Cari Microsoft.Azure.NotificationHubs dan pastikan sudah dicentang.
Klik Tambahkan Paket, lalu klik Terima saat diminta untuk menerima persyaratan lisensi.
Kontrol + Klik pada proyek PushDemoApi, pilih Folder Baru dari menu Tambahkan, lalu klik Tambahkan menggunakan Model sebagai Nama Folder.
Klik + Kontrol pada folder Model, lalu pilih File Baru... dari menu Tambahkan.
Pilih Kelas> GeneralEmpty, masukkan PushTemplates.cs untuk Nama, 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)\" }"; } } }Catatan
Kelas ini berisi muatan pemberitahuan tokinase 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 penginstalan dengan cara ini berada di luar cakupan tutorial ini. Untuk produksi, pertimbangkan templat kustom.
Tambahkan Kelas Kosong lain ke folder Model yang disebut dengan 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 lain ke folder Model yang disebut dengan 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 dengan 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 Layanan.
Tambahkan Antarmuka Kosong ke folder Layanan yang disebut dengan 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 dengan NotificationHubsService.cs, lalu tambahkan kode berikut untuk menerapkan 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); } } }Catatan
Ekspresi tag yang diberikan ke sinkronisasi SendTemplateNicationSync dibatasi pada 20 tag. Tag tersebut dibatasi hingga 6 untuk sebagian besar operator, tetapi dalam kasus isi ekspresi tersebut hanya berisi OR (||). Jika ada lebih dari 20 tag dalam permintaan, mereka harus dibagi menjadi beberapa permintaan. Lihat dokumentasi Ekspresi Perutean dan Tag untuk detail selengkapnya
Di Startup.cs, perbarui metode ConfigureServices untuk menambahkan NotificationHubsService sebagai implementasi tunggal dari 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
Klik + Kontrol pada folder Pengontrol, lalu pilih File Baru... dari menu Tambahkan.
Pilih Kelas Pengontrol API Web>ASP.NET Core, masukkan NotificationsController untuk Nama, lalu klik Baru.
Catatan
Jika Anda mengikuti dengan Visual Studio 2019, pilih templat API Controller dengan tindakan baca/tulis.
Tambahkan namespace berikut ke 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 dihias dengan atribut ApiController.
[ApiController] [Route("api/[controller]")] public class NotificationsController : ControllerBase { // Templated methods here }Catatan
Basis kelas Pengontrol menyediakan dukungan untuk tampilan namun ini tidak diperlukan dalam hal ini dan jadi ControllBase dapat digunakan sebagai gantinya. Jika Anda mengikuti dengan Visual Studio 2019, Anda dapat melompati langkah ini.
Jika Anda memilih untuk menyelesaikan bagian Mengautentikasi klien menggunakan Kunci API, Anda harus menghias NotificationsController dengan atribut Otorisasi juga.
[Authorize]Perbarui konstruktor untuk menerima instans terdaftar dari INotificationService sebagai argumen dan menetapkannya ke anggota baca-saja.
readonly INotificationService _notificationService; public NotificationsController(INotificationService notificationService) { _notificationService = notificationService; }Di launchSettings.json (di dalam folder Properti), ubah launchUrl dari
weatherforecastke api/pemberitahuan agar sesuai dengan URL yang ditentukan dalam atribut RegistrationsControllerRoute.Mulai penelusuran kesalahan (Command + Enter) untuk memvalidasi bahwa aplikasi berfungsi dengan NotificationsController yang baru dan mengembalikan status 401 Tidak Sah.
Catatan
Visual Studio mungkin tidak akan otomatis meluncurkan aplikasi di browser. Mulai titik ini, Anda akan menggunakan Postman untuk menguji API.
Pada tab Postman yang baru, atur permintaan ke GET. Masukkan alamat di bawah ini untuk menggantikan <applicationUrl> tempat penampung dengan https applicationUrl yang ditemukan dalam Properties>launchSettings.json.
<applicationUrl>/api/notificationsCatatan
aplikasi URL harus 'https://localhost:5001' untuk profil default. Jika Anda menggunakan IIS (default pada Visual Studio 2019 di Windows), sebagai gantinya Anda harus menggunakan applicationUrl yang ditentukan dalam item iisSettings. Anda akan menerima respons 404 jika alamatnya salah.
Jika Anda memilih untuk menyelesaikan bagian Mengautentikasi klien menggunakan Kunci API, pastikan untuk mengonfigurasi header permintaan untuk menyertakan nilai apikey Anda.
Kunci Nilai apikey <your_api_key> Klik tombol Kirim.
Catatan
Anda akan menerima status 200 OK dengan beberapa isi JSON.
Jika Anda menerima peringatan verifikasi sertifikat SSL, Anda dapat menonaktifkan permintaan verifikasi sertifikat SSL Postman di Pengaturan.
Ganti metode kelas yang memiliki 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 di Azure App Service untuk menghosting layanan backend.
Masuk ke portal Microsoft Azure.
Klik Buat sumber daya, lalu cari dan pilih Aplikasi API, lalu klik Buat.
Perbarui bidang berikut, lalu klik Buat.
Nama aplikasi:
Masukkan nama yang unik secara global untuk Aplikasi APILangganan:
Pilih target langganan yang sama dengan yang Anda buat di hub pemberitahuan.Grup Sumber Daya:
Pilih Grup Sumber Daya yang Anda buat di hub pemberitahuan.Paket App Service/Lokasi:
Buat Paket App Service baruCatatan
Ubah dari opsi default ke paket yang mencakup dukungan SSL. Jika tidak, Anda perlu mengambil langkah-langkah yang sesuai saat bekerja dengan aplikasi ponsel untuk mencegah permintaan http diblokir.
Application Insights:
Pertahankan opsi yang disarankan (sumber daya baru akan dibuat menggunakan nama tersebut) atau pilih sumber daya yang ada.Setelah Aplikasi API ditetapkan, navigasikan ke sumber daya tersebut.
Catat properti URL dalam ringkasan Esensial di bagian atas Gambaran Umum. URL ini adalah titik akhir backend Anda yang akan digunakan dalam tutorial ini nanti.
Catatan
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 Nama dan Nilai, lalu klik OK.
Nama Nilai Authentication:ApiKey<_key_value> NotificationHub:Name<hub_name_value> NotificationHub:ConnectionString<hub_connection_string_value> Catatan
Ini adalah pengaturan yang sama dengan yang Anda tentukan sebelumnya di pengaturan pengguna. Anda seharusnya dapat menyalin ini. Pengaturan Authentication:ApiKey hanya diperlukan jika Anda memilih untuk menyelesaikan bagian Mengautentikasi klien menggunakan Kunci API. Untuk skenario produksi, Anda dapat melihat opsi seperti Azure KeyVault. Opsi ini telah ditambahkan sebagai pengaturan aplikasi untuk kesederhanaan dalam kasus ini.
Setelah semua pengaturan aplikasi ditambahkan, klik Simpan lalu Lanjutkan.
Menerbitkan layanan backend
Berikutnya, Anda menyebarkan aplikasi ke aplikasi API untuk membuatnya dapat diakses dari semua perangkat.
Catatan
Langkah berikut khusus untuk Visual Studio untuk Mac. Jika Anda mengikuti dengan Visual Studio 2019 di Windows, alur penerbitan akan berbeda. Lihat Menerbitkan ke Azure App Service di Windows.
Ubah konfigurasi Anda dari Debug ke Rilis jika Anda belum melakukannya.
Klik + Kontrol proyek PushDemoApi, lalu pilih Terbitkan ke Azure... dari menu Terbitkan.
Ikuti alur autentikasi jika diminta untuk melakukannya. Gunakan akun yang Anda gunakan di bagian buat Aplikasi API sebelumnya.
Pilih Aplikasi API Azure App Service yang Anda buat sebelumnya dari daftar sebagai target publikasi Anda, lalu klik Terbitkan.
Setelah Anda menyelesaikan wizard, wizard akan menerbitkan aplikasi ke Azure lalu membuka aplikasi tersebut. Catat URL jika Anda belum melakukannya. URL ini adalah titik akhir backend Anda yang akan 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 terbitkan layanan backend sebelumnya.
https://<app_name>.azurewebsites.net/api/notifications/installationsCatatan
Alamat basis harus dalam format
https://<app_name>.azurewebsites.net/Jika Anda memilih untuk menyelesaikan bagian Mengautentikasi klien menggunakan Kunci API, pastikan untuk mengonfigurasi header permintaan untuk menyertakan nilai apikey Anda.
Kunci Nilai apikey <your_api_key> Pilih opsi Raw untuk Body, lalu pilih JSON dari daftar opsi format, lalu sertakan beberapa tempat penampung konten JSON:
{}Klik Kirim.
Catatan
Anda harus menerima status 422 UnableEntitas dari layanan.
Lakukan langkah 1-4 lagi, tetapi kali ini tentukan titik akhir permintaan untuk memvalidasi bahwa Anda menerima respons 400 Permintaan Buruk.
https://<app_name>.azurewebsites.net/api/notifications/requests
Catatan
Pengujian API menggunakan data permintaan yang valid belum dapat dilakukan karena hal ini akan memerlukan informasi khusus platform dari aplikasi ponsel klien.
Buat aplikasi React Native lintas platform
Di bagian ini, Anda membuat aplikasi ponsel React Native yang menerapkan pemberitahuan push secara lintas platform.
Aplikasi ini memungkinkan Anda untuk mendaftar dan membatalkan pendaftaran dari notification hub melalui layanan backend yang Anda buat.
Peringatan ditampilkan saat tindakan ditentukan dan aplikasi berada di latar depan. Jika tidak, pemberitahuan akan muncul di pusat pemberitahuan.
Catatan
Anda biasanya akan menjalankan tindakan pendaftaran (dan pembatalan pendaftaran) selama titik yang sesuai dalam siklus penerapan (atau sebagai bagian dari pengalaman Anda yang dijalankan pertama mungkin) tanpa pendaftaran/pendaftaran pengguna yang eksplisit. Namun, contoh ini akan memerlukan input pengguna yang eksplisit untuk memungkinkan fungsionalitas ini dieksplorasi dan diuji dengan lebih mudah.
Buat solusi React Native
Di
Terminal, perbarui alat lingkungan Anda, yang dibutuhkan 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 telahReact Nativememasang CLI untuk mencopot pemasangan. Gunakannpxuntuk secara otomatis mengakses versi React Native CLI terbaru yang tersedia:npm uninstall -g react-native-cliCatatan
React Native memiliki antarmuka baris perintah bawaan. Daripada menginstal dan mengelola versi tertentu dari CLI secara global, kami menyarankan Anda mengakses versi saat ini saat runtime menggunakan
npx, yang dikirimkan dengan Node.js. Dengannpx react-native <command>, versi stabil CLI saat ini akan diunduh dan dieksekusi pada saat perintah dijalankan.Navigasikan ke folder proyek Anda tempat Anda ingin membuat aplikasi baru. Gunakan templat berbasis Typescript dengan menetapkan 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 menyegarkan 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 mengeksekusi 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, menavigasi 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, simpa dan buat perubahan tersebut secara otomatis tercermin di aplikasi iOS dan Android.Catatan
Panduan penyiapan lingkungan pengembangan terperinci tersedia dalam dokumentasi resmi
Pasang paket yang diperlukan
Anda memerlukan tiga paket berikut agar sampel ini berfungsi:
Pemberitahuan push React Native iOS - Proyek GitHub
Paket ini dibuat ketika PushNotificationIOS dipisahkan dari inti React Native. Paket ini secara asli mengimplementasikan pemberitahuan push untuk iOS dan menyediakan antarmuka React Native untuk mengaksesnya. Jalankan perintah berikut untuk memasang paket:
yarn add @react-native-community/push-notification-iosPemberitahuan Push React Native Lintas Platform
Paket ini menerapkan pemberitahuan lokal dan jarak jauh di iOS dan Android secara lintas platform. Jalankan perintah berikut untuk memasang paket:
yarn add react-native-push-notificationPaket info perangkat Paket ini memberikan informasi tentang perangkat dalam runtime. Gunakan untuk mendefinisikan pengidentifikasi perangkat, yang digunakan untuk mendaftar untuk pemberitahuan push. Jalankan perintah berikut untuk memasang paket:
yarn add react-native-device-info
Mengimplementasikan 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}`; } } }Mengonfigurasikan 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>", };
Mengimplementasikan antarmuka pengguna lintas platform
Mendefinisikan 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>Menerapkan 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, ); }Mendefinisikan 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 asli Android untuk pemberitahuan push
Mengonfigurasi paket Android yang diperlukan
Paket tersebut ditautkan secara otomatis saat membuat aplikasi. Anda memiliki beberapa langkah tambahan di bawah ini untuk menyelesaikan proses konfigurasi.
Mengonfigurasi manifes Android
Di "android/app/src/main/AndroidManifest.xml" Anda, verifikasi nama paket, izin, dan layanan yang diperlukan. Pastikan Anda mendaftarkan penerima RNPushNotificationPublisher dan RNPushNotificationBootEventReceiver, dan mendaftarkan layanan RNPushNotificationListenerService. Metadata notifikasi 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 Layanan Google:
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 telah mengonfigurasi layanan RNPushNotificationListenerService yang ada untuk menangani pemberitahuan push Android yang masuk. Layanan ini terdaftar sebelumnya dalam manifes aplikasi. Layanan tersebut memproses pemberitahuan yang masuk dan proksi mereka ke bagian React Native lintas platform. Tidak ada langkat tambahan yang dibutuhkan.
Mengonfigurasi proyek iOS asli untuk pemberitahuan push
Mengonfigurasi paket iOS yang dibutuhkan
Paket tersebut ditautkan secara otomatis saat membuat aplikasi. Yang perlu Anda lakukan adalah memasang pod asli:
npx pod-install
Mengonfigurasi Info.plist dan Entitlements.plist
Masuk ke 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 penyebaran.
Tambahkan dua Kemampuan baru menggunakan tombol - "+":
- Kemampuan Mode Latar Belakang dan centang Pemberitahuan Jarak Jauh.
- Kemampuan Notifikasi Push
Menangani pemberitahuan push untuk iOS
Buka "AppDelegate.h" dan tambahkan impor berikut:
#import <UserNotifications/UNUserNotificationCenter.h>Perbarui daftar protokol, yang didukung oleh "AppDelegate", dengan menambahkan
UNUserNotificationCenterDelegate:@interface AppDelegate : UIResponder <UIApplicationDelegate, RCTBridgeDelegate, UNUserNotificationCenterDelegate>Buka "AppDelegate.m" dan konfigurasikan semua panggilan balik iOS yang dibutuhkan:
#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
Sekarang Anda bisa menguji pengiriman pemberitahuan melalui layanan backend.
Kirim pemberitahuan uji
Buka tab baru di PostMan.
Atur permintaan ke KIRIM, dan masukkan alamat berikut:
https://<app_name>.azurewebsites.net/api/notifications/requestsJika Anda memilih untuk menyelesaikan bagian Mengautentikasi klien menggunakan Kunci API, pastikan untuk mengonfigurasi header permintaan untuk menyertakan nilai apikey Anda.
Kunci Nilai apikey <your_api_key> Pilih opsi Raw untuk Body, 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 Simpan di kanan atas jendela. Permintaan seharusnya tampak mirip dengan contoh berikut jika ditampilkan untuk HTML (tergantung apakah Anda sudah 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 salah satu atau kedua platform target (Android dan iOS).
Catatan
Jika Anda menguji pada Android, pastikan Anda tidak menjalankan Debug, atau jika aplikasi tersebut telah disebarkan dengan menjalankan aplikasi tersebut maka paksa tutup aplikasi itu dan mulai aplikasi itu lagi dari peluncur.
Dalam aplikasi PushDemo, ketuk tombol Register.
Kembali di Postman, tutup jendela Buat Cuplikan Kode (jika Anda belum melakukannya) lalu klik tombol Kirim.
Validasi bahwa Anda mendapatkan respons 200 OK di Postman dan peringatan muncul di aplikasi yang memperlihatkan tindakan ActionA diterima.
Tutup aplikasi PushDemo, lalu klik tombol Kirim lagi di Postman.
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 akan terbuka dan menampilkan peringatan tindakan ActionA diterima.
Kembali ke Postman, ubah isi permintaan sebelumnya untuk mengirim pemberitahuan diam yang menentukan action_b alih-alih action_a untuk nilai tindakan.
{ "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 peringatan muncul di aplikasi, menunjukkan tindakan ActionB diterima alih-alih tindakan ActionA diterima.
Tutup aplikasi PushDemo, lalu klik tombol Kirim lagi di Postman.
Validasi bahwa Anda mendapatkan respons 200 OK di Postman dan bahwa pemberitahuan diam 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 melakukan pengujian terhadap Aplikasi API Azure, periksa apakah layanan sedang berjalan, telah disebarkan, dan telah dimulai tanpa kesalahan.
Pastikan untuk memeriksa bahwa Anda telah menentukan alamat dasar dengan benar di Postman atau dalam konfigurasi aplikasi ponsel saat menguji melalui klien. Alamat dasar harus https://<api_name>.azurewebsites.net/ atau https://localhost:5001/ secara indikatif saat menguji 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 notification hub juga harus diperbarui.
Menerima kode status 401 dari layanan backend
Validasi bahwa Anda mengatur header permintaan apikey dan nilai ini sesuai dengan nilai yang telah Anda konfigurasikan untuk layanan backend.
Jika Anda menerima kesalahan ini saat sedang menguji secara lokal, pastikan nilai kunci yang Anda definisikan dalam konfigurasi klien sesuai dengan nilai pengaturan pengguna Authentication:ApiKey yang digunakan oleh API.
Jika Anda menguji dengan Aplikasi API, pastikan nilai kunci dalam file konfigurasi klien sesuai dengan pengaturan aplikasi Authentication:ApiKey yang Anda gunakan di Aplikasi API.
Catatan
Jika Anda telah membuat atau mengubah pengaturan ini setelah Anda menggunakan layanan backend maka Anda harus memulai ulang layanan tersebut agar bisa diterapkan.
Jika Anda memilih untuk tidak menyelesaikan bagian Mengautentikasi klien menggunakan 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]
https://<api_name>.azurewebsites.net/api/notifications/installations - [DELETE]
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]
https://localhost:5001/api/notifications/installations - [DELETE]
https://localhost:5001/api/notifications/installations/<installation_id> - [POST]
https://localhost:5001/api/notifications/requests
Saat menentukan alamat dasar di aplikasi klien, pastikan alamat itu diakhiri dengan /. Alamat dasar harus https://<api_name>.azurewebsites.net/ atau https://localhost:5001/ secara indikatif saat menguji secara lokal.
Tidak dapat mendaftar dan pesan kesalahan notification hub ditampilkan
Verifikasi bahwa perangkat uji memiliki konektifitas jaringan. Kemudian, tentukan kode status respons Http dengan mengatur titik henti untuk memeriksa nilai properti StatusCode di HttpResponse.
Tinjau saran pemecahan masalah sebelumnya jika dapat diterapkan berdasarkan kode status.
Tetapkan titik henti pada garis yang mengembalikan kode status khusus ini untuk API masing-masing. Kemudian, coba panggil layanan backend saat melakukan penelusuran kesalahan secara lokal.
Validasi bahwa layanan backend berfungsi seperti yang diharapkan melalui Postman dengan 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.
Tak bisa memecahkan ID untuk pesan kesalahan perangkat yang ditampilkan
Tinjau bagian konfigurasi khusus platform untuk memastikan bahwa tidak ada langkah yang terlewatkan.
Tautan terkait
- Gambaran Umum Azure Notification Hubs
- Memasang Visual Studio untuk Mac
- Memasang Visual Studio Code
- Menyiapkan lingkungan pengembangan React Native
- SDK Notification Hubs untuk operasi ujung belakang
- SDK Notification Hubs di GitHub
- Daftar dengan ujung belakang aplikasi
- Manajemen pendaftaran
- Bekerja dengan tag
- Bekerja dengan templat kustom
Langkah berikutnya
Sekarang Anda harus memiliki aplikasi React Native dasar yang terhubung ke notification hub melalui layanan backend dan dapat mengirim serta menerima pemberitahuan.
Anda mungkin perlu menyesuaikan contoh yang digunakan dalam tutorial ini agar sesuai dengan skenario Anda. Menerapkan penanganan kesalahan yang lebih kuat, mencoba ulang logika, dan pengelogan juga disarankan.
Visual Studio App Center dapat dengan cepat dimasukkan ke dalam aplikasi ponsel yang menyediakan analitik dan diagnostik untuk membantu pemecahan masalah.