page_type

languages

products

description

urlFragment

sample

javascript

nodejs

azure-active-directory

microsoft-authentication-library

angular

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

MSAL Angular Sample Application

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.

Key concepts

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.

Prerequisites

Node.js must be installed to run this sample.

Setup

Register a new application in the Azure Portal. Ensure that the application is enabled for the implicit flow.
Open src/app/app.module.ts. Inside MsalModule.forRoot provide the required configuration values -in particular: clientId, authority, redirectUri and protectedResourceMap.

    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']] // activates MsalGuard for the listed resources here
      ],
      extraQueryParameters: {}
    })

Note: In order to support sign-ins with work and school accounts as well as personal Microsoft accounts, set your authority to 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.

Run the sample

Start the sample application with npm start.
In your browser, navigate to http://localhost:4200.

Contributing

If you'd like to contribute to this sample, see CONTRIBUTING.MD.

Code of Conduct

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.

ColombusAH/active-directory-javascript-singlepageapp-angular