Skip to content

MSAL authentication example with Angular CLI and Material.

Notifications You must be signed in to change notification settings

benbaran/msal-angular-example

Repository files navigation

Msal Angular Example

Example Angular CLI application to demonstrate https://github.com/benbaran/msal-angular .

Change Log

2.0.0 - Updated to Angular 5 and msal-angular version 2 1.0.X - Initial Angular 4 version

How this Sample was Created

  1. Create the Application
npm install -g @angular/cli
ng new msal-angular-example --routing
  1. Install Angular Material
npm install --save @angular/material @angular/cdk
  1. Install Angular Animations and Import into app.module.ts
npm install --save @angular/animations
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [BrowserAnimationsModule],
  ...
})
  1. Create a Material Module to Export the Needed Components
ng g module material
import {MatButtonModule, MatToolbarModule} from '@angular/material';

@NgModule({
  ...
  imports: [MatButtonModule, MatToolbarModule],
  exports: [MatButtonModule, MatToolbarModule]
  ...
})
  1. Add Theming to Styles.css
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
  1. Install Hammer.js and Import into main.ts
npm install --save hammerjs

In main.ts:

import 'hammerjs';
  1. Add Material Icon Support

in index.html:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  1. Create a Toolbar Component to Handle Login
ng g component Toolbar
  1. Install msal-angular and Import into App.module.ts
npm install --save msal-angular
...
import { MsalModule } from 'msal-angular';
...

imports:
[
  ...
    [MsalModule.forRoot({
      clientID: 'eee52664-009c-4b22-9327-5aec0e623c98',
      graphScopes: ["openid"],
      signUpSignInPolicy: 'B2C_1_SiUpIn',
      tenant: 'xxx.onmicrosoft.com'
    })]
  ...
]

About

MSAL authentication example with Angular CLI and Material.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published