Hızlı Başlangıç: Örnek bir web uygulamasında kullanıcılarla oturum açma

Şunlar için geçerlidir: İş gücü kiracıları Dış kiracılar (daha fazla bilgi edinin)

Bu hızlı başlangıçta, kullanıcıları nasıl oturum açabileceğinizi ve iş gücü kiracınızda Microsoft Graph API'sini nasıl çağırabileceğinizi göstermek için örnek bir web uygulaması kullanacaksınız. Örnek uygulama, kimlik doğrulamasını işlemek için Microsoft Kimlik Doğrulama Kitaplığı kullanır.

Başlamadan önce, bu sayfanın üst kısmındaki Kiracı Türü Seçici'i kullanarak kiracı türünü seçin. Microsoft Entra ID, iki kiracı yapılandırması sunar: 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ı. 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.
• Visual Studio Code veya başka bir kod düzenleyicisi.

Düğümü

• 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
• Web platformu yapılandırmasını kullanarak aşağıdaki yeniden yönlendirme URI'lerini ekleyin. Diğer ayrıntılar için bkz. Uygulamanıza yeniden yönlendirme URI'sini ekleme .
  • Yeniden Yönlendirme URI: http://localhost:3000/auth/redirect
  • Ön kanal oturumu kapatma URL'si: https://localhost:5001/signout-callback-oidc
• Uygulama kaydınıza bir istemci gizli anahtarı ekleyin. Üretim uygulamalarında istemci sırlarını kullanmayın. Bunun yerine sertifikaları veya federasyon kimlik bilgilerini kullanın. Daha fazla bilgi için bkz. Uygulamanıza kimlik bilgileri ekleme.
• Node.js

ASP.NET Core

• 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
• Web platformu yapılandırmasını kullanarak aşağıdaki yeniden yönlendirme URI'lerini ekleyin. Diğer ayrıntılar için bkz. Uygulamanıza yeniden yönlendirme URI'sini ekleme .
  • Yeniden Yönlendirme URI: https://localhost:5001/signin-oidc
  • Ön kanal oturumu kapatma URL'si: https://localhost:5001/signout-callback-oidc
• Uygulama kaydınıza otomatik olarak imzalanan bir sertifika ekleyin. Üretim uygulamalarında otomatik olarak imzalanan sertifikaları kullanmayın. Bunun yerine güvenilen bir sertifika yetkilisinden veya federasyon kimlik bilgilerinden bir sertifika kullanın. Daha fazla bilgi için bkz. Uygulamanıza kimlik bilgileri ekleme. Aşağıdaki komutu kullanarak sertifikayı oluşturun:

  dotnet dev-certs https -ep ./certificate.crt --trust
  

• En düşük gereksinim .NET 8.0 SDK

Python Flask

• 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
• Web platformu yapılandırmasını kullanarak aşağıdaki yeniden yönlendirme URI'lerini ekleyin. Diğer ayrıntılar için bkz. Uygulamanıza yeniden yönlendirme URI'sini ekleme .
  • Yeniden Yönlendirme URI: http://localhost:5000/getAToken
• Python 3 +
• Uygulama kaydınıza bir istemci gizli anahtarı ekleyin. Üretim uygulamalarında istemci sırlarını kullanmayın. Bunun yerine sertifikaları veya federasyon kimlik bilgilerini kullanın. Daha fazla bilgi için bkz. Uygulamanıza kimlik bilgileri ekleme.

Örnek web uygulamasını kopyalama veya indirme

Örnek uygulamayı edinmek için GitHub'dan kopyalayabilir veya .zip dosyası olarak indirebilirsiniz.

Düğümü

• .zip dosyasınıindirin, ardından adın uzunluğu 260 karakterden az olan bir dosya yoluna ayıklayın veya depoyu kopyalayın:

• Ö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-node.git
  

ASP.NET Core

• .zip dosyasınıindirin, ardından adın uzunluğu 260 karakterden az olan bir dosya yoluna ayıklayın veya depoyu kopyalayın:

• Ö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-docs-code-dotnet.git
  

Python Flask

• Python kod örneğini indirin ardından adın uzunluğu 260 karakterden az olan bir dosya yoluna ayıklayın veya depoyu kopyalayın:

• Ö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-docs-code-python/

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

Örnek uygulamayla kullanıcılarda oturum açabilmeniz için uygulamayı uygulamanızla ve kiracı ayrıntılarıyla güncelleştirmeniz gerekir:

Düğümü

ms-identity-node klasöründe App/.env dosyasını açın ve aşağıdaki yer tutucuları 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 çizgi işaretini dahil et)
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_Client_Secret_Here	Kaydettiğiniz uygulamanın gizli anahtarı	A1b-C2d_E3f.H4i,J5k?L6m!N7o-P8q_R9s.T0u
Enter_the_Graph_Endpoint_Here	Uygulamanızın çağırdığını Microsoft Graph API bulut örneği	https://graph.microsoft.com/ (sondaki eğik çizgi işaretini dahil et)
Enter_the_Express_Session_Secret_Here	Express oturum tanımlama bilgisini imzalamak için kullanılan rastgele bir karakter dizesi	A1b-C2d_E3f.H4...

Değişiklik yaptıktan sonra dosyanız aşağıdaki kod parçacığına benzer görünmelidir:

CLOUD_INSTANCE=https://login.microsoftonline.com/
TENANT_ID=aaaabbbb-0000-cccc-1111-dddd2222eeee
CLIENT_ID=00001111-aaaa-2222-bbbb-3333cccc4444
CLIENT_SECRET=A1b-C2d_E3f.H4...

REDIRECT_URI=http://localhost:3000/auth/redirect
POST_LOGOUT_REDIRECT_URI=http://localhost:3000

GRAPH_API_ENDPOINT=https://graph.microsoft.com/

EXPRESS_SESSION_SECRET=6DP6v09eLiW7f1E65B8k

ASP.NET Core

1. IDE'nizde, örneği içeren ms-identity-docs-code-dotnet\web-app-aspnet proje klasörünü açın.

2. appsettings.json açın ve dosya içeriğini aşağıdaki kod parçacığıyla değiştirin;

   {
   "AzureAd": {
     "Instance": "https://login.microsoftonline.com/",
     "TenantId": "Enter the tenant ID obtained from the Microsoft Entra admin center",
     "ClientId": "Enter the client ID obtained from the Microsoft Entra admin center",
     "ClientCredentials": [
       {
         "SourceType": "StoreWithThumbprint",
         "CertificateStorePath": "CurrentUser/My",
         "CertificateThumbprint": "Enter the certificate thumbprint obtained the Microsoft Entra admin center"
       }   
     ],
     "CallbackPath": "/signin-oidc"
   },
     "DownstreamApis": {
       "MicrosoftGraph" :{
         "BaseUrl": "https://graph.microsoft.com/v1.0/",
         "RelativePath": "me",
         "Scopes": [ 
           "user.read" 
         ]
      }
     },
     "Logging": {
       "LogLevel": {
         "Default": "Information",
         "Microsoft.AspNetCore": "Warning"
       }
     },
     "AllowedHosts": "*"
   }
   

   • TenantId - Uygulamanın kaydedildiği kiracının tanımlayıcısı. Daha önce kayıtlı uygulamanın özet sayfasında kaydedilmiş olan Directory (tenant) ID ile tırnak içindeki metni değiştirin.
   • ClientId - İstemci olarak da adlandırılan uygulamanın tanımlayıcısı. Kayıtlı uygulamanın genel bakış sayfasından daha önce kaydedilen Application (client) ID değeriyle, tırnak içindeki metni değiştirin.
   • ClientCertificates - Uygulamada kimlik doğrulaması için otomatik olarak imzalanan bir sertifika kullanılır. CertificateThumbprint metnini daha önce kaydedilmiş sertifikanın parmak iziyle değiştirin.

Python Flask

1. İndirdiğiniz uygulamayı bir IDE'de açın ve örnek uygulamanın kök klasörüne gidin.

   cd flask-web-app
   

2. Kılavuz olarak .env.sample.entra-id kullanarak projenin kök klasöründe bir .env dosyası oluşturun.

   # The following variables are required for the app to run.
   CLIENT_ID=<Enter_your_client_id>
   CLIENT_SECRET=<Enter_your_client_secret>
   AUTHORITY=<Enter_your_authority_url>
   

   • CLIENT_ID değerini, genel bakış sayfasında bulunan kayıtlı uygulamanın Uygulama (istemci) kimliği olarak ayarlayın.
   • CLIENT_SECRET değerini kayıtlı uygulama için Sertifikalar & Gizli Dizi oluşturduğunuz istemci gizlisi olarak ayarlayın.
   • AUTHORITY değerini https://login.microsoftonline.com/<TENANT_GUID>olarak ayarlayın. Dizin Kimliği (kiracı), uygulama kaydının genel bakış sayfasında bulunabilir.

   Ortam değişkenlerine app_config.pyiçinde başvurulur ve kaynak denetiminden uzak tutmak için ayrı bir .env dosyasında tutulur. Sağlanan .gitignore dosyası .env dosyasının sürüm kontrolüne eklenmesini engeller.

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

Örnek uygulamanızı yapılandırdınız. Çalıştırmaya ve test etmeye devam edebilirsiniz.

Düğümü

1. Sunucuyu başlatmak için proje dizininden aşağıdaki komutları çalıştırın:

   cd App
   npm install
   npm start
   

2. http://localhost:3000/'e gidin.

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 uygulamanın giriş sayfasına yeniden yönlendirilirsiniz.

Uygulama nasıl çalışır?

Örnek, localhost, port 3000 üzerinde bir web sunucusu barındırıyor. Bir web tarayıcısı bu adrese eriştiğinde, uygulama giriş sayfasını işler. Kullanıcı oturum açmaseçtikten sonra uygulama, tarayıcıyı MSAL Node kitaplığı tarafından oluşturulan URL aracılığıyla Microsoft Entra oturum açma ekranına yönlendirir. Kullanıcı onay verdikten sonra tarayıcı, kullanıcıyı kimlik ve erişim belirteci ile birlikte uygulama giriş sayfasına geri yönlendirir.

ASP.NET Core

1. Proje dizininizde terminali kullanarak aşağıdaki komutları girin:

   cd ms-identity-docs-code-dotnet/web-app-aspnet
   dotnet run
   

2. Terminalde görüntülenen https URL'sini (örneğin, https://localhost:5001) kopyalayın ve bir tarayıcıya yapıştırın. Özel veya gizli bir tarayıcı oturumu kullanmanızı öneririz.

3. Adımları izleyin ve Microsoft hesabınızla oturum açmak için gerekli ayrıntıları girin. Size tek seferlik bir geçiş kodu gönderebilmek için bir e-posta adresi sağlamanız istenir. İstendiğinde kodu girin.

4. Uygulama, erişim verdiğiniz verilere erişimi korumak ve oturum açıp profilinizi okumak için izin istemektedir. SeçKabul Et. Aşağıdaki ekran görüntüsü görüntülenir. Uygulamada oturum açtığınızı ve Microsoft Graph API'sinden profil ayrıntılarınızı görüntüley olduğunuzu gösterir.

   

Uygulama oturumunu kapatma

1. Sayfanın sağ üst köşesindeki Oturumu kapat bağlantısını bulun ve seçin.
2. Oturumu kapatmak için bir hesap seçmeniz istenir. Oturum açmak için kullandığınız hesabı seçin.
3. Oturumunuz kapatıldığını belirten bir ileti görüntülenir. Artık tarayıcı penceresini kapatabilirsiniz.

Python Flask

1. Uygulama için sanal ortam oluşturma:

   • Windowsiçin aşağıdaki komutları çalıştırın:

   py -m venv .venv
   .venv\scripts\activate
   

   • macOS/Linux için aşağıdaki komutları çalıştırın:

   python3 -m venv .venv
   source .venv/bin/activate
   

2. pipkullanarak gereksinimleri yükleyin:

   pip install -r requirements.txt
   

3. Uygulamayı komut satırından çalıştırın. Uygulamanızın daha önce yapılandırdığınız yeniden yönlendirme URI'sinin aynı bağlantı noktasında çalıştığından emin olun.

   flask run --debug --host=localhost --port=5000
   

4. Terminalde görüntülenen https URL'sini (örneğin, https://localhost:5000) kopyalayın ve bir tarayıcıya yapıştırın. Özel veya gizli bir tarayıcı oturumu kullanmanızı öneririz.

