Aracılığıyla paylaş

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

  • Makale

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
    • Bulut Uygulaması Yöneticisi
  • İş gücü kiracısı. Varsayılan Dizininizi kullanabilir veya yeni bir kiracı ayarlayabilirsiniz.
  • Aşağıdaki yapılandırmayla Microsoft Entra yönetim merkezi yeni bir uygulama kaydedin. Daha fazla bilgi için bkz. Uygulama kaydetme.
    • Adı: msal-node-desktop
    • Desteklenen hesap türleri: Yalnızca bu kuruluş dizinindeki hesaplar (Tek kiracı)

Yeniden yönlendirme URI'sini ekleme

Uygulama kaydınıza yeniden yönlendirme URI'sini eklemeniz gerekir. Bu URI, oturum açtıktan sonra kullanıcıları uygulamaya yönlendirmek için kullanılır.

Uygulama türünü belirtmek ve URI'leri uygulama kaydınıza yeniden yönlendirmek için şu adımları izleyin:

  1. Kayıtlı uygulamanızın Genel Bakış sayfasında, Yönetaltında Kimlik Doğrulaması'ni seçin.
  2. Platform yapılandırmaları sayfasındaPlatform>Mobil ve masaüstü uygulamalarıekle'yi seçin.
  3. Yeniden Yönlendirme URI'leri bölümünde, http://localhostgirin.
  4. Seç'yi Yapılandır.

Örnek projeyi indirme

  • Ö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. Adın uzunluğu 260 karakterden az olan bir dosya yoluna ayıklayın.

Projeyi yapılandırma

*Projeyi ayıklayın, ms-identity-JavaScript-nodejs-desktop-main klasörünü açın ve ardından .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_Id_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_Redirect_Uri_Here Kaydettiğiniz uygulamanın yönlendirme URI'si msal00001111-aaaa-2222-bbbb-3333cccc4444://auth
Enter_the_Graph_Endpoint_Here Uygulamanızın çağıracağı Microsoft Graph API bulut örneği https://graph.microsoft.com/ (sondaki eğik çizgiyi dahil et)

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:

Öğreticisi: Kullanıcılarda oturum açma ve Electron masaüstü uygulamasında Microsoft Graph API'sini çağırma

Önkoşullar

  • Etkin aboneliği olan bir Azure hesabı. 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
    • Bulut Uygulaması Yöneticisi

Yeniden yönlendirme URI'sini ekleme

Uygulama kaydınıza yeniden yönlendirme URI'sini eklemeniz gerekir. Bu URI, oturum açtıktan sonra kullanıcıları uygulamaya yönlendirmek için kullanılır.

Uygulama kaydınıza uygulama türünüzü belirtmek için şu adımları izleyin:

  1. Yönetaltında Kimlik Doğrulamaseçin.
  2. Platform yapılandırmaları sayfasında Platform ekle'yiseçin ve Mobil ve masaüstü uygulamaları seçeneğini belirleyin.
  3. Özel yeniden yönlendirme URI'leri için http://localhostgirinYapılandır'ıseçin.
  4. Değişikliklerinizi kaydetmek için Yapılandır'ı seçin.

Uygulamanızı kaydettikten sonra ona User.Read izni atanır. Ancak, kiracı bir dış kiracı olduğundan, müşteri kullanıcıları bu izni onaylayamaz. Kiracı yöneticisi olarak kiracıdaki tüm kullanıcılar adına bu izni onaylamanız gerekir:

  1. Uygulama kayıtları sayfasında, oluşturduğunuz uygulamayı (ciam-client-app) seçerek Genel Bakış sayfasını açın.

  2. Yönetaltında API izinleriniseçin.

    1. Önce kiracı adınız><için yönetici onayı ver’iseçin, ardından Evet seçin.
    2. Yenile'yi seçin, ardından <kiracı adınız için Verildi> ifadesinin izin için Durum altında göründüğünü doğrulayın.

Örnek projeyi indirme

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? seçin. Kayıt akışını başlatan bir bağlantısı 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. 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