Hızlı Başlangıç: Tek sayfalı bir uygulamada (SPA) kullanıcılarla oturum açma ve Microsoft Graph API'sini çağırma

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

Bu hızlı başlangıçta, Kod Değişimi için Kanıt Anahtarı (PKCE) ile yetkilendirme kodu akışını kullanarak ve Microsoft Graph API'sini çağırarak kullanıcıların nasıl oturum açtığını göstermek için örnek bir tek sayfalık uygulama (SPA) kullanacaksınız. Örnek, kimlik doğrulamasını işlemek için Microsoft Kimlik Doğrulama Kitaplığı kullanır.

Ö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
• Çalışma amaçlı kiracı. Varsayılan Dizininizi kullanabilir veya yeni bir kiracı ayarlayabilirsiniz.
• Visual Studio Code veya başka bir kod düzenleyicisi.

JavaScript

• 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
• Tek sayfalı uygulama 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 .
  • Yönlendirme URI'si: http://localhost:3000/
• Node.js

Tepki

• 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
• Tek sayfalı uygulama 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 .
  • Yönlendirme URI'si: http://localhost:3000/
• Node.js

Açısal

• 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
• Tek sayfalı uygulama platformu yapılandırmasını kullanarak aşağıdaki yeniden yönlendirme URI'sini ekleyin. Diğer ayrıntılar için bkz. Uygulamanıza yeniden yönlendirme URI'sini ekleme .
  • Yönlendirme URI'si: http://localhost:4200/
• Node.js

Blazor

• 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
• Tek sayfalı uygulama 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 .
  • Yönlendirme URI'si: http://localhost:5000/authentication/login-callback.
• .NET SDK

Örnek uygulamayı kopyalama veya indirme

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

JavaScript

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

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

Tepki

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

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

Açısal

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

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

Blazor

• Ö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
  

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

Projeyi yapılandırma

JavaScript

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

2. vanillajs-spa/App/public/authConfig.js açın ve yönetim merkezinde kaydedilen bilgilerle aşağıdaki değerleri güncelleştirin.

   /**
    * Configuration object to be passed to MSAL instance on creation. 
    * For a full list of MSAL.js configuration parameters, visit:
    * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/configuration.md 
    */
   const msalConfig = {
       auth: {
            clientId: "Enter_the_Application_Id_Here",
            // WORKFORCE TENANT
            authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here", //  Replace the placeholder with your tenant info
            // EXTERNAL TENANT
            // authority: "https://Enter_the_Tenant_Subdomain_Here.ciamlogin.com/", // Replace the placeholder with your tenant subdomain
           redirectUri: '/', // You must register this URI on App Registration. Defaults to window.location.href e.g. http://localhost:3000/
           navigateToLoginRequestUrl: true, // If "true", will navigate back to the original request location before processing the auth code response.
       },
       cache: {
           cacheLocation: 'sessionStorage', // Configures cache location. "sessionStorage" is more secure, but "localStorage" gives you SSO.
           storeAuthStateInCookie: false, // set this to true if you have to support IE
       },
       system: {
           loggerOptions: {
               loggerCallback: (level, message, containsPii) => {
                   if (containsPii) {
                       return;
                   }
                   switch (level) {
                       case msal.LogLevel.Error:
                           console.error(message);
                           return;
                       case msal.LogLevel.Info:
                           console.info(message);
                           return;
                       case msal.LogLevel.Verbose:
                           console.debug(message);
                           return;
                       case msal.LogLevel.Warning:
                           console.warn(message);
                           return;
                   }
               },
           },
       },
   };
   
   /**
    * Scopes you add here will be prompted for user consent during sign-in.
    * By default, MSAL.js will add OIDC scopes (openid, profile, email) to any login request.
    * For more information about OIDC scopes, visit: 
    * https://learn.microsoft.com/en-us/entra/identity-platform/permissions-consent-overview#openid-connect-scopes
    */
   const loginRequest = {
       scopes: ["User.Read"],
   };
   
   /**
    * An optional silentRequest object can be used to achieve silent SSO
    * between applications by providing a "login_hint" property.
    */
   
   // const silentRequest = {
   //   scopes: ["openid", "profile"],
   //   loginHint: "example@domain.net"
   // };
   
   // exporting config object for jest
   if (typeof exports !== 'undefined') {
       module.exports = {
           msalConfig: msalConfig,
           loginRequest: loginRequest,
       };
   }
   

   • clientId - İstemci olarak da adlandırılan uygulamanın tanımlayıcısı. Tırnak işareti içindeki yazıyı daha önce kaydedilmiş Uygulama (istemci) kimliği değeriyle değiştirin.
   • authority - Yetki, MSAL'nin token talep edebileceği bir dizini gösteren bir URL'dir. Enter_the_Tenant_Info_Here ifadesini, daha önce kaydedilmiş olan Dizin (kiracı) kimliği değeriyle değiştirin.
   • redirectUri - Uygulamanın yönlendirme URI'si. Gerekirse, tırnak içindeki metni daha önce kaydedilmiş yeniden yönlendirme URI'siyle değiştirin.

