Menambahkan autentikasi ke aplikasi Formulir Xamarin Anda

Artikel
06/25/2019

Gambaran Umum

Topik ini menunjukkan kepada Anda cara mengautentikasi pengguna Aplikasi Seluler App Service dari aplikasi klien Anda. Dalam tutorial ini, Anda menambahkan autentikasi ke proyek mulai cepat Formulir Xamarin menggunakan penyedia identitas yang didukung oleh App Service. Setelah berhasil diautentikasi dan diotorisasi oleh Aplikasi Seluler Anda, nilai ID pengguna ditampilkan, dan Anda akan dapat mengakses data tabel terbatas.

Prasyarat

Untuk hasil terbaik dengan tutorial ini, kami sarankan Anda terlebih dahulu menyelesaikan tutorial aplikasi Create a Xamarin Forms . Setelah Anda menyelesaikan tutorial ini, Anda akan memiliki proyek Xamarin Forms yang merupakan aplikasi TodoList multi-platform.

Jika Anda tidak menggunakan proyek server mulai cepat yang diunduh, Anda harus menambahkan paket ekstensi autentikasi ke proyek Anda. Untuk informasi selengkapnya tentang paket ekstensi server, lihat Bekerja dengan SDK server backend .NET untuk Azure Mobile Apps.

Mendaftarkan aplikasi Anda untuk autentikasi dan mengonfigurasi App Services

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.

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:

Di portal Azure, pilih App Service Anda.
Klik opsi menu Autentikasi / Otorisasi .
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.
Klik OK.
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.

Menambahkan autentikasi ke pustaka kelas portabel

Aplikasi Seluler menggunakan metode ekstensi LoginAsync di MobileServiceClient untuk masuk ke pengguna dengan autentikasi App Service. Sampel ini menggunakan alur autentikasi terkelola server yang menampilkan antarmuka masuk penyedia di aplikasi. Untuk informasi selengkapnya, lihat Autentikasi yang dikelola server. Untuk memberikan pengalaman pengguna yang lebih baik di aplikasi produksi Anda, Anda harus mempertimbangkan untuk menggunakan autentikasi yang dikelola Klien.

Untuk mengautentikasi dengan proyek Formulir Xamarin, tentukan antarmuka IAuthenticate di Perpustakaan Kelas Portabel untuk aplikasi. Kemudian tambahkan tombol Masuk ke antarmuka pengguna yang ditentukan di Perpustakaan Kelas Portabel, yang Anda klik untuk memulai autentikasi. Data dimuat dari backend aplikasi seluler setelah autentikasi berhasil.

Terapkan antarmuka IAuthenticate untuk setiap platform yang didukung oleh aplikasi Anda.

Di Visual Studio atau Xamarin Studio, buka App.cs dari proyek dengan Portable dalam nama, yaitu proyek Perpustakaan Kelas Portabel, lalu tambahkan pernyataan berikutusing:
```
 ```csharp
 using System.Threading.Tasks;
 ```
```
Di App.cs, tambahkan definisi antarmuka berikut IAuthenticate segera sebelum App definisi kelas.
```
 ```csharp
 public interface IAuthenticate
 {
     Task<bool> Authenticate();
 }
 ```
```

Untuk menginisialisasi antarmuka dengan implementasi khusus platform, tambahkan anggota statis berikut ke kelas Aplikasi .

 ```csharp
 public static IAuthenticate Authenticator { get; private set; }

 public static void Init(IAuthenticate authenticator)
 {
     Authenticator = authenticator;
 }
 ```

Buka TodoList.xaml dari proyek Perpustakaan Kelas Portabel, tambahkan elemen Tombol berikut di elemen tata letak buttonsPanel , setelah tombol yang ada:
```
 ```xml
   <Button x:Name="loginButton" Text="Sign-in" MinimumHeightRequest="30"
     Clicked="loginButton_Clicked"/>
 ```
```
Tombol ini memicu autentikasi yang dikelola server dengan backend aplikasi seluler Anda.
Buka TodoList.xaml.cs dari proyek Perpustakaan Kelas Portabel, lalu tambahkan bidang berikut ke TodoList kelas:
```
 ```csharp
 // Track whether the user has authenticated.
 bool authenticated = false;
 ```
```

Ganti metode OnAppearing dengan kode berikut:

 ```csharp
 protected override async void OnAppearing()
 {
     base.OnAppearing();

     // Refresh items only when authenticated.
     if (authenticated == true)
     {
         // Set syncItems to true in order to synchronize the data
         // on startup when running in offline mode.
         await RefreshItems(true, syncItems: false);

         // Hide the Sign-in button.
         this.loginButton.IsVisible = false;
     }
 }
 ```

Kode ini memastikan bahwa data hanya disegarkan dari layanan setelah Anda diautentikasi.

Tambahkan penangan berikut untuk acara yang diklik ke kelas TodoList :

 ```csharp
 async void loginButton_Clicked(object sender, EventArgs e)
 {
     if (App.Authenticator != null)
         authenticated = await App.Authenticator.Authenticate();

     // Set syncItems to true to synchronize the data on startup when offline is enabled.
     if (authenticated == true)
         await RefreshItems(true, syncItems: false);
 }
 ```

Simpan perubahan Anda dan bangun kembali proyek Perpustakaan Kelas Portabel yang memverifikasi tidak ada kesalahan.

Menambahkan autentikasi ke aplikasi Android

Bagian ini menunjukkan cara menerapkan antarmuka IAuthenticate dalam proyek aplikasi Android. Lewati bagian ini jika Anda tidak mendukung perangkat Android.

Di Visual Studio atau Xamarin Studio, klik kanan proyek droid, lalu Atur sebagai startup Project.
Tekan F5 untuk memulai proyek di debugger, lalu verifikasi bahwa pengecualian yang tidak ditangani dengan kode status 401 (Tidak Sah) dinaikkan setelah aplikasi dimulai. Kode 401 dibuat karena akses di backend dibatasi hanya untuk pengguna yang berwenang.

Buka MainActivity.cs di proyek Android dan tambahkan pernyataan berikut using :

 ```csharp
 using Microsoft.WindowsAzure.MobileServices;
 using System.Threading.Tasks;
 ```

Perbarui kelas MainActivity untuk mengimplementasikan antarmuka IAuthenticate , sebagai berikut:

 ```csharp
 public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsApplicationActivity, IAuthenticate
 ```

Perbarui kelas MainActivity dengan menambahkan bidang MobileServiceUser dan metode Authenticate , yang diperlukan oleh antarmuka IAuthenticate , sebagai berikut:

 ```csharp
 // Define an authenticated user.
 private MobileServiceUser user;

 public async Task<bool> Authenticate()
 {
     var success = false;
     var message = string.Empty;
     try
     {
         // Sign in with Facebook login using a server-managed flow.
         user = await TodoItemManager.DefaultManager.CurrentClient.LoginAsync(this, 
             MobileServiceAuthenticationProvider.Facebook, "{url_scheme_of_your_app}");
         if (user != null)
         {
             message = string.Format("you are now signed-in as {0}.",
                 user.UserId);
             success = true;
         }
     }
     catch (Exception ex)
     {
         message = ex.Message;
     }

     // Display the success or failure message.
     AlertDialog.Builder builder = new AlertDialog.Builder(this);
     builder.SetMessage(message);
     builder.SetTitle("Sign-in result");
     builder.Create().Show();

     return success;
 }

 public override void OnResume()
 {
     base.OnResume();
     Xamarin.Essentials.Platform.OnResume();
 }
 ```

Jika Anda menggunakan penyedia identitas selain Facebook, pilih nilai yang berbeda untuk MobileServiceAuthenticationProvider.

Perbarui file AndroidManifest.xml dengan menambahkan XML berikut di <application> dalam elemen:

<activity android:name="com.microsoft.windowsazure.mobileservices.authentication.RedirectUrlActivity" android:launchMode="singleTop" android:noHistory="true">
  <intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="{url_scheme_of_your_app}" android:host="easyauth.callback" />
  </intent-filter>
</activity>

Ganti {url_scheme_of_your_app} dengan skema URL Anda.

Tambahkan kode berikut ke metode OnCreate dari kelas MainActivity sebelum panggilan ke LoadApplication():
```
 ```csharp
 // Initialize the authenticator before loading the app.
 App.Init((IAuthenticate)this);
 ```
```
Kode ini memastikan pengautentikasi diinsialisasi sebelum aplikasi dimuat.
Bangun kembali aplikasi, jalankan, lalu masuk dengan penyedia autentikasi yang Anda pilih dan verifikasi bahwa Anda dapat mengakses data sebagai pengguna yang diautentikasi.

Pemecahan Masalah

Aplikasi tersebut mengalami crash dengan Java.Lang.NoSuchMethodError: No static method startActivity

Dalam beberapa kasus, konflik dalam paket dukungan ditampilkan hanya sebagai peringatan di studio Visual, tetapi aplikasi crash dengan pengecualian ini saat runtime. Dalam hal ini Anda perlu memastikan bahwa semua paket dukungan yang dirujuk dalam proyek Anda memiliki versi yang sama. Paket Azure Mobile Apps NuGet memiliki Xamarin.Android.Support.CustomTabs ketergantungan untuk platform Android, jadi jika proyek Anda menggunakan paket dukungan yang lebih baru, Anda perlu menginstal paket ini dengan versi yang diperlukan secara langsung untuk menghindari konflik.

Menambahkan autentikasi ke aplikasi iOS

Bagian ini menunjukkan cara menerapkan antarmuka IAuthenticate di proyek aplikasi iOS. Lewati bagian ini jika Anda tidak mendukung perangkat iOS.

Di Visual Studio atau Xamarin Studio, klik kanan proyek iOS, lalu Atur sebagai startup Project.
Tekan F5 untuk memulai proyek di debugger, lalu verifikasi bahwa pengecualian yang tidak ditangani dengan kode status 401 (Tidak Sah) dinaikkan setelah aplikasi dimulai. Respons 401 dihasilkan karena akses di backend dibatasi hanya untuk pengguna yang berwenang.

Buka AppDelegate.cs di proyek iOS dan tambahkan pernyataan berikut using :

 ```csharp
 using Microsoft.WindowsAzure.MobileServices;
 using System.Threading.Tasks;
 ```

Perbarui kelas AppDelegate untuk mengimplementasikan antarmuka IAuthenticate , sebagai berikut:

 ```csharp
 public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate, IAuthenticate
 ```

Perbarui kelas AppDelegate dengan menambahkan bidang MobileServiceUser dan metode Authenticate , yang diperlukan oleh antarmuka IAuthenticate , sebagai berikut:

 ```csharp
 // Define an authenticated user.
 private MobileServiceUser user;

 public async Task<bool> Authenticate()
 {
     var success = false;
     var message = string.Empty;
     try
     {
         // Sign in with Facebook login using a server-managed flow.
         if (user == null)
         {
             user = await TodoItemManager.DefaultManager.CurrentClient
                 .LoginAsync(UIApplication.SharedApplication.KeyWindow.RootViewController,
                 MobileServiceAuthenticationProvider.Facebook, "{url_scheme_of_your_app}");
             if (user != null)
             {
                 message = string.Format("You are now signed-in as {0}.", user.UserId);
                 success = true;
             }
         }
     }
     catch (Exception ex)
     {
        message = ex.Message;
     }

     // Display the success or failure message.
     UIAlertController avAlert = UIAlertController.Create("Sign-in result", message, UIAlertControllerStyle.Alert);
     avAlert.AddAction(UIAlertAction.Create("OK", UIAlertActionStyle.Default, null));
     UIApplication.SharedApplication.KeyWindow.RootViewController.PresentViewController(avAlert, true, null);

     return success;
 }
 ```

Jika Anda menggunakan penyedia identitas selain Facebook, pilih nilai yang berbeda untuk [MobileServiceAuthenticationProvider].

Perbarui kelas AppDelegate dengan menambahkan metode OpenUrl yang berlebihan, sebagai berikut:

 ```csharp
 public override bool OpenUrl(UIApplication app, NSUrl url, NSDictionary options)
 {
     if (TodoItemManager.DefaultManager.CurrentClient.ResumeWithURL(app, url, options))
         return true;
     return base.OpenUrl(app, url, options);
 }
 ```

Tambahkan baris kode berikut ke metode FinishedLaunching sebelum panggilan ke LoadApplication():
```
 ```csharp
 App.Init(this);
 ```
```
Kode ini memastikan pengautentikasi diinsialisasi sebelum aplikasi dimuat.
Buka Info.plist dan tambahkan Tipe URL. Atur Identifier ke nama yang Anda pilih, Skema URL ke skema URL untuk aplikasi Anda, dan Peran ke Tidak Ada.
Bangun kembali aplikasi, jalankan, lalu masuk dengan penyedia autentikasi yang Anda pilih dan verifikasi bahwa Anda dapat mengakses data sebagai pengguna yang diautentikasi.

Menambahkan autentikasi ke Windows 10 (termasuk Telepon) proyek aplikasi

Bagian ini menunjukkan cara menerapkan antarmuka IAuthenticate di Windows 10 proyek aplikasi. Langkah yang sama berlaku untuk proyek Universal Windows Platform (UWP), tetapi menggunakan proyek UWP (dengan perubahan yang dicatat). Lewati bagian ini jika Anda tidak mendukung perangkat Windows.

Di Visual Studio, klik kanan proyek UWP, lalu Atur sebagai Project StartUp.
Tekan F5 untuk memulai proyek di debugger, lalu verifikasi bahwa pengecualian yang tidak ditangani dengan kode status 401 (Tidak Sah) dinaikkan setelah aplikasi dimulai. Respons 401 terjadi karena akses di backend dibatasi hanya untuk pengguna yang berwenang.
Buka MainPage.xaml.cs untuk proyek aplikasi Windows dan tambahkan pernyataan berikutusing:
```
 ```csharp
 using Microsoft.WindowsAzure.MobileServices;
 using System.Threading.Tasks;
 using Windows.UI.Popups;
 using <your_Portable_Class_Library_namespace>;
 ```
```
Ganti <your_Portable_Class_Library_namespace> dengan namespace untuk perpustakaan kelas portabel Anda.
Perbarui kelas MainPage untuk mengimplementasikan antarmuka IAuthenticate , sebagai berikut:
```
 public sealed partial class MainPage : IAuthenticate
```

Perbarui kelas MainPage dengan menambahkan bidang MobileServiceUser dan metode Authenticate , yang diperlukan oleh antarmuka IAuthenticate , sebagai berikut:

 ```csharp
 // Define an authenticated user.
 private MobileServiceUser user;

 public async Task<bool> Authenticate()
 {
     string message = string.Empty;
     var success = false;

     try
     {
         // Sign in with Facebook login using a server-managed flow.
         if (user == null)
         {
             user = await TodoItemManager.DefaultManager.CurrentClient
                 .LoginAsync(MobileServiceAuthenticationProvider.Facebook, "{url_scheme_of_your_app}");
             if (user != null)
             {
                 success = true;
                 message = string.Format("You are now signed-in as {0}.", user.UserId);
             }
         }

     }
     catch (Exception ex)
     {
         message = string.Format("Authentication Failed: {0}", ex.Message);
     }

     // Display the success or failure message.
     await new MessageDialog(message, "Sign-in result").ShowAsync();

     return success;
 }
 ```