| page_type | languages | products | description | urlFragment | |||||
|---|---|---|---|---|---|---|---|---|---|
sample |
|
|
Demonstrates how to use MSAL Angular to login, logout, protect a route, and acquire an access token for a protected resource such as Microsoft Graph. |
active-directory-javascript-singlepageapp-angular |
This sample demonstrates how to use MSAL Angular to login, logout, protect a route, and acquire an access token for a protected resource such as Microsoft Graph.
Note: A quickstart guide covering this sample can be found here.
Note: A more detailed tutorial covering this sample can be found here.
This sample demonstrates the following MSAL Angular concepts:
- Configuration
- Login
- Logout
- Protecting a route
- Acquiring an access token and attaching it to http calls
| File/folder | Description |
|---|---|
AppCreationScripts |
Contains automation scripts for Powershell users (can be safely removed if desired). |
e2e |
End-to-end test files. |
src |
Sample source code. |
.editorconfig |
Defines editor config settings. |
.gitignore |
Define what to ignore at commit time. |
angular.json |
Angular configuration file. |
browserslist |
BrowsersList configuration file. |
CHANGELOG.md |
List of changes to the sample. |
CODE_OF_CONDUCT.md |
Code of Conduct information. |
CONTRIBUTING.md |
Guidelines for contributing to the sample. |
karma.conf.js |
Configuration for the karma test runner. |
LICENSE |
The license for the sample. |
NG_README.md |
README auto-generated by the Angular CLI. |
package-lock.json |
Lockfile for npm. |
package.json |
Package manifest for npm. |
README.md |
This README file. |
SECURITY.md |
Security disclosures. |
tsconfig.*.json |
TypeScript configuration files. |
tslint.json |
TS Lint configuration files. |
Note: This sample's structure was generated with the Angular CLI.
Node.js 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 src/app/app.module.ts and provide the required configuration parameters:
MsalModule.forRoot({
auth: {
clientId: 'Enter_the_Application_Id_Here',
authority: 'Enter_the_Cloud_Instance_Id_HereEnter_the_Tenant_Info_Here',
redirectUri: 'Enter_the_Redirect_Uri_Here',
},
cache: {
cacheLocation: 'localStorage',
storeAuthStateInCookie: isIE, // set to true for IE 11
},
},
{
popUp: !isIE,
consentScopes: [
'user.read',
'openid',
'profile',
],
unprotectedResources: [],
protectedResourceMap: [
['Enter_the_Graph_Endpoint_Herev1.0/me', ['user.read']]
],
extraQueryParameters: {}
})ℹ️ In order to support sign-ins with work and school accounts as well as personal Microsoft accounts, set your
authorityto use the common endpoint i.e.https://login.microsoftonline.com/common. Read more about msal.js configuration options.
- Install project dependencies from the command line by navigating to the root of the repository and running
npm install.
- Start the sample application with
npm start. - In your browser, navigate to http://localhost:4200.
How did we do? Consider taking a moment to share your experience with us.
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.