Kurz: Vytvoření jednostráňové aplikace v JavaScriptu, která používá tok ověřovacího kódu - Microsoft identity platform

Článek
02/08/2024

V tomto kurzu vytvoříte jednostránkovou aplikaci JavaScriptu (SPA), která přihlašuje uživatele a volá Microsoft Graph pomocí toku autorizačního kódu s PKCE. Služba SPA, kterou vytvoříte, používá knihovnu Microsoft Authentication Library (MSAL) pro JavaScript verze 2.0.

V tomto kurzu:

Provedení toku autorizačního kódu OAuth 2.0 pomocí infrastruktury veřejných klíčů
Přihlášení osobních účtů Microsoft a pracovních a školních účtů
Získání přístupového tokenu
Volání Microsoft Graphu nebo vlastního rozhraní API, které vyžaduje přístupové tokeny získané z platformy Microsoft Identity Platform

MSAL.js 2.0 zlepšuje MSAL.js 1.0 tím, že podporuje tok autorizačního kódu v prohlížeči místo implicitního toku udělení. MSAL.js 2.0 nepodporuje implicitní tok.

Požadavky

Node.js pro spuštění místního webového serveru
Visual Studio Code nebo jiný editor kódu

Jak aplikace kurzu funguje

Diagram showing the authorization code flow in a single-page application

Aplikace, kterou vytvoříte v tomto kurzu, umožňuje javascriptové spa dotazovat rozhraní Microsoft Graph API získáním tokenů zabezpečení z platformy Microsoft Identity Platform. V tomto scénáři se po přihlášení uživatele vyžádá přístupový token a přidá se do požadavků HTTP v autorizační hlavičce. Získávání a prodlužování tokenů zpracovává knihovna Microsoft Authentication Library pro JavaScript (MSAL.js).

Tento kurz používá MSAL.js, knihovnu Microsoft Authentication Library pro balíček prohlížeče JavaScript v2.0.

Získání dokončené ukázky kódu

Hotový ukázkový projekt tohoto kurzu si můžete místo toho stáhnout klonováním úložiště ms-identity-javascript-v2 .

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

Pokud chcete stažený projekt spustit v místním vývojovém prostředí, začněte vytvořením serveru localhost pro vaši aplikaci, jak je popsáno v kroku 1 vytvoření projektu. Po dokončení můžete ukázku kódu nakonfigurovat tak, že přeskočíte do kroku konfigurace.

Pokud chcete pokračovat v kurzu a sestavit aplikaci sami, přejděte k další části Vytvoření projektu.

Vytvoření projektu

Po instalaci Node.js vytvořte složku pro hostování aplikace, například msal-spa-tutorial.

Dále implementujte malý webový server Express, který bude sloužit index.html souboru.

Nejprve přejděte do adresáře projektu v terminálu a spusťte následující npm příkazy:

npm init -y
npm install @azure/msal-browser
npm install express
npm install morgan
npm install yargs

Dále vytvořte soubor s názvem server.js a přidejte následující kód:

const express = require('express');
const morgan = require('morgan');
const path = require('path');

const DEFAULT_PORT = process.env.PORT || 3000;

// initialize express.
const app = express();

// Initialize variables.
let port = DEFAULT_PORT;

// Configure morgan module to log all requests.
app.use(morgan('dev'));

// Setup app folders.
app.use(express.static('app'));

// Set up a route for index.html
app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname + '/index.html'));
});

// Start the server.
app.listen(port);
console.log(`Listening on port ${port}...`);

Vytvoření uživatelského rozhraní SPA

Vytvořte složku aplikace v adresáři projektu a v něm vytvořte soubor index.html pro javascriptové spa. Tento soubor implementuje uživatelské rozhraní vytvořené pomocí rozhraní Bootstrap 4 Framework a importuje soubory skriptů pro konfiguraci, ověřování a volání rozhraní API.