5. Adımları izleyin ve Microsoft hesabınızla oturum açmak için gerekli ayrıntıları girin. Oturum açmak için bir e-posta adresi ve parola sağlamanız istenir.

6. Uygulama, ekran görüntüsünde gösterildiği gibi erişim iznini korumak ve oturum açıp profilinizi okumak için izin istemektedir. SeçKabul Et.

   gerekli izinlere erişmek için onay isteyen örnek uygulamayı gösteren

7. Uygulamada başarıyla oturum açtığınızı gösteren aşağıdaki ekran görüntüsü görüntülenir.

Uygulama nasıl çalışır?

Aşağıdaki diyagramda örnek uygulamanın nasıl çalıştığı gösterilmektedir:

1. Uygulama, Microsoft kimlik platformundan erişim belirteci almak için identity paketi kullanır. Bu paket, web uygulamalarında kimlik doğrulama ve yetkilendirmeyi basitleştirmek amacıyla Python için Microsoft Kimlik Doğrulama Kitaplığı'nın (MSAL) üzerine kurulmuştur.

2. Önceki adımda aldığınız erişim belirteci, Microsoft Graph API'sini çağırırken kullanıcının kimliğini doğrulamak için taşıyıcı belirteç olarak kullanılır.

İlgili içerik

Düğümü

• Node.js ve Express web uygulamasında kullanıcıları nasıl oturum açtıracağınızı ve Microsoft Graph için bir belirteç alacağınızı öğrenmek için "Öğretici: Kullanıcıları Oturum Açtırma ve Microsoft Graph için Belirteç Alma" başlıklı bölümde bir Node.js web uygulaması oluşturmayı adım adım öğrenin.

ASP.NET Core

• Bu ASP.NET web uygulamasını oluşturarak, serisiyle bir uygulamayı Microsoft kimlik platformuna kaydederek öğrenin. Öğretici:
• Hızlı Başlangıç: microsoft kimlik platformuile ASP.NET Core web API'sini koruma.
• Hızlı Başlangıç: Azure App Service'e ASP.NET web uygulaması dağıtma

Python Flask

• Kullanıcılarının oturum açmasını sağlayan ve korumalı bir web API'sini çağırabilen bir Python web uygulamasının nasıl oluşturulacağını öğrenin. Öğretici:Kullanıcı oturum açma ve çağrı web uygulaması.

Bu hızlı başlangıçta, dış kiracınızdaki kullanıcıların nasıl oturum açabileceğinizi göstermek için örnek bir web uygulaması kullanacaksınız. Örnek uygulama, kimlik doğrulamasını işlemek için Microsoft Kimlik Doğrulama Kitaplığı kullanır.

Başlamadan önce, bu sayfanın üst kısmındaki Kiracı Türü Seçici'i kullanarak kiracı türünü seçin. Microsoft Entra ID, iki kiracı yapılandırması sunar: 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ı. 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
• Dış kiracı. Oluşturmak için aşağıdaki yöntemlerden birini seçin:
  • Dış kiracıyı doğrudan Visual Studio Code'da ayarlamak için Microsoft Entra Dış Kimlik uzantısını kullanın. (Önerilen)
  • Microsoft Entra yönetim merkezinde Yeni bir dış kiracı oluşturun.
• Kullanıcı akışı. Daha fazla bilgi için, dış kiracılardaki uygulamalar için self servis kullanıcı kaydı akışları oluşturmak bölümüne bakın. Bu kullanıcı akışı birden çok uygulama için kullanılabilir.
• Visual Studio Code veya başka bir kod düzenleyicisi.

Düğümü

• 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
• Web platformu yapılandırmasını kullanarak aşağıdaki yeniden yönlendirme URI'lerini ekleyin. Diğer ayrıntılar için bkz. Uygulamanıza yeniden yönlendirme URI'sini ekleme .
  • Yeniden Yönlendirme URI: http://localhost:3000/auth/redirect
  • Ön kanal oturumu kapatma URL'si: https://localhost:5001/signout-callback-oidc
• Uygulama kaydınıza bir istemci gizli anahtarı ekleyin. Üretim uygulamalarında istemci sırlarını kullanmayın. Bunun yerine sertifikaları veya federasyon kimlik bilgilerini kullanın. Daha fazla bilgi için bkz. Uygulamanıza kimlik bilgileri ekleme.
• Uygulamanızı kullanıcı akışına ekleme
• Node.js

ASP.NET Core

• 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
• Web platformu yapılandırmasını kullanarak aşağıdaki yeniden yönlendirme URI'lerini ekleyin. Diğer ayrıntılar için bkz. Uygulamanıza yeniden yönlendirme URI'sini ekleme .
  • Yeniden Yönlendirme URI: https://localhost:5001/signin-oidc
  • Ön kanal oturumu kapatma URL'si: https://localhost:5001/signout-callback-oidc
• Uygulama kaydınıza bir istemci gizli anahtarı ekleyin. Üretim uygulamalarında istemci sırlarını kullanmayın. Bunun yerine sertifikaları veya federasyon kimlik bilgilerini kullanın. Daha fazla bilgi için bkz. Uygulamanıza kimlik bilgileri ekleme.
• Uygulamanızı kullanıcı akışına ekleme
• .NET 8.0 SDK'sının en düşük sürümü.

• 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
• Web platformu yapılandırmasını kullanarak aşağıdaki yeniden yönlendirme URI'lerini ekleyin. Diğer ayrıntılar için bkz. Uygulamanıza yeniden yönlendirme URI'sini ekleme .
  • Yeniden Yönlendirme URI: http://localhost:5000/getAToken
• Uygulamanızı kullanıcı akışına ekleme
• Python 3 +
• Uygulama kaydınıza bir istemci gizli anahtarı ekleyin. Üretim uygulamalarında istemci sırlarını kullanmayın. Bunun yerine sertifikaları veya federasyon kimlik bilgilerini kullanın. Daha fazla bilgi için bkz. Uygulamanıza kimlik bilgileri ekleme.

Python Flask

• 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
• Web platformu yapılandırmasını kullanarak aşağıdaki yeniden yönlendirme URI'lerini ekleyin. Diğer ayrıntılar için bkz. Uygulamanıza yeniden yönlendirme URI'sini ekleme .
  • Yeniden Yönlendirme URI: http://localhost:5000/getAToken
• Uygulamanızı kullanıcı akışına ekleme
• Python 3 +
• Uygulama kaydınıza bir istemci gizli anahtarı ekleyin. Üretim uygulamalarında istemci sırlarını kullanmayın. Bunun yerine sertifikaları veya federasyon kimlik bilgilerini kullanın. Daha fazla bilgi için bkz. Uygulamanıza kimlik bilgileri ekleme.

Örnek web uygulamasını kopyalama veya indirme

Düğümü

Örnek uygulamayı edinmek için GitHub'dan kopyalayabilir veya .zip dosyası olarak indirebilirsiniz:

• Ö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-ciam-javascript-tutorial.git
  

• Alternatif olarak, örnek .zip dosyasınıindirin ve ardından adın uzunluğu 260 karakterden az olan bir dosya yoluna 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
   

ASP.NET Core

Örnek uygulamayı edinmek için GitHub'dan kopyalayabilir veya .zip dosyası olarak indirebilirsiniz.

• Ö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-ciam-dotnet-tutorial.git
  

• .zip dosyasınıindirin. Adın uzunluğu 260 karakterden az olan bir dosya yoluna ayıklayın.

Örnek uygulamayı edinmek için GitHub'dan kopyalayabilir veya .zip dosyası olarak indirebilirsiniz.

• Ö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-docs-code-python.git
  

• .zip dosyasınıindirin. Adın uzunluğu 260 karakterden az olan bir dosya yoluna ayıklayın.

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

1. Bir konsol penceresi açın ve Flask örnek web uygulamasını içeren dizine geçin:

   cd django-web-app
   

2. Sanal ortamı ayarlama:

   • Windowsiçin aşağıdaki komutları çalıştırın:

   py -m venv .venv
   .venv\scripts\activate
   

   • macOS/Linux için aşağıdaki komutları çalıştırın:

   python3 -m venv .venv
   source .venv/bin/activate
   

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

   python3 -m pip install -r requirements.txt
   

Python Flask

Örnek uygulamayı edinmek için GitHub'dan kopyalayabilir veya .zip dosyası olarak indirebilirsiniz.

• Ö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-docs-code-python.git
  

• .zip dosyasınıindirin. Adın uzunluğu 260 karakterden az olan bir dosya yoluna ayıklayın.

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

1. Bir konsol penceresi açın ve Flask örnek web uygulamasını içeren dizine geçin:

   cd flask-web-app
   

2. Sanal ortamı ayarlama:

   • Windowsiçin aşağıdaki komutları çalıştırın:

   py -m venv .venv
   .venv\scripts\activate
   

   • macOS/Linux için aşağıdaki komutları çalıştırın:

   python3 -m venv .venv
   source .venv/bin/activate
   

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

   python3 -m pip install -r requirements.txt
   

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

Örnek uygulamayla kullanıcılarda oturum açabilmeniz için uygulamayı uygulamanızla ve kiracı ayrıntılarıyla güncelleştirmeniz gerekir:

Düğümü

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

2. Yer tutucuyu bulun:

   • Enter_the_Application_Id_Here ve daha önce kaydettiğiniz uygulamanın Uygulama (istemci) kimliğiyle değiştirin.
   • Enter_the_Tenant_Subdomain_Here ve Dizin (kiracı) alt alan adıyla değiştirin. Örneğin, kiracınızın birincil etki alanı contoso.onmicrosoft.comise, contoso'i kullanın. Kiracı adınız yoksa, kiracı ayrıntılarınızı nasıl okuyacağınızıöğrenin.
   • Enter_the_Client_Secret_Here ve daha önce kopyaladığınız uygulama gizli anahtar değeriyle değiştirin.

ASP.NET Core

1. ASP.NET Core örnek uygulamasını içeren kök dizine gidin:

   cd 1-Authentication\1-sign-in-aspnet-core-mvc
   

2. appsettings.json dosyasını açın.

3. Otoriteiçinde Enter_the_Tenant_Subdomain_Here bulun ve kiracınızın alt alan adı ile değiştirin. Örneğin, kiracınızın birincil etki alanı caseyjensen@onmicrosoft.comise, girmeniz gereken değer casyjensenşeklindedir.

4. Enter_the_Application_Id_Here değerini bulun ve Microsoft Entra yönetim merkezine kaydettiğiniz uygulamanın uygulama kimliği (clientId) ile değiştirin.

5. Ayarladığınız istemci gizli değeri ile Enter_the_Client_Secret_Here 'yı değiştirin.

1. Proje dosyalarınızı Visual Studio Code'da veya kullandığınız düzenleyicide açın.

2. Kılavuz olarak .env.sample.external-id dosyasını kullanarak projenin kök klasöründe bir .env dosyası oluşturun.

3. .env dosyanızda aşağıdaki ortam değişkenlerini sağlayın:

   1. daha önce kaydettiğiniz uygulamanın Uygulama (istemci) kimliği olan CLIENT_ID.
   2. CLIENT_SECRET daha önce kopyaladığınız uygulama gizli değeridir.
   3. Belirteç yetkilisini tanımlayan URL, AUTHORITY'dır. https://{subdomain}.ciamlogin.com/{subdomain}.onmicrosoft.combiçiminde olmalıdır. subdomain'i Dizin (kiracı) alt etki alanı ile değiştirin. Örneğin, kiracınızın birincil etki alanı contoso.onmicrosoft.comise, contoso'i kullanın. Kiracı alt etki alanınız yoksa, kiracı ayrıntılarınızı okumayıöğrenin.
   4. daha önce kaydettiğiniz yeniden yönlendirme URI'sine benzer olması gereken REDIRECT_URI yapılandırmanızla eşleşmelidir.

Python Flask

1. Proje dosyalarınızı Visual Studio Code'da veya kullandığınız düzenleyicide açın.

2. Kılavuz olarak .env.sample.external-id dosyasını kullanarak projenin kök klasöründe bir .env dosyası oluşturun.

