Azure Active Directory B2C'de tek sayfalı bir uygulama kaydetme

  • Makale

Uygulamalarınızın Azure Active Directory B2C (Azure AD B2C) ile etkileşim kurabilmesi için önce yönettiğiniz bir kiracıya kaydedilmesi gerekir. Bu kılavuzda, Azure portalını kullanarak tek sayfalı bir uygulamayı ("SPA") kaydetme adımları gösterilmektedir.

Kimlik doğrulama seçeneklerine genel bakış

Birçok modern web uygulaması, istemci tarafı tek sayfalı uygulamalar ("SPA'lar") olarak oluşturulur. Geliştiriciler bunları JavaScript veya Angular, Vue ve React gibi bir SPA çerçevesi kullanarak yazar. Bu uygulamalar bir web tarayıcı üzerinde çalışır ve geleneksel sunucu tarafı web uygulamalarından farklı kimlik doğrulama özelliklerine sahiptir.

Azure AD B2C, tek sayfalı uygulamaların kullanıcılarda oturum açmasını ve arka uç hizmetlerine veya web API'lerine erişmek için belirteçler almasını sağlamak için iki seçenek sunar:

Yetkilendirme kodu akışı (PKCE ile)

OAuth 2.0 Yetkilendirme kodu akışı (PKCE ile), uygulamanın kimliği doğrulanmış kullanıcıyı ve korumalı API'leri çağırmak için gereken Erişim belirteçlerini temsil eden kimlik belirteçleri için bir yetkilendirme kodu değiştirmesine olanak tanır. Buna ek olarak, kullanıcılarla etkileşime gerek kalmadan kullanıcılar adına kaynaklara uzun süreli erişim sağlayan Yenileme belirteçlerini döndürür.

Önerilen yaklaşım budur. Sınırlı kullanım ömrüne sahip yenileme belirteçleri, uygulamanızın Safari ITP gibi modern tarayıcı tanımlama bilgisi gizlilik sınırlamalarına uyum sağlamasına yardımcı olur.

Uygulamanız bu akışın avantajlarından yararlanmak için MSAL.js gibi onu destekleyen bir kimlik doğrulama kitaplığı kullanabilir.

Single-page applications-auth

Örtük izin akışı

MSAL.js 1.x gibi bazı kitaplıklar yalnızca örtük verme akışını destekler veya uygulamalarınız örtük akışı kullanmak için uygulanır. Bu gibi durumlarda Azure AD B2C, OAuth 2.0 örtük akışını destekler. Örtük verme akışı, uygulamanın kimlik ve Erişim belirteçlerini almasına olanak tanır. Yetkilendirme kodu akışının aksine, örtük verme akışı Yenileme belirteci döndürmez.

Single-page applications-implicit

Bu kimlik doğrulama akışı, Electron ve React-Native gibi platformlar arası JavaScript çerçeveleri kullanan uygulama senaryolarını içermez. Bu senaryolar, yerel platformlarla etkileşim için daha fazla özellik gerektirir.

Önkoşullar

  • Azure aboneliğiniz yoksa başlamadan önce ücretsiz bir hesap oluşturun.

  • Azure AD B2C Kiracınız yoksa şimdi bir kiracı oluşturun. Mevcut bir Azure AD B2C kiracısı kullanabilirsiniz.

SPA uygulamasını kaydetme

  1. Azure Portal oturum açın.

  2. Birden çok kiracıya erişiminiz varsa, Dizinler + abonelikler menüsünden Azure AD B2C kiracınıza geçmek için üstteki menüden Ayarlar simgesini seçin.

  3. Azure portalında Azure AD B2C'yi arayın ve seçin.

  4. Uygulama kayıtları'ı ve ardından Yeni kayıt'ı seçin.

  5. Uygulama için bir Ad girin. Örneğin, spaapp1.

  6. Desteklenen hesap türleri'nin altında herhangi bir kimlik sağlayıcısındaki veya kuruluş dizinindeki Hesaplar'ı seçin (kullanıcı akışlarına sahip kullanıcıların kimliğini doğrulamak için)

  7. Yeniden Yönlendirme URI'si'nin altında Tek sayfalı uygulama (SPA) öğesini seçin ve URL metin kutusuna girinhttps://jwt.ms.

    Yeniden yönlendirme URI'si, yetkilendirme sunucusunun (bu örnekte Azure AD B2C) kullanıcıyla etkileşimini tamamladıktan sonra kullanıcıyı gönderdiği uç noktadır. Ayrıca, yeniden yönlendirme URI uç noktası başarılı yetkilendirmeden sonra erişim belirtecini veya yetkilendirme kodunu alır. Bir üretim uygulamasında, genellikle uygulamanızın çalıştığı genel olarak erişilebilir bir uç noktadır, örneğin https://contoso.com/auth-response. Bu kılavuz gibi test amacıyla, bunu https://jwt.msbir belirtecin kodunun çözülen içeriğini görüntüleyen Microsoft'a ait bir web uygulaması olarak ayarlayabilirsiniz (belirtecin içeriği tarayıcınızdan asla ayrılmaz). Uygulama geliştirme sırasında, uygulamanızın gibi http://localhost:5000yerel olarak dinlediği uç noktayı ekleyebilirsiniz. Kayıtlı uygulamalarınıza istediğiniz zaman yeniden yönlendirme URI'leri ekleyebilir ve değiştirebilirsiniz.

    Yeniden yönlendirme URI'leri için aşağıdaki kısıtlamalar geçerlidir:

    • kullanmadığınız localhostsürece yanıt URL'si düzeniyle httpsbaşlamalıdır.
    • Yanıt URL'si büyük/küçük harfe duyarlıdır. Büyük/küçük harf, çalışan uygulamanızın URL yolunun durumuyla eşleşmelidir. Örneğin, uygulamanız yolunun .../abc/response-oidcbir parçası olarak içeriyorsa yanıt URL'sinde belirtmeyin .../ABC/response-oidc . Web tarayıcısı yolları büyük/küçük harfe duyarlı olarak ele aldığından, büyük/küçük harf eşleşmeyen .../ABC/response-oidc URL'ye yönlendirildiğinde ile .../abc/response-oidc ilişkili tanımlama bilgileri dışlanabilir.

  8. İzinler'in altında Openid ve offline_access izinleri için yönetici onayı ver onay kutusunu seçin.

  9. Kayıt'ı seç.

Örtük akışı etkinleştirme

SPA uygulamanızda MSAL.js 1.3 veya daha önceki bir sürümü örtük izin akışıyla kullanıyorsanız veya uygulamayı bir kullanıcı akışını veya özel ilkeyi test etmek üzere yapılandırıyorsanız https://jwt.ms/ , uygulama kaydında örtük verme akışını etkinleştirmeniz gerekir:

  1. Soldaki menüde Yönet'in altında Kimlik Doğrulaması'nı seçin.

  2. Örtük verme ve karma akışlar'ın altında Hem Erişim belirteçleri (örtük akışlar için kullanılır) hem de kimlik belirteçleri (örtük ve karma akışlar için kullanılır) onay kutularını seçin.

  3. Kaydet'i seçin.

Uygulamanız MSAL.js 2.0 veya sonraki bir sürümü kullanıyorsa, MSAL.js 2.0+ PKCE ile yetkilendirme kodu akışını desteklediğinden örtük akış verme özelliğini etkinleştirmeyin.

Örtük akıştan geçiş

Örtük akışı kullanan bir uygulamanız varsa, MSAL.js 2.0+ gibi onu destekleyen bir çerçeve kullanarak yetkilendirme kodu akışını kullanmak üzere geçiş yapmanızı öneririz.

Uygulama kaydıyla temsil edilen tüm üretim SPA'nız yetkilendirme kodu akışını kullanmaya başladığında, örtük verme akışı ayarlarını aşağıdaki gibi devre dışı bırakın:

  1. Soldaki menüde Yönet'in altında Kimlik Doğrulaması'nı seçin.
  2. Örtük izin altında, hem Erişim belirteçleri hem de kimlik belirteçleri onay kutularının seçimini kaldırın.
  3. Kaydet'i seçin.

Örtük akışı etkin (işaretli) bırakırsanız, örtük akışı kullanan uygulamalar çalışmaya devam edebilir.

Sonraki adımlar

Azure Active Directory B2C'de kullanıcı akışları oluşturmayı öğrenin.