{"id":2471,"date":"2019-04-10T12:03:17","date_gmt":"2019-04-10T10:03:17","guid":{"rendered":"https:\/\/www.angulararchitects.io\/?p=2471"},"modified":"2019-04-10T12:03:17","modified_gmt":"2019-04-10T10:03:17","slug":"authentication-in-angular-2-with-oauth2-oidc","status":"publish","type":"post","link":"https:\/\/www.angulararchitects.io\/en\/blog\/authentication-in-angular-2-with-oauth2-oidc\/","title":{"rendered":"Authentication In Angular 2 With OAuth2, OIDC"},"content":{"rendered":"
\n

\nUpdate in January 2017: This article now uses the new library angular2-oauth2-oidc and it has been updated for Angular 2.0.\n<\/p><\/blockquote>\n

The new router for Angualr 2 provides so called Guards to influence routing. Those are services with methods that are called when the router activates or deactivates a route. The names of this methods are canActivate<\/code> and canDeactivate<\/code>. If such a method returns true<\/code>, the router performs the current routing-action; otherwise it skips it. Furthermore, those methods can return an Observable<boolean><\/code> to postpone this decision.<\/p>\n

In in my post here<\/a> I've showed with an example how to use canDeactivate<\/code><\/a>. It displays a warning when the user tries to exit a route and gives them the option to decide to stay.<\/p>\n

This post shows how an application can use canActivate<\/code> to keep an unauthenticated or unauthorized user away from specific routes. This isn't really about security, cause in browser-based applications security has to be implemented at server-side. Rather it's about usability cause it gives the application the possibility to ask the user to login in such cases. The whole source code<\/a> of this sample can be found here<\/a>. Besides Guards it also uses the security standards OAuth 2<\/a> and OpenId Connect (OIDC)<\/a> to decouple the authentication and authorization from the application.<\/p>\n

Preperation<\/h1>\n

To use OAuth 2 and OIDC, the here described sample uses my implementation<\/a>, which can be installed via npm<\/a>:<\/p>\n

npm install angular-oauth2-oidc --save\n<\/code><\/pre>\n
After downloading this library, the application has to import the OAuthModule<\/code> in the AppModule<\/code>:<\/p>\n
import { OAuthModule } from 'angular-oauth2-oidc';\n\n[...]\n\n@NgModule({\n  imports: [\n    BrowserModule,\n    FormsModule,\n    HttpModule,\n    OAuthModule.forRoot()\n    [...]\n  ],\n  [...]\n})\nexport class AppModule {\n}\n\n<\/code><\/pre>\n
The top level component can be used to configure the OAuthServices<\/code>. The settings in the next sample point to an OAuth2\/OIDC Auth Server that is available online an can be used for testing:<\/p>\n
import {Component} from '@angular\/core';\nimport { OAuthService } from 'angular-oauth2-oidc';\n\n@Component({\n  selector: 'app', \/\/ <app><\/app>\n  templateUrl: '.\/app.component.html',\n})\nexport class AppComponent {\n\n  constructor(private oauthService: OAuthService) {\n\n    \/\/ URL of the SPA to redirect the user to after login\n    this.oauthService.redirectUri = window.location.origin + \"\/index.html\";\n\n    \/\/ The SPA's id. The SPA is registerd with this id at the auth-server\n    this.oauthService.clientId = \"spa-demo\";\n\n    \/\/ set the scope for the permissions the client should request\n    \/\/ The first three are defined by OIDC. The 4th is a usecase-specific one\n    this.oauthService.scope = \"openid profile email voucher\";\n\n    \/\/ set to true, to receive also an id_token via OpenId Connect (OIDC) in addition to the\n    \/\/ OAuth2-based access_token\n    this.oauthService.oidc = true; \/\/ ID_Token\n\n    \/\/ Use setStorage to use sessionStorage or another implementation of the TS-type Storage\n    \/\/ instead of localStorage\n    this.oauthService.setStorage(sessionStorage);\n\n    \/\/ Discovery Document of your AuthServer as defined by OIDC\n    let url = 'https:\/\/steyer-identity-server.azurewebsites.net\/identity\/.well-known\/openid-configuration';\n\n    \/\/ Load Discovery Document and then try to login the user\n    this.oauthService.loadDiscoveryDocument(url).then(() => {\n\n      \/\/ This method just tries to parse the token(s) within the url when\n      \/\/ the auth-server redirects the user back to the web-app\n      \/\/ It dosn't send the user the the login page\n      this.oauthService.tryLogin({});\n\n    });\n\n  }\n\n}\n<\/code><\/pre>\n
The method tryLogin<\/code> checks, whether the app has got security tokens via the hash-fragment of the URL. It parses those tokens and extracts information of the current user.<\/p>\n
In cases where this information is used for security-relevant procedures, the app has to validate the token. This is especially the case in hybrid and native apps that use it to access local resources. The following sample uses a callback to validate the token. For this, it calls a web api, that checks its signature:<\/p>\n
this.oauthService.tryLogin({\n    validationHandler: context => {\n        var search = new URLSearchParams();\n        search.set('token', context.idToken); \n        search.set('client_id', oauthService.clientId);\n        return http.get(validationUrl, { search }).toPromise();\n    }\n});\n<\/code><\/pre>\n
Login<\/h1>\n
To redirect the user to the login-form of the Auth Server, the app has only to call the method initImplicitFlow<\/code> that is provided by the OAuthService<\/code>.<\/p>\n
The method login<\/code> in the following sample shows this. The method logout<\/code> logs off the current user. For this purpose it deletes the saved tokens. If the service has been initialized with a logout url, it also redirects the user to this URL:<\/p>\n
import { Component } from '@angular\/core';\nimport { OAuthService} from 'angular2-oauth2\/oauth-service';\n\n@Component({\n    selector: 'home',\n    template: require('.\/home.component.html')\n})\nexport class HomeComponent {\n\n    constructor(private oauthService: OAuthService) {\n    }\n\n    public login() {\n        this.oauthService.initImplicitFlow();\n    }\n\n    public logout() {\n        this.oauthService.logOut();\n    }\n\n    public get userName() {\n\n        var claims = this.oauthService.getIdentityClaims();\n        if (!claims) return null;\n\n        return claims.given_name;\n    }\n\n}\n<\/code><\/pre>\n
In addition to that, the getter userName<\/code> tries to find out the user's first-name. For this, it accesses the claims that the library found within the security-token. The template of this component binds to those properties:<\/p>\n
<h1 *ngIf=\"!userName\">Welcome!<\/h1>\n<h1 *ngIf=\"userName\">Hello, {{userName}}!<\/h1>\n<p>Welcome to this demo-application.<\/p>\n<p>\n    <button (click)=\"login()\" class=\"btn btn-default\">Login<\/button>\n    <button (click)=\"logout()\" class=\"btn btn-default\">Logout<\/button>\n<\/p>    \n<p>\n    Username\/Passwort: max\/geheim\n<\/p>\n<\/code><\/pre>\n
Keeping away unauthorized users with guards<\/h1>\n
To keep unauthorized users away from some routes the application can use guards. The following sample shows an implementation for this. Its just an Angular-2-Service that implements CanActivate<\/code> and receives the OAuthService<\/code> by the means of dependency injection.<\/p>\n
The interface defines a method canActivate<\/code>. The presented implementation checks, whether there are the necessary security tokens. Those are an Access-Token (OAuth2) as well as an Id-Token (OpenId Connect). If there are both, it returns true<\/code> to signal the router that the component in question can be activated. Otherwise it skips the current routing-action by returning false<\/code>:<\/p>\n
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular\/router';\nimport { OAuthService } from 'angular-oauth2-oidc';\nimport { Injectable } from '@angular\/core';\n\n@Injectable()\nexport class FlightBookingGuard implements CanActivate {\n\n    constructor(private oauthService: OAuthService) {\n    }\n\n    canActivate(\n        route: ActivatedRouteSnapshot, \n        state: RouterStateSnapshot) {\n\n            var hasIdToken = this.oauthService.hasValidIdToken();\n            var hasAccessToken = this.oauthService.hasValidAccessToken();\n\n            return (hasIdToken && hasAccessToken);\n    }\n}\n<\/code><\/pre>\n
\nThe parameters of canActivate<\/code> inform about the current route as well as about the requested route.\n<\/p><\/blockquote>\n
In addition to that, the guard has to be registered with the property canActivate<\/code> in the routing-configuration. This property does not directly point to the guards to use but to tokens that can be used to request the guards via DI:<\/p>\n
import { RouterConfig, provideRouter } from '@angular\/router';\nimport { HomeComponent} from '.\/home\/home.component';\nimport { FlightSearchComponent} from '.\/flight-search\/flight-search.component';\nimport { PassengerSearchComponent} from '.\/passenger-search\/passenger-search.component';\nimport { FlightEditComponent} from '.\/flight-edit\/flight-edit.component';\nimport { FlightBookingComponent} from '.\/flight-booking\/flight-booking.component';\nimport { FlightBookingGuard} from '.\/flight-booking\/flight-booking.guard';\nimport { FlightEditGuard} from '.\/flight-edit\/flight-edit.guard';\nimport { InfoComponent} from '.\/info\/info.component';\nimport { DashboardComponent} from '.\/dashboard\/dashboard.component';\n\nconst APP_ROUTES: RouterConfig = [\n    {\n        path: '\/home',\n        component: HomeComponent,\n        index: true\n    },\n    {\n        path: '\/info',\n        component: InfoComponent,\n        outlet: 'aux'\n\n    },\n     {\n        path: '\/dashboard',\n        component: DashboardComponent,\n        outlet: 'aux'\n    },    \n    {\n        path: '\/flight-booking',\n        component: FlightBookingComponent,\n        canActivate: [FlightBookingGuard],\n        children: [\n            {\n                path: '\/flight-search',\n                component: FlightSearchComponent\n            },\n            {\n                path: '\/passenger-search',\n                component: PassengerSearchComponent\n            },\n            {\n                path: '\/flight-edit\/:id',\n                component: FlightEditComponent\n            }\n        ]\n    }\n];\n<\/code><\/pre>\n
In the current case, the guard is used as its token as well. Therefore, it can be directly mentioned within the provider configuration.<\/p>\n
import { OAuthModule } from 'angular-oauth2-oidc';\n\n[...]\n\n@NgModule({\n  imports: [\n    BrowserModule,\n    FormsModule,\n    HttpModule,\n    OAuthModule.forRoot()\n    [...]\n  ],\n  providers: [\n    FlightBookingGuard\n  ]\n  [...]\n})\nexport class AppModule {\n}\n\n<\/code><\/pre>\n
Calling a web api<\/h2>\n
To call a web api, the application has to pass the access-token. It can retrieve it from the method getAccessToken<\/code> of the OAuthService<\/code>. Usually, this Token has to be transmitted via the HTTP header Authorization<\/code>:<\/p>\n
public find(from: string, to: string) {\n    var url = this.baseUrl + \"\/api\/flight\";\n\n    var search = new URLSearchParams();\n    search.set('from', from);\n    search.set('to', to);\n\n    var headers = new Headers();\n    headers.set('Accept', 'text\/json');\n    headers.set('Authorization', 'Bearer ' + this.oauthService.getAccessToken())\n\n    return new Observable((observer: Observer<Flight[]>) => {\n        this.http\n            .get(url, { search, headers })\n            .map(resp => resp.json())\n            .subscribe((flights) => {\n                this.flights = flights;\n                observer.next(flights);\n            });\n    });\n}\n<\/code><\/pre>\n
The value Bearer<\/code> specifies that the passed value is a so called bearer token. This is a token that gives the bearer - here the SPA - the rights that are associated with it.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
And Guards For The Newest New Router [English Version]<\/p>\n","protected":false},"author":9,"featured_media":2997,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_price":"","_stock":"","_tribe_ticket_header":"","_tribe_default_ticket_provider":"","_ticket_start_date":"","_ticket_end_date":"","_tribe_ticket_show_description":"","_tribe_ticket_show_not_going":false,"_tribe_ticket_use_global_stock":"","_tribe_ticket_global_stock_level":"","_global_stock_mode":"","_global_stock_cap":"","_tribe_rsvp_for_event":"","_tribe_ticket_going_count":"","_tribe_ticket_not_going_count":"","_tribe_tickets_list":"[]","_tribe_ticket_has_attendee_info_fields":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-2471","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-unkategorisiert"],"acf":[],"yoast_head":"\nAuthentication In Angular 2 With OAuth2, OIDC - ANGULARarchitects<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.angulararchitects.io\/en\/blog\/authentication-in-angular-2-with-oauth2-oidc\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Authentication In Angular 2 With OAuth2, OIDC - ANGULARarchitects\" \/>\n<meta property=\"og:description\" content=\"And Guards For The Newest New Router [English Version]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.angulararchitects.io\/en\/blog\/authentication-in-angular-2-with-oauth2-oidc\/\" \/>\n<meta property=\"og:site_name\" content=\"ANGULARarchitects\" \/>\n<meta property=\"article:published_time\" content=\"2019-04-10T10:03:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"853\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Manfred Steyer, GDE\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@daniel\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Manfred Steyer, GDE\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/authentication-in-angular-2-with-oauth2-oidc\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/authentication-in-angular-2-with-oauth2-oidc\/\"},\"author\":{\"name\":\"Manfred Steyer, GDE\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/15628efa7af4475ffaaeeb26c5112951\"},\"headline\":\"Authentication In Angular 2 With OAuth2, OIDC\",\"datePublished\":\"2019-04-10T10:03:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/authentication-in-angular-2-with-oauth2-oidc\/\"},\"wordCount\":703,\"publisher\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/authentication-in-angular-2-with-oauth2-oidc\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg\",\"articleSection\":[\"Unkategorisiert\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/authentication-in-angular-2-with-oauth2-oidc\/\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/blog\/authentication-in-angular-2-with-oauth2-oidc\/\",\"name\":\"Authentication In Angular 2 With OAuth2, OIDC - ANGULARarchitects\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/authentication-in-angular-2-with-oauth2-oidc\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/authentication-in-angular-2-with-oauth2-oidc\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg\",\"datePublished\":\"2019-04-10T10:03:17+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/authentication-in-angular-2-with-oauth2-oidc\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.angulararchitects.io\/en\/blog\/authentication-in-angular-2-with-oauth2-oidc\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/authentication-in-angular-2-with-oauth2-oidc\/#primaryimage\",\"url\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg\",\"contentUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg\",\"width\":1280,\"height\":853},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/authentication-in-angular-2-with-oauth2-oidc\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.angulararchitects.io\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Authentication In Angular 2 With OAuth2, OIDC\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#website\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/\",\"name\":\"ANGULARarchitects\",\"description\":\"AngularArchitects.io\",\"publisher\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.angulararchitects.io\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\",\"name\":\"ANGULARarchitects\",\"alternateName\":\"SOFTWAREarchitects\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg\",\"contentUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg\",\"width\":644,\"height\":216,\"caption\":\"ANGULARarchitects\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/github.com\/angular-architects\",\"https:\/\/www.linkedin.com\/company\/angular-architects\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/15628efa7af4475ffaaeeb26c5112951\",\"name\":\"Manfred Steyer, GDE\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a0b59539674d8b71ea1c1f4764b11244b5f499203f1d11b40f37d8f3f90be033?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a0b59539674d8b71ea1c1f4764b11244b5f499203f1d11b40f37d8f3f90be033?s=96&d=mm&r=g\",\"caption\":\"Manfred Steyer, GDE\"},\"sameAs\":[\"https:\/\/x.com\/daniel\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Authentication In Angular 2 With OAuth2, OIDC - ANGULARarchitects","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.angulararchitects.io\/en\/blog\/authentication-in-angular-2-with-oauth2-oidc\/","og_locale":"en_US","og_type":"article","og_title":"Authentication In Angular 2 With OAuth2, OIDC - ANGULARarchitects","og_description":"And Guards For The Newest New Router [English Version]","og_url":"https:\/\/www.angulararchitects.io\/en\/blog\/authentication-in-angular-2-with-oauth2-oidc\/","og_site_name":"ANGULARarchitects","article_published_time":"2019-04-10T10:03:17+00:00","og_image":[{"width":1280,"height":853,"url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg","type":"image\/jpeg"}],"author":"Manfred Steyer, GDE","twitter_card":"summary_large_image","twitter_creator":"@daniel","twitter_misc":{"Written by":"Manfred Steyer, GDE","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/authentication-in-angular-2-with-oauth2-oidc\/#article","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/authentication-in-angular-2-with-oauth2-oidc\/"},"author":{"name":"Manfred Steyer, GDE","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/15628efa7af4475ffaaeeb26c5112951"},"headline":"Authentication In Angular 2 With OAuth2, OIDC","datePublished":"2019-04-10T10:03:17+00:00","mainEntityOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/authentication-in-angular-2-with-oauth2-oidc\/"},"wordCount":703,"publisher":{"@id":"https:\/\/www.angulararchitects.io\/en\/#organization"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/authentication-in-angular-2-with-oauth2-oidc\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg","articleSection":["Unkategorisiert"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/authentication-in-angular-2-with-oauth2-oidc\/","url":"https:\/\/www.angulararchitects.io\/en\/blog\/authentication-in-angular-2-with-oauth2-oidc\/","name":"Authentication In Angular 2 With OAuth2, OIDC - ANGULARarchitects","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/authentication-in-angular-2-with-oauth2-oidc\/#primaryimage"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/authentication-in-angular-2-with-oauth2-oidc\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg","datePublished":"2019-04-10T10:03:17+00:00","breadcrumb":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/authentication-in-angular-2-with-oauth2-oidc\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.angulararchitects.io\/en\/blog\/authentication-in-angular-2-with-oauth2-oidc\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/authentication-in-angular-2-with-oauth2-oidc\/#primaryimage","url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg","contentUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg","width":1280,"height":853},{"@type":"BreadcrumbList","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/authentication-in-angular-2-with-oauth2-oidc\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.angulararchitects.io\/en\/"},{"@type":"ListItem","position":2,"name":"Authentication In Angular 2 With OAuth2, OIDC"}]},{"@type":"WebSite","@id":"https:\/\/www.angulararchitects.io\/en\/#website","url":"https:\/\/www.angulararchitects.io\/en\/","name":"ANGULARarchitects","description":"AngularArchitects.io","publisher":{"@id":"https:\/\/www.angulararchitects.io\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.angulararchitects.io\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.angulararchitects.io\/en\/#organization","name":"ANGULARarchitects","alternateName":"SOFTWAREarchitects","url":"https:\/\/www.angulararchitects.io\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg","contentUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg","width":644,"height":216,"caption":"ANGULARarchitects"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/github.com\/angular-architects","https:\/\/www.linkedin.com\/company\/angular-architects\/"]},{"@type":"Person","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/15628efa7af4475ffaaeeb26c5112951","name":"Manfred Steyer, GDE","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/a0b59539674d8b71ea1c1f4764b11244b5f499203f1d11b40f37d8f3f90be033?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a0b59539674d8b71ea1c1f4764b11244b5f499203f1d11b40f37d8f3f90be033?s=96&d=mm&r=g","caption":"Manfred Steyer, GDE"},"sameAs":["https:\/\/x.com\/daniel"]}]}},"_links":{"self":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/2471","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/comments?post=2471"}],"version-history":[{"count":0,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/2471\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media\/2997"}],"wp:attachment":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media?parent=2471"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/categories?post=2471"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/tags?post=2471"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}