3. .env dosyanızda aşağıdaki ortam değişkenlerini sağlayın:

   • daha önce kaydettiğiniz uygulamanın Uygulama (istemci) kimliği olan CLIENT_ID.
   • CLIENT_SECRET daha önce kopyaladığınız uygulama gizli değeridir.
   • Belirteç yetkilisini tanımlayan URL, AUTHORITY'dır. https://{subdomain}.ciamlogin.com/{subdomain}.onmicrosoft.combiçiminde olmalıdır. subdomain'i Dizin (kiracı) alt etki alanı ile değiştirin. Örneğin, kiracınızın birincil etki alanı contoso.onmicrosoft.comise, contoso'i kullanın. Kiracı alt etki alanınız yoksa, kiracı ayrıntılarınızı okumayıöğrenin.

4. Yeniden yönlendirme URI'sinin iyi yapılandırıldığını onaylayın. Daha önce kaydettiğiniz yeniden yönlendirme URI'sinin yapılandırmanızla eşleşmesi gerekir. Bu örnek varsayılan olarak yeniden yönlendirme URI yolunu /getATokenolarak ayarlar. Bu yapılandırma REDIRECT_PATHolarak app_config.py dosyasındadır.

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

Düğümü

Artık örnek Node.js web uygulamasını test edebilirsiniz. Node.js sunucusunu başlatmanız ve http://localhost:3000tarayıcınızdan eriş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'a gidin. Sayfayı aşağıdaki ekran görüntüsüne benzer şekilde görmeniz gerekir:

   

3. Sayfanın yüklenmesi tamamlandıktan sonra sorulduğunda Oturum aç seçin.

4. Oturum açma sayfasında, E-posta adresiniziyazın, İleri seçin, Parolayazın ve Oturum açöğesini seçin. Hesabınız yoksa Hesap yok mu? Bir hesap oluşturun bağlantısını seçin, bu da kayıt akışını başlatacaktır.

5. 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.

   

6. Kullanıcıyı web uygulamasından çıkarmak için Oturumu kapat öğesini seçin ya da Microsoft Entra tarafından döndürülen ID belirteci taleplerini görüntülemek için Kimlik belirteci taleplerini görüntüle öğesini 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ı Microsoft Entra Dış Kimliği'ne yönlendirir. Görüntülenen oturum açma veya kaydolma sayfasında, kullanıcı başarıyla oturum açtığında veya bir hesap oluşturduğunda, Microsoft Entra Dış 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 ardından kullanıcının oturumu kapattığını bildirmek için kullanıcıyı Microsoft Entra Dış Kimlik oturumu kapatma uç noktasına 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.

ASP.NET Core

1. Komut isteminizden veya komut satırınızdan aşağıdaki komutları çalıştırın.

   dotnet run
   

2. Web tarayıcınızı açın ve https://localhost:7274adresine gidin.

3. Dış kiracıya kayıtlı bir hesapla oturum açın.

4. Oturum açtı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örüntülenir.

   

5. Uygulamadan çıkış yapmak için Oturumu kapat düğmesine tıklayın.

Uygulamada oturum açma deneyimini görmek için uygulamayı çalıştırın.

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

   python manage.py runserver localhost:5000                                             
   

   İstediğiniz bağlantı noktası numarasını kullanabilirsiniz.

2. Tarayıcınızı açın ve http://localhost:5000'a gidin. Aşağıdaki ekran görüntüsüne benzer bir sayfa görmeniz gerekir:

   

3. Sayfa yüklenmesinin tamamlanmasının ardından Oturum Aç bağlantısını seçin. Oturum açmanız istenir.

4. Oturum açma sayfasında, E-posta adresiniziyazın, İleri seçin, Parolayazın ve Oturum açöğesini seçin. Hesabınız yoksa Hesap yok mu? Bir hesap oluşturun bağlantısını seçin, bu da kayıt akışını başlatacaktır.

5. Kaydolma seçeneğini belirlerseniz, kayıt akışından geçersiniz. Tüm kayıt akışını tamamlamak için e-postanızı, tek seferlik geçiş kodunuzu, yeni parolanızı ve diğer hesap ayrıntılarınızı doldurun.

6. Oturum açıp kaydolduktan sonra yeniden web uygulamasına yönlendirilirsiniz. Aşağıdaki ekran görüntüsüne benzer bir sayfa görürsünüz:

   başarılı kimlik doğrulamasından sonra flask web uygulaması örneğinin ekran görüntüsü

