Menambahkan autentikasi ke aplikasi Platform Uno Anda

Nota

Produk ini dihentikan. Untuk pengganti proyek yang menggunakan .NET 8 atau yang lebih baru, lihat pustaka Community Toolkit Datasync.

Dalam tutorial ini, Anda menambahkan autentikasi Microsoft ke proyek TodoApp menggunakan ID Microsoft Entra. Sebelum menyelesaikan tutorial ini, pastikan Anda telah membuat proyek dan menyebarkan backend.

Ujung

Meskipun kami menggunakan ID Microsoft Entra untuk autentikasi, Anda dapat menggunakan pustaka autentikasi apa pun yang Anda inginkan dengan Azure Mobile Apps.

Menambahkan autentikasi ke layanan backend Anda

Layanan backend Anda adalah layanan standar ASP.NET 6. Tutorial apa pun yang menunjukkan kepada Anda cara mengaktifkan autentikasi untuk layanan ASP.NET 6 berfungsi dengan Azure Mobile Apps.

Untuk mengaktifkan autentikasi Microsoft Entra untuk layanan backend, Anda perlu:

• Daftarkan aplikasi dengan ID Microsoft Entra.
• Tambahkan pemeriksaan autentikasi ke proyek backend ASP.NET 6.

Mendaftarkan aplikasi

Pertama, daftarkan API web di penyewa Microsoft Entra Anda dan tambahkan cakupan dengan mengikuti langkah-langkah berikut:

1. Masuk ke portal Microsoft Azure .

2. Jika Anda memiliki akses ke beberapa penyewa, gunakan Direktori + langganan filter di menu atas untuk beralih ke penyewa tempat Anda ingin mendaftarkan aplikasi.

3. Cari dan pilih Microsoft Entra ID.

4. Di bawah Kelola, pilih pendaftaran aplikasi >Pendaftaran baru.

   • Nama: masukkan nama untuk aplikasi Anda; misalnya, TodoApp Quickstart. Pengguna aplikasi Anda akan melihat nama ini. Anda dapat mengubahnya nanti.
   • Jenis akun yang didukung: Akun di direktori organisasi apa pun (Direktori Microsoft Entra apa pun - Multipenyewa) dan akun Microsoft pribadi (misalnya Skype, Xbox)

5. Pilih Daftarkan.

6. Di bawah Kelola, pilih Mengekspos API>Tambahkan cakupan.

7. UntukURI ID Aplikasi , terima default dengan memilih Simpan dan lanjutkan.

8. Masukkan detail berikut:

   • nama cakupan :
   • Siapa yang dapat menyetujui?: admin dan pengguna
   • Nama tampilan persetujuan admin: Access TodoApp
   • Deskripsi persetujuan admin: Allows the app to access TodoApp as the signed-in user.
   • Nama tampilan persetujuan pengguna: Access TodoApp
   • Deskripsi persetujuan pengguna: Allow the app to access TodoApp on your behalf.
   • Status : Diaktifkan

9. Pilih Tambahkan cakupan untuk menyelesaikan penambahan cakupan.

10. Perhatikan nilai cakupan, mirip dengan (disebut sebagaiCakupan API Web ). Anda memerlukan cakupan saat mengonfigurasi klien.

11. PilihGambaran Umum .

12. Perhatikan ID Aplikasi (klien) di bagian Essentials (disebut sebagai ID Aplikasi API Web ). Anda memerlukan nilai ini untuk mengonfigurasi layanan backend.

Buka Visual Studio dan pilih proyek TodoAppService.NET6.

1. Klik kanan pada proyek TodoAppService.NET6, lalu pilih Kelola Paket NuGet....

2. Di tab baru, pilih Telusuri, lalu masukkan Microsoft.Identity.Web di kotak pencarian.

   

3. Pilih paket Microsoft.Identity.Web, lalu tekan Instal.