Do souboru index.html přidejte následující kód:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <title>Microsoft identity platform</title>
  <link rel="SHORTCUT ICON" href="./favicon.svg" type="image/x-icon">

   <!-- msal.min.js can be used in the place of msal.js; included msal.js to make debug easy -->
  <script src="https://alcdn.msauth.net/browser/2.30.0/js/msal-browser.js"
    integrity="sha384-o4ufwq3oKqc7IoCcR08YtZXmgOljhTggRwxP2CLbSqeXGtitAxwYaUln/05nJjit"
    crossorigin="anonymous"></script>
  
  <!-- adding Bootstrap 4 for UI components  -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <link rel="SHORTCUT ICON" href="https://c.s-microsoft.com/favicon.ico?v2" type="image/x-icon">
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <a class="navbar-brand" href="/">Microsoft identity platform</a>
    <div class="btn-group ml-auto dropleft">
      <button type="button" id="SignIn" class="btn btn-secondary" onclick="signIn()">
        Sign In
      </button>
    </div>
  </nav>
  <br>
  <h5 class="card-header text-center">Vanilla JavaScript SPA calling MS Graph API with MSAL.js</h5>
  <br>
  <div class="row" style="margin:auto">
    <div id="card-div" class="col-md-3" style="display:none">
      <div class="card text-center">
        <div class="card-body">
          <h5 class="card-title" id="WelcomeMessage">Please sign-in to see your profile and read your mails</h5>
          <div id="profile-div"></div>
          <br>
          <br>
          <button class="btn btn-primary" id="seeProfile" onclick="seeProfile()">See Profile</button>
          <br>
          <br>
          <button class="btn btn-primary" id="readMail" onclick="readMail()">Read Mails</button>
        </div>
      </div>
    </div>
    <br>
    <br>
    <div class="col-md-4">
      <div class="list-group" id="list-tab" role="tablist">
      </div>
    </div>
    <div class="col-md-5">
      <div class="tab-content" id="nav-tabContent">
      </div>
    </div>
  </div>
  <br>
  <br>

  <!-- importing bootstrap.js and supporting js libraries -->
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
    integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
    integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
    crossorigin="anonymous"></script>

  <!-- importing app scripts (load order is important) -->
  <script type="text/javascript" src="./authConfig.js"></script>
  <script type="text/javascript" src="./graphConfig.js"></script>
  <script type="text/javascript" src="./ui.js"></script>

  <!-- <script type="text/javascript" src="./authRedirect.js"></script>   -->
  <!-- uncomment the above line and comment the line below if you would like to use the redirect flow -->
  <script type="text/javascript" src="./authPopup.js"></script>
  <script type="text/javascript" src="./graph.js"></script>
</body>

</html>

Dále ve složce aplikace vytvořte soubor s názvem ui.js a přidejte následující kód. Tento soubor bude přistupovat k prvkům DOM a aktualizovat je.

// Select DOM elements to work with
const welcomeDiv = document.getElementById("WelcomeMessage");
const signInButton = document.getElementById("SignIn");
const cardDiv = document.getElementById("card-div");
const mailButton = document.getElementById("readMail");
const profileButton = document.getElementById("seeProfile");
const profileDiv = document.getElementById("profile-div");

function showWelcomeMessage(username) {
    // Reconfiguring DOM elements
    cardDiv.style.display = 'initial';
    welcomeDiv.innerHTML = `Welcome ${username}`;
    signInButton.setAttribute("onclick", "signOut();");
    signInButton.setAttribute('class', "btn btn-success")
    signInButton.innerHTML = "Sign Out";
}

function updateUI(data, endpoint) {
    console.log('Graph API responded at: ' + new Date().toString());

    if (endpoint === graphConfig.graphMeEndpoint) {
        profileDiv.innerHTML = ''
        const title = document.createElement('p');
        title.innerHTML = "<strong>Title: </strong>" + data.jobTitle;
        const email = document.createElement('p');
        email.innerHTML = "<strong>Mail: </strong>" + data.mail;
        const phone = document.createElement('p');
        phone.innerHTML = "<strong>Phone: </strong>" + data.businessPhones[0];
        const address = document.createElement('p');
        address.innerHTML = "<strong>Location: </strong>" + data.officeLocation;
        profileDiv.appendChild(title);
        profileDiv.appendChild(email);
        profileDiv.appendChild(phone);
        profileDiv.appendChild(address);

    } else if (endpoint === graphConfig.graphMailEndpoint) {
        if (!data.value) {
            alert("You do not have a mailbox!")
        } else if (data.value.length < 1) {
            alert("Your mailbox is empty!")
        } else {
            const tabContent = document.getElementById("nav-tabContent");
            const tabList = document.getElementById("list-tab");
            tabList.innerHTML = ''; // clear tabList at each readMail call

            data.value.map((d, i) => {
                // Keeping it simple
                if (i < 10) {
                    const listItem = document.createElement("a");
                    listItem.setAttribute("class", "list-group-item list-group-item-action")
                    listItem.setAttribute("id", "list" + i + "list")
                    listItem.setAttribute("data-toggle", "list")
                    listItem.setAttribute("href", "#list" + i)
                    listItem.setAttribute("role", "tab")
                    listItem.setAttribute("aria-controls", i)
                    listItem.innerHTML = d.subject;
                    tabList.appendChild(listItem)

                    const contentItem = document.createElement("div");
                    contentItem.setAttribute("class", "tab-pane fade")
                    contentItem.setAttribute("id", "list" + i)
                    contentItem.setAttribute("role", "tabpanel")
                    contentItem.setAttribute("aria-labelledby", "list" + i + "list")
                    contentItem.innerHTML = "<strong> from: " + d.from.emailAddress.address + "</strong><br><br>" + d.bodyPreview + "...";
                    tabContent.appendChild(contentItem);
                }
            });
        }
    }
}

