Skip to content

Latest commit

 

History

History
85 lines (65 loc) · 4.56 KB

README.md

File metadata and controls

85 lines (65 loc) · 4.56 KB
Raw
page_type languages products description urlFragment
sample
javascript
typescript
angular
ms-graph
azure-active-directory
Demonstrates how to use MSAL Angular v2 to login, logout, protect a route, and acquire an access token for a protected resource such as Microsoft Graph.
ms-identity-javascript-angular-spa

Angular single-page application built with MSAL Angular v2 and Microsoft identity platform

This sample demonstrates how to use MSAL Angular v2 to login, logout, conditionally render components to authenticated users, and acquire an access token for a protected resource such as Microsoft Graph.

Features

This sample demonstrates the following MSAL Angular concepts:

  • Configuration
  • Login
  • Logout
  • Protecting a route
  • Acquiring an access token and calling Microsoft Graph

Contents

File/folder Description
AppCreationScripts Contains automation scripts for Powershell users (can be safely removed if desired).
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.
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 describing how to run the sample
package.json Package manifest for npm.
README.md This README file.
tsconfig.*.json TypeScript configuration files.
tslint.json TS Lint configuration files.

Note: This sample's structure was generated with the Angular CLI.

Getting Started

Prerequisites

Node.js must be installed to run this sample.

Setup

  1. Register a new application in the Azure Portal. Ensure that the application is enabled for the authorization code flow with PKCE. This will require that you redirect URI configured in the portal is of type SPA.
  2. Clone this repository git clone https://github.com/Azure-Samples/ms-identity-javascript-angular-spa.git
  3. Open the /src/app/app.module.ts file and provide the required configuration values.
    1. Replace the string "Enter_the_Application_Id_Here" with your app/client ID on AAD Portal.
    2. Replace the string "Enter_the_Cloud_Instance_Id_HereEnter_the_Tenant_Info_Here" with "https://login.microsoftonline.com/common/"

:information_soruce: if you would like to sign-in users with your tenant only, use your tenant ID instead of common. 1. Replace the string "Enter_the_Redirect_Uri_Here" with the redirect uri you setup on AAD Portal. 1. Replace the string "Enter_the_Graph_Endpoint_Herev1.0/me" with "https://graph.microsoft.com/v1.0/me"

  1. Open the /src/app/profile/profile.component.ts file and provide the required configuration value.
    1. Replace the string "Enter_the_Graph_Endpoint_Herev1.0/me" with "https://graph.microsoft.com/v1.0/me"
  2. On the command line, navigate to the root of the repository, and run npm install to install the project dependencies via npm.

ℹ️ To configure this app for tenants on Sovereign/National clouds, see: Use MSAL in a national cloud environment

Run the sample

  1. Start the sample application with npm start.
  2. 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.