Tepki

1. IDE'nizde, örneği içeren ms-identity-docs-code-javascript/react-spa proje klasörünü açın.

2. react-spa/src/authConfig.js açın ve yönetim merkezinde kaydedilen bilgilerle aşağıdaki değerleri güncelleştirin.

   /*
    * Copyright (c) Microsoft Corporation. All rights reserved.
    * Licensed under the MIT License.
    */
   
   import { LogLevel } from "@azure/msal-browser";
   
   /**
    * Configuration object to be passed to MSAL instance on creation. 
    * For a full list of MSAL.js configuration parameters, visit:
    * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/configuration.md 
    */
   
   export const msalConfig = {
       auth: {
           clientId: "Enter_the_Application_Id_Here",
           authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here",
           redirectUri: "http://localhost:3000",
       },
       cache: {
           cacheLocation: "sessionStorage", // This configures where your cache will be stored
           storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
       },
       system: {	
           loggerOptions: {	
               loggerCallback: (level, message, containsPii) => {	
                   if (containsPii) {		
                       return;		
                   }		
                   switch (level) {
                       case LogLevel.Error:
                           console.error(message);
                           return;
                       case LogLevel.Info:
                           console.info(message);
                           return;
                       case LogLevel.Verbose:
                           console.debug(message);
                           return;
                       case LogLevel.Warning:
                           console.warn(message);
                           return;
                       default:
                           return;
                   }	
               }	
           }	
       }
   };
   
   /**
    * Scopes you add here will be prompted for user consent during sign-in.
    * By default, MSAL.js will add OIDC scopes (openid, profile, email) to any login request.
    * For more information about OIDC scopes, visit: 
    * https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-permissions-and-consent#openid-connect-scopes
    */
   export const loginRequest = {
       scopes: ["User.Read"]
   };
   
   /**
    * Add here the scopes to request when obtaining an access token for MS Graph API. For more information, see:
    * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/resources-and-scopes.md
    */
   export const graphConfig = {
       graphMeEndpoint: "https://graph.microsoft.com/v1.0/me",
   };
   

   • clientId - İstemci olarak da adlandırılan uygulamanın tanımlayıcısı. Tırnak işareti içindeki yazıyı daha önce kaydedilmiş Uygulama (istemci) kimliği değeriyle değiştirin.
   • authority - Yetki, MSAL'nin token talep edebileceği bir dizini gösteren bir URL'dir. Enter_the_Tenant_Info_Here ifadesini, daha önce kaydedilmiş olan Dizin (kiracı) kimliği değeriyle değiştirin.
   • redirectUri - Uygulamanın yönlendirme URI'si. Gerekirse, tırnak içindeki metni daha önce kaydedilmiş yeniden yönlendirme URI'siyle değiştirin.

Açısal

1. IDE'nizde, örneği içeren ms-identity-docs-code-javascript/angular-spa proje klasörünü açın.