4. Ikuti perintah untuk menyelesaikan penginstalan paket.

5. Buka Program.cs. Tambahkan yang berikut ini ke daftar pernyataan using:

using Microsoft.AspNetCore.Authentication.JwtBearer;
using Microsoft.Identity.Web;

6. Tambahkan kode berikut tepat di atas panggilan ke builder.Services.AddDbContext():

builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
  .AddMicrosoftIdentityWebApi(builder.Configuration);
builder.Services.AddAuthorization();

7. Tambahkan kode berikut tepat di atas panggilan ke app.MapControllers():

app.UseAuthentication();
app.UseAuthorization();

Program.cs Anda sekarang akan terlihat seperti ini:

using Microsoft.AspNetCore.Datasync;
using Microsoft.EntityFrameworkCore;
using Microsoft.AspNetCore.Authentication.JwtBearer;
using Microsoft.Identity.Web;
using TodoAppService.NET6.Db;
  
var builder = WebApplication.CreateBuilder(args);
var connectionString = builder.Configuration.GetConnectionString("DefaultConnection");
  
if (connectionString == null)
{
  throw new ApplicationException("DefaultConnection is not set");
}
  
builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
  .AddMicrosoftIdentityWebApi(builder.Configuration);
builder.Services.AddAuthorization();
builder.Services.AddDbContext<AppDbContext>(options => options.UseSqlServer(connectionString));
builder.Services.AddDatasyncControllers();
  
var app = builder.Build();
  
// Initialize the database
using (var scope = app.Services.CreateScope())
{
  var context = scope.ServiceProvider.GetRequiredService<AppDbContext>();
  await context.InitializeDatabaseAsync().ConfigureAwait(false);
}
  
// Configure and run the web service.
app.UseAuthentication();
app.UseAuthorization();
app.MapControllers();
app.Run();

8. Edit Controllers\TodoItemController.cs. Tambahkan atribut [Authorize] ke kelas . Kelas Anda akan terlihat seperti ini:

using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Datasync;
using Microsoft.AspNetCore.Datasync.EFCore;
using Microsoft.AspNetCore.Mvc;
using TodoAppService.NET6.Db;

namespace TodoAppService.NET6.Controllers
{
  [Authorize]
  [Route("tables/todoitem")]
  public class TodoItemController : TableController<TodoItem>
  {
    public TodoItemController(AppDbContext context)
      : base(new EntityTableRepository<TodoItem>(context))
    {
    }
  }
}

9. Edit appsettings.json. Tambahkan blok berikut:

  "AzureAd": {
    "Instance": "https://login.microsoftonline.com",
    "ClientId": "<client-id>",
    "TenantId": "common"
  },

Ganti <client-id> dengan ID Aplikasi API Web yang Anda rekam sebelumnya. Setelah selesai, akan terlihat seperti ini:

{
  "AzureAd": {
    "Instance": "https://login.microsoftonline.com",
    "ClientId": "<client-id>",
    "TenantId": "common"
  },
  "ConnectionStrings": {
    "DefaultConnection": "Server=(localdb)\\mssqllocaldb;Database=TodoApp;Trusted_Connection=True"
  },
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*"
}

Terbitkan layanan Anda ke Azure lagi:

1. Klik kanan pada proyek TodoAppService.NET6, lalu pilih Terbitkan....
2. Pilih tombol Terbitkan di sudut kanan atas tab.

Buka browser untuk https://yoursite.azurewebsites.net/tables/todoitem?ZUMO-API-VERSION=3.0.0. Perhatikan bahwa layanan sekarang mengembalikan respons 401, yang menunjukkan bahwa autentikasi diperlukan.

Mendaftarkan aplikasi Anda dengan layanan identitas

Microsoft Data sync Framework memiliki dukungan bawaan untuk penyedia autentikasi apa pun yang menggunakan Json Web Token (JWT) dalam header transaksi HTTP. Aplikasi ini menggunakan Microsoft Authentication Library (MSAL) untuk meminta token tersebut dan mengotorisasi pengguna yang masuk ke layanan backend. Untuk informasi selengkapnya tentang mengintegrasikan MSAL ke dalam proyek Platform Uno, tinjau dokumentasi mereka;

Mengonfigurasi aplikasi klien asli

Anda dapat mendaftarkan klien asli untuk mengizinkan autentikasi ke API Web yang dihosting di aplikasi Anda menggunakan pustaka klien seperti Microsoft Identity Library (MSAL).

1. Diportal Microsoft Azure , pilih Microsoft Entra IDPendaftaran aplikasiPendaftaran baru.

2. Di halaman Daftarkan aplikasi:

   • masukkan Nama untuk pendaftaran aplikasi Anda. Anda mungkin ingin menggunakan nama native-quickstart untuk membedakan nama ini dari yang digunakan oleh layanan backend Anda.
   • Pilih Akun di direktori organisasi apa pun (Direktori Microsoft Entra apa pun - Multipenyewa) dan akun Microsoft pribadi (misalnya Skype, Xbox).
   • Di URI Pengalihan:
     • Pilih klien Public (desktop & seluler)
     • Masukkan quickstart://auth URL

3. Pilih Daftarkan.

4. Pilih izin API >Tambahkan izin>API Saya.

5. Pilih pendaftaran aplikasi yang Anda buat sebelumnya untuk layanan backend Anda. Jika Anda tidak melihat pendaftaran aplikasi, pastikan Anda menambahkan cakupan access_as_user.

   

6. Di bawah Pilih izin, pilih access_as_user, lalu pilih Tambahkan izin.

7. Pilih Autentikasi Autentikasi>Aplikasi seluler dan desktop.

8. Centang kotak di samping https://login.microsoftonline.com/common/oauth2/nativeclient.

9. Centang kotak di samping msal{client-id}://auth (mengganti {client-id} dengan ID aplikasi Anda).

10. Pilih Tambahkan URI, lalu tambahkan http://localhost di bidang untuk URI tambahan.

11. Pilih Simpan di bagian bawah halaman.

12. PilihGambaran Umum . Catat ID Aplikasi (klien) (disebut sebagai ID Aplikasi Klien Asli ) karena Anda membutuhkannya untuk mengonfigurasi aplikasi seluler.

Kami telah menentukan tiga URL pengalihan:

• http://localhost digunakan oleh aplikasi WPF.
• https://login.microsoftonline.com/common/oauth2/nativeclient digunakan oleh aplikasi UWP.
• msal{client-id}://auth digunakan oleh aplikasi seluler (Android dan iOS).

Menambahkan Klien Identitas Microsoft ke aplikasi Anda

Buka solusi TodoApp.sln di Visual Studio. Tambahkan Uno.WinUI.MSAL ke setiap proyek :

1. Klik kanan pada solusi, lalu pilih Kelola Paket NuGet untuk Solusi....

2. Pilih tab Telusuri .

3. Masukkan Uno.WinUI.MSAL di kotak pencarian, lalu tekan Enter.

4. Pilih hasil Uno.WinUI.MSAL.

5. Di panel sebelah kanan, pilih masing-masing proyek TodoApp.Uno.

6. Pilih Instal.

   

7. Terima perjanjian lisensi untuk melanjutkan penginstalan.

Gunakan teknik yang sama untuk menambahkan pustaka Microsoft.Identity.Client ke setiap proyek :

1. Masukkan Microsoft.Identity.Client di kotak pencarian, lalu tekan Enter.

2. Pilih hasil Microsoft.Identity.Client.

3. Di panel sebelah kanan, pilih masing-masing proyek TodoApp.Uno.

4. Pilih Instal.

   

5. Terima perjanjian lisensi untuk melanjutkan penginstalan.

Nota

Pastikan Anda menginstal versi terbaru dari kedua pustaka ini. Nomor versi minimum adalah:

• Uno.WinUI.MSAL v4.9.20
• Microsoft.Identity.Client v4.54.1

Tambahkan ID klien asli dan cakupan backend ke konfigurasi.

Buka proyek TodoApp.Data dan edit file Constants.cs. Tambahkan konstanta untuk ApplicationId dan Scopes:

  public static class Constants
  {
      /// <summary>
      /// The base URI for the Datasync service.
      /// </summary>
      public static string ServiceUri = "https://demo-datasync-quickstart.azurewebsites.net";

      /// <summary>
      /// The application (client) ID for the native app within Azure Active Directory
      /// </summary>
      public static string ApplicationId = "<client-id>";

      /// <summary>
      /// The list of scopes to request
      /// </summary>
      public static string[] Scopes = new[]
      {
          "<scope>"
      };
  }

Ganti <client-id> dengan ID Aplikasi Klien Asli Anda terima saat mendaftarkan aplikasi klien di ID Microsoft Entra, dan <scope> dengan Web API Scope Anda salin saat Anda menggunakan Mengekspos API saat mendaftarkan aplikasi layanan.

Buka file MainPage.xaml.cs di folder atas proyek TodoApp.Uno.

Tambahkan pernyataan using berikut ke bagian atas file:

using Microsoft.Datasync.Client;
using Microsoft.Identity.Client;
using System.Diagnostics;
using System.Linq;
using Uno.UI.MSAL;

Ganti bidang dan konstruktor dengan kode berikut:

    private readonly IPublicClientApplication _identityClient;
    private readonly TodoListViewModel _viewModel;
    private readonly ITodoService _service;

    public MainPage() {
        this.InitializeComponent();

        _identityClient = PublicClientApplicationBuilder
            .Create(Constants.ApplicationId)
            .WithAuthority(AzureCloudInstance.AzurePublic, "common")
#if __IOS__ || __MACOS__ || __ANDROID__
            .WithRedirectUri($"msal{Constants.ApplicationId}://auth")
#else
            .WithRedirectUri("https://login.microsoftonline.com/common/oauth2/nativeclient")
#endif
#if __IOS__
            .WithIosKeychainSecurityGroup("com.microsoft.adalcache")
#endif
            .WithUnoHelpers()
            .Build();
        _service = new RemoteTodoService(GetAuthenticationToken);
        _viewModel = new TodoListViewModel(this, _service);
        mainContainer.DataContext = _viewModel;
    }

Tambahkan metode berikut ke kelas MainPage:

    public async Task<AuthenticationToken> GetAuthenticationToken()
    {
        var accounts = await _identityClient.GetAccountsAsync();
        AuthenticationResult? result = null;
        bool tryInteractiveLogin = false;

        try
        {
            result = await _identityClient
                .AcquireTokenSilent(Constants.Scopes, accounts.FirstOrDefault())
                .ExecuteAsync();
        }
        catch (MsalUiRequiredException)
        {
            tryInteractiveLogin = true;
        }
        catch (Exception ex)
        {
            System.Diagnostics.Debug.WriteLine($"MSAL Silent Error: {ex.Message}");
        }

        if (tryInteractiveLogin)
        {
            try
            {
                result = await _identityClient
                    .AcquireTokenInteractive(Constants.Scopes)
                    .WithUnoHelpers()
                    .ExecuteAsync();
            }
            catch (Exception ex)
            {
                System.Diagnostics.Debug.WriteLine($"MSAL Interactive Error: {ex.Message}");
            }
        }

        return new AuthenticationToken
        {
            DisplayName = result?.Account?.Username ?? string.Empty,
            ExpiresOn = result?.ExpiresOn ?? DateTimeOffset.MinValue,
            Token = result?.AccessToken ?? string.Empty,
            UserId = result?.Account?.Username ?? string.Empty
        };
    }

Metode GetAuthenticationToken() berfungsi dengan Microsoft Identity Library (MSAL) untuk mendapatkan token akses yang cocok untuk mengotorisasi pengguna yang masuk ke layanan backend. Fungsi ini kemudian diteruskan ke RemoteTodoService untuk membuat klien. Jika autentikasi berhasil, AuthenticationToken diproduksi dengan data yang diperlukan untuk mengotorisasi setiap permintaan. Jika tidak, maka token buruk yang kedaluwarsa diproduksi sebagai gantinya.

Mengonfigurasi aplikasi Android untuk autentikasi

Buka proyek TodoApp.Uno.Mobile dan perluas folder Android. Buat MsalActivity.Android.cs kelas baru (bersama MainActivity.Android.csyang ada) dengan kode berikut:

using Android.Content;
using Microsoft.Identity.Client;

namespace TodoApp.Uno.Droid
{
    [Activity(Exported = true)]
    [IntentFilter(new[] { Intent.ActionView },
       Categories = new[] { Intent.CategoryBrowsable, Intent.CategoryDefault },
       DataHost = "auth",
       DataScheme = "msal{client-id}")]
    public class MsalActivity : BrowserTabActivity
    {
    }
}

Ganti {client-id} dengan ID aplikasi klien asli (yang sama dengan Constants.ApplicationId).

Jika proyek Anda menargetkan Android versi 11 (API versi 30) atau yang lebih baru, Anda harus memperbarui AndroidManifest.xml untuk memenuhi persyaratan visibilitas paket Android . Buka TodoApp.Uno.Mobile/Android/AndroidManifest.xml dan tambahkan simpul queries/intent berikut ke simpul manifest:

<manifest>
  ...
  <queries>
    <intent>
      <action android:name="android.support.customtabs.action.CustomTabsService" />
    </intent>
  </queries>
</manifest>

Edit kelas MainActivity.Android.cs; tambahkan metode OnActivityResult:

using Android.Views;
using Microsoft.Identity.Client;

namespace TodoApp.Uno.Droid
{
    [Activity(
        MainLauncher = true,
        ConfigurationChanges = global::Uno.UI.ActivityHelper.AllConfigChanges,
        WindowSoftInputMode = SoftInput.AdjustNothing | SoftInput.StateHidden
    )]
    public class MainActivity : Microsoft.UI.Xaml.ApplicationActivity
    {
        protected override void OnActivityResult(int requestCode, Result resultCode, Android.Content.Intent data)
        {
            base.OnActivityResult(requestCode, resultCode, data);
            AuthenticationContinuationHelper.SetAuthenticationContinuationEventArgs(requestCode, resultCode, data);
        }
    }
}

Ketika Android memerlukan autentikasi, Android mendapatkan klien identitas, lalu beralih ke aktivitas internal yang membuka browser sistem. Setelah autentikasi selesai, browser sistem mengalihkan ke URL pengalihan yang ditentukan (msal{client-id}://auth). MasalActvity menjebak URL pengalihan, yang kemudian beralih kembali ke aktivitas utama dengan memanggil OnActivityResult(). Metode OnActivityResult() memanggil pembantu autentikasi MSAL untuk menyelesaikan transaksi.

Menguji aplikasi Android

Atur TodoApp.Uno.Mobile sebagai proyek startup, pilih emulator android sebagai target, lalu tekan F5 untuk membangun dan menjalankan aplikasi. Saat aplikasi dimulai, Anda akan diminta untuk masuk ke aplikasi. Pada eksekusi pertama, Anda juga diminta untuk menyetujui aplikasi. Setelah autentikasi selesai, aplikasi berjalan seperti biasa.

Langkah berikutnya

Selanjutnya, konfigurasikan aplikasi Anda untuk beroperasi secara offline dengan menerapkan toko offline.

Bacaan lebih lanjut

• mulai cepat : Melindungi API web dengan platform identitas Microsoft