Hızlı Başlangıç: Tek sayfalı bir uygulamada (SPA) kullanıcılarla oturum açma ve Blazor WebAssembly kullanarak Microsoft Graph API'sini çağırma

  • Makale

Bu hızlı başlangıçta, Kod Değişimi için Proof Key (PKCE) ile yetkilendirme kodu akışını kullanarak kullanıcılara nasıl oturum açacağınızı ve Microsoft Graph API'sini nasıl çağıracağınızı göstermek için örnek bir Blazor WebAssembly (WASM) tek sayfalı uygulama (SPA) uygulaması kullanılmaktadır. Örnek, kimlik doğrulamasını işlemek için Microsoft.Authentication.WebAssembly.MSAL kullanır.

Önkoşullar

Uygulama ve kayıt tanımlayıcılarını kaydetme

Kaydı tamamlamak için uygulamaya bir ad verin, desteklenen hesap türlerini belirtin ve yeniden yönlendirme URI'sini ekleyin. Kaydedildikten sonra, uygulamaya Genel Bakış bölmesinde uygulama kaynak kodunda gereken tanımlayıcılar görüntülenir.

  1. Microsoft Entra yönetim merkezinde oturum açın.

  2. Birden çok kiracıya erişiminiz varsa, dizinler + abonelikler menüsünden uygulamayı kaydetmek istediğiniz kiracıya geçmek için üst menüdeki Ayarlar simgesini kullanın.

  3. Kimlik>Uygulamaları'na> göz atın Uygulama kayıtları Yeni kayıt'ı seçin.

  4. Uygulama için identity-client-spa gibi bir Ad girin.

  5. Desteklenen hesap türleri için Yalnızca bu kuruluş dizinindeki Hesaplar'ı seçin. Farklı hesap türleri hakkında bilgi için Bana yardım et seçeneğini belirleyin.

  6. Kaydet'i seçin.

    Microsoft Entra yönetim merkezinde bir ad girmeyi ve hesap türünü seçmeyi gösteren ekran görüntüsü.

  7. Kayıt tamamlandığında uygulamanın Genel Bakış bölmesi görüntülenir. Uygulama kaynak kodunuzda kullanılacak Dizin (kiracı) kimliğini ve Uygulama (istemci) kimliğini kaydedin.

    Microsoft Entra yönetim merkezindeki genel bakış sayfasında tanımlayıcı değerlerini gösteren ekran görüntüsü.

    Not

    Desteklenen hesap türleri, Uygulama tarafından desteklenen hesapları değiştirme konusuna başvurarak değiştirilebilir.

Platform yeniden yönlendirme URI'sini ekleme

Uygulama kaydınıza uygulama türünüzü belirtmek için şu adımları izleyin:

  1. Yönet'in altında Kimlik Doğrulama'yı seçin.
  2. Platform yapılandırmaları sayfasında Platform ekle'yi ve ardından SPA seçeneğini belirleyin.
  3. Yeniden Yönlendirme URI'leri için girinhttp://localhost:5000/authentication/login-callback.
  4. Değişikliklerinizi kaydetmek için Yapılandır'ı seçin.

Örnek uygulamayı kopyalama veya indirme

Örnek uygulamayı edinmek için GitHub'dan kopyalayabilir veya .zip dosyası olarak indirebilirsiniz.

  • Örneği kopyalamak için bir komut istemi açın ve projeyi oluşturmak istediğiniz yere gidin ve aşağıdaki komutu girin:

    git clone https://github.com/Azure-Samples/ms-identity-docs-code-dotnet

  • .zip dosyasını indirin. Adın uzunluğu 260 karakterden az olan bir dosya yoluna ayıklayın.

Projeyi yapılandırma

  1. IDE'nizde, örneği içeren ms-identity-docs-code-dotnet/spa-blazor-wasm proje klasörünü açın.

  2. wwwroot/appsettings.json açın ve yönetim merkezinde daha önce kaydedilen bilgilerle aşağıdaki değerleri güncelleştirin.

    {
  "AzureAd": {
    "Authority": "https://login.microsoftonline.com/<Enter the tenant ID obtained from the Microsoft Entra admin center>",
    "ClientId": "Enter the client ID obtained from the Microsoft Entra admin center",
    "ValidateAuthority": true
  }
}
    • Authority - Yetkili, MSAL'nin belirteç isteyebileceği bir dizini gösteren bir URL'dir. Enter_the_Tenant_Info_Here değerini daha önce kaydedilmiş olan Dizin (kiracı) kimliği değeriyle değiştirin.
    • ClientId - İstemci olarak da adlandırılan uygulamanın tanımlayıcısı. Tırnak içindeki metni daha önce kaydedilmiş olan Uygulama (istemci) kimliği değeriyle değiştirin.

Uygulamayı çalıştırma ve oturum açma

.NET kullanarak projeyi bir web sunucusuyla çalıştırın:

  1. Sunucuyu başlatmak için proje dizininden aşağıdaki komutları çalıştırın:

    dotnet run

  2. http Terminalde görünen URL'yi (örneğin, http://localhost:5000) kopyalayın ve bir tarayıcıya yapıştırın. Özel veya gizli bir tarayıcı oturumu kullanmanızı öneririz.

  3. Adımları izleyin ve Microsoft hesabınızla oturum açmak için gerekli ayrıntıları girin. Size tek seferlik bir geçiş kodu gönderebilmek için bir e-posta adresi istenir. İstendiğinde kodu girin.

  4. Uygulama, erişim verdiğiniz verilere erişimi korumak ve oturum açıp profilinizi okumak için izin isteyecektir. Kabul Et’i seçin. Uygulamada oturum açtığınızı ve Profil ayrıntılarınıza Microsoft Graph API'sinden eriştiğnizi gösteren aşağıdaki ekran görüntüsü görüntülenir.

    API çağrısının sonuçlarını gösteren Blazor WASM SPA Uygulamasının ekran görüntüsü.

Uygulama oturumunu kapatma

  1. Sayfanın sağ üst köşesindeki Oturumu kapat düğmesini bulun ve seçin.
  2. Oturumunu kapatmak için bir hesap seçmeniz istenir. Oturum açmak için kullandığınız hesabı seçin.

Oturumunuz kapatıldığını belirten bir ileti görüntülenir. Artık tarayıcı penceresini kapatabilirsiniz.

Ayrıca bkz.