Örnek bir Elektron masaüstü uygulamasında kullanıcılarla oturum açma

Bu nasıl yapılır kılavuzu, bir masaüstü uygulamasına kimlik doğrulaması eklemeyi göstermek için örnek bir Electron masaüstü 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 için Node için Microsoft Kimlik Doğrulama Kitaplığı'nı (MSAL) kullanır.

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

• Microsoft Entra yönetim merkezine bir masaüstü 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.

• Kendi dış kiracı ayrıntılarınızı kullanarak örnek bir Electron masaüstü uygulamasını güncelleştirin.

• Örnek masaüstü uygulamasını çalıştırın ve test edin.

Önkoşullar

• Node.js.

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

• Dış kiracı. Henüz bir aboneliğiniz yoksa ücretsiz deneme sürümüne kaydolun.

Masaüstü uygulaması 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.

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 Mobil ve masaüstü uygulamaları seçeneğini belirleyin.
3. Özel yeniden yönlendirme URI'leri için yazın http://localhostve Yapılandır'ı seçin.
4. Değişikliklerinizi kaydetmek için Yapılandır'ı seçin.

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 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ış olursunuz. 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 her iki kapsam için de Durum altında Kiracı adınız> için <Verildi ifadesinin gösterildiğini doğrulayın.

İsteğe bağlı beyanları yapılandırma

1. Yönet'in altında Belirteç yapılandırmasını seçin.

2. İsteğe bağlı talep ekle öğesini seçin.

3. İsteğe bağlı talep türünü ve ardından Kimlik'i seçin.

4. İsteğe bağlı talep login_hint seçin.

5. Değişikliklerinizi kaydetmek için Ekle'yi seçin.

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.

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

Örnek web uygulamasını kopyalama veya indirme

Masaüstü uygulaması örnek kodunu almak için .zip dosyasını indirin veya aşağıdaki komutu çalıştırarak GitHub'dan örnek web uygulamasını kopyalayın:

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

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

   cd 1-Authentication\3-sign-in-electron\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 dosyayı açın App\authConfig.js .

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 bunu 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ı nasıl okuyacağınızı öğrenin.

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

Artık örnek Electron masaüstü uygulamasını test edebilirsiniz. Uygulamayı çalıştırdıktan sonra masaüstü uygulaması penceresi otomatik olarak görüntülenir:

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

   npm start
   

   

2. Görüntülenen masaüstü penceresinde Oturum Aç veya Kaydol düğmesini seçin. Bir tarayıcı penceresi açılır ve oturum açmanız istenir.

3. Tarayıcı oturum açma sayfasında, E-posta adresinizi yazın, İleri'yi seçin, Parolanızı yazın ve ardından Oturum aç'ı seçin. Hesabınız yoksa Hesap yok mu? seçeneğini belirleyin . Kayıt akışını başlatan bir bağlantı oluşturun.

4. Kaydolma seçeneğini belirlerseniz, e-postanızı, tek seferlik geçiş kodunu, yeni parolayı 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. Sayfada belirteç kimliği talepleri görüntülenir.

   

Ayrıca bkz.

• Parola sıfırlamayı etkinleştirin.
• Varsayılan markayı özelleştirin.
• Google ile oturum açmayı yapılandırın.
• Electron masaüstü uygulaması örnek kodunu keşfedin.