Angular 8 - how to get data from url in callback route

Question

How to get access_token from keycloak server to my authorization component. The authorization url is looking as following:

http://localhost:8081/auth/realms/external/protocol/openid-connect/auth?client_id=myapp&redirect_uri=http%3A%2F%2Flocalhost%3A4200%2Fauth&response_type=token&scope=openid&nonce=test123

The callback url is in http://localhost:4200/auth , here is the component:

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from '@angular/router';

@Component({
selector: 'app-auth',
templateUrl: './auth.component.html',
styleUrls: ['./auth.component.scss']
})
export class AuthComponent implements OnInit {

constructor(private route: ActivatedRoute) { }

ngOnInit() {
    console.log(this.route.snapshot);
    console.log(this.route.snapshot);
}

}

After a successful login, access_token will be returned from keycloak, something like this:

http://localhost:4200/auth#access_token=qwerty123&session_time=123456789

My question is, how to get that to work, and getting the access_token.

simply read it from location.hash

Markus Dresch
– Markus Dresch

2020-02-07 10:41:06 +00:00
Commented Feb 7, 2020 at 10:41 — Markus Dresch
– Markus Dresch, Commented Feb 7, 2020 at 10:41

Ghonima · Accepted Answer · 2020-02-07 11:06:11Z

5

The following should work

 this.route.queryParams.subscribe(params => {
      const accesToken = this.route.snapshot.fragment
        .split("&")[0]
        .replace("/", "")
        .split("=")[1];
    });

answered Feb 7, 2020 at 11:06

Ghonima

3,1122 gold badges17 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 8 - how to get data from url in callback route

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related