Bagikan melalui

Tutorial: Membuat aplikasi .NET MAUI menggunakan Microsoft Graph SDK

  • Artikel

Dapatkan langsung dengan .NET MAUI dengan membangun aplikasi lintas platform di Windows yang memanfaatkan Microsoft Graph SDK untuk menampilkan data pengguna.

Dalam tutorial ini, Anda akan mempelajari cara:

  • Siapkan lingkungan Anda untuk pengembangan MAUI .NET dan buat proyek MAUI .NET
  • Mendaftarkan aplikasi klien Anda di Azure
  • Mengintegrasikan dengan Azure Identity dan Microsoft Graph SDK
  • Memperbarui antarmuka pengguna untuk menampilkan informasi pengguna dari Microsoft Graph

Prasyarat

Menyiapkan lingkungan

Jika Anda belum menyiapkan lingkungan Anda untuk pengembangan MAUI .NET, ikuti langkah-langkah untuk Mulai menggunakan .NET MAUI di Windows.

Membuat proyek .NET MAUI

Catatan

Jika Anda sudah terbiasa menyiapkan proyek .NET MAUI, Anda dapat melompat ke bagian Daftarkan klien Anda di Azure .

Luncurkan Visual Studio, dan di jendela mulai klik Buat proyek baru untuk membuat proyek baru:

Buat proyek baru.

Di jendela Buat proyek baru, pilih MAUI di menu drop-down Semua jenis proyek, pilih templat Aplikasi .NET MAUI, dan klik tombol Berikutnya :

Templat Aplikasi .NET MAUI.

Di jendela Konfigurasikan proyek baru Anda, beri nama proyek Anda, pilih lokasi untuk proyek tersebut, dan klik tombol Berikutnya :

Beri nama proyek baru.

Di jendela Informasi tambahan, klik tombol Buat :

Buat proyek baru.

Tunggu hingga proyek dibuat, dan dependensinya dipulihkan:

Proyek dibuat.

Di toolbar Visual Studio, tekan tombol Windows Machine untuk membuat dan menjalankan aplikasi. Klik tombol Klik saya dan verifikasi bahwa konten tombol diperbarui dengan jumlah klik.

Sekarang setelah Anda memverifikasi bahwa aplikasi .NET MAUI di Windows berfungsi seperti yang diharapkan, kami dapat mengintegrasikan Graph SDK. Di bagian berikutnya, Anda akan menambahkan paket yang diperlukan untuk mengautentikasi dan melakukan panggilan ke Microsoft Graph.

Mendaftarkan klien Anda di Azure

Pendaftaran aplikasi di Azure dengan cakupan User.Read yang diberikan ke aplikasi diperlukan untuk membaca data pengguna dari Microsoft Graph. Untuk mendaftarkan aplikasi Anda, ikuti langkah-langkah ini:

Masuk ke portal Azure.

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

Cari dan pilih Microsoft Azure Active Directory.

Di bawah Kelola, pilih Pendaftaran aplikasi > Pendaftaran baru.

Masukkan Nama untuk aplikasi Anda, contohnya Win-App-calling-MsGraph. Pengguna aplikasi mungkin melihat nama ini, dan Anda dapat mengubahnya nanti.

Di bagian Tipe akun yang didukung, pilih Akun di direktori organisasi dan akun Microsoft pribadi apa pun (misalnya, Skype, Xbox, Outlook.com).

Pilih Daftar untuk membuat aplikasi.

Salin dan simpan id Aplikasi (klien) dan nilai ID Direktori (penyewa) untuk digunakan nanti. Kami akan menyimpan nilai-nilai tersebut di kelas GraphService di bagian berikutnya.

Di bagian Kelola, pilih Autentikasi.

Pilih Tambahkan platform > Aplikasi seluler dan desktop.

Di bagian URI Pengalihan, pilih https://login.microsoftonline.com/common/oauth2/nativeclient dan di URI pengalihan kustom tambahkan https://localhost.

Pilih Konfigurasikan.

Di bagian Kelola, pilih Izin API.

Jika izin Microsoft Graph User.Read tidak ada di bawah Izin yang dikonfigurasi, pilih Tambahkan izin. Di layar Minta izin API, pilih izin Aplikasi Microsoft Graph > dan cari User.Read. Perluas Pengguna, pilih User.Read, dan klik Tambahkan izin.

Mengintegrasikan Graph SDK dan Azure Identity

Sekarang setelah Anda menjalankan aplikasi .NET MAUI di Windows dan telah mengonfigurasi pendaftaran aplikasi di Azure, mari kita tambahkan beberapa paket NuGet ke proyek untuk diintegrasikan dengan Azure Identity dan Microsoft Graph.

Klik kanan proyek di Penjelajah Solusi dan pilih Kelola Paket NuGet... dari menu konteks.

Di jendela Manajer Paket NuGet, pilih tab Telusuri dan cari Azure.Identity:

Paket Azure.Identity.

Tambahkan versi stabil terbaru paket Azure.Identity ke proyek dengan mengklik Instal.

Selanjutnya, cari Microsoft.Graph:

Paket Microsoft.Graph.

Tambahkan versi stabil terbaru paket Microsoft.Graph ke proyek dengan mengklik Instal.

Tutup jendela Manajer Paket NuGet setelah paket baru selesai diinstal.

Klik kanan proyek lagi dan pilih Tambahkan | Kelas dari menu konteks.

Di jendela Tambahkan Item Baru yang muncul, beri nama kelas GraphService dan klik Tambahkan:

Tambahkan kelas GraphService.

Tambahkan empat anggota privat ke GraphService kelas , ganti nilai ID klien dan ID penyewa Anda sendiri untuk teks tempat penampung:

private readonly string[] _scopes = new[] { "User.Read" };
private const string TenantId = "<add your tenant id here>";
private const string ClientId = "<add your client id here>";
private GraphServiceClient _client;

Initialize() Tambahkan metode ke GraphService, yang akan dipanggil dari konstruktor. Kode inisialisasi akan mengautentikasi menggunakan InteractiveBrowserCredential kelas . Setelah autentikasi berhasil, token autentikasi akan diberikan kepada GraphServiceClient oleh kelas kredensial bersama dengan cakupan yang diminta (User.Read).

public GraphService()
{
    Initialize();
}

private void Initialize()
{
    // assume Windows for this sample
    if (OperatingSystem.IsWindows())
    {
        var options = new InteractiveBrowserCredentialOptions
        {
            TenantId = TenantId,
            ClientId = ClientId,
            AuthorityHost = AzureAuthorityHosts.AzurePublicCloud,
            RedirectUri = new Uri("https://localhost"),
        };

        InteractiveBrowserCredential interactiveCredential = new(options);
        _client = new GraphServiceClient(interactiveCredential, _scopes);
    }
    else 
    {
        // TODO: Add iOS/Android support
    }
}

Catatan

Metode 'Initialize()' saat ini hanya mendukung Windows. Mengautentikasi di iOS dan Android memerlukan paket NuGet yang berbeda (Microsoft.Identity.Client) dan beberapa langkah tambahan. Untuk membaca selengkapnya tentang autentikasi seluler, lihat Mengonfigurasi aplikasi klien asli.

Tambahkan metode asinkron publik bernama GetMyDetailsAsync() untuk mengembalikan User objek untuk pengguna yang diautentikasi:

public async Task<User> GetMyDetailsAsync()
{
    try
    {
        return await _client.Me.GetAsync();
    }
    catch (Exception ex)
    {
        Console.WriteLine($"Error loading user details: {ex}");
        return null;
    }
}

Dua using pernyataan akan diperlukan untuk mengkompilasi kode baru yang ditambahkan ke GraphService:

using Azure.Identity;
using Microsoft.Graph;
using Microsoft.Graph.Models;

Di MainPage.xaml, tambahkan ke x:Name label Hello, World! :

<Label
    x:Name="HelloLabel"
    Text="Hello, World!"
    SemanticProperties.HeadingLevel="Level1"
    FontSize="32"
    HorizontalOptions="Center" />

Tambahkan tombol baru ke halaman setelah yang sudah ada CounterBtn untuk mendapatkan informasi pengguna dari Graph:

<Button
    x:Name="GetUserInfoBtn"
    Text="Load User Info"
    SemanticProperties.Hint="Loads user information from Microsoft Graph"
    Clicked="GetUserInfoBtn_Clicked"
    HorizontalOptions="Center" />

Dalam MainPage.xaml.cs, tambahkan variabel privat ke untuk GraphService dan User:

private GraphService graphService;
private User user;

Tambahkan penanganan aktivitas untuk Clicked peristiwa yang Anda tambahkan ke GetUserInfoButton di MainPage.xaml. Penanganan aktivitas akan membuat instans GraphService jika null dan melakukan panggilan untuk mengambil data pengguna. Teks HelloLabelakan diperbarui untuk menyapa pengguna, menampilkan DisplayName properti dari Microsoft Graph:

private async void GetUserInfoBtn_Clicked(object sender, EventArgs e)
{
    if (graphService == null)
    {
        graphService = new GraphService();
    }
    user = await graphService.GetMyDetailsAsync();
    HelloLabel.Text = $"Hello, {user.DisplayName}!";
}

Jalankan aplikasi dan klik tombol Muat Info Pengguna:

Luncurkan aplikasi.

Saat jendela Masuk ke akun Anda muncul, pilih akun yang sudah ada atau klik Gunakan akun lain:

Pilih akun.

Jika Anda memilih akun lain, masukkan alamat email dan kata sandi untuk akun tersebut dan masuk.

Setelah autentikasi selesai, Anda akan melihat DisplayName pengguna Anda di aplikasi:

Info pengguna telah dimuat dalam label.

Memperbarui antarmuka pengguna untuk menampilkan informasi pengguna

Sekarang setelah GraphService mengembalikan informasi pengguna, mari kita perbarui antarmuka pengguna untuk menampilkan beberapa informasi profil pengguna tambahan.

Di MainPage.xaml, mulailah dengan memperbarui konten VerticalStackLayout, menghapus label selamat datang dan Image kontrol yang ada dan menambahkan empat label baru untuk menampilkan informasi pengguna. Setiap label yang akan diperbarui diberi nama, dan kami telah menyediakan beberapa teks tempat penampung hingga data dimuat dari kueri Graph. Konten VerticalStackLayout sekarang akan terlihat seperti ini:

<VerticalStackLayout
    Spacing="25"
    Padding="30,0"
    VerticalOptions="Center">

    <Label
        x:Name="HelloLabel"
        Text="Hello, World!"
        SemanticProperties.Description="Displays a welcome message for the user"
        SemanticProperties.HeadingLevel="Level1"
        FontSize="32"
        HorizontalOptions="Center" />

    <Button
        x:Name="CounterBtn"
        Text="Click me"
        SemanticProperties.Hint="Counts the number of times you click"
        Clicked="CounterBtn_Clicked"
        HorizontalOptions="Center" />

    <Button
        Text="Load User Info"
        SemanticProperties.Hint="Loads user information from Microsoft Graph"
        Clicked="GetUserInfoBtn_Clicked"
        HorizontalOptions="Center" />

    <Label
        x:Name="DisplayNameLabel"
        Text="Display name"
        SemanticProperties.Description="Displays the user's display name from Microsoft Graph."
        SemanticProperties.HeadingLevel="Level2"
        FontSize="18"
        HorizontalOptions="Center" />

    <Label
        x:Name="UserFirstNameLabel"
        Text="First name"
        SemanticProperties.Description="Displays the user's first name info from Microsoft Graph"
        SemanticProperties.HeadingLevel="Level2"
        FontSize="18"
        HorizontalOptions="Center" />

    <Label
        x:Name="UserLastNameLabel"
        Text="Last name"
        SemanticProperties.Description="Displays the user's last name from Microsoft Graph"
        SemanticProperties.HeadingLevel="Level2"
        FontSize="18"
        HorizontalOptions="Center" />

    <Label
        x:Name="UserPrincipalNameLabel"
        Text="User Principal Name"
        SemanticProperties.Description="Displays the user principal name from Microsoft Graph"
        SemanticProperties.HeadingLevel="Level2"
        FontSize="18"
        HorizontalOptions="Center" />

</VerticalStackLayout>

Terakhir, dalam MainPage.xaml.cs, perbarui elemen UI dengan nilai properti baru di GetUserInfoBtn_Clicked penanganan aktivitas menggunakan properti objek Pengguna Graph:

private async void GetUserInfoBtn_Clicked(object sender, EventArgs e)
{
    if (graphService == null)
    {
        graphService = new GraphService();
    }
    user = await graphService.GetMyDetailsAsync();
    HelloLabel.Text = $"Hello, {user.DisplayName}!";

    DisplayNameLabel.Text = user.DisplayName;
    UserFirstNameLabel.Text = user.GivenName;
    UserLastNameLabel.Text = user.Surname;
    UserPrincipalNameLabel.Text = user.UserPrincipalName;
}

Jalankan aplikasi lagi dan klik tombol Muat Info Pengguna. Anda akan melihat informasi pengguna yang ditampilkan di aplikasi setelah mengautentikasi:

Info pengguna tambahan telah dimuat dalam label.

Untuk mempelajari cara menginstal dan memulai Microsoft Graph SDK di aplikasi .NET MAUI Anda, lihat Menginstal Microsoft Graph .NET SDK.

Langkah berikutnya

Lanjutkan ke artikel berikutnya untuk mempelajari cara...

Membuat aplikasi rekomendasi dengan .NET MAUI dan ChatGPT

Lihat juga

Sumber daya untuk mempelajari .NET MAUI

Gambaran umum Microsoft Graph SDK

Mengonfigurasi aplikasi klien asli

Gambaran umum API manajemen identitas dan akses Azure Active Directory