web-dev-qa-db-ja.com

Angular2はURLクエリパラメータを取得します

Angular2 WebアプリのFacebook登録を設定しています。アプリケーションがFacebook経由で（Facebook認証ページにリダイレクトされた後）受け入れられると、トークンとコードをurlパラメーターとしてwebappにリダイレクトします。

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

しかし、ページがロードされると、パラメーターは削除されます。 URLは次のようになります。

http://localhost:55976/

パラメータ（access_tokenとコード）を削除する前に抽出するにはどうすればよいですか？私のルーティング構成には次が含まれます：

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

編集：

Login.componentでfacebookにリダイレクトする方法は次のとおりです。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>

TypeScript：

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;
}

Facebook apiは http：// localhost：55976 /＃/ login / にリダイレクトします。これはaccess_tokenとコードパラメーターを取得しようとする場所です。

編集2：

リダイレクトURLのシャープを削除すると、facebookは適切なURLにリダイレクトしますが、シャープがないとangularはURLを解決できません。

「＃」を削除する前に：

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

「＃」を削除した後：

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

つまり、問題は鋭利なものに由来します。ただし、シャープがないと、angularはHTTPエラー404.0-見つかりませんを返します。

urlangularparametersrouting
25
Ben

最終的な作業コードは次のとおりです。

輸入：

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

コンストラクタ：

 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

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

これは私のために働く！ :)

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

constructor(private route: ActivatedRoute) { }

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

this postで私の答えを確認してください。

[更新]一部のモデレーターが重複回答であるという私の回答を削除したようです。しかし、各質問に基づいて関連するコードスニペットを投稿したため、私は同意しません。この回答が削除されない限り、回答の一部をここに再度投稿します。同意する場合は、私の回答の削除を取り消すために投票してください。

window.location.hashを使用して、＃から始まるすべてのパラメーターにアクセスします。または、window.location.hrefを使用して完全なURLにアクセスできます。トークンを取得するには、window.location.hash.match(/#access_token=([^&]+)/)[1]を使用できます。

注：TypeScriptを使用している場合は、コンポーネントにウィンドウをインポートする必要があります。

declare let window;
0
Rajiv