Freigeben über

Lernprogramm: Aufrufen der Microsoft Graph-API aus einer Node/Express.js Web-App

Gilt für: Grüner Kreis mit einem weißen Häkchensymbol, das angibt, dass der folgende Inhalt für Mitarbeitermandanten gilt. Mitarbeitermandanten grüner Kreis mit einem weißen Häkchensymbol, das angibt, dass der folgende Inhalt für externe Mandanten gilt. Externe Mandanten (weitere Informationen)

In diesem Lernprogramm rufen Sie die Microsoft Graph-API aus einer Node/Express.js Web-App auf. Sobald sich ein Benutzer anmeldet, erwirbt die App ein Zugriffstoken, um die Microsoft Graph-API aufzurufen.

Dieses Lernprogramm ist Teil 3 der 3-teiligen Lernprogrammreihe.

In diesem Tutorial führen Sie Folgendes durch:

  • Aktualisieren von Node/Express.js Web App zum Abrufen eines Zugriffstokens
  • Verwenden Sie das Zugriffstoken, um die Microsoft Graph-API aufzurufen.

Voraussetzungen

Hinzufügen von UI-Komponenten

  1. Öffnen Sie in Ihrem Code-Editor die Datei "views/index.hbs ", und fügen Sie dann mithilfe des folgenden Codeausschnitts einen Link "Benutzerprofil anzeigen " hinzu:

    <a href="/users/profile">View user profile</a>

    Nachdem Sie die Aktualisierung vorgenommen haben, sollte die Datei "views/index.hbs " ähnlich der folgenden Datei aussehen:

       <h1>{{title}}</h1>
    {{#if isAuthenticated }}
    <p>Hi {{username}}!</p>
    <a href="/users/id">View ID token claims</a>
    <br>
    <a href="/users/profile">View user profile</a>
    <br>
    <br>
    <a href="/auth/signout">Sign out</a>
    {{else}}
    <p>Welcome to {{title}}</p>
    <a href="/auth/signin">Sign in</a>
    {{/if}}

  2. Erstellen Sie die Datei "views/profile.hbs ", und fügen Sie dann den folgenden Code hinzu:

    <h1>Microsoft Graph API</h1>
<h3>/me endpoint response</h3>
<table>
    <tbody>
        {{#each profile}}
        <tr>
            <td>{{@key}}</td>
            <td>{{this}}</td>
        </tr>
        {{/each}}
    </tbody>
</table>
<br>
<a href="/">Go back</a>
    • Auf dieser Seite werden die Profildetails des Benutzers angezeigt, die von der Microsoft Graph-API zurückgegeben werden.

Abrufen eines Zugriffstokens

Öffnen Sie im Code-Editor die Authentifizierungs-/AuthProvider.js datei, und fügen Sie dann die Methode in der getToken Klasse hinzuAuthProvider:

class AuthProvider {
    //...
        getToken(scopes, redirectUri = "http://localhost:3000/") {
            return  async function (req, res, next) {
                const msalInstance = authProvider.getMsalInstance(authProvider.config.msalConfig);
                try {
                    msalInstance.getTokenCache().deserialize(req.session.tokenCache);
    
                    const silentRequest = {
                        account: req.session.account,
                        scopes: scopes,
                    };
                    const tokenResponse = await msalInstance.acquireTokenSilent(silentRequest);
    
                    req.session.tokenCache = msalInstance.getTokenCache().serialize();
                    req.session.accessToken = tokenResponse.accessToken;
                    next();
                } catch (error) {
                    if (error instanceof msal.InteractionRequiredAuthError) {
                        req.session.csrfToken = authProvider.cryptoProvider.createNewGuid();
    
                        const state = authProvider.cryptoProvider.base64Encode(
                            JSON.stringify({
                                redirectTo: redirectUri,
                                csrfToken: req.session.csrfToken,
                            })
                        );
                        
                        const authCodeUrlRequestParams = {
                            state: state,
                            scopes: scopes,
                        };
    
                        const authCodeRequestParams = {
                            state: state,
                            scopes: scopes,
                        };
    
                        authProvider.redirectToAuthCodeUrl(
                            req,
                            res,
                            next,
                            authCodeUrlRequestParams,
                            authCodeRequestParams,
                            msalInstance
                        );
                    }
    
                    next(error);
                }
            };
        }
}
    //...

Die getToken Methode verwendet den angegebenen Bereich, um ein Zugriffstoken abzurufen.

Hinzufügen der Anruf-API-Route

Öffnen Sie in Ihrem Code-Editor die Routes/users.js-Datei , und fügen Sie dann die folgende Route hinzu:

router.get(
    "/profile",
    isAuthenticated,
    authProvider.getToken(["User.Read"]), // check if user is authenticated
    async function (req, res, next) {
    const graphResponse = await fetch(
        GRAPH_ME_ENDPOINT,
        req.session.accessToken,
    );
    if (!graphResponse.id) {
        return res 
        .status(501) 
        .send("Failed to fetch profile details"); 
    }
    res.render("profile", {
        profile: graphResponse,
    });
    },
);

  • Sie lösen die /profile Route aus, wenn der Benutzer des Kunden den Link "Benutzerprofil anzeigen" auswählt. Die App:

    • Erwirbt ein Zugriffstoken mit der Berechtigung „User.Read“.
    • Ruft die Microsoft Graph-API auf, um das Profil des angemeldeten Benutzers zu lesen.
    • Zeigt die Benutzerdetails in der Profile.hbs-Benutzeroberfläche an.

Aufrufen der Microsoft Graph-API

Erstellen Sie fetch.js Datei, und fügen Sie dann den folgenden Code hinzu:

var axios = require('axios');
var authProvider = require("./auth/AuthProvider");

/**
 * Makes an Authorization "Bearer" request with the given accessToken to the given endpoint.
 * @param endpoint
 * @param accessToken
 * @param method
 */
const fetch = async (endpoint, accessToken, method = "GET", data = null) => {
    const options = {
        headers: {
            Authorization: `Bearer ${accessToken}`,
        },
    };

    console.log(`request made to ${endpoint} at: ` + new Date().toString());

    try{
        const response = await axios.get(endpoint, options);
        return await response.data;

    }catch(error){
        throw new Error(error);
    }

};

module.exports = { fetch };

Der tatsächliche API-Aufruf erfolgt in der fetch.js Datei.

Ausführen und Testen der Node/Express.js Web-App

  1. Führen Sie die Schritte in "Ausführen" aus, und testen Sie die Web-App "Node/Express.js" , um Ihre Web-App auszuführen.
  2. Nachdem Sie sich angemeldet haben, wählen Sie den Link " Benutzerprofil anzeigen " aus. Wenn Ihre App ordnungsgemäß funktioniert, sollten Sie sehen können, dass das Profil des angemeldeten Benutzers über die Microsoft Graph-API abgerufen wurde.

Verwandte Inhalte

  • Last updated on