2. angular-spa/src/app/app.module.ts açın ve aşağıdaki değerleri yönetim merkezine kaydedilen bilgilerle güncelleştirin.

   // Required for Angular multi-browser support
   import { BrowserModule } from '@angular/platform-browser';
   
   // Required for Angular
   import { NgModule } from '@angular/core';
   
   // Required modules and components for this application
   import { AppRoutingModule } from './app-routing.module';
   import { AppComponent } from './app.component';
   import { ProfileComponent } from './profile/profile.component';
   import { HomeComponent } from './home/home.component';
   
   // HTTP modules required by MSAL
   import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
   
   // Required for MSAL
   import { IPublicClientApplication, PublicClientApplication, InteractionType, BrowserCacheLocation, LogLevel } from '@azure/msal-browser';
   import { MsalGuard, MsalInterceptor, MsalBroadcastService, MsalInterceptorConfiguration, MsalModule, MsalService, MSAL_GUARD_CONFIG, MSAL_INSTANCE, MSAL_INTERCEPTOR_CONFIG, MsalGuardConfiguration, MsalRedirectComponent } from '@azure/msal-angular';
   
   const isIE = window.navigator.userAgent.indexOf('MSIE ') > -1 || window.navigator.userAgent.indexOf('Trident/') > -1;
   
   export function MSALInstanceFactory(): IPublicClientApplication {
     return new PublicClientApplication({
       auth: {
         // 'Application (client) ID' of app registration in the Microsoft Entra admin center - this value is a GUID
         clientId: "Enter_the_Application_Id_Here",
         // Full directory URL, in the form of https://login.microsoftonline.com/<tenant>
         authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here",
         // Must be the same redirectUri as what was provided in your app registration.
         redirectUri: "http://localhost:4200",
       },
       cache: {
         cacheLocation: BrowserCacheLocation.LocalStorage,
         storeAuthStateInCookie: isIE
       }
     });
   }
   
   // MSAL Interceptor is required to request access tokens in order to access the protected resource (Graph)
   export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
     const protectedResourceMap = new Map<string, Array<string>>();
     protectedResourceMap.set('https://graph.microsoft.com/v1.0/me', ['user.read']);
   
     return {
       interactionType: InteractionType.Redirect,
       protectedResourceMap
     };
   }
   
   // MSAL Guard is required to protect routes and require authentication before accessing protected routes
   export function MSALGuardConfigFactory(): MsalGuardConfiguration {
     return { 
       interactionType: InteractionType.Redirect,
       authRequest: {
         scopes: ['user.read']
       }
     };
   }
   
   // Create an NgModule that contains the routes and MSAL configurations
   @NgModule({
     declarations: [
       AppComponent,
       HomeComponent,
       ProfileComponent
     ],
     imports: [
       BrowserModule,
       AppRoutingModule,
       HttpClientModule,
       MsalModule
     ],
     providers: [
       {
         provide: HTTP_INTERCEPTORS,
         useClass: MsalInterceptor,
         multi: true
       },
       {
         provide: MSAL_INSTANCE,
         useFactory: MSALInstanceFactory
       },
       {
         provide: MSAL_GUARD_CONFIG,
         useFactory: MSALGuardConfigFactory
       },
       {
         provide: MSAL_INTERCEPTOR_CONFIG,
         useFactory: MSALInterceptorConfigFactory
       },
       MsalService,
       MsalGuard,
       MsalBroadcastService
     ],
     bootstrap: [AppComponent, MsalRedirectComponent]
   })
   export class AppModule { }
   

   • clientId - İstemci olarak da adlandırılan uygulamanın tanımlayıcısı. Tırnak işareti içindeki yazıyı daha önce kaydedilmiş Uygulama (istemci) kimliği değeriyle değiştirin.
   • authority - Yetki, MSAL'nin token talep edebileceği bir dizini gösteren bir URL'dir. Enter_the_Tenant_Info_Here ifadesini, daha önce kaydedilmiş olan Dizin (kiracı) kimliği değeriyle değiştirin.
   • redirectUri - Uygulamanın yönlendirme URI'si. Gerekirse, tırnak içindeki metni daha önce kaydedilmiş yeniden yönlendirme URI'siyle değiştirin.

Blazor

1. IDE'nizde, örneği içeren ms-identity-docs-code-dotnet/spa-blazor-wasm proje klasörünü açın.