Registrace aplikace

Postupujte podle kroků v jednostránkové aplikaci: Registrace aplikace pro vytvoření registrace aplikace pro vaše SPA.

V identifikátoru URI přesměrování: MSAL.js 2.0 s krokem toku ověřovacího kódu zadejte http://localhost:3000výchozí umístění, kde běží aplikace tohoto kurzu.

Pokud chcete použít jiný port, zadejte http://localhost:<port>, kde <port> je upřednostňované číslo portu TCP. Pokud zadáte jiné číslo portu, než 3000je , aktualizujte také server.js s upřednostňovaným číslem portu.

Konfigurace javascriptového spa

Ve složce aplikace vytvořte soubor s názvem authConfig.js, který bude obsahovat konfigurační parametry pro ověřování, a pak přidejte následující kód:

/**
 * 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: {
        // 'Application (client) ID' of app registration in Azure portal - this value is a GUID
        clientId: "Enter_the_Application_Id_Here",
        // Full directory URL, in the form of https://login.microsoftonline.com/<tenant-id>
        authority: "Enter_the_Cloud_Instance_Id_HereEnter_the_Tenant_Info_Here",
        // Full redirect URL, in form of http://localhost:3000
        redirectUri: "Enter_the_Redirect_Uri_Here",
    },
    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 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://docs.microsoft.com/en-us/azure/active-directory/develop/v2-permissions-and-consent#openid-connect-scopes
 */
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
 */
const tokenRequest = {
    scopes: ["User.Read", "Mail.Read"],
    forceRefresh: false // Set this to "true" to skip a cached token and go to the server to get a new token
};

Ve složce aplikace vytvořte soubor s názvem graphConfig.js. Přidejte následující kód, který vaší aplikaci poskytne parametry konfigurace pro volání rozhraní Microsoft Graph API:

// Add here the endpoints for MS Graph API services you would like to use.
const graphConfig = {
    graphMeEndpoint: "Enter_the_Graph_Endpoint_Herev1.0/me",
    graphMailEndpoint: "Enter_the_Graph_Endpoint_Herev1.0/me/messages"
};

Upravte hodnoty v oddílu graphConfig , jak je popsáno tady:

Enter_the_Graph_Endpoint_Here je instance rozhraní Microsoft Graph API, se kterým by aplikace měla komunikovat.
- V případě globálního koncového bodu rozhraní Microsoft Graph API nahraďte obě instance tohoto řetězce řetězcem https://graph.microsoft.com.
- Koncové body v národních cloudových nasazeních najdete v dokumentaci k Microsoft Graphu v národních cloudových nasazeních .

Hodnoty graphMeEndpoint a graphMailEndpoint hodnoty ve vašem graphConfig.js by měly být podobné následujícímu, pokud používáte globální koncový bod:

graphMeEndpoint: "https://graph.microsoft.com/v1.0/me",
graphMailEndpoint: "https://graph.microsoft.com/v1.0/me/messages"

Rozbalovací

Ve složce aplikace vytvořte soubor s názvem authPopup.js a přidejte následující kód pro získání ověřovacího kódu a tokenu pro automaticky otevírané okno přihlášení:

// Create the main myMSALObj instance
// configuration parameters are located at authConfig.js
const myMSALObj = new msal.PublicClientApplication(msalConfig);

let username = "";

function selectAccount() {

    /**
     * See here for more info on account retrieval: 
     * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-common/docs/Accounts.md
     */

    const currentAccounts = myMSALObj.getAllAccounts();
    if (currentAccounts.length === 0) {
        return;
    } else if (currentAccounts.length > 1) {
        // Add choose account code here
        console.warn("Multiple accounts detected.");
    } else if (currentAccounts.length === 1) {
        username = currentAccounts[0].username;
        showWelcomeMessage(username);
    }
}

