Menambahkan autentikasi ke aplikasi Windows Anda

  • Artikel

Gambaran Umum

Topik ini menunjukkan cara menambahkan autentikasi berbasis cloud ke aplikasi seluler Anda. Dalam tutorial ini, Anda menambahkan autentikasi ke proyek mulai cepat Universal Windows Platform (UWP) untuk Aplikasi Seluler menggunakan penyedia identitas yang didukung oleh Azure App Service. Setelah berhasil diautentikasi dan diotorisasi oleh backend Aplikasi Seluler Anda, nilai ID pengguna ditampilkan.

Tutorial ini didasarkan pada mulai cepat Aplikasi Seluler. Anda harus terlebih dahulu menyelesaikan tutorial Mulailah dengan Aplikasi Seluler.

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.

  1. Konfigurasikan penyedia identitas pilihan Anda dengan mengikuti petunjuk khusus penyedia:

  2. Ulangi langkah-langkah sebelumnya untuk setiap penyedia yang ingin Anda dukung di aplikasi Anda.

Menambahkan aplikasi Anda ke URL Pengalihan Eksternal yang Diizinkan

Autentikasi aman mengharuskan Anda menentukan skema URL baru untuk aplikasi Anda. Hal ini memungkinkan sistem otentikasi untuk mengalihkan kembali ke aplikasi Anda setelah proses otentikasi selesai. Dalam tutorial ini, kami menggunakan nama aplikasi skema URL di seluruh. Namun, Anda dapat menggunakan skema URL apa pun yang Anda pilih. Ini harus unik untuk aplikasi seluler Anda. Untuk mengaktifkan pengalihan di sisi server:

  1. Di portal Azure, pilih App Service Anda.

  2. Klik opsi menu Autentikasi / Otorisasi .

  3. Di URL Pengalihan Eksternal yang Diizinkan, masukkan url_scheme_of_your_app://easyauth.callback. Url_scheme_of_your_app dalam string ini adalah Skema URL untuk aplikasi seluler Anda. Ini harus mengikuti spesifikasi URL normal untuk protokol (gunakan huruf dan angka saja, dan mulai dengan huruf). Anda harus mencatat string yang Anda pilih karena Anda perlu menyesuaikan kode aplikasi seluler Anda dengan Skema URL di beberapa tempat.

  4. Klik Simpan.

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. Dengan proyek aplikasi UWP yang ditetapkan sebagai proyek start-up, sebarkan dan jalankan aplikasi; verifikasi bahwa pengecualian yang tidak ditangani dengan kode status 401 (Tidak Sah) dinaikkan setelah aplikasi dimulai. Ini terjadi karena aplikasi mencoba mengakses Kode Aplikasi Seluler Anda sebagai pengguna yang tidak diautentikasi, tetapi tabel TodoItem sekarang memerlukan autentikasi.

Selanjutnya, Anda akan memperbarui aplikasi untuk mengautentikasi pengguna sebelum meminta sumber daya dari App Service Anda.

Menambahkan autentikasi ke aplikasi

  1. Di file proyek aplikasi UWP MainPage.xaml.cs dan tambahkan cuplikan kode berikut:

     // Define a member variable for storing the signed-in user. 
 private MobileServiceUser user;

 // Define a method that performs the authentication process
 // using a Facebook sign-in. 
 private async System.Threading.Tasks.Task<bool> AuthenticateAsync()
 {
     string message;
     bool success = false;
     try
     {
         // Change 'MobileService' to the name of your MobileServiceClient instance.
         // Sign-in using Facebook authentication.
         user = await App.MobileService
             .LoginAsync(MobileServiceAuthenticationProvider.Facebook, "{url_scheme_of_your_app}");
         message =
             string.Format("You are now signed in - {0}", user.UserId);

         success = true;
     }
     catch (InvalidOperationException)
     {
         message = "You must log in. Login Required";
     }

     var dialog = new MessageDialog(message);
     dialog.Commands.Add(new UICommand("OK"));
     await dialog.ShowAsync();
     return success;
 }

    Kode ini mengautentikasi pengguna dengan login Facebook. Jika Anda menggunakan penyedia identitas selain Facebook, ubah nilai MobileServiceAuthenticationProvider di atas menjadi nilai untuk penyedia Anda.

  2. Ganti metode OnNavigatedTo() di MainPage.xaml.cs. Selanjutnya, Anda akan menambahkan tombol Masuk ke aplikasi yang memicu autentikasi.

     protected override async void OnNavigatedTo(NavigationEventArgs e)
 {
     if (e.Parameter is Uri)
     {
         App.MobileService.ResumeWithURL(e.Parameter as Uri);
     }
 }

  3. Tambahkan cuplikan kode berikut ke MainPage.xaml.cs:

     private async void ButtonLogin_Click(object sender, RoutedEventArgs e)
 {
     // Login the user and then load data from the mobile app.
     if (await AuthenticateAsync())
     {
         // Switch the buttons and load items from the mobile app.
         ButtonLogin.Visibility = Visibility.Collapsed;
         ButtonSave.Visibility = Visibility.Visible;
         //await InitLocalStoreAsync(); //offline sync support.
         await RefreshTodoItems();
     }
 }

  4. Buka file proyek MainPage.xaml, temukan elemen yang menentukan tombol Simpan dan ganti dengan kode berikut:

     <Button Name="ButtonSave" Visibility="Collapsed" Margin="0,8,8,0" 
         Click="ButtonSave_Click">
     <StackPanel Orientation="Horizontal">
         <SymbolIcon Symbol="Add"/>
         <TextBlock Margin="5">Save</TextBlock>
     </StackPanel>
 </Button>
 <Button Name="ButtonLogin" Visibility="Visible" Margin="0,8,8,0" 
         Click="ButtonLogin_Click" TabIndex="0">
     <StackPanel Orientation="Horizontal">
         <SymbolIcon Symbol="Permissions"/>
         <TextBlock Margin="5">Sign in</TextBlock> 
     </StackPanel>
 </Button>

  5. Tambahkan cuplikan kode berikut ke App.xaml.cs:

     protected override void OnActivated(IActivatedEventArgs args)
 {
     if (args.Kind == ActivationKind.Protocol)
     {
         ProtocolActivatedEventArgs protocolArgs = args as ProtocolActivatedEventArgs;
         Frame content = Window.Current.Content as Frame;
         if (content.Content.GetType() == typeof(MainPage))
         {
             content.Navigate(typeof(MainPage), protocolArgs.Uri);
         }
     }
     Window.Current.Activate();
     base.OnActivated(args);
 }

  6. Buka file Package.appxmanifest, navigasikan ke Deklarasi, di daftar turun bawah Deklarasi yang Tersedia , pilih Protokol dan klik Tombol Tambahkan . Sekarang konfigurasikan Properti deklarasi Protokol . Di Nama tampilan, tambahkan nama yang ingin Anda tampilkan kepada pengguna aplikasi Anda. Di Nama, tambahkan {url_scheme_of_your_app}.

  7. Tekan tombol F5 untuk menjalankan aplikasi, klik tombol Masuk , dan masuk ke aplikasi dengan penyedia identitas yang Anda pilih. Setelah login Anda berhasil, aplikasi berjalan tanpa kesalahan dan Anda dapat meminta backend Anda dan membuat pembaruan data.

Menyimpan token autentikasi pada klien

Contoh sebelumnya menunjukkan masuk standar, yang mengharuskan klien untuk menghubungi penyedia identitas dan App Service setiap kali aplikasi dimulai. Tidak hanya metode ini tidak efisien, Anda dapat mengalami masalah penggunaan-berhubungan jika banyak pelanggan mencoba untuk memulai aplikasi Anda pada saat yang sama. Pendekatan yang lebih baik adalah dengan menyimpan token otorisasi yang dikembalikan oleh App Service Anda dan mencoba menggunakannya terlebih dahulu sebelum menggunakan masuk berbasis penyedia.

Catatan

