{"id":27583,"date":"2018-10-24T00:01:51","date_gmt":"2018-10-24T07:01:51","guid":{"rendered":"http:\/\/devblogs.microsoft.com\/premier-developer\/?p=27583"},"modified":"2019-02-14T20:17:47","modified_gmt":"2019-02-15T03:17:47","slug":"using-adal-js-with-angular4","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/premier-developer\/using-adal-js-with-angular4\/","title":{"rendered":"Using ADAL.js with Angular4+"},"content":{"rendered":"

In the following post, App Dev Managers Vishal Saroopchand<\/a> and Sr. Dev Consultant Hemant Kathuria explain how you can wrap ADAL.js with Angular4+.<\/p>\n

\n

This is an update post to a previous article<\/a> published in April 2017 explaining how to wrap ADAL.js with Angular2+. The previous article is no longer relevant given the changes to the Angular framework. This new post explains a reimplementation which uses the PathLocationStrategy and Angular features such as HttpInterceptor and InjectionToken.<\/p>\n

The project setup<\/h4>\n

This new sample was scaffolded with Angular-CLI 7.0.0-rc.1; it uses Bootstrap 3.3.7 to create a very basic layout. The top navbar has a Sign-in\/Sign-out buttons to trigger the OpenID Connect Implicit Flow with ADAL.js. Read more about OpenID Connect and AAD here<\/a>.<\/p>\n

Figure 1: Angular tools used in this sample<\/em><\/p>\n

\"1\"<\/a><\/p>\n

Register applications in Azure Active Directory<\/h4>\n

To run this sample, you must register two Azure AD Application.<\/p>\n

The first application named Client-App<\/strong> will be used for OpenID Connect Implicit Flow to fetch User Identity and claims. See the following link<\/a> for list of claims in the JWT Token.<\/p>\n

The second application named Server-App<\/strong> will used for the WebAPI resource. The Client-App<\/strong> (Angular SPA) will request an access token<\/b> for Server-App<\/strong> when route Values is activated. The access token<\/strong> will be used as the HttpRequest Authorization Header\/Bearer Token for WebAPI Authorization.<\/p>\n

Client-App Setup<\/p>\n

    \n
  1. In the Azure Portal, navigate to Azure Active Directory >App registrations, click\u202f New application registration<\/strong><\/li>\n<\/ol>\n
      \n
    1. Set Name to Client-App<\/strong><\/li>\n<\/ol>\n
        \n
      1. Set Application-Type to Web app \/ API<\/strong><\/li>\n<\/ol>\n
          \n
        1. Set Sign-on URL to http:\/\/localhost:4200\/frameredirect<\/strong><\/li>\n<\/ol>\n
            \n
          1. Press the\u202f Create<\/strong>\u202fbutton<\/li>\n<\/ol>\n

            Server-App Setup<\/p>\n

              \n
            1. In the Azure Portal, navigate to Azure Active Directory >App registrations, click\u202f New application registration<\/strong><\/li>\n<\/ol>\n
                \n
              1. Set Name to Service-App<\/strong><\/li>\n<\/ol>\n
                  \n
                1. Set Application-Type to Web app \/ API<\/strong><\/li>\n<\/ol>\n
                    \n
                  1. Set Sign-on URL to https:\/\/localhost:44351<\/strong><\/li>\n<\/ol>\n
                      \n
                    1. Press the Create<\/strong>\u202fbutton<\/li>\n<\/ol>\n

                      Edit application Client-App<\/strong>, click Edit Manifest, change property oauth2AllowImplicitFlow to true<\/strong> and Save<\/strong><\/p>\n

                      Edit application Client-App<\/strong>, click Settings > Required permissions > Add > Select an API<\/p>\n