Aracılığıyla paylaş


Öğretici: Müşteri kiracınızı Vanilla JavaScript tek sayfalı uygulamasının kimliğini doğrulamak için hazırlama

Bu öğretici serisi, Vanilla JavaScript tek sayfalı uygulaması (SPA) oluşturmayı ve Microsoft Entra yönetim merkezini kullanarak kimlik doğrulaması için hazırlamayı gösterir. Müşterilerinizin kiracısı için Microsoft Entra kimliğinizle uygulamanızın kimliğini doğrulamak için JavaScript için Microsoft Kimlik Doğrulama Kitaplığı'nı kullanacaksınız. Son olarak uygulamayı çalıştıracak ve 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
  • SPA'ya Microsoft Graph API erişim izinleri verme
  • Microsoft Entra yönetim merkezinde oturum açma ve oturum kapatma kullanıcı akışı oluşturma
  • SPA'nızı kullanıcı akışıyla ilişkilendirme

Önkoşullar

  • Azure aboneliği. Hesabınız yoksa başlamadan önce ücretsiz bir hesap 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
  • Müşteriler kiracısı için Microsoft Entra kimliği. Henüz oluşturmadıysanız şimdi bir tane oluşturun. Varsa mevcut bir müşteri kiracısını kullanabilirsiniz.

SPA'yi kaydetme ve tanımlayıcıları kaydetme

Uygulamanızın kullanıcıları Microsoft Entra ile oturum açmasını sağlamak için, müşterilerin Microsoft Entra kimliği oluşturduğunuz uygulamadan haberdar edilmelidir. 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, müşteri kiracınıza geçmek için üst menüdeki Dizinler + abonelikler filtresini kullanın.

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

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

  5. Görüntülenen Uygulama kaydetme sayfasında;

    1. Uygulamanın kullanıcılarına gösterilen, örneğin ciam-client-app gibi anlamlı bir uygulama Adı girin.
    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 SPA seçeneğini belirleyin.
  3. Yeniden Yönlendirme URI'leri içinhttp://localhost:3000/redirect
  4. Değişikliklerinizi kaydetmek için Yapılandır'ı seçin.
  5. Platform yapılandırmaları sayfasına dönüp görüntülenen yeni Tek sayfalı uygulamadaURI Ekle'yi seçin ve ardındanhttp://localhost:3000/
  6. Değişikliklerinizi kaydetmek için Kaydet'i seçin ve her iki URI'nin de listelenmiş olduğundan emin olun.

API izinleri verme

  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.

  3. Yapılandırılan izinler'in altında İzin ekle'yi seçin.

  4. Microsoft API'leri sekmesini seçin.

  5. Yaygın olarak kullanılan Microsoft API'leri bölümünde Microsoft Graph'ı seçin.

  6. Temsilci izinleri seçeneğini belirleyin.

  7. İzinleri seçin bölümünde hem openid hem de offline_access izinlerini arayın ve seçin.

  8. İzin ekle düğmesini seçin.

  9. Bu noktada izinleri doğru atamış oldunuz. Ancak, kiracı bir müşterinin kiracısı olduğundan, tüketici kullanıcılar bu izinleri onaylayamaz. Yönetici olarak kiracıdaki tüm kullanıcılar adına bu izinleri 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 ve kiracı adınız> için <Verildi seçeneğinin her iki kapsam için de Durum altında göründüğünü doğrulayın.

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öneticisi olarak oturum açın.

  2. Birden çok kiracıya erişiminiz varsa, müşteri kiracınıza geçmek için üst menüdeki Dizinler + abonelikler filtresini kullanın.

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

  4. + Yeni kullanıcı akışı'ı 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 Email Hesapları'nı seçin. Bu kimlik sağlayıcısı, kullanıcıların e-posta adreslerini kullanarak oturum açmasına veya kaydolması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. Email hesaplar'ın altında iki seçenek arasından birini belirleyebilirsiniz. Bu öğretici için parolalı Email seçin.

      • Parolayla Email: Yeni kullanıcıların oturum açma adı olarak bir e-posta adresi ve ilk faktör kimlik bilgileri olarak bir parola kullanarak kaydolmasına ve oturum açmasına izin verir.

      • Tek seferlik geçiş kodu Email: Yeni kullanıcıların oturum açma adı olarak bir e-posta adresi ve ilk faktör kimlik bilgileri olarak tek seferlik e-posta adresi kullanarak kaydolmasına ve oturum açmasına izin verir.

        Not

        Email tek seferlik geçiş kodu, bu seçeneğin kullanıcı akışı düzeyinde kullanılabilmesi için kiracı düzeyinde (Tüm Kimlik Sağlayıcıları>Email Tek seferlik geçiş kodu) etkinleştirilmelidir.

    4. Kullanıcı öznitelikleri'nin altında, kayıttan sonra 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 öznitelikler istenir.)

  6. Oluştur’u seçin. 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.

SPA'yi kullanıcı akışıyla 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 bir telefon numarası veya e-posta adresiyle oturum açmasını veya 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ı'ı seçin.

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

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