|
1 | 1 | # Call the Microsoft Graph API using OAuth from your web part
|
2 | 2 |
|
3 |
| -> Note. This article has not yet been verified with SPFx GA version, so you might have challenges on making this work as such with the latest release. |
4 |
| -
|
5 | 3 | You can add lots of great functionality such as email, documents, and calendar to your web part by integrating with the Microsoft Graph. To call APIs on Microsoft Graph you will need to use the Active Directory Authentication Library (ADAL) for JavaScript library and authenticate using the OAuth flow. There are some design considerations and code modifications to make for your web part to use ADAL JS and call Microsoft Graph APIs correctly and securely.
|
6 | 4 |
|
7 | 5 | ## Azure Active Directory authorization flows
|
@@ -50,12 +48,14 @@ After the authentication completes, Azure AD redirects you back to your applicat
|
50 | 48 |
|
51 | 49 | You can overcome the limitations in ADAL JS to implement OAuth successfully in your SharePoint Framework client-side web part.
|
52 | 50 |
|
| 51 | +> **Important:** The following guidance is based on ADAL JS v1.0.12. When adding ADAL JS to your SharePoint Framework projects, ensure that you're installing ADAL JS v1.0.12 or the guidance mentioned in this article will not work as expected. |
| 52 | +
|
53 | 53 | ### Load ADAL JS in your web part
|
54 | 54 |
|
55 | 55 | Web parts are built using TypeScript and distributed as AMD modules. Their modular architecture allows you to isolate the different resources used by the web part. ADAL JS is designed to register itself in the global scope, but you can load it in a web part by using the following code:
|
56 | 56 |
|
57 | 57 | ```ts
|
58 |
| -const AuthenticationContext = require('adal-angular'); |
| 58 | +import * as AuthenticationContext from 'adal-angular'; |
59 | 59 | ```
|
60 | 60 |
|
61 | 61 | This statement imports the `AuthenticationContext` class that exposes the ADAL JS functionality for use in web parts. Despite the name of the module, the `AuthenticationContext` class works with every JavaScript library.
|
@@ -173,7 +173,7 @@ The `popUp` property and the `callback` function are both already implemented in
|
173 | 173 | Next load the ADAL JS patch, the custom configuration interface, and your configuration object into the main component of your web part.
|
174 | 174 |
|
175 | 175 | ```tsx
|
176 |
| -const AuthenticationContext = require('adal-angular'); |
| 176 | +import * as AuthenticationContext from 'adal-angular'; |
177 | 177 | import adalConfig from '../AdalConfig';
|
178 | 178 | import { IAdalConfig } from '../../IAdalConfig';
|
179 | 179 | import '../../WebPartAuthenticationContext';
|
|
0 commit comments