7. Kullanıcının web uygulamasında oturumunu kapatmak için Oturumu Kapat'i seçin veya bir Microsoft Graph uç noktasına çağrı yapmak için Downstream API'yi arayın seçeneğini belirleyin.

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ı Microsoft Entra Dış Kimliği'ne yönlendirir. Ardından bir kullanıcı görüntülenen sayfada oturum açar veya sayfaya kaydolür. Gerekli kimlik bilgilerini sağladıktan ve gerekli kapsamları onayladıktan sonra, Microsoft Entra Dış Kimliği kullanıcıyı bir yetkilendirme koduyla web uygulamasına geri yönlendirir. Ardından web uygulaması, Microsoft Entra External ID’den bir belirteç almak üzere bu yetkilendirme kodunu kullanır.

Kullanıcılar Oturum Kapatma 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 Dış Kimlik oturumu kapatma uç noktasına yönlendirir. Kullanıcı daha sonra web uygulamasına geri yönlendirilir.

Python Flask

Uygulamada oturum açma deneyimini görmek için uygulamayı çalıştırın.

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

   python3 -m flask run --debug --host=localhost --port=3000
   

   İstediğiniz bağlantı noktasını kullanabilirsiniz. Bu, daha önce kaydettiğiniz yeniden yönlendirme URI'sinin bağlantı noktasına benzer olmalıdır.

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

   

3. Sayfa yüklenmesinin tamamlanmasının ardından Oturum Aç bağlantısını seçin. Oturum açmanız istenir.

4. Oturum açma sayfasında, E-posta adresiniziyazın, İleri seçin, Parolayazın ve Oturum açöğesini seçin. Hesabınız yoksa Hesap yok mu? Bir hesap oluşturun bağlantısını seçin, bu da kayıt akışını başlatacaktır.

5. Kaydolma seçeneğini belirlerseniz kayıt akışından geçersiniz. Tüm kayıt akışını tamamlamak için e-postanızı, tek seferlik geçiş kodunuzu, yeni parolanızı ve diğer hesap ayrıntılarınızı doldurun.

6. Oturum açıp kaydolduktan sonra yeniden web uygulamasına yönlendirilirsiniz. Aşağıdaki ekran görüntüsüne benzer bir sayfa görürsünüz:

   başarılı kimlik doğrulamasından sonra flask web uygulaması örneğinin ekran görüntüsü

7. Kullanıcının web uygulamasında oturumunu kapatmak için Oturumu Kapat'i seçin veya bir Microsoft Graph uç noktasına çağrı yapmak için Downstream API'yi arayın seçeneğini belirleyin.

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ı Microsoft Entra Dış Kimliği'ne yönlendirir. Ardından bir kullanıcı görüntülenen sayfada oturum açar veya sayfaya kaydolür. Gerekli kimlik bilgilerini sağladıktan ve gerekli kapsamları onayladıktan sonra, Microsoft Entra Dış Kimliği kullanıcıyı bir yetkilendirme koduyla web uygulamasına geri yönlendirir. Ardından web uygulaması, Microsoft Entra External ID’den bir belirteç almak üzere bu yetkilendirme kodunu kullanır.

Kullanıcılar Oturum Kapatma 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 Dış Kimlik oturumu kapatma uç noktasına yönlendirir. Kullanıcı daha sonra web uygulamasına geri yönlendirilir.

İlgili içerik

Düğümü

• Node.js web uygulamanızda kullanıcılar oturum açsın
• Hızlı Başlangıç - Örnek Node.js web uygulamasında kullanıcıları oturum açma ve web API'sini çağırma
• Hızlı Başlangıç - Örnek Node.js web uygulamasında profili düzenleme

ASP.NET Core

• Bu ASP.NET web uygulamasını sıfırdan oluşturmak için çok parçalı öğretici serimizi kullanın
• Parola sıfırlamayı etkinleştir
• Varsayılan markalaştırmayı özelleştirme

• Örnek bir Flask web uygulaması kullanarak kullanıcıların oturum açması
• Parola sıfırlamayı etkinleştir
• Varsayılan markalaştırmayı özelleştirme

Python Flask

• Parola sıfırlamayı etkinleştir
• Varsayılan markalaştırmayı özelleştirme