JavaScript tek sayfalı uygulamasını örtük izinden kimlik doğrulama kod akışına geçirme

  • Makale

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, örtük verme akışı yerine tarayıcıda yetkilendirme kodu akışını destekleyerek MSAL.js 1.x'te geliştirir. MSAL.js 2.x örtük akışı DESTEKLEMEZ .

Geçiş adımları

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ı yeniden yönlendirme URI'lerinizi Web platformundan Tek sayfalı uygulama platformuna değiştirin.
  2. Kodunuzu MSAL.js 1.x'ten 2.x'e güncelleştirin.
  3. Kaydı paylaşan tüm uygulamalar MSAL.js 2.x ve kimlik doğrulama kodu akışına güncelleştirildiğ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

İpucu

Bu makaledeki adımlar, başladığınız portala göre biraz değişiklik gösterebilir.

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ış olan uygulama kayıtları için şu adımları izleyin:

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

  2. Kimlik>Uygulamaları'na> göz atın Uygulama kayıtları 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.

    Implicit flow warning banner on web app tile in Azure portal

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

    Select redirect URI pane in SPA pane in Azure portal

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.

Single-page application tile in app registration in Azure portal

Mevcut kaydınızdaki yeniden yönlendirme URI'lerini güncelleştirmek yerine yeni bir uygulama kaydı da oluşturabilirsiniz.

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]:

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

const msalInstance = new msal.PublicClientApplication(config);

Uygulamanıza MSAL 2.x ekleme hakkında ayrıntılı bilgi için bkz . Öğretici: Kullanıcıları oturum açma ve kimlik doğrulama kodu akışı kullanarak JavaScript tek sayfalı uygulamasından (SPA) Microsoft Graph API'sini çağırma.

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ırakma

Bu uygulama kaydını ve istemci kimliğini kullanan tüm üretim uygulamalarınızı MSAL 2.x'e ve yetkilendirme kodu akışına güncelleştirdikten sonra, uygulama kaydının Kimlik Doğrulaması menüsündeki örtük izin ayarlarının işaretini kaldırmanız gerekir.

Uygulama kaydındaki örtük verme ayarlarının 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.