it-swarm.com.de

Angular2 ruft URL-Abfrageparameter ab

Ich richte eine Facebook-Registrierung für meine Angular2-Web-App ein .. Wenn die Anwendung über Facebook akzeptiert wurde (nachdem sie auf die Facebook-Autorisierungsseite umgeleitet wurde), wird sie mit Token und Code als URL-Parameter an meine WebApp weitergeleitet:

http://localhost:55976/?#access_token=MY_ACCESS_TOKEN&code=MY_CODE

Sobald die Seite geladen ist, werden die Parameter jedoch entfernt. Die URL wird zu:

http://localhost:55976/

Wie kann ich die Parameter (access_token und code) extrahieren, bevor sie entfernt werden? Meine Routing-Konfiguration enthält:

{ path: 'login', component: LoginComponent },
{ path: 'login/:access_token/:code', component: LoginComponent },

EDIT:

So leite ich in meiner login.component zu facebook weiter: Html:

<a class="btn btn-social btn-facebook socialaccount_provider facebook" title="Facebook" href="#" (click)="login_facebook()">
    <span class="fa fa-facebook"></span> <span style="padding-left:25px">Sign in with Facebook</span>
</a>

Typoskript:

login_facebook() {
    let url = 'https://www.facebook.com/dialog/oauth?'+
        'client_id=my_client_id' +
        '&redirect_uri=' + encodeURIComponent('http://localhost:55976/#/login/') +
        '&response_type=code%20token';
    console.log(url);
    window.location.href = url;
}

Die Facebook-API-Weiterleitung zu http: // localhost: 55976/#/login/ , hier versuche ich, die Parameter access_token und code zu erhalten.

EDIT 2:

Wenn ich die scharfe URL in der Weiterleitungs-URL entferne, leitet mich Facebook zur guten URL um, aber ohne die scharfe, kann eckige die URL nicht auflösen.

Vor dem Entfernen von '#':

redirect_uri: http://localhost:55976/#/login/
facebook return: http://localhost:55976/?#access_token=MY_ACCESS_TOKEN&code=MY_CODE

Nach dem Entfernen von '#':

redirect_uri: http://localhost:55976/login/
facebook return: http://localhost:55976/login/?#access_token=MY_ACCESS_TOKEN&code=MY_CODE

Das bedeutet, dass das Problem von der Spitze kommt. Aber ohne die scharfe, kantige gibt HTTP Error 404.0 - Not Found zurück.

25
Ben

Hier ist mein endgültiger Arbeitscode:

Importe:

import { Router, NavigationCancel } from '@angular/router';
import { URLSearchParams, } from '@angular/http';

Konstrukteur:

 constructor(public router: Router) {
    router.events.subscribe(s => {
      if (s instanceof NavigationCancel) {
        let params = new URLSearchParams(s.url.split('#')[1]);
        let access_token = params.get('access_token');
        let code = params.get('code');
      }
    });
  }
15
Ben

Sie suchen nach Abfrageparameter von ActivatedRoute.

Um sie zu erhalten, können Sie sie wie folgt in die OnInit -Funktion Ihrer Komponente einfügen:

private accesstoken;
private code;

constructor(private route: ActivatedRoute) { }

ngOnInit() {
  // Capture the access token and code
  this.route
      .queryParams
      .subscribe(params => {
          this.accesstoken = params['#access_token'];
          this.code = params['code'];
      });

  // do something with this.code and this.accesstoken
}

Es gibt weitere Beispiele in dem Link, den ich oben gesetzt habe. Sie haben möglicherweise Probleme mit angular), da der Router auch Fragmente identifiziert, die mit # ... If = beginnen angular identifiziert es als Fragment, dann können Sie einfach das von ActivatedRoute beobachtbare Fragment abonnieren und mach es so.

Ich bin nicht sicher, ob Sie umgeleitet werden. In diesem Fall könnten Sie die Verwendung der Navigationsoption preserveQueryParams untersuchen.

this.router.navigate([redirect], {preserveQueryParams: true});
28

mit Javascript:

(new URL(location)).searchParams.get("parameter_name")
4
Jay Shah
getQueryParams( locationSearch: string):any {
    let params = {};
    if( locationSearch ) {
        locationSearch = locationSearch.split('?')[1];
        let splited = locationSearch.split('&');
        for( let i = 0; i < splited.length; i++ ) {
            let propName = splited[i].split('=')[0];
            let propValue = splited[i].split('=')[1];
            params[propName] = propValue;
        }
    }

    return params;
}

let q = getQueryParams( location.search );
2
Alex Chaliy

Das funktioniert bei mir! :) 

import { ActivatedRoute } from '@angular/router'; 

constructor(private route: ActivatedRoute) { }

/** usage in the method */
let projectId = this.route.snapshot.queryParams.projectId;
1
Tejashree

Überprüfe meine Antwort in this post.

[UPDATE] Es scheint, als hätte ein Moderator meine Antwort gelöscht und gesagt, es sei eine doppelte Antwort. Ich stimme dem jedoch nicht zu, da ich zu jeder Frage relevante Codeausschnitte veröffentlicht habe. Bis diese Antwort nicht wiederhergestellt ist, poste ich den Teil der Antwort hier noch einmal. Wenn Sie damit einverstanden sind, stimmen Sie bitte, um meine Antwort wiederherzustellen.


Verwenden Sie window.location.hash, um auf alle Parameter zuzugreifen, die von # ..__ beginnen. Oder verwenden Sie window.location.href, um auf die vollständige URL ..__ zuzugreifen. Um das Token zu erhalten, können Sie window.location.hash.match(/#access_token=([^&]+)/)[1] verwenden.

Hinweis: Wenn Sie TypeScript verwenden, müssen Sie das Fenster in Ihre Komponente importieren.

declare let window;

0
Rajiv