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

v tomto kurzu vytvoříte jednostránkovou aplikaci v javascriptu (SPA), která podepisuje uživatele a volá Microsoft Graph pomocí toku autorizačního kódu s PKCE. Při sestavování zabezpečeného hesla se používá knihovna Microsoft Authentication Library (MSAL) pro JavaScript v 2.0.

V tomto kurzu:

  • Provedení toku autorizačního kódu OAuth 2,0 s PKCE
  • Přihlaste se k osobním účtům Microsoft i pracovním a školním účtům.
  • Získání přístupového tokenu
  • zavolejte Microsoft Graph nebo vlastní rozhraní API, které vyžaduje přístupové tokeny získané z Microsoft identity platform

MSAL.js 2,0 vylepš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

Jak funguje aplikace tutorial

Diagram znázorňující tok autorizačního kódu v aplikaci s jednou stránkou

aplikace, kterou vytvoříte v tomto kurzu, umožňuje, aby se pomocí javascriptu SPA mohl dotazovat rozhraní Microsoft Graph API tím, že získává tokeny zabezpečení z 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ání a obnovení tokenu jsou zpracovávány knihovnou Microsoft Authentication Library pro JavaScript (MSAL.js).

V tomto kurzu se používá následující knihovna:

msal.js balíčku Microsoft Authentication Library pro JavaScript v 2.0

Získat ukázku dokončeného kódu

Chcete místo toho stáhnout ukázkový projekt tohoto kurzu? Naklonujte úložiště MS-identity-JavaScript-v2 .

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

Chcete-li spustit stažený projekt 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 v tématu Vytvoření projektu. Jakmile budete hotovi, můžete nakonfigurovat ukázku kódu přeskočením do kroku konfigurace.

Chcete-li pokračovat v kurzu a sestavit aplikaci sami, přejděte k další části, vytvořte projekt.

Vytvoření projektu

Po nainstalování Node.js vytvořte složku, která bude hostovat vaši aplikaci, například msal-Spa – kurz.

V dalším kroku implementujte webový server s malým expresním webem, který bude obsluhovat váš soubor index.html .

  1. 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
    
  2. 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 argv = require('yargs')
       .usage('Usage: $0 -p [PORT]')
       .alias('p', 'port')
       .describe('port', '(Optional) Port Number - default is 3000')
       .strict()
       .argv;
    
    const DEFAULT_PORT = 3000;
    
    //initialize express.
    const app = express();
    
    // Initialize variables.
    let port = DEFAULT_PORT; // -p {PORT} || 3000;
    if (argv.p) {
       port = argv.p;
    }
    
    // Configure morgan module to log all requests.
    app.use(morgan('dev'));
    
    // Set the front-end folder to serve public assets.
    app.use("/lib", express.static(path.join(__dirname, "../../lib/msal-browser/lib")));
    
    // Setup app folders
    app.use(express.static('app'));
    
    // Set up a route for index.html.
    app.get('*', function (req, res) {
       res.sendFile(path.join(__dirname + '/index.html'));
    });
    
    // Start the server.
    app.listen(port);
    console.log(`Listening on port ${port}...`);
    

Teď máte malý dynamický Server, který bude sloužit pro SPA. Po dokončení zbývající části kurzu by struktura souborů a složek vašeho projektu měla vypadat podobně jako v následujícím příkladu:

msal-spa-tutorial/
├── app
│   ├── authConfig.js
│   ├── authPopup.js
│   ├── authRedirect.js
│   ├── graphConfig.js
│   ├── graph.js
│   ├── index.html
│   └── ui.js
└── server.js

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

  1. Vytvořte složku aplikace v adresáři projektu a v ní vytvořte soubor index.html pro váš JavaScript Spa. Tento soubor implementuje uživatelské rozhraní vytvořené pomocí rutiny Bootstrap 4 a importuje soubory skriptu pro konfiguraci, ověřování a volání rozhraní API.

    Do index.html souboru 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>Tutorial | MSAL.js JavaScript SPA</title>
    
        <!-- IE support: add promises polyfill before msal.js  -->
        <script type="text/javascript" src="//cdn.jsdelivr.net/npm/bluebird@3.7.2/js/browser/bluebird.min.js"></script>
        <script type="text/javascript" src="https://alcdn.msauth.net/browser/2.0.0-beta.4/js/msal-browser.js" integrity="sha384-7sxY2tN3GMVE5jXH2RL9AdbO6s46vUh9lUid4yNCHJMUzDoj+0N4ve6rLOmR88yN" 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">JavaScript SPA calling Microsoft 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 Mail</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>
    
  2. 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 mít přístup k elementům DOM a jejich aktualizaci.

    // 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(account) {
        // Reconfiguring DOM elements
        cardDiv.style.display = 'initial';
        welcomeDiv.innerHTML = `Welcome ${account.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) {
            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.length < 1) {
                alert("Your mailbox is empty!")
            } else {
                const tabList = document.getElementById("list-tab");
                tabList.innerHTML = ''; // clear tabList at each readMail call
                const tabContent = document.getElementById("nav-tabContent");
    
                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 Spa.

Do pole identifikátor URI pro přesměrování: MSAL.js 2,0 s krok tok kódu pro ověřování zadejte http://localhost:3000 výchozí umístění, ve kterém se spouští aplikace tohoto kurzu.

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

Konfigurace vašeho JavaScriptu SPA

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

const msalConfig = {
  auth: {
    clientId: "Enter_the_Application_Id_Here",
    authority: "Enter_the_Cloud_Instance_Id_Here/Enter_the_Tenant_Info_Here",
    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
  }
};

// Add scopes here for ID token to be used at Microsoft identity platform endpoints.
const loginRequest = {
 scopes: ["openid", "profile", "User.Read"]
};

// Add scopes here for access token to be used at Microsoft Graph API endpoints.
const tokenRequest = {
 scopes: ["User.Read", "Mail.Read"]
};

Upravte hodnoty v msalConfig části, jak je popsáno zde:

  • Enter_the_Application_Id_Here: ID aplikace (klienta) aplikace, kterou jste zaregistrovali.
  • Enter_the_Cloud_Instance_Id_Here: Cloudová instance Azure, ve které je vaše aplikace zaregistrovaná.
    • V případě hlavního (nebo globálního) cloudu Azure zadejte https://login.microsoftonline.com .
    • Pro národní cloudy (například Čína) můžete najít odpovídající hodnoty v národních cloudech.
  • Enter_the_Tenant_info_here měla by být jedna z následujících:
    • Pokud vaše aplikace podporuje účty v tomto organizačním adresáři, nahraďte tuto hodnotu ID tenanta nebo názvem tenanta. Například, contoso.microsoft.com.
    • Pokud vaše aplikace podporuje účty v jakémkoli organizačním adresáři, nahraďte tuto hodnotu hodnotou organizations .
    • Pokud vaše aplikace podporuje účty v libovolném organizačním adresáři a osobních účtech Microsoft, nahraďte tuto hodnotu hodnotou common .
    • Pokud chcete omezit podporu jenom na osobní účty Microsoft, nahraďte tuto hodnotu hodnotou consumers .
  • Enter_the_Redirect_Uri_Here je http://localhost:3000.

authorityPokud používáte globální cloud Azure, měla by být hodnota v authConfig.js podobná následující:

authority: "https://login.microsoftonline.com/common",

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

// Add the endpoints here for Microsoft Graph API services you'd like to use.
const graphConfig = {
    graphMeEndpoint: "Enter_the_Graph_Endpoint_Here/v1.0/me",
    graphMailEndpoint: "Enter_the_Graph_Endpoint_Here/v1.0/me/messages"
};

Upravte hodnoty v graphConfig části, jak je popsáno zde:

  • Enter_the_Graph_Endpoint_Hereje instancí rozhraní API Microsoft Graph, se kterou by měla aplikace komunikovat.
    • pro globální koncový bod rozhraní API Microsoft Graph nahraďte oba výskyty řetězce https://graph.microsoft.com .
    • v případě koncových bodů v národních cloudových nasazeních najdete informace v tématu věnovaném národním cloudovým nasazením v dokumentaci Microsoft Graph.

graphMeEndpointHodnoty a graphMailEndpoint v 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"

Přihlášení uživatele pomocí knihovny Microsoft Authentication Library (MSAL)

Automaticky otevíraná okna

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

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

let username = "";

function loadPage() {
    /**
     * 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 === null) {
        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(currentAccounts[0]);
    }
}

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

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

function signOut() {
    const logoutRequest = {
        account: myMSALObj.getAccountByUsername(username)
    };

    myMSALObj.logout(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 redirect");
        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);
        profileButton.classList.add('d-none');
        mailButton.classList.remove('d-none');
    }).catch(error => {
        console.error(error);
    });
}

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

loadPage();

Přesměrování

Ve složce aplikace vytvořte soubor s názvem authRedirect.js a přidejte následující kód pro získání přihlašovacích údajů a token 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 accessToken;
let username = "";

// Redirect: once login is successful and redirects with tokens, call Graph API
myMSALObj.handleRedirectPromise().then(handleResponse).catch(err => {
    console.error(err);
});

function handleResponse(resp) {
    if (resp !== null) {
        username = resp.account.username;
        showWelcomeMessage(resp.account);
    } else {
        /**
         * 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 === null) {
            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(currentAccounts[0]);
        }
    }
}

function signIn() {
    myMSALObj.loginRedirect(loginRequest);
}

function signOut() {
    const logoutRequest = {
        account: myMSALObj.getAccountByUsername(username)
    };

    myMSALObj.logout(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);
        profileButton.classList.add('d-none');
        mailButton.classList.remove('d-none');
    }).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 pro přihlášení , signIn metoda se zavolá na loginPopup přihlášení uživatele. loginPopupmetoda otevře automaticky otevírané okno s koncovým bodem Microsoft identity platform pro zobrazení výzvy a ověření přihlašovacích údajů uživatele. Po úspěšném přihlášení zahájí msal.js tok autorizačního kódu.

V tomto okamžiku se do koncového bodu tokenu Protected CORS pošle autorizační kód chráněný PKCE a vyměňují se pro tokeny. Vaše msal.js aplikace obdrží token ID, přístupový token a aktualizační token a informace obsažené v tokenech jsou uložené v mezipaměti.

Token ID obsahuje základní informace o uživateli, jako je jeho zobrazované jméno. Pokud máte v úmyslu použít jakákoli data poskytnutá tokenem ID, váš back-end server musí ověřit, zda byl token vydán platnému uživateli vaší aplikace.

Přístupový token má omezené trvání a vyprší za 24 hodin. 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á nebo acquireTokenSilent acquireTokenPopup získá přístupový token , který se používá k dotazování rozhraní API Microsoft Graph pro informace o profilu uživatele. Pokud potřebujete ukázku, která ověří token ID, přečtěte si ukázkovou aplikaci Active-Directory-JavaScript-singlepageapp-dotnet-WebApi-v2 na GitHub. ukázka používá webové rozhraní API ASP.NET pro ověřování tokenů.

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

Po prvním přihlášení by vaše aplikace neměla požádat uživatele, aby se znovu ověřili pokaždé, když potřebují přístup k chráněnému prostředku (to znamená vyžádání tokenu). Chcete-li zabránit takové žádosti o opakované ověření, zavolejte acquireTokenSilent . Existují však situace, kdy může být nutné vynutit, aby uživatelé mohli pracovat s Microsoft identity platform. Příklad:

  • Uživatelé musí znovu zadat své 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.
  • Je vyžadováno dvojúrovňové ověřování.

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

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

acquireTokenSilentMetoda zpracovává získání a obnovení tokenu bez zásahu uživatele. Po loginPopup loginRedirect prvním spuštění (nebo) acquireTokenSilent je metoda, která se běžně používá 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í požadavků na požadavky nebo obnovení tokenů se provádí tiše.) acquireTokenSilent v některých případech může selhat. Může například dojít k vypršení platnosti hesla uživatele. Vaše aplikace může tuto výjimku zpracovat dvěma způsoby:

  1. Voláním okamžitě acquireTokenPopup aktivujte výzvu k přihlášení uživatele. Tento model se běžně používá v online aplikacích, kde v aplikaci není k dispozici žádný neověřený obsah. Ukázka vygenerovaná tímto průvodcem používá tento model.
  2. Vizuálně uživateli indikuje, že se vyžaduje interaktivní přihlášení, aby uživatel mohl vybrat správný čas pro přihlášení, nebo to může aplikace acquireTokenSilent zopakovat později. Tato technika se běžně používá, když uživatel může používat jiné funkce aplikace bez narušení. V aplikaci může být například k dispozici neověřený obsah. V takové situaci se uživatel může rozhodnout, kdy se má přihlásit pro přístup k chráněnému prostředku nebo aktualizovat zastaralé informace.

Poznámka

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

Volání rozhraní MICROSOFT Graph API

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

// Helper function to call Microsoft Graph API endpoint
// using 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 metoda používá k vytvoření požadavku HTTP na chráněný callMSGraph() GET prostředek, který vyžaduje token. Požadavek pak vrátí obsah volajícímu. Tato metoda přidá získaný token do autorizační hlavičky HTTP. V ukázkové aplikaci vytvořené v tomto kurzu je chráněným zdrojem koncový bod rozhraní MICROSOFT Graph API me, který zobrazuje informace o profilu přihlášených uživatelů.

Testování aplikace

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

  1. Spusťte Node.js serveru spuštěním následujícího příkazu v kořenovém adresáři složky projektu:

    npm start
    
  2. V prohlížeči přejděte na nebo , kde je port, na kterém http://localhost:3000 naslouchá váš webový http://localhost:<port> <port> server. Měl by se zobrazit obsah souboru index.html a tlačítko Přihlásit se.

Přihlášení k aplikaci

Jakmile prohlížeč načte váš souborindex.html, vyberte Přihlásit se. Zobrazí se výzva k přihlášení pomocí Microsoft identity platform:

Webový prohlížeč zobrazující přihlašovací dialogové okno

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í:

Dialogové okno obsahu zobrazené ve webovém prohlížeči

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í:

Výsledky úspěšného přihlášení ve webovém prohlížeči

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:

Informace o profilu z Graph Microsoftu se zobrazí v prohlížeči.

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

Rozhraní MICROSOFT Graph API ke čtení profilu uživatele vyžaduje obor user.read. Ve výchozím nastavení se tento obor automaticky přidá do každé aplikace, která je zaregistrovaná v Azure Portal. Další rozhraní API pro microsoft Graph a také vlastní rozhraní API pro back-endový server můžou vyžadovat další obory. Například rozhraní MICROSOFT Graph API vyžaduje obor Mail.Read, aby bylo možné zobrazit 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 pro přidané obory.

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

Nápověda a podpora

Pokud potřebujete pomoc, chcete ohlásit problém nebo získat informace o možnostech podpory, přečtěte si téma pomoc a podpora pro vývojáře.

Další kroky

Pokud se chcete do vývoje jednostránkové aplikace v JavaScriptu ponořit hlouběji Microsoft identity platform, podívejte se na naši řadu scénářů s více částmi: