Menambahkan autentikasi ke aplikasi Apache Cordova Anda

Artikel
06/25/2019

Ringkasan

Dalam tutorial ini, Anda menambahkan autentikasi ke proyek mulai cepat todolist di Apache Cordova menggunakan penyedia identitas yang didukung. Tutorial ini didasarkan pada tutorial Mulailah dengan Aplikasi Seluler , yang harus Anda selesaikan terlebih dahulu.

Mendaftarkan aplikasi Anda untuk autentikasi dan mengonfigurasi App Service

Pertama, Anda perlu mendaftarkan aplikasi Anda di situs penyedia identitas, dan kemudian Anda akan mengatur kredensial yang dihasilkan penyedia di back end Aplikasi Seluler.

Konfigurasikan penyedia identitas pilihan Anda dengan mengikuti petunjuk khusus penyedia:
Ulangi langkah-langkah sebelumnya untuk setiap penyedia yang ingin Anda dukung di aplikasi Anda.

Tonton video yang menunjukkan langkah serupa

Membatasi izin untuk pengguna yang diautentikasi

Secara default, API di back end Aplikasi Seluler dapat dipanggil secara anonim. Selanjutnya, Anda perlu membatasi akses hanya ke klien yang diautentikasi.

Node.js belakang (melalui portal Azure):

Di pengaturan Aplikasi Seluler Anda, klik Tabel Mudah dan pilih tabel Anda. Klik Ubah izin, pilih Akses terautentikasi hanya untuk semua izin, lalu klik Simpan.
.NET back end (C#):

Dalam proyek server, navigasikan ke ControllersTodoItemController>.cs. [Authorize] Tambahkan atribut ke kelas TodoItemController, sebagai berikut. Untuk membatasi akses hanya ke metode tertentu, Anda juga dapat menerapkan atribut ini hanya untuk metode tersebut, bukan kelas. Terbitkan ulang proyek server.
```
  [Authorize]
  public class TodoItemController : TableController<TodoItem>
```
Node.js backend (melalui kode Node.js) :

Untuk memerlukan autentikasi untuk akses tabel, tambahkan baris berikut ke skrip server Node.js:
```
  table.access = 'authenticated';
```
Untuk detail selengkapnya, lihat Cara: Memerlukan autentikasi untuk akses ke tabel. Untuk mempelajari cara mengunduh proyek kode mulai cepat dari situs Anda, lihat Cara: Unduh proyek kode mulai cepat backend Node.js menggunakan Git.

Sekarang, Anda dapat memverifikasi bahwa akses anonim ke backend Anda telah dinonaktifkan. Di Visual Studio:

Buka proyek yang Anda buat saat menyelesaikan tutorial Mulailah dengan Aplikasi Seluler.
Jalankan aplikasi Anda di Google Android Emulator.
Verifikasi bahwa Kegagalan Koneksi Tak Terduga ditampilkan setelah aplikasi dimulai.

Selanjutnya, perbarui aplikasi untuk mengautentikasi pengguna sebelum meminta sumber daya dari backend Aplikasi Seluler.

Menambahkan autentikasi ke aplikasi

Buka proyek Anda di Visual Studio, lalu buka www/index.html file untuk diedit.

Content-Security-Policy Temukan tag meta di bagian kepala. Tambahkan host OAuth ke daftar sumber yang diizinkan.

Penyedia	Nama Penyedia SDK	Host OAuth
Azure Active Directory	aad	https://login.microsoftonline.com
Facebook	facebook	https://www.facebook.com
Google	google	https://accounts.google.com
Microsoft	microsoftaccount	https://login.live.com
Twitter	twitter	https://api.twitter.com

Contoh Content-Security-Policy (diimplementasikan untuk Azure Active Directory) adalah sebagai berikut:

 <meta http-equiv="Content-Security-Policy" content="default-src 'self'
     data: gap: https://login.microsoftonline.com https://yourapp.azurewebsites.net; style-src 'self'">

Ganti https://login.microsoftonline.com dengan host OAuth dari tabel sebelumnya. Untuk informasi selengkapnya tentang tag meta kebijakan keamanan konten, lihat dokumentasi Content-Security-Policy.

Beberapa penyedia autentikasi tidak memerlukan perubahan Kebijakan Keamanan Konten saat digunakan pada perangkat seluler yang sesuai. Misalnya, tidak diperlukan perubahan Kebijakan Keamanan Konten saat menggunakan autentikasi Google di perangkat Android.

www/js/index.js Buka file untuk diedit, temukan metodenyaonDeviceReady(), dan di bawah kode pembuatan klien tambahkan kode berikut:

 // Login to the service
 client.login('SDK_Provider_Name')
     .then(function () {

         // BEGINNING OF ORIGINAL CODE

         // Create a table reference
         todoItemTable = client.getTable('todoitem');

         // Refresh the todoItems
         refreshDisplay();

         // Wire up the UI Event Handler for the Add Item
         $('#add-item').submit(addItemHandler);
         $('#refresh').on('click', refreshDisplay);

         // END OF ORIGINAL CODE

     }, handleError);

Kode ini menggantikan kode yang ada yang membuat referensi tabel dan menyegarkan UI.

Metode login() memulai autentikasi dengan penyedia. Metode login() adalah fungsi async yang mengembalikan JavaScript Promise. Sisa inisialisasi ditempatkan di dalam respons janji sehingga tidak dijalankan sampai metode login() selesai.

Dalam kode yang baru saja Anda tambahkan, ganti SDK_Provider_Name dengan nama penyedia login Anda. Misalnya, untuk Azure Active Directory, gunakan client.login('aad').
Jalankan proyek Anda. Ketika proyek telah selesai menginsialisasi, aplikasi Anda menampilkan halaman login OAuth untuk penyedia autentikasi yang dipilih.

Langkah berikutnya

Pelajari autentikasi dengan Azure App Service lebih lanjut.
Lanjutkan tutorial dengan menambahkan Pemberitahuan Push ke aplikasi Apache Cordova Anda.

Pelajari cara menggunakan SDK.

Bagikan melalui