EZCodeAdalAngular5

This sample is to showcase how to use ezcode-adal-angular5-sample library. ezcode-adal-angular5-sample is a component to secure your Angular 5 application by using adal.js library and Azure AD.

This sample demonstrated how to use this ezcode-adal-angular5-sample to communicate MS Graph API and any 3rd party API secured by Azure AD.

Setup

• Clone the git repository.
• Create a Azure AD App (Web app/Web API) with the following configurations:
  • Configure Azure AD App to use implicit authentication flow by update manifest.
  • Configure redirect url to http://localhost:4200 which is your local webparck server address.
• Create a adal configuration file ezcodeadalconfig.ts under service folder and update your tenant id, clientId to your Azure AD App configuration. If you want to call 3rd party API secured by Azure AD, make sure you enter the correct Web API url and Resource Id.

import {IEZCodeAdalConfig} from 'ezcode-adal-angular5/lib/IEZCodeAdalConfig';

export const ezcodeAdalConfigLocal: IEZCodeAdalConfig={
    tenant: '[your tenant name/id]',
    clientId: '[your client id]',
    redirectUri: window.location.href.substring(0, window.location.href.lastIndexOf("/")+1), 
    postLogoutRedirectUri: window.location.origin + '/',
    endpoints: {
        'https://graph.microsoft.com/v1.0/me': 'https://graph.microsoft.com',
        '[webapi url]': '[webapi resource id]'

    }
};

• run ng server --open. the application should be opened in your browser

Screenshot