| page_type | languages | products | description | urlFragment | ||||
|---|---|---|---|---|---|---|---|---|
sample |
|
|
A simple JavaScript single-page application calling Microsoft Graph API using msal.js (w/ AAD v2 endpoint) |
active-directory-javascript-graphapi-v2 |
A simple vanilla JavaScript single-page application which demonstrates how to configure MSAL.JS Core to login, logout, protect a route, and acquire an access token for a protected resource such as Microsoft Graph API.
Note: A quickstart guide covering this sample can be found here.
Note: A more detailed tutorial covering this sample can be found here.
| File/folder | Description |
|---|---|
AppCreationScripts |
Contains automation scripts for Powershell users (can be safely removed if desired). |
JavaScriptSPA |
Contains sample source files. |
authPopup.js |
Main authentication logic resides here (using Popup flow). |
authRedirect.js |
Use this instead of authPopup.js for authentication with redirect flow. |
authConfig.js |
Contains configuration parameters for the sample. |
graph.js |
Provides a helper function for calling MS Graph API. |
graphConfig.js |
Contains API endpoints for MS Graph. |
ui.js |
Contains UI logic. |
index.html |
Contains the UI of the sample. |
.gitignore |
Defines what to ignore at commit time. |
CHANGELOG.md |
List of changes to the sample. |
CODE_OF_CONDUCT.md |
Code of Conduct information. |
CONTRIBUTING.md |
Guidelines for contributing to the sample. |
LICENSE |
The license for the sample. |
package.json |
Package manifest for npm. |
README.md |
This README file. |
SECURITY.md |
Security disclosures. |
server.js |
Implements a simple Node server to serve index.html. |
Node must be installed to run this sample.
- Register a new application in the Azure Portal. Ensure that the application is enabled for the implicit flow.
- Open the /JavaScriptSPA/authConfig.js file and provide the required configuration values.
- On the command line, navigate to the root of the repository, and run
npm installto install the project dependencies via npm.
- Configure authentication and authorization parameters:
- Open
authConfig.js - Replace the string
"Enter_the_Application_Id_Here"with your app/client ID on AAD Portal. - Replace the string
"Enter_the_Cloud_Instance_Id_HereEnter_the_Tenant_Info_Here"with"https://login.microsoftonline.com/common/"(note: This is for multi-tenant applications located on the global Azure cloud. For more information, see the documentation). - Replace the string
"Enter_the_Redirect_Uri_Here"with the redirect uri you setup on AAD Portal.
- Open
- Configure the parameters for calling MS Graph API:
- Open
graphConfig.js. - Replace the string
"Enter_the_Graph_Endpoint_Herev1.0/me"with"https://graph.microsoft.com/v1.0/me". - Replace the string
"Enter_the_Graph_Endpoint_Herev1.0/me/messages"with"https://graph.microsoft.com/v1.0/me/messages".
- Open
- To start the sample application, run
npm start. - Finally, open a browser to http://localhost:3000.
This sample demonstrates the following MSAL workflows:
- How to configure application parameters.
- How to sign-in with popup and redirect methods.
- How to sign-out.
- How to get user consent incrementally.
- How to acquire an access token.
- How to make an API call with the access token.
If you'd like to contribute to this sample, see CONTRIBUTING.MD.
This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent