Oktatóanyag: Jelentkezzen be a felhasználókba, és hívja meg a Microsoft Graph API-t egy JavaScript egyoldalas alkalmazásból (SPA) egy hitelesítési kódfolyamat használatával

  • Cikk

Ebben az oktatóanyagban egy JavaScript egyoldalas alkalmazást (SPA) hoz létre, amely bejelentkezik a felhasználókba, és meghívja a Microsoft Graphot a PKCE engedélyezési kódfolyamatával. A buildelt SPA a JavaScript 2.0-s verzióhoz készült Microsoft Authentication Library -t (MSAL) használja.

Ebben az oktatóanyagban:

  • Az OAuth 2.0 engedélyezési kódfolyamat végrehajtása a PKCE-vel
  • Személyes Microsoft-fiókok, valamint munkahelyi és iskolai fiókok bejelentkezése
  • Hozzáférési jogkivonat beszerzése
  • Hívja meg a Microsoft Graphot vagy a saját API-ját, amely a Microsoft Identitásplatform

MSAL.js 2.0 az 1.0-s MSAL.js az implicit engedélyezési folyamat helyett a böngészőben futó engedélyezési kódfolyamat támogatásával javul. MSAL.js 2.0 nem támogatja az implicit folyamatot.

Előfeltételek

  • Node.js helyi webkiszolgáló futtatásához
  • Visual Studio Code vagy más kódszerkesztő

Az oktatóanyag-alkalmazás működése

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

Az oktatóanyagban létrehozott alkalmazás lehetővé teszi, hogy a JavaScript SPA lekérdezhesse a Microsoft Graph API-t a biztonsági jogkivonatok Microsoft Identitásplatform. Ebben a forgatókönyvben, miután egy felhasználó bejelentkezett, a rendszer hozzáférési jogkivonatot kér, és hozzáadja a HTTP-kérésekhez az engedélyezési fejlécben. A jogkivonatok beszerzését és megújítását a Microsoft Authentication Library for JavaScript (MSAL.js) kezeli.

Ez az oktatóanyag MSAL.js, a JavaScript 2.0-s verzióhoz készült Microsoft Authentication Library böngészőcsomagot használja.

A kész kódminta lekérése

Az oktatóanyag befejezett mintaprojektjét az ms-identity-javascript-v2 adattár klónozásával töltheti le.

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

A letöltött projekt helyi fejlesztési környezetben való futtatásához először hozzon létre egy localhost-kiszolgálót az alkalmazáshoz a projekt létrehozása 1. lépésében leírtak szerint. Miután elkészült, konfigurálhatja a kódmintát a konfigurációs lépésre való kihagyással.

Az oktatóanyag folytatásához és az alkalmazás önálló elkészítéséhez lépjen tovább a következő, a Projekt létrehozása című szakaszra.

Projekt létrehozása

Miután telepítette Node.js , hozzon létre egy mappát az alkalmazás üzemeltetéséhez, például msal-spa-tutorial.

Ezután implementáljon egy kis Express-webkiszolgálót a index.html fájl kiszolgálásához.

  1. Először váltson a projektkönyvtárra a terminálban, majd futtassa a következő npm parancsokat:

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

  2. Ezután hozzon létre server.js nevű fájlt, és adja hozzá a következő kódot:

    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}...`);

Az SPA felhasználói felület létrehozása

  1. Hozzon létre egy alkalmazásmappát a projektkönyvtárban, és hozzon létre egy index.html fájlt a JavaScript SPA-hoz. Ez a fájl implementál egy, a Bootstrap 4-keretrendszerrel készült felhasználói felületet, és szkriptfájlokat importál konfigurációhoz, hitelesítéshez és API-hívásokhoz.

    A index.html fájlban adja hozzá a következő kódot:

    <!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>

  2. Ezután az alkalmazásmappában is hozzon létre egy ui.js nevű fájlt, és adja hozzá a következő kódot. Ez a fájl a DOM-elemeket fogja elérni és frissíteni.

    // 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);
                }
            });
        }
    }
}

Az alkalmazás regisztrálása

Kövesse az egyoldalas alkalmazás lépéseit : Alkalmazásregisztráció az SPA-hoz történő alkalmazásregisztráció létrehozásához.

Az átirányítási URI:MSAL.js 2.0 hitelesítési kódfolyamat-lépéssel adja meg http://localhost:3000az oktatóanyag alkalmazásának alapértelmezett helyét.

Ha másik portot szeretne használni, adja meg http://localhost:<port>, hogy hol <port> van az előnyben részesített TCP-portszám. Ha nem 3000portszámot ad meg, frissítse a server.js az előnyben részesített portszámmal.

A JavaScript SPA konfigurálása

Hozzon létre egy authConfig.js nevű fájlt az alkalmazásmappában, amely tartalmazza a hitelesítéshez szükséges konfigurációs paramétereket, majd adja hozzá a következő kódot:

/**
 * 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
};

Hozzon létre egy graphConfig.js nevű fájlt az alkalmazásmappában. Adja hozzá a következő kódot, hogy megadja az alkalmazásnak a Microsoft Graph API meghívásához szükséges konfigurációs paramétereket:

// 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"
};

Módosítsa a szakasz értékeit az graphConfig itt leírtak szerint:

  • Enter_the_Graph_Endpoint_Here a Microsoft Graph API azon példánya, amellyel az alkalmazásnak kommunikálnia kell.
    • A globális Microsoft Graph API-végpont esetében cserélje le a sztring mindkét példányát a következőrehttps://graph.microsoft.com: .
    • Az országos felhőbeli üzemelő példányok végpontjait a Microsoft Graph dokumentációjában találja.

A graphMeEndpoint graphConfig.js értékeinek graphMailEndpointa következőhöz hasonlónak kell lenniük, ha a globális végpontot használja:

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

Felhasználó bejelentkezése a Microsoft Authentication Library (MSAL) használatával

Pop-up

Az alkalmazásmappában hozzon létre egy authPopup.js nevű fájlt, és adja hozzá a következő hitelesítési és jogkivonat-beszerzési kódot a bejelentkezési előugró ablakhoz:

// 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();

Átirányítás

Hozzon létre egy authRedirect.js nevű fájlt az alkalmazásmappában, és adja hozzá a következő hitelesítési és jogkivonat-beszerzési kódot a bejelentkezési átirányításhoz:

// 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);
        });
}

A kód működése

Amikor egy felhasználó először választja ki a Bejelentkezés gombot, a signIn metódus meghívja loginPopup a felhasználó bejelentkezését. A loginPopup metódus megnyit egy előugró ablakot a Microsoft Identitásplatform végponttal a felhasználó hitelesítő adatainak lekéréséhez és érvényesítéséhez. A sikeres bejelentkezés után msal.js elindítja az engedélyezési kód folyamatát.

Ezen a ponton a rendszer egy PKCE által védett engedélyezési kódot küld a CORS által védett jogkivonatvégpontra, és tokenekre cseréli. Az azonosító jogkivonatot, a hozzáférési jogkivonatot és a frissítési jogkivonatot az alkalmazás fogadja, és a msal.js dolgozza fel, és a jogkivonatokban található információk gyorsítótárazva lesznek.

Az azonosító jogkivonat alapvető információkat tartalmaz a felhasználóról, például a megjelenítendő nevét. Ha az azonosító jogkivonat által megadott adatokat szeretné használni, a háttérkiszolgálónak ellenőriznie kell , hogy a jogkivonatot érvényes felhasználónak adta-e ki az alkalmazás számára.

A hozzáférési jogkivonat élettartama korlátozott, és 24 óra elteltével lejár. A frissítési jogkivonat az új hozzáférési jogkivonatok csendes beszerzésére használható.

Az oktatóanyagban létrehozott SPA meghívja acquireTokenSilent és/vagy acquireTokenPopup beszerez egy hozzáférési jogkivonatot , amellyel lekérdezheti a Microsoft Graph API-t a felhasználói profil adataihoz. Ha olyan mintára van szüksége, amely érvényesíti az azonosító jogkivonatot, tekintse meg az active-directory-javascript-singlepageapp-dotnet-webapi-v2 mintaalkalmazást a GitHubon. A minta egy ASP.NET webes API-t használ a jogkivonatok érvényesítéséhez.

Felhasználói jogkivonat interaktív lekérése

A kezdeti bejelentkezés után az alkalmazásnak nem szabad megkérnie a felhasználókat, hogy minden alkalommal újrahitelesítsék magukat, amikor egy védett erőforráshoz kell hozzáférniük (azaz jogkivonatot kell kérniük). Az ilyen újrahitelesítési kérések megakadályozása érdekében hívja meg a hívást acquireTokenSilent. Vannak azonban olyan helyzetek, amikor előfordulhat, hogy a felhasználókat a Microsoft Identitásplatform kell használnia. Példa:

  • A felhasználóknak újra meg kell adniuk a hitelesítő adataikat, mert a jelszó lejárt.
  • Az alkalmazás hozzáférést kér egy erőforráshoz, és önnek a felhasználó beleegyezésére van szüksége.
  • Kéttényezős hitelesítésre van szükség.

A hívás acquireTokenPopup megnyit egy előugró ablakot (vagy acquireTokenRedirect átirányítja a felhasználókat a Microsoft Identitásplatform). Ebben az ablakban a felhasználóknak a hitelesítő adataik megerősítésével, a szükséges erőforrás hozzájárulásával vagy a kéttényezős hitelesítés végrehajtásával kell kommunikálniuk.

Felhasználói jogkivonat csendes beszerzése

A acquireTokenSilent metódus felhasználói beavatkozás nélkül kezeli a jogkivonatok beszerzését és megújítását. A (vagy loginRedirect) első végrehajtása után loginPopup az a módszer, acquireTokenSilent amelyet gyakran használnak a védett erőforrások elérésére használt jogkivonatok lekérésére a későbbi hívásokhoz. (A jogkivonatok lekérésére vagy megújítására irányuló hívások csendben zajlananak.) acquireTokenSilent bizonyos esetekben sikertelen lehet. Előfordulhat például, hogy a felhasználó jelszava lejárt. Az alkalmazás kétféleképpen tudja kezelni ezt a kivételt:

  1. Kezdeményezhet egy hívást, hogy acquireTokenPopup azonnal aktiváljon egy felhasználói bejelentkezési kérést. Ezt a mintát gyakran használják olyan online alkalmazásokban, ahol a felhasználó számára nem érhető el hitelesítés nélküli tartalom az alkalmazásban. Az irányított beállítás által létrehozott minta ezt a mintát használja.
  2. Vizuálisan jelezze a felhasználónak, hogy interaktív bejelentkezésre van szükség, így a felhasználó kiválaszthatja a bejelentkezés megfelelő időpontját, vagy az alkalmazás később újra próbálkozhat acquireTokenSilent . Ezt a technikát gyakran használják, ha a felhasználó anélkül használhatja az alkalmazás egyéb funkcióit, hogy megzavarná őket. Előfordulhat például, hogy nem hitelesített tartalom érhető el az alkalmazásban. Ebben az esetben a felhasználó eldöntheti, hogy mikor szeretne bejelentkezni a védett erőforrás eléréséhez vagy az elavult információk frissítéséhez.

Feljegyzés

Ez az oktatóanyag alapértelmezés szerint azokat loginPopup és acquireTokenPopup metódusokat használja. Ha Internet Explorert használ, javasoljuk, hogy az Internet Explorer és acquireTokenRedirect az előugró ablakok ismert hibája miatt használja a metódusokat és a loginRedirect metódusokat. Ha ugyanezt az eredményt átirányítási módszerekkel éri el, tekintse meg authRedirect.js a GitHubon.

A Microsoft Graph API meghívása

Hozzon létre graph.js nevű fájlt az alkalmazásmappában, és adja hozzá a következő kódot a REST-hívások Microsoft Graph API-hoz való indításához:

/** 
 * 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));
}

Az oktatóanyagban létrehozott mintaalkalmazásban a rendszer http-kérést callMSGraph()GET küld egy jogkivonatot igénylő védett erőforrásra. A kérés ezután visszaadja a tartalmat a hívónak. Ez a metódus hozzáadja a beszerzett jogkivonatot a HTTP-engedélyezési fejléchez. Az oktatóanyagban létrehozott mintaalkalmazásban a védett erőforrás a Microsoft Graph API me végpontja, amely megjeleníti a bejelentkezett felhasználó profiladatait.

Az alkalmazás tesztelése

Befejezte az alkalmazás létrehozását, és készen áll a Node.js webkiszolgáló elindítására és az alkalmazás működésének tesztelésére.

  1. Indítsa el a Node.js webkiszolgálót a következő parancs futtatásával a projektmappában:

    npm start

  2. A böngészőben keresse meg http://localhost:3000 a webkiszolgáló által figyelt portot, vagy http://localhost:<port><port> keresse meg a portot. Látnia kell a index.html fájl tartalmát és a Bejelentkezés gombot.

Bejelentkezés az alkalmazásba

Miután a böngésző betöltötte a index.html fájlt, válassza a Bejelentkezés lehetőséget. A rendszer kéri, hogy jelentkezzen be a Microsoft Identitásplatform:

Web browser displaying sign-in dialog

Amikor először jelentkezik be az alkalmazásba, a rendszer kérni fogja, hogy adjon hozzáférést a profiljához, és jelentkezzen be:

Content dialog displayed in web browser

Ha ön hozzájárul a kért engedélyekhez, a webalkalmazás megjeleníti a felhasználónevet, és sikeres bejelentkezést jelez:

Results of a successful sign-in in the web browser

A Graph API meghívása

Bejelentkezés után válassza a Profil megtekintése lehetőséget a Microsoft Graph API-nak küldött hívás válaszában visszaadott felhasználói profiladatok megtekintéséhez:

Profile information from Microsoft Graph displayed in the browser

További információ a hatókörökről és a delegált engedélyekről

A Microsoft Graph API-hoz a user.read hatókörnek be kell olvasnia egy felhasználó profilját. Alapértelmezés szerint ez a hatókör automatikusan hozzáadódik minden olyan alkalmazáshoz, amely a Microsoft Entra felügyeleti központban van regisztrálva. A Microsoft Graph egyéb API-jai, valamint a háttérkiszolgáló egyéni API-jai további hatóköröket igényelhetnek. A Microsoft Graph API-nak például a Mail.Read hatókörre van szüksége a felhasználó e-mailjeinek listázásához.

Hatókörök hozzáadásakor előfordulhat, hogy a felhasználók további hozzájárulás megadását kérik a hozzáadott hatókörökhöz.

Ha egy háttér API nem igényel hatókört, ami nem ajánlott, akkor a hívások hatóköreként használhatja clientId a jogkivonatok beszerzéséhez.

Súgó és támogatás

Ha segítségre van szüksége, szeretne jelentést készíteni egy problémáról, vagy szeretne többet megtudni a támogatási lehetőségekről, olvassa el a súgót és a fejlesztők támogatását.

Következő lépések

  • További információ egy React egyoldalas alkalmazás (SPA) létrehozásával, amely bejelentkezik a felhasználókba az alábbi többrészes oktatóanyag-sorozatban.