JavaScript tek sayfa uygulamasını örtük yetkilendirmeden kimlik doğrulama kodu akışına geçirme

JavaScript (MSAL.js) v2.0 için Microsoft Kimlik Doğrulama Kitaplığı, Microsoft kimlik platformu tek sayfalı uygulamalara PKCE ve CORS ile yetkilendirme kodu akışı için destek sağlar. MSAL.js 1.x uygulamanızı MSAL.js 2.0+ (bundan sonra 2.x) ve kimlik doğrulama kodu akışına örtük izni kullanarak geçirmek için aşağıdaki bölümlerdeki adımları izleyin.

MSAL.js 2.x, MSAL.js 1.x'e göre örtük izin akışı yerine tarayıcıda yetkilendirme kodu akışını destekleyerek bir iyileştirme sağlar. MSAL.js 2.x örtük akışını DESTEKLEMEZ.

Geçiş adımlarını gerçekleştirme

Uygulamanızı MSAL.js 2.x ve kimlik doğrulama kodu akışına güncelleştirmek için üç birincil adım vardır:

  1. Uygulama kaydınızın yeniden yönlendirme URI'lerini Web platformundan Tek sayfa uygulaması platformuna değiştirin.
  2. Kodunuzu MSAL.js 1.x'ten 2.x'e güncelleştirin.
  3. Uygulama kaydını paylaşan tüm uygulamalar MSAL.js 2.x ve yetkilendirme kodu akışına güncellendiğinde, uygulama kaydınızda örtük izni devre dışı bırakın.

Aşağıdaki bölümlerde her adım ayrıntılı olarak açıklanmaktadır.

Yeniden yönlendirme URI'lerini SPA platformuna değiştirme

Uygulamalarınız için mevcut uygulama kaydınızı kullanmaya devam etmek isterseniz kaydın yeniden yönlendirme URI'lerini SPA platformuna güncelleştirmek için Microsoft Entra yönetim merkezini kullanın. Bunun yapılması, kaydı kullanan uygulamalar için PKCE ve CORS desteğiyle yetkilendirme kodu akışını etkinleştirir (yine de uygulamanızın kodunu MSAL.js v2.x'e güncelleştirmeniz gerekir).

Şu anda Web platformu yeniden yönlendirme URI'leri ile yapılandırılmış uygulama kayıtları için şu adımları izleyin:

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

  2. Entra ID>Uygulama kayıtları'na gidin, uygulamanızı seçin ve ardından Kimlik Doğrulaması'na gidin.

  3. Yeniden yönlendirme URI'leri altındaki Web platformu kutucuğunda URI'lerinizi geçirmeniz gerektiğini belirten uyarı başlığını seçin.

    Entra yönetim merkezindeki web uygulaması kutucuğundaki örtük akış uyarı başlığı.

  4. Yalnızca uygulamaları MSAL.js 2.x kullanacak yeniden yönlendirme URI'lerini seçin ve ardından Yapılandır'ı seçin.

    Entra yönetim merkezindeki SPA bölmesinde yeniden yönlendirme URI bölmesini seçin.

Bu yeniden yönlendirme URI'leri artık Tek sayfalı uygulama platformu kutucuğunda görünmelidir ve bu URI'ler için yetkilendirme kodu akışı ve PKCE desteğinin etkinleştirildiğini gösterir.

Azure portalında uygulama kaydında tek sayfalı uygulama kutucuğu

Kodunuzu MSAL.js 2.x olarak güncelleştirme

MSAL 1.x'te, userAgentApplication'ı aşağıdaki gibi başlatarak bir uygulama örneği oluşturdunuz:

// MSAL 1.x
import * as msal from "msal";

const msalInstance = new msal.UserAgentApplication(config);

MSAL 2.x'te, [PublicClientApplication][msal-js-publicclientapplication]'ı başlatın:

// MSAL 2.x
import * as msal from "@azure/msal-browser";

const msalInstance = new msal.PublicClientApplication(config);

Kodunuzda yapmanız gereken ek değişiklikler için GitHub'da geçiş kılavuzuna bakın.

Örtük verme ayarlarını devre dışı bırak

Bu uygulama kaydını ve istemci kimliğini kullanan tüm üretim uygulamalarınızı MSAL 2.x'e ve yetkilendirme kodu akışını kullanacak şekilde güncelledikten sonra, uygulama kaydının Kimlik Doğrulama menüsündeki örtük izin ayarlarının işaretini kaldırmalısınız.

Uygulama kayıt ayarlarındaki örtük verme seçeneklerinin işaretini kaldırdığınızda, kayıt ve istemci kimliğini kullanan tüm uygulamalar için örtük akış devre dışı bırakılır.

Tüm uygulamalarınızı MSAL.js 2.x ve [PublicClientApplication][msal-js-publicclientapplication] olarak güncelleştirmeden önce örtük verme akışını devre dışı bırakmayın .

Sonraki adımlar

  • Örtük ve kimlik doğrulama kodu akışları arasındaki farklar da dahil olmak üzere yetkilendirme kodu akışı hakkında daha fazla bilgi edinmek için Microsoft kimlik platformu ve OAuth 2.0 yetkilendirme kodu akışına bakın.

  • Aşağıdaki çok bölümlü öğretici serisinde kullanıcılara oturum açmanızı sağlayan bir React Tek sayfalı uygulama (SPA) oluşturarak daha fazla bilgi edinin.

  • Last updated on