Aracılığıyla paylaş

Öğretici: React SPA'da kullanıcıların kimliğini doğrulamak için dış kiracınızı hazırlama

  • Makale

Bu öğretici serisi, Bir React tek sayfalı uygulama (SPA) derlemeyi ve Microsoft Entra yönetim merkezini kullanarak kimlik doğrulaması için hazırlamayı gösterir. Uygulamanızın kimliğini dış kiracınızla doğrulamak için JavaScript kitaplığı için Microsoft Kimlik Doğrulama Kitaplığı'nı kullanacaksınız. Son olarak uygulamayı çalıştıracak, oturum açma ve oturum kapatma deneyimlerini test edin.

Bu öğreticide;

  • Microsoft Entra yönetim merkezine bir SPA kaydedin ve tanımlayıcılarını kaydedin
  • Platformu ve URL'leri tanımlama
  • Microsoft Graph API'sine erişmek için SPA'ya izin verme
  • Microsoft Entra yönetim merkezinde oturum açma ve oturum kapatma kullanıcı akışı oluşturma
  • SPA'nızı bir kullanıcı akışıyla ilişkilendirme

Önkoşullar

  • Dış kiracı. Aboneliğiniz yoksa başlamadan önce bir deneme kiracısı veya aboneliği olan bir kiracı oluşturun.
  • Bu Azure hesabının uygulamaları yönetme izinleri olmalıdır. Aşağıdaki Microsoft Entra rollerinden herhangi biri gerekli izinleri içerir:
    • Uygulama Yöneticisi
    • Uygulama Geliştirici
    • Bulut Uygulaması Yöneticisi

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

Uygulamanızın Microsoft Entra ile kullanıcılarla oturum açmasını sağlamak için Microsoft Entra Dış Kimlik oluşturduğunuz uygulama hakkında bilgi edinilmesi gerekir. Uygulama kaydı, uygulama ile Microsoft Entra arasında bir güven ilişkisi kurar. Bir uygulamayı kaydettiğinizde, Dış Kimlik, kimlik doğrulama istekleri oluştururken uygulamanızı tanımlamak için kullanılan bir değer olan Uygulama (istemci) kimliği olarak bilinen benzersiz bir tanımlayıcı oluşturur.

Aşağıdaki adımlar, uygulamanızı Microsoft Entra yönetim merkezine nasıl kaydedeceğini gösterir:

  1. Microsoft Entra yönetim merkezinde en azından Uygulama Geliştiricisi olarak oturum açın.

  2. Birden çok kiracıya erişiminiz varsa, Dizinler + abonelikler menüsünden dış kiracınıza geçmek için üst menüdeki Ayarlar simgesinikullanın.

  3. Kimlik>Uygulamaları'na> göz atın Uygulama kayıtları.

  4. + Yeni kayıt'ı seçin.

  5. Görüntülenen Uygulamayı kaydet sayfasında;

    1. Uygulamanın kullanıcılarına gösterilen anlamlı bir uygulama Adı girin, örneğin ciam-client-app.
    2. Desteklenen hesap türleri'nin altında Yalnızca bu kuruluş dizinindeki Hesaplar'ı seçin.

  6. Kaydet'i seçin.

  7. Başarılı bir kayıtta uygulamanın Genel Bakış bölmesi görüntülenir. Uygulama kaynak kodunuzda kullanılacak Uygulama (istemci) kimliğini kaydedin.

Platform yeniden yönlendirme URL'si 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 Tek sayfalı uygulama'yı seçin.
  3. Yeniden Yönlendirme URI'leri için girinhttp://localhost:3000.
  4. Değişikliklerinizi kaydetmek için Yapılandır'ı seçin.

  1. Uygulama kayıtları sayfasında, oluşturduğunuz uygulamayı (ciam-client-app gibi) seçerek Genel Bakış sayfasını açın.

  2. Yönet'in altında API izinleri'ne tıklayın. Yapılandırılan izinler listesinden, uygulamanıza User.Read izni atanmıştır. Ancak, kiracı bir dış kiracı olduğundan, tüketici kullanıcıların kendileri bu izni onaylayamaz. Yönetici olarak kiracıdaki tüm kullanıcılar adına bu izni onaylamanız gerekir:

    1. Kiracı adınız> için <Yönetici onayı ver'i ve ardından Evet'i seçin.
    2. Yenile'yi seçin, ardından her iki kapsam için de Durum altında Kiracı adınız> için <Verildi ifadesinin gösterildiğini doğrulayın.

