How to retrieve parameters from URL fragment in Angular application?

Question

I use OAuth Implicit flow authentication method in my Angular application. To retrieve access token I need to parse parameters from following string:

http://localhost/authentication#access_token={0}&expires_in={1}&user_id={2}

After some investigation I did not find any mechanisms to retrieve parameters from such URLs (all mechanisms which I found are based on using manual string splitting. Does it mean that Angular doesn't have "out of the box" mechanisms to parse parameters from URL fragment and the best way to do this is use substring() or split() method?

constructor( private route: ActivatedRoute, private router: Router) { this.route .queryParams .subscribe(params => { console.log(params ); }); } can you try this in your root component — Anto Antony
– Anto Antony, Commented Nov 7, 2017 at 9:29
If you want to use fragment with queryParams, it should be like this: localhost/authentication?access_token={0}&expires_in={1}&user_id={2}#fragment_1 — xiaoke
– xiaoke, Commented Jan 9, 2019 at 21:52

Boulboulouboule · Accepted Answer · 2017-11-07 09:31:15Z

5

You can do it using the ActivatedRoute :

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    console.log(this.route.snapshot.fragment); // only update on component creation
    this.route.fragment.subscribe(
      (fragments) => console.log(fragments)
    ); // update on all changes
  }

To retrieve query parameters, just replace fragment by queryParams on this code.

answered Nov 7, 2017 at 9:31

Boulboulouboule

4,2271 gold badge15 silver badges30 bronze badges

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

4 Comments

user183101 Over a year ago

If I am not mistaken, your code won't work for me, because parameters in my URL are in the fragment. See this comment

Boulboulouboule Over a year ago

It works with fragments and queryParams. But your url seems to be wrong, you have &params without the first ?params, so maybe angular can't get the queryParams this way

user183101 Over a year ago

URL is correct according to OAuth specification. It seems like Angular can't parse parameters in fragments

Boulboulouboule Over a year ago

Ok, I see the problem. There is maybe a solution here : stackoverflow.com/questions/36665234/…

Rafael Castelo · Accepted Answer · 2022-08-16 15:39:59Z

3

Maybe it's a bit late, but could help someone in the same situation

With this code you should be able to retrieve the params pretty straightforward

this.activatedRoute.fragment.subscribe((fragment: string) => {
    const urlParams = new URLSearchParams(fragment);
    const accessToken = urlParams.get("access_token")
})

answered Aug 16, 2022 at 15:39

Rafael Castelo

1316 bronze badges

Comments

Jay Dee · Accepted Answer · 2021-03-24 20:34:57Z

1

constructor(private activatedRoute: ActivatedRoute) {

    const fragment = activatedRoute.snapshot.fragment;

    const parts = fragment.split('&');

    const params = parts.reduce((map, part) => {
        const pieces = part.split('=');
        map[pieces[0]] = pieces[1];
        return map;
    }, {});

    console.log(params);
}

answered Mar 24, 2021 at 20:34

Jay Dee

2,6961 gold badge21 silver badges25 bronze badges

Comments

monica · Accepted Answer · 2017-11-07 09:57:54Z

-2

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

@Component({...})
export class MyComponent implements OnInit {

  constructor(private activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    // subscribe to router event
    this.activatedRoute.params.subscribe((params: Params) => {
        let userId = params['user_id'];
        console.log(userId);
      });
  }

}

If you want to get the query parameters, replace this.activatedRoute.params with this.activatedRoute.queryParams.

answered Nov 7, 2017 at 9:57

monica

1,48415 silver badges29 bronze badges

2 Comments

user183101 Over a year ago

Please, see at the URL, which I presented above. As I understand, your solution works for cases without fragments (without symbol '#' in URL). In my case I get 'undefined' in console with your code.

monica Over a year ago

Okay. Then I think you will have to use the pure javascript method to parse such URL. In Angular, there is no such method to do so. You can see this answer stackoverflow.com/a/40058721/4865392 as well.

Collectives™ on Stack Overflow

How to retrieve parameters from URL fragment in Angular application?

4 Answers 4

4 Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related