function handleResponse(response) {

    /**
     * To see the full list of response object properties, visit:
     * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/request-response-object.md#response
     */

    if (response !== null) {
        username = response.account.username;
        showWelcomeMessage(username);
    } else {
        selectAccount();
    }
}

function signIn() {

    /**
     * You can pass a custom request object below. This will override the initial configuration. For more information, visit:
     * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/request-response-object.md#request
     */

    myMSALObj.loginPopup(loginRequest)
        .then(handleResponse)
        .catch(error => {
            console.error(error);
        });
}

function signOut() {

    /**
     * You can pass a custom request object below. This will override the initial configuration. For more information, visit:
     * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/request-response-object.md#request
     */

    const logoutRequest = {
        account: myMSALObj.getAccountByUsername(username),
        postLogoutRedirectUri: msalConfig.auth.redirectUri,
        mainWindowRedirectUri: msalConfig.auth.redirectUri
    };

    myMSALObj.logoutPopup(logoutRequest);
}

function getTokenPopup(request) {

    /**
     * See here for more info on account retrieval: 
     * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-common/docs/Accounts.md
     */
    request.account = myMSALObj.getAccountByUsername(username);
    
    return myMSALObj.acquireTokenSilent(request)
        .catch(error => {
            console.warn("silent token acquisition fails. acquiring token using popup");
            if (error instanceof msal.InteractionRequiredAuthError) {
                // fallback to interaction when silent call fails
                return myMSALObj.acquireTokenPopup(request)
                    .then(tokenResponse => {
                        console.log(tokenResponse);
                        return tokenResponse;
                    }).catch(error => {
                        console.error(error);
                    });
            } else {
                console.warn(error);   
            }
    });
}

function seeProfile() {
    getTokenPopup(loginRequest)
        .then(response => {
            callMSGraph(graphConfig.graphMeEndpoint, response.accessToken, updateUI);
        }).catch(error => {
            console.error(error);
        });
}

function readMail() {
    getTokenPopup(tokenRequest)
        .then(response => {
            callMSGraph(graphConfig.graphMailEndpoint, response.accessToken, updateUI);
        }).catch(error => {
            console.error(error);
        });
}

selectAccount();

Přesměrování

Ve složce aplikace vytvořte soubor s názvem authRedirect.js a přidejte následující ověřovací kód a kód získání tokenu pro přesměrování přihlášení:

// Create the main myMSALObj instance
// configuration parameters are located at authConfig.js
const myMSALObj = new msal.PublicClientApplication(msalConfig);

let username = "";

/**
 * A promise handler needs to be registered for handling the
 * response returned from redirect flow. For more information, visit:
 * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/acquire-token.md
 */
myMSALObj.handleRedirectPromise()
    .then(handleResponse)
    .catch((error) => {
        console.error(error);
    });

function selectAccount () {

    /**
     * See here for more info on account retrieval: 
     * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-common/docs/Accounts.md
     */

    const currentAccounts = myMSALObj.getAllAccounts();

    if (currentAccounts.length === 0) {
        return;
    } else if (currentAccounts.length > 1) {
        // Add your account choosing logic here
        console.warn("Multiple accounts detected.");
    } else if (currentAccounts.length === 1) {
        username = currentAccounts[0].username;
        showWelcomeMessage(username);
    }
}

function handleResponse(response) {
    if (response !== null) {
        username = response.account.username;
        showWelcomeMessage(username);
    } else {
        selectAccount();
    }
}

function signIn() {

    /**
     * You can pass a custom request object below. This will override the initial configuration. For more information, visit:
     * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/request-response-object.md#request
     */

    myMSALObj.loginRedirect(loginRequest);
}

function signOut() {

    /**
     * You can pass a custom request object below. This will override the initial configuration. For more information, visit:
     * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/request-response-object.md#request
     */

    const logoutRequest = {
        account: myMSALObj.getAccountByUsername(username),
        postLogoutRedirectUri: msalConfig.auth.redirectUri,
    };

    myMSALObj.logoutRedirect(logoutRequest);
}

function getTokenRedirect(request) {
    /**
     * See here for more info on account retrieval: 
     * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-common/docs/Accounts.md
     */
    request.account = myMSALObj.getAccountByUsername(username);

    return myMSALObj.acquireTokenSilent(request)
        .catch(error => {
            console.warn("silent token acquisition fails. acquiring token using redirect");
            if (error instanceof msal.InteractionRequiredAuthError) {
                // fallback to interaction when silent call fails
                return myMSALObj.acquireTokenRedirect(request);
            } else {
                console.warn(error);   
            }
        });
}

