Microsoft Graph API と対話するように Angular アプリケーションを構成するには、次の手順を実行します。
src/app/app.module.ts ファイルを開き、次のコード スニペットを追加します。
// MSAL Interceptor is required to request access tokens in order to access the protected resource (Graph)
export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
const protectedResourceMap = new Map<string, Array<string>>();
protectedResourceMap.set('https://graph.microsoft.com/v1.0/me', ['user.read']);
return {
interactionType: InteractionType.Redirect,
protectedResourceMap
};
}
<div class="profile">
<p><strong>Business Phones:</strong> {{profile?.businessPhones}}</p>
<p><strong>Display Name:</strong> {{profile?.displayName}}</p>
<p><strong>Given Name:</strong> {{profile?.givenName}}</p>
<p><strong>Job Title:</strong> {{profile?.jobTitle}}</p>
<p><strong>Mail:</strong> {{profile?.mail}}</p>
<p><strong>Mobile Phone:</strong> {{profile?.mobilePhone}}</p>
<p><strong>Office Location:</strong> {{profile?.officeLocation}}</p>
<p><strong>Preferred Language:</strong> {{profile?.preferredLanguage}}</p>
<p><strong>Surname:</strong> {{profile?.surname}}</p>
<p><strong>User Principal Name:</strong> {{profile?.userPrincipalName}}</p>
<p><strong>Profile Id:</strong> {{profile?.id}}</p>
<br><br>
<p><strong>Token Expiration:</strong> {{tokenExpiration}}</p>
<br><br>
<p>Refreshing this page will continue to use the cached access token until it nears expiration, at which point a new access token will be requested.</p>
</div>