Örnek Node.js web uygulamasında kullanıcılarda oturum açma

Bu nasıl yapılır kılavuzu, bir web uygulamasına kimlik doğrulaması eklemeyi göstermek için örnek bir Node.js web uygulaması kullanır. Örnek uygulama, kullanıcıların oturum açmasını ve oturumu kapatmasını sağlar. Örnek web uygulaması, kimlik doğrulamasını işlemek üzere Node için Microsoft Authentication Library for Node (MSAL Node) kullanır.

Bu makalede aşağıdaki görevleri yerine getirin:

• Microsoft Entra yönetim merkezine bir web uygulaması kaydedin.

• Microsoft Entra yönetim merkezinde oturum açma ve oturum kapatma kullanıcı akışı oluşturun.

• Web uygulamanızı kullanıcı akışıyla ilişkilendirin.

• Müşteriler için kiracı ayrıntıları için kendi Microsoft Entra kimliğinizi kullanarak örnek bir Node.js web uygulamasını güncelleştirin.

• Örnek web uygulamasını çalıştırın ve test edin.

Önkoşullar

• Node.js.

• Visual Studio Code veya başka bir kod düzenleyicisi.

• Müşteriler kiracısı için Microsoft Entra kimliği. Henüz bir aboneliğiniz yoksa ücretsiz deneme sürümüne kaydolun.

Web uygulamasını 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 Web seçeneğini belirleyin.
3. Yeniden Yönlendirme URI'leri içinhttp://localhost:3000/auth/redirect
4. Değişikliklerinizi kaydetmek için Yapılandır'ı seçin.
5. Platform yapılandırmaları sayfasındaki Web'in altında URI 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.

Uygulama istemci gizli anahtarı ekleme

Kayıtlı uygulama için bir istemci gizli dizisi oluşturun. Uygulama, belirteç istediğinde kimliğini kanıtlamak için istemci gizli dizisini kullanır.

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 Sertifika gizli dizileri'ni &seçin.
3. Yeni istemci gizli dizisi'ni seçin.
4. Açıklama kutusuna istemci gizli dizisi için bir açıklama girin (örneğin, ciam uygulama istemci gizli dizisi).
5. Süre Sonu'nun altında gizli dizinin geçerli olduğu bir süre seçin (kuruluşunuzun güvenlik kuralları başına) ve ardından Ekle'yi seçin.
6. Gizli dizinin Değerini kaydedin. Bu değeri sonraki bir adımda yapılandırma için kullanacaksınız.

Not

Gizli dizi değeri yeniden görüntülenmez ve Sertifikalar ve gizli diziler sayfasından uzaklaştıktan sonra herhangi bir yolla alınamaz, bu nedenle kaydettiğinizden emin olun.
Gelişmiş güvenlik için istemci gizli dizileri yerine sertifikaları kullanmayı göz önünde bulundurun.

API izinleri verme

Bu uygulama oturum açan kullanıcılar olduğundan temsilci izinleri ekleyin:

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.

Web uygulamasını 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 seçin.

7. Seç’i seçin.

Örnek web uygulamasını kopyalama veya indirme

Web uygulaması örnek kodunu almak için aşağıdaki görevlerden birini gerçekleştirebilirsiniz:

• Aşağıdaki komutu çalıştırarak .zip dosyasını indirin veya GitHub'dan örnek web uygulamasını kopyalayın:

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

.zip dosyasını indirmeyi 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. Bir konsol penceresi açın ve Node.js örnek uygulamasını içeren dizine geçin:

       cd 1-Authentication\5-sign-in-express\App
   

2. Uygulama bağımlılıklarını yüklemek için aşağıdaki komutları çalıştırın:

       npm install && npm update
   

Örnek web uygulamasını yapılandırma

1. Kod düzenleyicinizde App\authConfig.js dosyasını açın.

2. Yer tutucuyu bulun:

   1. Enter_the_Application_Id_Here ve daha önce kaydettiğiniz uygulamanın Uygulama (istemci) kimliğiyle değiştirin.

   2. Enter_the_Tenant_Subdomain_Here ve değerini Dizin (kiracı) alt etki alanıyla değiştirin. Örneğin, kiracı birincil etki alanınız ise contoso.onmicrosoft.comkullanın contoso. Kiracı adınız yoksa kiracınızın ayrıntılarını okumayı öğrenin.

   3. Enter_the_Client_Secret_Here ve daha önce kopyaladığınız uygulama gizli anahtarı değeriyle değiştirin.

Örnek web uygulamasını çalıştırma ve test edin

Artık örnek Node.js web uygulamasını test edebilirsiniz. Node.js sunucusunu başlatmanız ve tarayıcınız aracılığıyla adresine http://localhost:3000erişmeniz gerekir.

1. Terminalinizde aşağıdaki komutu çalıştırın:

       npm start 
   

2. Tarayıcınızı açın ve http://localhost:3000. Sayfayı aşağıdaki ekran görüntüsüne benzer şekilde görmeniz gerekir:

   

3. Sayfanın yüklenmesi tamamlandıktan sonra Oturum aç bağlantısı'nı seçin. Oturum açmanız istenir.

4. Oturum açma sayfasında, Email adresinizi yazın, İleri'yi seçin, Parolanızı yazın ve oturum aç'ı seçin. Hesabınız yoksa Hesap yok mu? seçeneğini belirleyin. Kaydolma akışını başlatan bir bağlantı oluşturun.

5. Kaydolma seçeneğini belirlerseniz, e-postanızı, tek seferlik geçiş kodunuzu, yeni parolanızı ve diğer hesap ayrıntılarını doldurduktan sonra tüm kayıt akışını tamamlarsınız. Aşağıdaki ekran görüntüsüne benzer bir sayfa görürsünüz. Oturum açma seçeneğini belirlerseniz benzer bir sayfa görürsünüz.

   

6. Kullanıcının web uygulamasında oturumunu kapatmak için Oturumu kapat'ı veya Microsoft Entra tarafından döndürülen kimlik belirteci taleplerini görüntülemek için Kimlik belirteci beyanlarını görüntüle'yi seçin.

Nasıl çalışır?

Kullanıcılar Oturum aç bağlantısını seçtiğinde, uygulama bir kimlik doğrulama isteği başlatır ve kullanıcıları müşteriler için Microsoft Entra kimliğine yönlendirir. Görüntülenen oturum açma veya kaydolma sayfasında, kullanıcı başarıyla oturum açtığında veya hesap oluşturduğunda, müşteriler için Microsoft Entra kimliği uygulamaya bir kimlik belirteci döndürür. Uygulama kimlik belirtecini doğrular, talepleri okur ve kullanıcılara güvenli bir sayfa döndürür.

Kullanıcılar Oturumu kapat bağlantısını seçtiğinde, uygulama oturumunu temizler ve kullanıcının oturumu kapattığını bildirmek için kullanıcıyı Microsoft Entra kimliğine yeniden yönlendirir.

Çalıştırdığınız örneğe benzer bir uygulama oluşturmak istiyorsanız , Kendi Node.js web uygulamanızda kullanıcıları oturum açma makalesindeki adımları tamamlayın.

Sonraki adımlar

Şunu yapmak isteyebilirsiniz:

• Parola sıfırlamayı etkinleştirme

• Varsayılan markayı özelleştirme

• Google ile oturum açmayı yapılandırma

• Node.js web uygulamanızda kullanıcıların oturumunu açma