function seeProfile() {
    getTokenRedirect(loginRequest)
        .then(response => {
            callMSGraph(graphConfig.graphMeEndpoint, response.accessToken, updateUI);
        }).catch(error => {
            console.error(error);
        });
}

function readMail() {
    getTokenRedirect(tokenRequest)
        .then(response => {
            callMSGraph(graphConfig.graphMailEndpoint, response.accessToken, updateUI);
        }).catch(error => {
            console.error(error);
        });
}

Jak kód funguje

Když uživatel poprvé vybere tlačítko Přihlásit se, signIn metoda zavolá loginPopup , aby se uživatel přihlásil. Metoda loginPopup otevře automaticky otevírané okno s koncovým bodem Microsoft Identity Platform a zobrazí výzvu a ověření přihlašovacích údajů uživatele. Po úspěšném přihlášení msal.js zahájí tok autorizačního kódu.

V tomto okamžiku se do koncového bodu tokenu chráněného CORS odešle autorizační kód chráněný PKCE a vymění se za tokeny. Aplikace přijímá token ID, přístupový token a obnovovací token a zpracovává je msal.js a informace obsažené v tokenech se ukládají do mezipaměti.

Token ID obsahuje základní informace o uživateli, například zobrazované jméno. Pokud plánujete použít nějaká data poskytnutá tokenem ID, back-endový server ho musí ověřit, aby se zajistilo, že token byl vydán platnému uživateli pro vaši aplikaci.

Přístupový token má omezenou životnost a vyprší po 24 hodinách. Obnovovací token lze použít k tichému získání nových přístupových tokenů.

Spa, které jste vytvořili v tomto kurzu, volá acquireTokenSilent a/nebo acquireTokenPopup k získání přístupového tokenu použitého k dotazování na informace o profilu uživatele v rozhraní Microsoft Graph API. Pokud potřebujete ukázku, která ověří token ID, podívejte se na ukázkovou aplikaci active-directory-javascript-singlepageapp-dotnet-webapi-v2 na GitHubu. Ukázka používá k ověření tokenu webové rozhraní API ASP.NET.

Interaktivní získání tokenu uživatele

Po počátečním přihlášení by vaše aplikace neměla uživatele žádat o opětovné ověření pokaždé, když potřebují přístup k chráněnému prostředku (to znamená k vyžádání tokenu). Chcete-li těmto žádostem o opětovné ověření zabránit, zavolejte acquireTokenSilent. V některých situacích ale může být potřeba vynutit, aby uživatelé komunikovali s platformou Microsoft Identity Platform. Příklad:

Uživatelé musí znovu zadat svoje přihlašovací údaje, protože vypršela platnost hesla.
Vaše aplikace požaduje přístup k prostředku a potřebujete souhlas uživatele.
Vyžaduje se dvojúrovňové ověřování.

Volání acquireTokenPopup otevře automaticky otevírané okno (nebo acquireTokenRedirect přesměruje uživatele na platformu Microsoft Identity Platform). V tomto okně musí uživatelé pracovat potvrzením svých přihlašovacích údajů, udělením souhlasu s požadovaným prostředkem nebo dokončením dvojúrovňového ověřování.

Získání tokenu uživatele bez upozornění

Metoda acquireTokenSilent zpracovává získání a obnovení tokenů bez zásahu uživatele. Po loginPopup prvním acquireTokenSilent spuštění (nebo loginRedirect) je metoda běžně používána k získání tokenů používaných pro přístup k chráněným prostředkům pro následná volání. (Volání k vyžádání nebo prodloužení platnosti tokenů se provádějí bezobslužně.) acquireTokenSilent v některých případech může selhat. Platnost hesla uživatele například vypršela. Vaše aplikace může tuto výjimku zpracovat dvěma způsoby:

Okamžitě zavolejte acquireTokenPopup , aby se aktivovala výzva k přihlášení uživatele. Tento vzor se běžně používá v online aplikacích, kde uživatel nemá k dispozici žádný neověřený obsah. Tento vzor používá ukázka vygenerovaná tímto nastavením s asistencí.
Vizuálně indikujte uživateli, že se vyžaduje interaktivní přihlášení, aby uživatel mohl vybrat správný čas pro přihlášení, nebo se aplikace může opakovat acquireTokenSilent později. Tato technika se běžně používá, když uživatel může používat jiné funkce aplikace, aniž by došlo k narušení. V aplikaci může být například neověřený obsah dostupný. V takovém případě se uživatel může rozhodnout, kdy se chce přihlásit, aby získal přístup k chráněnému prostředku, nebo aktualizovat zastaralé informace.

Poznámka:

V tomto kurzu se loginPopup ve výchozím nastavení používají metody a acquireTokenPopup metody. Pokud používáte Internet Explorer, doporučujeme používat tyto loginRedirect metody acquireTokenRedirect kvůli známému problému s Internet Explorerem a automaticky otevíranými okny. Příklad dosažení stejného výsledku pomocí metod přesměrování najdete v tématu authRedirect.js na GitHubu.

Volání rozhraní Microsoft Graph API

Ve složce aplikace vytvořte soubor s názvem graph.jsa přidejte následující kód pro volání REST do rozhraní Microsoft Graph API:

/** 
 * Helper function to call MS Graph API endpoint
 * using the authorization bearer token scheme
*/
function callMSGraph(endpoint, token, callback) {
    const headers = new Headers();
    const bearer = `Bearer ${token}`;

    headers.append("Authorization", bearer);

    const options = {
        method: "GET",
        headers: headers
    };

    console.log('request made to Graph API at: ' + new Date().toString());

    fetch(endpoint, options)
        .then(response => response.json())
        .then(response => callback(response, endpoint))
        .catch(error => console.log(error));
}

V ukázkové aplikaci vytvořené v tomto kurzu se callMSGraph() metoda používá k vytvoření požadavku HTTP GET na chráněný prostředek, který vyžaduje token. Požadavek pak vrátí obsah volajícímu. Tato metoda přidá získaný token do hlavičky autorizace HTTP. V ukázkové aplikaci vytvořené v tomto kurzu je chráněný prostředek koncovým bodem rozhraní Microsoft Graph API me , který zobrazuje informace profilu přihlášeného uživatele.

Otestování aplikace

Dokončili jste vytváření aplikace a jste připraveni spustit webový server Node.js a otestovat funkčnost aplikace.

Spusťte Node.js webový server spuštěním následujícího příkazu v kořenové složce projektu:
```
npm start
```
V prohlížeči přejděte na http://localhost:3000 nebo http://localhost:<port>, kde <port> je port, na kterém váš webový server naslouchá. Měli byste vidět obsah souboru index.html a tlačítko Přihlásit se.

Po načtení index.html souboru v prohlížeči vyberte Přihlásit se. Zobrazí se výzva k přihlášení pomocí platformy Microsoft Identity Platform:

Web browser displaying sign-in dialog

Při prvním přihlášení k aplikaci se zobrazí výzva k udělení přístupu k vašemu profilu a přihlášení:

Content dialog displayed in web browser

Pokud souhlasíte s požadovanými oprávněními, webová aplikace zobrazí vaše uživatelské jméno a podepíše úspěšné přihlášení:

Results of a successful sign-in in the web browser

Volání rozhraní Graph API

Po přihlášení vyberte Zobrazit profil a zobrazte informace o profilu uživatele vrácené v odpovědi z volání rozhraní Microsoft Graph API:

Další informace o oborech a delegovaných oprávněních

Rozhraní Microsoft Graph API vyžaduje obor user.read ke čtení profilu uživatele. Ve výchozím nastavení se tento obor automaticky přidá do každé aplikace zaregistrované v Centru pro správu Microsoft Entra. Další rozhraní API pro Microsoft Graph i vlastní rozhraní API pro váš back-end server můžou vyžadovat další obory. Rozhraní Microsoft Graph API například vyžaduje obor Mail.Read , aby bylo možné zobrazit seznam e-mailů uživatele.

Při přidávání oborů se uživatelům může zobrazit výzva k poskytnutí dalšího souhlasu s přidanými obory.

Pokud back-endové rozhraní API nevyžaduje obor, který se nedoporučuje, můžete použít clientId jako obor volání k získání tokenů.

Nápověda a podpora

Pokud potřebujete pomoc, chcete nahlásit problém nebo se chcete dozvědět o možnostech podpory, přečtěte si nápovědu a podporu pro vývojáře.

Další kroky

Přečtěte si další informace o vytvoření jednostránkové aplikace React (SPA), která přihlašuje uživatele v následující vícedílné sérii kurzů.

Kurz: Přihlášení uživatelů a volání rozhraní Microsoft Graph API z jednostránkové aplikace JavaScriptu (SPA) pomocí toku kódu ověřování