Oturum açma ve kaydolma kullanıcı akışı oluşturma

Müşterinin bir uygulamada oturum açmak veya uygulamaya kaydolmak için kullanabileceği bir kullanıcı akışı oluşturmak için bu adımları izleyin.

  1. Microsoft Entra yönetim merkezinde en azından Dış Kimlik Kullanıcı Akışı Yönetici istrator olarak oturum açın.

  2. Birden çok kiracıya erişiminiz varsa, Dizinler + abonelikler menüsünden dış kiracınıza geçmek için üst menüdeki Ayarlar simgesinikullanın.

  3. Kimlik>Dış Kimlikleri>Kullanıcı akışları'na göz atın.

  4. + Yeni kullanıcı akışı'ni seçin.

  5. Oluştur sayfasında:

    1. Kullanıcı akışı için SignInSignUpSample gibi bir Ad girin.

    2. Kimlik sağlayıcıları listesinde E-posta Hesapları'nı seçin. Bu kimlik sağlayıcısı, kullanıcıların e-posta adreslerini kullanarak oturum açmalarına veya kaydolmalarına olanak tanır.

      Not

      Ek kimlik sağlayıcıları burada yalnızca federasyon ayarladıktan sonra listelenir. Örneğin, Google veya Facebook ile federasyon ayarlarsanız bu ek kimlik sağlayıcılarını buradan seçebilirsiniz.

    3. E-posta hesapları'nın altında iki seçenek arasından birini belirleyebilirsiniz. Bu öğretici için Parolayla e-posta gönder'i seçin.

      • Parolalı e-posta: Yeni kullanıcıların oturum açma adı olarak bir e-posta adresi ve ilk faktör kimlik bilgileri olarak parola kullanarak kaydolmasına ve oturum açmasına izin verir.
      • Tek seferlik geçiş kodunu e-postayla gönderme: Yeni kullanıcıların oturum açma adı olarak bir e-posta adresi ve ilk faktör kimlik bilgileri olarak bir kerelik e-posta geçiş kodu kullanarak kaydolmasına ve oturum açmasına olanak tanır. Bu seçeneğin kullanıcı akışı düzeyinde kullanılabilir olması için tek seferlik e-posta geçiş kodu kiracı düzeyinde (Tüm Kimlik Sağlayıcıları>E-posta Bir kerelik geçiş kodu) etkinleştirilmelidir.

    4. Kullanıcı öznitelikleri'nin altında, kayıt sırasında kullanıcıdan toplamak istediğiniz öznitelikleri seçin. Daha fazla göster'i seçerek Ülke/Bölge, Görünen Ad ve Posta Kodu için öznitelikleri ve talepleri seçebilirsiniz. Tamam'ı seçin. (Kullanıcılardan yalnızca ilk kez kaydolduğunda öznitelikleri istenir.)

  6. Oluştur'u belirleyin. Yeni kullanıcı akışı, Kullanıcı akışları listesinde görünür. Gerekirse sayfayı yenileyin.

Self servis parola sıfırlamayı etkinleştirmek için Self servis parola sıfırlamayı etkinleştirme makalesindeki adımları kullanın.

Uygulamayı kullanıcı akışınızla ilişkilendirme

Birçok uygulama kullanıcı akışınız ile ilişkilendirilebilir ancak tek bir uygulama yalnızca bir kullanıcı akışıyla ilişkilendirilebilir. Kullanıcı akışı, belirli uygulamalar için kullanıcı deneyiminin yapılandırılmasına olanak tanır. Örneğin, kullanıcıların oturum açmasını veya e-posta adresiyle kaydolmasını gerektiren bir kullanıcı akışı yapılandırabilirsiniz.

  1. Kenar çubuğu menüsünde Kimlik'i seçin.

  2. Dış Kimlikler'i ve ardından Kullanıcı akışları'yı seçin.

  3. Kullanıcı akışları sayfasında, daha önce oluşturduğunuz Kullanıcı akışı adını (örneğin, SignInSignUpSample) seçin.

  4. Kullan'ın altında Uygulamalar'ı seçin.

  5. Uygulama ekle'yi seçin.

  6. Ciam-client-app gibi listeden uygulamayı seçin veya uygulamayı bulmak için arama kutusunu kullanın ve ardından seçin.

  7. Seç'i seçin.

Sonraki adım

Bölüm 2: Dış kiracıda kimlik doğrulaması için React SPA projesi oluşturma