Sdílet prostřednictvím

Rychlý start: Přihlášení uživatelů do jednostránkové aplikace (SPA) a volání rozhraní Microsoft Graph API pomocí Angular

  • Článek

V tomto rychlém startu se pomocí ukázkové jednostránkové aplikace Angular (SPA) dozvíte, jak přihlásit uživatele pomocí toku autorizačního kódu s ověřovacím klíčem pro Výměnu kódu (PKCE) a volat rozhraní Microsoft Graph API. Ukázka používá knihovnu Microsoft Authentication Library pro JavaScript ke zpracování ověřování.

Požadavky

Registrace identifikátorů aplikace a záznamů

K dokončení registrace zadejte název aplikace, zadejte podporované typy účtů a přidejte identifikátor URI přesměrování. Po registraci se v podokně Přehled aplikace zobrazí identifikátory potřebné ve zdrojovém kódu aplikace.

  1. Přihlaste se do Centra pro správu Microsoft Entra.

  2. Pokud máte přístup k více tenantům, pomocí ikony Nastavení v horní nabídce přepněte na tenanta, ve kterém chcete aplikaci zaregistrovat z nabídky Adresáře a předplatná.

  3. Přejděte na Aplikace> identit>Registrace aplikací vyberte Nová registrace.

  4. Zadejte název aplikace, například identity-client-spa.

  5. U podporovaných typů účtů vyberte Pouze účty v tomto organizačním adresáři. Pokud chcete získat informace o různých typech účtů, vyberte možnost Nápověda pro výběr .

  6. Vyberte Zaregistrovat.

    Snímek obrazovky, který ukazuje, jak zadat jméno a vybrat typ účtu v Centru pro správu Microsoft Entra

  7. Po dokončení registrace se zobrazí podokno Přehled aplikace. Poznamenejte si ID adresáře (tenanta) a ID aplikace (klienta), které se má použít ve zdrojovém kódu aplikace.

    Snímek obrazovky znázorňující hodnoty identifikátoru na stránce přehledu v Centru pro správu Microsoft Entra

    Poznámka:

    Podporované typy účtů je možné změnit odkazem na úpravu účtů podporovaných aplikací.

Přidání identifikátoru URI přesměrování platformy

Pokud chcete zadat typ aplikace pro registraci aplikace, postupujte takto:

  1. V části Spravovat vyberte Ověřování.
  2. Na stránce Konfigurace platformy vyberte Přidat platformu a pak vyberte možnost SPA.
  3. Pro identifikátory URI přesměrování zadejte http://localhost:4200.
  4. Výběrem možnosti Konfigurovat uložte změny.

Klonování nebo stažení ukázkové aplikace

Pokud chcete získat ukázkovou aplikaci, můžete ji buď naklonovat z GitHubu, nebo si ji stáhnout jako soubor .zip.

  • Pokud chcete ukázku naklonovat, otevřete příkazový řádek a přejděte do umístění, kam chcete projekt vytvořit, a zadejte následující příkaz:

    git clone https://github.com/Azure-Samples/ms-identity-docs-code-javascript.git

  • Stáhněte soubor .zip. Extrahujte ho do cesty k souboru, kde délka názvu je menší než 260 znaků.

Konfigurace projektu

  1. V integrovaném vývojovém prostředí otevřete složku projektu ms-identity-docs-code-javascript/angular-spa obsahující ukázku.

  2. Otevřete soubor src,app/app.module.ts a aktualizujte následující hodnoty s informacemi zaznamenanými dříve v Centru pro správu.

    // 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 – Identifikátor aplikace, označovaný také jako klient. Nahraďte text v uvozovkách hodnotou ID aplikace (klienta), která byla zaznamenána dříve.
    • authority – Autorita je adresa URL, která označuje adresář, ze kterého může knihovna MSAL požadovat tokeny. Nahraďte Enter_the_Tenant_Info_Here hodnotou ID adresáře (tenanta), která byla zaznamenána dříve.
    • redirectUri – Identifikátor URI přesměrování aplikace. V případě potřeby nahraďte text v uvozovkách identifikátorem URI přesměrování, který byl zaznamenán dříve.

Spuštění aplikace a přihlášení

Spusťte projekt s webovým serverem pomocí Node.js:

  1. Pokud chcete spustit server, spusťte v adresáři projektu následující příkazy:

    npm install
npm start

  2. https Zkopírujte adresu URL, která se zobrazí v terminálu, https://localhost:4200například a vložte ji do adresního řádku prohlížeče. Doporučujeme použít soukromou nebo anonymní relaci prohlížeče.

  3. Postupujte podle pokynů a zadejte potřebné podrobnosti pro přihlášení pomocí účtu Microsoft. Budete požádáni o e-mailovou adresu, aby vám bylo možné poslat jednorázové heslo. Po zobrazení výzvy zadejte kód.

  4. Aplikace požádá o oprávnění k údržbě přístupu k datům, ke kterým jste jim udělili přístup, a k přihlášení a čtení vašeho profilu. Zvolte Přijmout. Zobrazí se následující snímek obrazovky, který označuje, že jste se přihlásili k aplikaci a že jste z rozhraní Microsoft Graph API přistupovali k podrobnostem profilu.

    Snímek obrazovky javascriptové aplikace znázorňující výsledky volání rozhraní API

Odhlásit se z aplikace

  1. Najděte tlačítko Odhlásit se v pravém horním rohu stránky a vyberte ho.
  2. Zobrazí se výzva k výběru účtu, ze který se chcete odhlásit. Vyberte účet, který jste použili k přihlášení.

Zobrazí se zpráva s oznámením, že jste se odhlásili. Teď můžete okno prohlížeče zavřít.

Související obsah