Örnek bir vanilya JavaScript tek sayfalı uygulamasında kullanıcılarla oturum açma

  • Makale

Bu nasıl yapılır kılavuzunda, SPA'ya kimlik doğrulaması eklemeyi göstermek için örnek bir vanilya JavaScript tek sayfalı Uygulaması (SPA) kullanılmaktadır. SPA, kullanıcıların müşteriler kiracısı için kendi Microsoft Entra kimliklerini kullanarak oturum açmasını ve oturumunu kapatmasını sağlar. Örnek, kimlik doğrulamasını işlemek için JavaScript için Microsoft Kimlik Doğrulama Kitaplığı'nı (MSAL.js) kullanır.

Önkoşullar

  • Vanilya JS uygulamalarını destekleyen tüm IDE'ler kullanılabilse de, bu kılavuz için Visual Studio Code önerilir. İndirmeler sayfasından indirilebilir.
  • Node.js.
  • Müşteriler kiracısı için Microsoft Entra kimliği. Henüz bir aboneliğiniz yoksa ücretsiz deneme sürümüne kaydolun.

SPA'Microsoft Entra yönetim merkezine kaydetme

Uygulamanızın kullanıcıları Microsoft Entra ile oturum açmasını sağlamak için, müşteriler için 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 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 hesaptü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.

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öndüğünüzde, 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ışsınız. Ancak kiracı bir müşterinin kiracısı olduğundan, tüketici kullanıcıları bu izinlere onay veremez. 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, ardından 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 Hesaplar'ı Email 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 parolayla 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.

      • Email tek seferlik geçiş kodu: Yeni kullanıcıların kaydolmasına ve oturum açma adı olarak bir e-posta adresi ve ilk faktör kimlik bilgileri olarak bir kerelik geçiş kodu olarak e-posta göndermesine olanak tanır.

        Not

        Email tek seferlik geçiş kodunun, 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ştirilmesi gerekir.

    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 öznitelikleri 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

Kullanıcı akışınız ile birçok uygulama 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ı'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 uygulamayı seçin.

  7. Seç’i seçin.

Örnek SPA'yı kopyalama veya indirme

Örnek SPA'yı almak için aşağıdaki seçeneklerden birini belirleyebilirsiniz:

  • Git kullanarak depoyu kopyalayın:

        git clone https://github.com/Azure-Samples/ms-identity-ciam-javascript-tutorial.git

  • Örneği indirme

Dosyayı indirmeyi .zip seçerseniz, örnek uygulama dosyasını yolun toplam uzunluğunun 260 veya daha az karakter olduğu bir klasöre ayıklayın.

Proje bağımlılıklarını yükleme

  1. Örnek projenin kök dizininde bir terminal penceresi açın ve proje klasörüne gitmek için aşağıdaki kod parçacığını girin:

        cd 1-Authentication\0-sign-in-vanillajs\App

  2. Proje bağımlılıklarını yükleyin:

        npm install

Örnek SPA'yi yapılandırma

  1. authConfig.js dosyasını açın.
  2. Bunu bulun Enter_the_Tenant_Name_Here ve kiracınızın adıyla değiştirin.
  3. Yetkili'de bunu bulun Enter_the_Tenant_Subdomain_Here ve kiracınızın alt etki alanıyla değiştirin. Örneğin, kiracı birincil etki alanınız ise caseyjensen@onmicrosoft.com, girmeniz gereken değer casyjensen'dir.
  4. Dosyayı kaydedin.

Projenizi çalıştırma ve oturum açma

  1. Yeni bir terminal açın ve express web sunucunuzu başlatmak için aşağıdaki komutu çalıştırın.

    npm start

  2. Bir web tarayıcısı açın ve http://localhost:3000/ sayfasına gidin.

  3. Müşteri kiracısına kayıtlı bir hesapla oturum açın.

  4. Oturum açıldıktan sonra, aşağıdaki ekran görüntüsünde gösterildiği gibi Oturumu kapat düğmesinin yanında görünen ad gösterilir.

  5. SPA artık Profil Bilgilerini İste ifadesini içeren bir düğme görüntüler. Profil verilerini görüntülemek için seçin.

    Vanilya JS SPA'da oturum açma ekran görüntüsü.

Uygulama oturumunu kapatma

  1. Uygulamanın oturumunu kapatmak için gezinti çubuğunda Oturumu kapat'ı seçin.
  2. Hangi hesabın oturumunu kapatacaklarını soran bir pencere görüntülenir.
  3. Oturumun başarıyla kapatılmasının ardından, tüm tarayıcı pencerelerini kapatmanızı tavsiye eden son bir pencere görüntülenir.

Sonraki adımlar

Kendi kendine parola sıfırlamayı etkinleştirme