2. spa-blazor-wasm/wwwroot/appsettings.json açın ve yönetim merkezinde daha önce kaydedilen bilgilerle aşağıdaki değerleri güncelleştirin.

   {
     "AzureAd": {
       "Authority": "https://login.microsoftonline.com/<Enter the tenant ID obtained from the Microsoft Entra admin center>",
       "ClientId": "Enter the client ID obtained from the Microsoft Entra admin center",
       "ValidateAuthority": true
     }
   }
   

   • Authority - Yetki, MSAL'nin token talep edebileceği bir dizini gösteren bir URL'dir. Enter_the_Tenant_Info_Here ifadesini, daha önce kaydedilmiş olan Dizin (kiracı) kimliği değeriyle değiştirin.
   • ClientId - İstemci olarak da adlandırılan uygulamanın tanımlayıcısı. Tırnak işareti içindeki yazıyı daha önce kaydedilmiş Uygulama (istemci) kimliği değeriyle değiştirin.

Uygulamayı çalıştırın, oturum açın ve çıkış yapın

JavaScript

Node.jskullanarak projeyi bir web sunucusuyla çalıştırın:

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

   cd vanillajs-spa/App
   npm install
   npm start
   

2. Terminalde görüntülenen https URL'sini (örneğin, https://localhost:3000) 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 istenir. İstendiğinde kodu girin.

4. Uygulama, erişim verdiğiniz verilere erişimi korumak ve oturum açıp profilinizi okumak için izin isteyecektir. SeçKabul Et Uygulamada oturum açtığınızı ve Profil ayrıntılarınıza Microsoft Graph API'sinden eriştiğnizi gösteren aşağıdaki ekran görüntüsü görüntülenir.

   

Tepki

Node.jskullanarak projeyi bir web sunucusuyla çalıştırın:

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

   cd react-spa
   npm install
   npm start
   

2. Terminalde görüntülenen https URL'sini (örneğin, https://localhost:3000) 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 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 Uygulamada oturum açtığınızı ve Profil ayrıntılarınıza Microsoft Graph API'sinden eriştiğnizi gösteren aşağıdaki ekran görüntüsü görüntülenir.

   

Açısal

Node.jskullanarak projeyi bir web sunucusuyla çalıştırın:

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

   cd angular-spa
   npm install
   npm start
   

2. Terminalde görüntülenen https URL'sini (örneğin, https://localhost:4200) kopyalayın ve bir tarayıcı adres çubuğuna 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 istenir. İstendiğinde kodu girin.

4. Uygulama, erişim verdiğiniz verilere erişimi korumak ve oturum açıp profilinizi okumak için izin isteyecektir. SeçKabul Et Uygulamada oturum açtığınızı ve Profil ayrıntılarınıza Microsoft Graph API'sinden eriştiğnizi gösteren aşağıdaki ekran görüntüsü görüntülenir.

   

Blazor

dotnet kullanarak projeyi bir web sunucusuyla çalıştırın:

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

   cd spa-blazor-wasm
   dotnet workload install wasm-tools
   dotnet run
   

2. Terminalde görüntülenen http URL'sini (örneğin, http://localhost:5000) 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 istenir. İstendiğinde kodu girin.

4. Uygulama, erişim verdiğiniz verilere erişimi korumak ve oturum açıp profilinizi okumak için izin isteyecektir. SeçKabul Et Uygulamada oturum açtığınızı ve Profil ayrıntılarınıza Microsoft Graph API'sinden eriştiğnizi gösteren aşağıdaki ekran görüntüsü görüntülenir.

   

Ö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ı kaydolma akışları oluşturma konusuna bakın. Bu kullanıcı akışı birden çok uygulama için kullanılabilir.
• Visual Studio Code veya başka bir kod düzenleyicisi.

JavaScript

• 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
• Tek sayfalı uygulama 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 .
  • Yönlendirme URI'si: http://localhost:3000/
• Uygulamanızı kullanıcı akışına ekleme
• Node.js

Tepki

• 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
• Tek sayfalı uygulama 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 .
  • Yönlendirme URI'si: http://localhost:3000/
• Uygulamanızı kullanıcı akışına ekleme
• Node.js

Açısal

• 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
• Tek sayfalı uygulama 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 .
  • Yönlendirme URI'si: http://localhost:4200/
• Uygulamanızı kullanıcı akışına ekleme
• Node.js

Örnek SPA'yı kopyalama veya indirme

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

JavaScript

• Ö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
  

• Örneğiindirin. Adın uzunluğu 260 karakterden az olan bir dosya yoluna dosyayı ayıklayın.

Tepki

• Ö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
  

• Örneğiindirin. Adın uzunluğu 260 karakterden az olan bir dosya yoluna dosyayı ayıklayın.

Açısal

• Ö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
  

• Örneğiindirin. Adın uzunluğu 260 karakterden az olan bir dosya yoluna dosyayı ayıklayın.

Örnek SPA'yi yapılandırma

JavaScript

1. App/public/authConfig.js açın ve aşağıdaki değerleri Microsoft Entra yönetim merkezinden alınan değerlerle değiştirin:

   • Enter_the_Application_Id_Here ve daha önce kaydettiğiniz uygulamanın Uygulama (istemci) kimliğiyle değiştirin.
   • Enter_the_Tenant_Subdomain_Here'u, Dizinin (kiracının) alt etki alanıyla değiştirin. Örneğin, kiracınızın birincil alan adı contoso.onmicrosoft.comise, contosokullanın. Eğer kiracı adınız yoksa, kiracı ayrıntılarınızı nasıl okuyacağınızıöğrenin.

2. Dosyayı kaydedin.

Tepki

1. SPA\src\authConfig.js açın ve aşağıdaki değerleri Microsoft Entra yönetim merkezinden alınan değerlerle değiştirin:

   • Enter_the_Application_Id_Here ve daha önce kaydettiğiniz uygulamanın Uygulama (istemci) kimliğiyle değiştirin.
   • Enter_the_Tenant_Subdomain_Here'u, Dizinin (kiracının) alt etki alanıyla değiştirin. Örneğin, kiracınızın birincil alan adı contoso.onmicrosoft.comise, contosokullanın. Eğer kiracı adınız yoksa, kiracı ayrıntılarınızı nasıl okuyacağınızıöğrenin.

2. Dosyayı kaydedin.

Açısal

1. SPA/src/app/auth-config.ts açın ve aşağıdaki değerleri Microsoft Entra yönetim merkezinden alınan değerlerle değiştirin:

   • Enter_the_Application_Id_Here ve daha önce kaydettiğiniz uygulamanın Uygulama (istemci) kimliğiyle değiştirin.
   • Enter_the_Tenant_Subdomain_Here'u, Dizinin (kiracının) alt etki alanıyla değiştirin. Örneğin, kiracınızın birincil alan adı contoso.onmicrosoft.comise, contosokullanın. Eğer kiracı adınız yoksa, kiracı ayrıntılarınızı nasıl okuyacağınızıöğrenin.

2. Dosyayı kaydedin.

Projenizi çalıştırma ve oturum açma

JavaScript

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

   cd 1-Authentication\0-sign-in-vanillajs\App
   npm install
   npm start
   

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

3. Kiracıya kayıtlı bir hesapla oturum açın.

4. Uygulamada oturum açtığınızı ve Profil ayrıntılarınıza Microsoft Graph API'sinden eriştiğnizi gösteren aşağıdaki ekran görüntüsü görüntülenir.

   

Tepki

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

   cd 1-Authentication\1-sign-in-react\SPA
   npm install
   npm start
   

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

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

4. Uygulamada oturum açtığınızı ve Profil ayrıntılarınıza Microsoft Graph API'sinden eriştiğnizi gösteren aşağıdaki ekran görüntüsü görüntülenir.

Açısal

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

   cd 1-Authentication\2-sign-in-angular\SPA
   npm install
   npm start
   

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

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

4. Uygulamada oturum açtığınızı ve Profil ayrıntılarınıza Microsoft Graph API'sinden eriştiğnizi gösteren aşağıdaki ekran görüntüsü görüntülenir.

   

Uygulama oturumunu kapatma

1. Sayfada Oturumu kapat düğmesini bulun ve seçin.
2. Oturumunu kapatmak için bir hesap seçmeniz istenir. Oturum açmak için kullandığınız hesabı seçin.

Oturumunuz kapatıldığını belirten bir ileti görüntülenir. Artık tarayıcı penceresini kapatabilirsiniz.

İlgili içerik

• Hızlı Başlangıç: microsoft kimlik platformuile ASP.NET Core web API'sini koruma.
• Aşağıdaki çok bölümlü öğretici serisinde kullanıcıların oturum açtığı bir React SPA oluşturarak daha fazla bilgi edinin.
• Parola sıfırlamayı etkinleştir.
• Varsayılan markalamaözelleştirin.
• Googleile oturum açmayı yapılandırma.