適用対象: 
従業員テナント 外部テナント (詳細)
このチュートリアルでは、Node/Express.js Web アプリから Microsoft Graph API を呼び出します。 ユーザーがサインインすると、アプリは Microsoft Graph API を呼び出すアクセス トークンを取得します。
このチュートリアルは、3 部構成のチュートリアル シリーズのパート 3 です。
このチュートリアルでは、次の操作を行います。
- Node/Express.js Web アプリを更新してアクセス トークンを取得する
- アクセス トークンを使用して Microsoft Graph API を呼び出します。
[前提条件]
UI コンポーネントを追加する
コード エディターで views/index.hbs ファイルを開き、次のコード スニペットを使用して ユーザー プロファイルの表示 リンクを追加します。
<a href="/users/profile">View user profile</a>更新後、 views/index.hbs ファイルは次のファイルのようになります。
<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}}views/profile.hbs ファイルを作成し、次のコードを追加します。
<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>- このページには、Microsoft Graph API から返されるユーザーのプロファイルの詳細が表示されます。
アクセス トークンの取得
コードエディタでauth/AuthProvider.jsファイルを開き、次にAuthProviderクラスにgetTokenメソッドを追加します。
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);
}
};
}
}
//...
getTokenメソッドは、指定したスコープを使用してアクセス トークンを取得します
呼び出し API ルートを追加する
コード エディターで routes/users.js ファイルを開き、次のルートを追加します。
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,
});
},
);
顧客ユーザーが [ユーザー
/profile] リンクを選択すると、 ルートがトリガーされます。 アプリ:- User.Read アクセス許可を持つアクセス トークンを取得します。
- Microsoft Graph API を呼び出して、サインインしているユーザーのプロファイルを読み取ります。
- profile.hbs UI にユーザーの詳細を表示します。
Microsoft Graph API を呼び出す
ファイル fetch.js 作成し、次のコードを追加します。
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 };
実際の API 呼び出しは 、fetch.js ファイルで行われます。
Node/Express.js Web アプリを実行してテストする
- 「Node/Express.js Web アプリの実行とテスト の手順に従って、Web アプリを実行してください。」
- サインインしたら、[ ユーザー プロファイル リンクの表示] を選択します。 アプリが正常に動作する場合は、サインインしているユーザーのプロファイルが Microsoft Graph API から読み取られたものとして表示されます。