web-dev-qa-db-ja.com

Angular 6 POSTを使用して外部URLにリダイレクトします

私は支払いゲートウェイをangularアプリに組み込んでいます、組み込みのために支払いパートナーから提供された次のJavaScriptスニペットを見つけました、私は ngNoForm を追加して微調整し、それを機能させました角度付き; stackBlitz

<form ngNoForm method="post" action="https://test.pesopay.com/b2cDemo/eng/payment/payForm.jsp">
<input type="hidden" name="amount" value="1" >
<input type="hidden" name="currCode" value="608" >
<input type="hidden" name="payMethod" value="CC">
<input type="submit" name="submit">
</form>

次に、コンポーネントテンプレートから直接HTML <Form> POST + Actionを使用するのではなく、RESTを呼び出して他の手順を実行し、そのAPI応答を支払いパートナーにマッピングしますを期待してから、HttpClient POSTを使用して支払いパートナーにリダイレクトします。これはおそらく同じことを行い、支払いプロセスを処理することになっている支払いパートナーのWebサイトにリダイレクトします。プログラムで同じことを達成したかったので、私は試しました：

redirectToPaymentHandler(): Observable<any> {
  const urlEncodeData = 'amount=1&currCode=608&payMethod=CC';
  let headers = new HttpHeaders();
  headers = headers.append('Content-Type', 'application/x-www-form-urlencoded');
  headers = headers.append('Accept', 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8');

  return this.httpClient.post('https://test.pesopay.com/b2cDemo/eng/payment/payForm.jsp',
    urlEncodeData, {
      headers,
      responseType: 'text'
    }).pipe(catchError((error) => {
      console.log(error)
      return EMPTY;
    }));
}

最初にCORSの問題が発生しましたが、Angular CLIのプロキシ設定を使用してそれを回避できましたが、今は支払いパートナーのWebサイトにリダイレクトする代わりに、HttpClientのPOSTメソッドは実際にサービスエンドポイントからWebページを文字列として返します。

詳細については、この stackBlitz を参照してください。

まとめると、基本的には上記の動作するテンプレート駆動型POSTリクエストをプログラムバージョンに変換しようとしています。そのため、最初にいくつかの操作を実行してから、POSTを使用して外部URLにリダイレクトできます。私がプログラムで試みていることは、おそらくHtml <form> POST + Actionに対して行われることとは異なると思います。同じこととプログラムで同等のものがあるはずです。

P.S：私は this 同様の質問を見つけましたが、残念ながら有効な答えがありません。

PSS：window.location.hrefまたはRouterLinkは、POST =金額や通貨などの情報が一緒に支払いパートナーに渡されるはずです。

angularangular-httpangular-httpclient
6
Saif

最初はこれでうまくいくとは思いませんでしたが、1週間研究と試行錯誤を繰り返しました。 Angular 6.を使用して、私にとってはうまく機能しています。おそらく、JavaScriptまたは他の任意の言語を使用できます。基本的に、2つの手順に従う必要があります。

1）ログインフォームのリダイレクトを呼び出すときは、respontType = textを設定して、HttpClientがJSONデータを予期してエラーをスローしないようにする必要があります。

return  this.http.post(this.Host_URL+'login' ,params1.toString(), 
{
    headers:  headers,
    withCredentials: true,
    observe: 'response',
    params: params1,
    responseType: 'text',
    reportProgress: true
})

2）サブシーケンスAPIリクエストをインターセプトするインターセプターをセットアップします（エンドポイントがjsonを返すと仮定します）。インターセプターで、withCredentials = trueを渡します。 JavaScriptまたはCurlでは、ログインから成功したものを取得し、APIで[〜＃〜] jsessionid [〜＃〜]を返信することが期待されます。リクエスト。 Angularでは、インターセプターにwithCredentials = trueのみが必要です。 *注：リクエストを行う前に、これをHttpHeadersで渡すことはできません。 バグレポートはこちら を参照してください。

以下は、Interceptorのコードスニペットです。

@Injectable()
export class WithCredentialsInterceptor implements HttpInterceptor {

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        console.log("Intercepting Request withCredentials=true ");
        request = request.clone({
            withCredentials: true
        });

        return next.handle(request);
    }
}

これがお役に立てば幸いです。

1
Jak Ratiwanich