Anda dapat menyimpan token yang dikeluarkan oleh App Services terlepas dari apakah Anda menggunakan autentikasi yang dikelola klien atau dikelola layanan. Tutorial ini menggunakan autentikasi yang dikelola layanan.

  1. Dalam file proyek MainPage.xaml.cs, tambahkan yang berikut menggunakan pernyataan:

     using System.Linq;        
 using Windows.Security.Credentials;

  2. Ganti metode AuthenticateAsync dengan kode berikut:

     private async System.Threading.Tasks.Task<bool> AuthenticateAsync()
 {
     string message;
     bool success = false;

     // This sample uses the Facebook provider.
     var provider = MobileServiceAuthenticationProvider.Facebook;

     // Use the PasswordVault to securely store and access credentials.
     PasswordVault vault = new PasswordVault();
     PasswordCredential credential = null;

     try
     {
         // Try to get an existing credential from the vault.
         credential = vault.FindAllByResource(provider.ToString()).FirstOrDefault();
     }
     catch (Exception)
     {
         // When there is no matching resource an error occurs, which we ignore.
     }

     if (credential != null)
     {
         // Create a user from the stored credentials.
         user = new MobileServiceUser(credential.UserName);
         credential.RetrievePassword();
         user.MobileServiceAuthenticationToken = credential.Password;

         // Set the user from the stored credentials.
         App.MobileService.CurrentUser = user;

         // Consider adding a check to determine if the token is 
         // expired, as shown in this post: https://aka.ms/jww5vp.

         success = true;
         message = string.Format("Cached credentials for user - {0}", user.UserId);
     }
     else
     {
         try
         {
             // Sign in with the identity provider.
             user = await App.MobileService
                 .LoginAsync(provider, "{url_scheme_of_your_app}");

             // Create and store the user credentials.
             credential = new PasswordCredential(provider.ToString(),
                 user.UserId, user.MobileServiceAuthenticationToken);
             vault.Add(credential);

             success = true;
             message = string.Format("You are now signed in - {0}", user.UserId);
         }
         catch (MobileServiceInvalidOperationException)
         {
             message = "You must sign in. Sign-In Required";
         }
     }

     var dialog = new MessageDialog(message);
     dialog.Commands.Add(new UICommand("OK"));
     await dialog.ShowAsync();

     return success;
 }

    Dalam versi AuthenticateAsync ini, aplikasi mencoba menggunakan kredensial yang disimpan di PasswordVault untuk mengakses layanan. Masuk reguler juga dilakukan ketika tidak ada kredensial yang disimpan.

    Catatan

    Token yang di-cache mungkin kedaluwarsa, dan kedaluwarsa token juga dapat terjadi setelah autentikasi saat aplikasi digunakan. Untuk mempelajari cara menentukan apakah token kedaluwarsa, lihat Memeriksa token autentikasi kedaluwarsa. Untuk solusi menangani kesalahan otorisasi yang terkait dengan token kedaluwarsa, lihat pos Caching dan penanganan token kedaluwarsa di SDK terkelola Azure Mobile Services.

  3. Mulai ulang aplikasi dua kali.

    Perhatikan bahwa pada start-up pertama, masuk dengan penyedia lagi diperlukan. Namun, pada restart kedua kredensial yang di-cache digunakan dan masuk dilewati.

Langkah berikutnya

Sekarang setelah Anda menyelesaikan tutorial otentikasi dasar ini, pertimbangkan untuk melanjutkan ke salah satu tutorial berikut:

  • Menambahkan notifikasi push ke aplikasi Anda
    Pelajari cara menambahkan dukungan notifikasi push ke aplikasi Anda dan mengonfigurasi backend Aplikasi Seluler Anda untuk menggunakan Azure Notification Hubs untuk mengirim pemberitahuan push.
  • Mengaktifkan sinkronisasi offline untuk aplikasi Anda
    Pelajari cara menambahkan dukungan offline aplikasi Anda menggunakan backend Aplikasi Seluler. Sinkronisasi offline memungkinkan pengguna akhir untuk berinteraksi dengan aplikasi seluler—melihat, menambahkan, atau memodifikasi data—bahkan ketika tidak ada koneksi jaringan.