{"componentChunkName":"component---src-templates-tags-js","path":"/tags/authorisation/","result":{"data":{"allMarkdownRemark":{"totalCount":1,"edges":[{"node":{"id":"a1755fad-910d-5b55-b078-e92f70bf0398","html":"
\n

As a user I want to be able to login to system using my work account

\n
\n

This is one of the most famous lines in a user story in almost every project’s backlog.

\n\n

However, sometimes it might be the case that you are responsible to decide which authentication mechanism to be used.

\n
Note: The source code for this post can be found on my GitHub repository.
\n

You might decide to use Azure Active Directory (AAD) and if that’s the case this post will help you to get up to speed with that process. The assumption is that you have a single page application (SPA) and are using ASP.Net Core Web API as your supporting back-end.

\n

Also I will assume that you already have an Azure AD setup and have created an application with return URL localhost:4200. If you do not know how to do that please read this article.

\n
Note: the project structure I use here is not best practice and is only used to show you how you can utilise Azure AD as your authentication mechanism. However, I’ve used it in a large project and it has served me well in the development productivity.
\n

Setting up the projects

\n

We will need two projects, one for the APIs and one for the client side. I will use Angular CLI for the client side. So let’s create them. I’m also using Visual Studio 2017 but feel free to use Visual Studio Code or even command line.

\n

After creating your solution, you will need to create a web API project targeting .NET CORE 2.0. Do not select an authentication scheme at this time since we will configure it shortly.

\n

Then create an empty web project and use whatever name you like. For now I’ve used API and Web as my preferred names. Your project structure should look something like this by now:

\n

\n \n \n Copy\n \n \n

import { Injectable } from '@angular/core';\r\nimport { Observable } from 'rxjs/Observable';\r\nimport { Router, CanActivate, CanActivateChild,\r\n  ActivatedRouteSnapshot, RouterStateSnapshot,\r\n  NavigationExtras }\r\nfrom '@angular/router';\r\nimport { Adal4Service } from 'adal-angular4';\r\n\r\n@Injectable()\r\nexport class AuthGuard implements CanActivate, CanActivateChild {\r\n\r\n  constructor(\r\n    private router: Router,\r\n    private adalSvc: Adal4Service\r\n  ) { }\r\n\r\n  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {\r\n    if (this.adalSvc.userInfo.authenticated) {\r\n      return true;\r\n    } else {\r\n      this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });\r\n      return false;\r\n    }\r\n  }\r\n\r\n  canActivateChild(childRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {\r\n    return this.canActivate(childRoute, state);\r\n  }\r\n}
\n

As you can see I am using one of the packages we added earlier which helps configure our application to authenticate to Azure AD.

\n

Now that we have our guard, let create our routing (I’ve already added three components to the application called home, login and values):

\n\n \n Copy\n \n \n
import { Routes, RouterModule } from '@angular/router'\r\nimport { HomeComponent } from './components/home/home.component'\r\nimport { LoginComponent } from './components/login/login.component'\r\nimport { AuthGuard } from './services/authguard.service'\r\nimport { ValuesComponent } from './components/values/values.component'\r\n\r\nconst appRoutes: Routes = [\r\n  { path: '', component: HomeComponent },\r\n  { path: 'login', component: LoginComponent },\r\n  { path: 'values', component: ValuesComponent, canActivate: [AuthGuard] },\r\n  // otherwise redirect to home\r\n  { path: '**', redirectTo: '' },\r\n]\r\n\r\nexport const routing = RouterModule.forRoot(appRoutes)
\n

Now we can add our routing module to our application. Open the app.module.ts file and import and add router to it:

\n\n \n Copy\n \n \n
import { routing } from './app-routing';\r\n...\r\nimports: [\r\n  routing\r\n]
\n

We will need a login component which will handle the unauthorised requests:

\n\n \n Copy\n \n \n
import { Component } from '@angular/core';\r\nimport { ActivatedRoute, Router } from '@angular/router';\r\nimport { Adal4Service } from 'adal-angular4';\r\n\r\n@Component({\r\n  selector: 'app-login',\r\n  templateUrl: './login.component.html',\r\n  styleUrls: ['./login.component.css']\r\n})\r\nexport class LoginComponent {\r\n\r\n  constructor(\r\n    private route: ActivatedRoute,\r\n    private router: Router,\r\n    private adalSvc: Adal4Service\r\n  ) { }\r\n\r\n  login(): void {\r\n    const returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';\r\n\r\n    if (this.adalSvc.userInfo.authenticated) {\r\n      this.router.navigate([returnUrl]);\r\n    } else {\r\n      this.adalSvc.login();\r\n    }\r\n  }\r\n\r\n}
\n

Very straightforward, we just call login method on clicking a button. Of course you can do it on load without need to have a button, this will just makes debugging a bit easier.

\n

At this point let’s add the Azure configuration to our app. First we need to define the same Azure configuration that we used for our ASP.NET Core application. So head to your environments.ts and add them:

\n\n \n Copy\n \n \n
export const environment = {\r\n  production: false,\r\n  azureConfig: {\r\n    tenant: 'tenantname.onmicrosoft.com',\r\n    clientId: 'ca81dd3d-4cd9-4b50-b451-74df7f8838d5',\r\n    postLogoutRedirectUri: 'http://localhost:4200/',\r\n  },\r\n}
\n

The adal-angular4 requires the tenant Id and client id (which is the same as application id) and a post back URL. Remember that we’ve set the same when creating the application on Azure AD.

\n

Alright, time to initialise this service. Open up your app.component.ts file and import the Adal4Service from this package, then call init method and pass the above config to it:

\n\n \n Copy\n \n \n
import { Adal4Service } from 'adal-angular4';\r\nimport { Router } from '@angular/router';\r\nimport { environment } from '../environments/environment';\r\n\r\nexport class AppComponent implements OnInit {\r\n  isLoggedIn: boolean = false;\r\n\r\n  constructor(private adalSvc: Adal4Service, private router: Router) {\r\n    this.adalSvc.init(environment.azureConfig);\r\n  }\r\n\r\n  ngOnInit(): void {\r\n    this.adalSvc.handleWindowCallback();\r\n    this.isLoggedIn = this.adalSvc.userInfo.authenticated;\r\n  }\r\n\r\n  logout(): void {\r\n    this.adalSvc.logOut();\r\n  }\r\n}
\n

Because of that post back URL we’ve defined, we also need to handle the login callback coming from Azure AD. We do this by calling handleWindowCallback from the aforementioned service on init.

\n

Let’s define the HTML for the app component as well:

\n\r\n
\r\n
\r\n SPA App with Azure AD login\r\n
\r\n \r\n \r\n
\r\n\r\n\r\n
\r\n
\r\n \r\n
`, `2420558894456159700`)\"\n >\n \n Copy\n \n \n
<nav class=\"navbar navbar-inverse\">\r\n  <div class=\"container-fluid\">\r\n    <div class=\"navbar-header\">\r\n      <a class=\"navbar-brand\" href=\"#\">SPA App with Azure AD login</a>\r\n    </div>\r\n    <ul class=\"nav navbar-nav\">\r\n      <li><a [routerLink]=\"['/']\">Home</a></li>\r\n      <li><a [routerLink]=\"['/values']\">Values</a></li>\r\n    </ul>\r\n    <ul class=\"nav navbar-nav navbar-right\">\r\n      <li *ngIf=\"!isLoggedIn\">\r\n        <a [routerLink]=\"['/login']\"\r\n          ><span class=\"glyphicon glyphicon-log-in\"></span> Login</a\r\n        >\r\n      </li>\r\n      <li *ngIf=\"isLoggedIn\">\r\n        <a (click)=\"logout()\"\r\n          ><span class=\"glyphicon glyphicon-log-out\"></span> Logout</a\r\n        >\r\n      </li>\r\n    </ul>\r\n  </div>\r\n</nav>\r\n\r\n<div class=\"container-fluid\">\r\n  <div style=\"padding-top: 61px;\"></div>\r\n  <router-outlet></router-outlet>\r\n</div>
\n

It is very simple. We have a menu which is pointing to our routes, a login/logout button which is shown based on user current status, and the router outlet which will load the correspondent component.

\n

Let’s create our services which are required to finish our application. First we will need a base service which can extract the token from user object and add it to request header as bearer token:

\n {\r\n headers: Headers;\r\n\r\n constructor(private http: Http, private apiEndPointUrl: string, private adalService: Adal4Service) {\r\n\r\n this.headers = new Headers({ 'Content-Type': 'application/json' });\r\n let jwt = this.adalService.userInfo.token;\r\n this.headers.append('Authorization', 'Bearer ' + jwt);\r\n }\r\n\r\n getAll(): Observable {\r\n return this.http.get(this.apiEndPointUrl, { headers: this.headers }).map(\r\n (res: Response) => {\r\n return res.json() as any[];\r\n }).catch(this.handleError);\r\n }\r\n\r\n get(id: number): Observable {\r\n return this.http.get(this.apiEndPointUrl + '/' + id).map((value, i) => {\r\n return value.json()\r\n })\r\n .catch(this.handleError);\r\n }\r\n\r\n private handleError(error: any) {\r\n console.error('server error:', error);\r\n if (error instanceof Response) {\r\n let errMessage = '';\r\n try {\r\n errMessage = error.json().error;\r\n } catch (err) {\r\n errMessage = error.statusText;\r\n }\r\n return Observable.throw(errMessage);\r\n }\r\n return Observable.throw(error || 'server error');\r\n }\r\n}`, `43476645872144240000`)\"\n >\n \n Copy\n \n \n
import { Http, Response, Headers } from '@angular/http';\r\nimport { Inject, Injectable } from '@angular/core';\r\n\r\nimport 'rxjs/Rx';\r\nimport { Observable } from 'rxjs/Observable';\r\nimport 'rxjs/add/observable/throw';\r\nimport { Observer } from 'rxjs/Observer';\r\nimport 'rxjs/add/operator/map';\r\nimport 'rxjs/add/operator/catch';\r\n\r\nimport { Adal4Service } from 'adal-angular4';\r\nimport { APP_CONFIG, AppConfig } from '../app.constants';\r\n\r\n@Injectable()\r\nexport class SecureHttpService<T> {\r\n  headers: Headers;\r\n\r\n  constructor(private http: Http, private apiEndPointUrl: string, private adalService: Adal4Service) {\r\n\r\n    this.headers = new Headers({ 'Content-Type': 'application/json' });\r\n    let jwt = this.adalService.userInfo.token;\r\n    this.headers.append('Authorization', 'Bearer ' + jwt);\r\n  }\r\n\r\n  getAll(): Observable<any> {\r\n    return this.http.get(this.apiEndPointUrl, { headers: this.headers }).map(\r\n      (res: Response) => {\r\n        return res.json() as any[];\r\n      }).catch(this.handleError);\r\n  }\r\n\r\n  get(id: number): Observable<any> {\r\n    return this.http.get(this.apiEndPointUrl + '/' + id).map((value, i) => {\r\n      return <T>value.json()\r\n    })\r\n      .catch(this.handleError);\r\n  }\r\n\r\n  private handleError(error: any) {\r\n    console.error('server error:', error);\r\n    if (error instanceof Response) {\r\n      let errMessage = '';\r\n      try {\r\n        errMessage = error.json().error;\r\n      } catch (err) {\r\n        errMessage = error.statusText;\r\n      }\r\n      return Observable.throw(errMessage);\r\n    }\r\n    return Observable.throw(error || 'server error');\r\n  }\r\n}
\n

I am using a generic class which can be used later using TypeScript features (which I love). In the constructor we need an instance of HTTP service, the base URL and the Adal4Service to extract the token from.

\n

Now let’s add our values service:

\n {\r\n constructor(\r\n http: Http,\r\n @Inject(APP_CONFIG) appConfig: AppConfig,\r\n adalService: Adal4Service\r\n ) {\r\n super(http, appConfig.baseUrl + 'values', adalService)\r\n }\r\n}`, `41054761428516454000`)\"\n >\n \n Copy\n \n \n
import { Injectable, Inject } from '@angular/core'\r\nimport { Http } from '@angular/http'\r\nimport { APP_CONFIG, AppConfig } from '../app.constants'\r\nimport { Adal4Service } from 'adal-angular4'\r\nimport { SecureHttpService } from './secure-http.service'\r\n\r\n@Injectable()\r\nexport class ValuesService extends SecureHttpService<string> {\r\n  constructor(\r\n    http: Http,\r\n    @Inject(APP_CONFIG) appConfig: AppConfig,\r\n    adalService: Adal4Service\r\n  ) {\r\n    super(http, appConfig.baseUrl + 'values', adalService)\r\n  }\r\n}
\n

Now you know what was the benefit of having that generic class, it’s superb isn’t it?

\n
Note: I am using an config object which can be injected anywhere.
\n

The source code for that is very simple:

\n 'app.config'\r\n\r\n@NgModule({\r\n providers: [\r\n {\r\n provide: APP_CONFIG,\r\n useValue: APP_CONSTANTS,\r\n },\r\n ],\r\n})\r\nexport class AppConfigModule {}`, `69311090895422865000`)\"\n >\n \n Copy\n \n \n
import { InjectionToken, NgModule } from '@angular/core'\r\n\r\nexport class AppConfig {\r\n  baseUrl: string\r\n}\r\n\r\nexport const APP_CONSTANTS: AppConfig = {\r\n  baseUrl: 'http://localhost:4200/api/',\r\n}\r\n\r\nexport let APP_CONFIG = new InjectionToken() < AppConfig > 'app.config'\r\n\r\n@NgModule({\r\n  providers: [\r\n    {\r\n      provide: APP_CONFIG,\r\n      useValue: APP_CONSTANTS,\r\n    },\r\n  ],\r\n})\r\nexport class AppConfigModule {}
\n

Alright, time to consume the values service in the values component:

\n;\r\n\r\n constructor(private service: ValuesService) {\r\n this.service.getAll().subscribe(x => this.values = x);\r\n }\r\n}`, `40164968308270940000`)\"\n >\n \n Copy\n \n \n
import { Component } from '@angular/core';\r\nimport { ValuesService } from '../../services/values.service';\r\n\r\n@Component({\r\n  selector: 'app-values',\r\n  templateUrl: './values.component.html',\r\n  styleUrls: ['./values.component.css']\r\n})\r\nexport class ValuesComponent {\r\n  values: Array<string>;\r\n\r\n  constructor(private service: ValuesService) {\r\n    this.service.getAll().subscribe(x => this.values = x);\r\n  }\r\n}
\n

And the HTML:

\n\r\n

You're in, well done...

\r\n
\r\n
    \r\n
  • {{value}}
    • \r\n
\r\n
\r\n`, `77822185331902410000`)\"\n >\n \n Copy\n \n \n
<div class=\"col-xs-12\">\r\n  <h1>You're in, well done...</h1>\r\n  <div class=\"well\">\r\n    <ul>\r\n      <li *ngFor=\"let value of values\">{{value}}</li>\r\n    </ul>\r\n  </div>\r\n</div>
\n

Finishing touches

\n

It is not time to glue everything together. Open your app.module.ts and add all the services you need (components will get added when you add them using ng g component command):

\n\n \n Copy\n \n \n
import { BrowserModule } from '@angular/platform-browser'\r\nimport { NgModule } from '@angular/core'\r\nimport { Adal4Service, Adal4HTTPService } from 'adal-angular4'\r\nimport { HttpModule, Http } from '@angular/http'\r\nimport { AppComponent } from './app.component'\r\nimport { HomeComponent } from './components/home/home.component'\r\nimport { LoginComponent } from './components/login/login.component'\r\nimport { ValuesComponent } from './components/values/values.component'\r\nimport { AppConfigModule } from './app.constants'\r\nimport { AuthGuard } from './services/authguard.service'\r\nimport { routing } from './app-routing'\r\nimport { ValuesService } from './services/values.service'\r\nimport { SecureHttpService } from './services/secure-http.service'\r\n\r\n@NgModule({\r\n  declarations: [AppComponent, HomeComponent, LoginComponent, ValuesComponent],\r\n  imports: [BrowserModule, AppConfigModule, HttpModule, routing],\r\n  providers: [\r\n    AuthGuard,\r\n    SecureHttpService,\r\n    ValuesService,\r\n    Adal4Service,\r\n    {\r\n      provide: Adal4HTTPService,\r\n      useFactory: Adal4HTTPService.factory,\r\n      deps: [Http, Adal4Service],\r\n    },\r\n  ],\r\n  bootstrap: [AppComponent],\r\n})\r\nexport class AppModule {}
\n

As you can see we’ve provided all the required service we added. Also configured the Adal4HTTPService which then will get used by Adal4Service and specified its dependencies.

\n

Proxy

\n

Since we are using two different project we will need to let Angular CLI know when to delegate the requests to our ASP.NET Core APIs. For that you can simply create a proxy and use it when using ng serve:

\n\n \n Copy\n \n \n
{\r\n  \"/api\": {\r\n    \"target\": \"http://localhost:51009/\",\r\n    \"secure\": false\r\n  }\r\n}
\n

The port defined above need to be the port that is used to lunch you API application. Also you will need to let ng know it should use a proxy. Open your package.json and replace ng serve with:

\n\n \n Copy\n \n \n
ng serve --proxy-config proxy.conf.json
\n

Now run dotnet run in root of APIs and run npm start from the root of the Web folder. And it is all done. When you click on values menu you will be redirected to your Azure AD where you can login and then you will be redirected back to your application and the values will be loaded.

\n

Hope you will benefit from this post and remember to spread it (short link) where you see fit.

\n

Again the complete source code can be found on my GitHub repository.

\n

Hope you’ve enjoyed this article.

","timeToRead":11,"frontmatter":{"title":"Integrating your SPA with Azure AD","unformattedDate":"2017-09-28 15:10","date":"Sep 28, 2017","path":"integrating-spa-azure-ad/","author":"Yaser Adel Mehraban","tags":["angular","aspnetcore","authentication","authorisation","azureactivedirectory","security","spa"],"thumbnail":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","placeholder":{"fallback":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAIAAAC9o5sfAAAACXBIWXMAAAsTAAALEwEAmpwYAAABRUlEQVR42o1QTUvDQBDNn/PkwUt/g4fePQpKQRBRvHjsKSheBIXSCgW1lnqwiEitSWuTSm2iMRvopkma7s5sXROtxYL6GJbd2fcxjDKZA6CwKNdt2np29Z5rejGNUfbFHFP58UYhrAFrOrH2Oto6d4ra4NEduwH8IU7/OIp6P1Zv/Y7HcmekoAWGx0gI/0pmjDV75FJ3IgYxR1lDhgxEMhSigNn6EAvxbQoAoyjgbCSbgDD5FYpkSx4iykva4iBdP41mqTR2LL/lRJ2XsG37bRL1FEJIo9EwTZNSKhJMNZE/EEm4NJdnqbu7Vl5YPVpaP87kyov5u6zieZ5hGNVqNQzDND+dRWJI3pDzqbjY3dm+yujth1rleq+SzTeXFbkhmamqqm3b6cL4F6jr8PEYk1kETGrWwf79yk2/dHpxcljfKDxtvgO47PfJbtLflwAAAABJRU5ErkJggg=="},"backgroundColor":"transparent","images":{"fallback":{"src":"/static/e428f44570985d8b21321d2f036238ae/ec741/basics_of_auth_in_aad.png","srcSet":"/static/e428f44570985d8b21321d2f036238ae/ec741/basics_of_auth_in_aad.png 656w","sizes":"(min-width: 656px) 656px, 100vw"},"sources":[{"srcSet":"/static/e428f44570985d8b21321d2f036238ae/760cf/basics_of_auth_in_aad.webp 656w","type":"image/webp","sizes":"(min-width: 656px) 656px, 100vw"}]},"width":656,"height":297}}}}}}]}},"pageContext":{"tag":"authorisation"}},"staticQueryHashes":[],"slicesMap":{}}