Aracılığıyla paylaş

Hızlı Başlangıç: Örnek masaüstü uygulamasında kullanıcılarda oturum açma

Şunlar için geçerlidir: Aşağıdaki içeriğin iş gücü kiracıları için geçerli olduğunu gösteren beyaz onay işareti simgesine sahip yeşil daire. İş gücü kiracıları Aşağıdaki içeriğin dış kiracılar için geçerli olduğunu gösteren beyaz onay işareti simgesine sahip yeşil daire. Dış kiracılar (daha fazla bilgi edinin)

Bu hızlı başlangıçta, bir masaüstü uygulamasına kimlik doğrulaması eklemeyi öğrenmek için örnek bir uygulama kullanacaksınız. Örnek uygulama, kullanıcıların oturum açmasını ve oturumu kapatmasını sağlar ve kimlik doğrulamasını gerçekleştirmek için Microsoft Kimlik Doğrulama Kitaplığı'nı (MSAL) kullanır.

Başlamadan önce, bu sayfanın üst kısmındaki Kiracı türü seçici kullanarak kiracı türünü seçin. Microsoft Entra ID, iki kiracı yapılandırması sağlar: iş gücü ve dış . İş gücü kiracı yapılandırması çalışanlarınıza, iç uygulamalarınıza ve diğer kuruluş kaynaklarınıza yöneliktir. Dış kiracı, müşteriye yönelik uygulamalarınız içindir.

Önkoşullar

  • Etkin aboneliği olan bir Azure hesabı. Eğer henüz bir hesabınız yoksa, ü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
  • İş gücü kiracısı. Varsayılan Dizininizi kullanabilir veya yeni bir kiracı ayarlayabilirsiniz.
  • Microsoft Entra yönetim merkezine, yalnızca bu kuruluş dizinindeki Hesaplar için yapılandırılmış yeni bir uygulama kaydedin. Daha fazla bilgi için Bir uygulamayı kaydetme bölümüne bakın. Daha sonra kullanmak üzere uygulamaya Genel Bakış sayfasından aşağıdaki değerleri kaydedin:
    • Uygulama (istemci) kimliği
    • Dizin (kullanıcı) kimliği

Örnek projeyi indirme

Uyarı

Bu öğreticide sunulan Electron örneği, özellikle MSAL-node ile çalışması için tasarlanmıştır. MSAL-browser, Elektron uygulamalarında desteklenmez. Projenizi doğru ayarlamak için aşağıdaki adımları tamamladığınızdan emin olun.

  • Örneği kopyalamak için bir komut istemi açın ve projeyi oluşturmak istediğiniz yere gidin ve aşağıdaki komutu girin:

    git clone https://github.com/Azure-Samples/ms-identity-javascript-nodejs-desktop.git

  • .zip dosyasınıindirin. Dosya adının uzunluğu 260 karakterden az olan bir dizine ayıklayın.

Projeyi yapılandırma

Kod düzenleyicinizde ms-identity-javascript-nodejs-desktop-main/App/authConfig.js dosyasını açın. değerini aşağıdaki gibi değiştirin:

Değişken Açıklama Örnekler
Enter_the_Cloud_Instance_Id_Here Uygulamanızın kayıtlı olduğu Azure bulut örneği https://login.microsoftonline.com// (sondaki eğik çizgiyi içermelidir)
Enter_the_Tenant_Info_Here Kiracı Kimliği veya Birincil alan adı contoso.microsoft.com veya aaaabbbb-0000-cccc-1111-dddd2222eeee
Enter_the_Application_Id_Here Kaydettiğiniz uygulamanın istemci kimliği 00001111-aaaa-2222-bbbb-3333cccc4444
Enter_the_Graph_Endpoint_Here Uygulamanızın çağıracağı Microsoft Graph API bulut örneği https://graph.microsoft.com// (sondaki eğik çizgiyi içermelidir)

Dosyanız aşağıdakine benzer olmalıdır:

const AAD_ENDPOINT_HOST = "https://login.microsoftonline.com/"; // include the trailing slash

const msalConfig = {
    auth: {
        clientId: "00001111-aaaa-2222-bbbb-3333cccc4444",
        authority: `${AAD_ENDPOINT_HOST}/aaaabbbb-0000-cccc-1111-dddd2222eeee`,
    },
    system: {
        loggerOptions: {
            loggerCallback(loglevel, message, containsPii) {
                 console.log(message);
             },
             piiLoggingEnabled: false,
             logLevel: LogLevel.Verbose,
        }
    }
}

const GRAPH_ENDPOINT_HOST = "https://graph.microsoft.com/"; // include the trailing slash

const protectedResources = {
     graphMe: {
         endpoint: `${GRAPH_ENDPOINT_HOST}v1.0/me`,
         scopes: ["User.Read"],
     }
};

module.exports = {
     msalConfig: msalConfig,
     protectedResources: protectedResources,
 };

Uygulamayı çalıştırma

  1. Bu örneğin bağımlılıklarını bir kez yüklemeniz gerekir:

    cd ms-identity-javascript-nodejs-desktop-main
npm install

  2. Ardından, komut istemi veya konsol aracılığıyla uygulamayı çalıştırın:

    npm start

  3. Oturum açma işlemini başlatmak için "Oturum Aç"ı seçin.

    İlk kez oturum açtığınızda, uygulamanın oturum açmasına ve profilinize erişmesine izin vermek için onay vermeniz istenir. Başarıyla oturum açtıktan sonra uygulamaya yeniden yönlendirilirsiniz.

Sonraki adım

MSAL Node ile Electron masaüstü uygulaması geliştirme hakkında daha fazla bilgi edinmek için öğreticiye bakın:

Öğretici: Kullanıcıların oturum açması ve bir Electron masaüstü uygulamasında Microsoft Graph API'sini çağırma

Önkoşullar

Örnek projeyi indirme

Uyarı

Bu öğreticide sunulan Electron örneği, özellikle MSAL-node ile çalışması için tasarlanmıştır. MSAL-browser, Elektron uygulamalarında desteklenmez. Projenizi doğru ayarlamak için aşağıdaki adımları tamamladığınızdan emin olun.

Masaüstü uygulaması örnek kodunu almak için 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 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 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 Yönetici Dizini (kiracı) alt alan adıyla değiştirin. Örneğin, kiracı birincil etki alanınız contoso.onmicrosoft.comise, contoso'i kullanın. Kiracı adınız yoksa, kiracı ayrıntılarınızı 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

    Elektron masaüstü uygulamasında oturum açma ekran görüntüsü.

  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 adresiniziyazın, İleri seçin, Parolayazın ve Oturum açseçeneğini belirleyin. Hesabınız yoksa Hesap yok mu? Bir tane oluşturun bağlantısını seçin, bu kayıt akışını başlatır.

  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. Sayfa üzerinde Token ID İddiaları görüntülenir.

    Elektron masaüstü uygulamasında belirteç taleplerini görüntüleme ekran görüntüsü.

İlgili içerik

  • Last updated on