Angular 6 Redirect для внешнего URL с помощью POST - PullRequest
Новая
       73

Angular 6 Redirect для внешнего URL с помощью POST

0 голосов
/ 26 ноября 2018

Я пытаюсь включить платежный шлюз в угловое приложение. Я обнаружил следующий фрагмент JavaScript, предоставленный партнером по платежам для регистрации, настроил его, добавив ngNoForm и заставив его работать с angular; 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, который предположительно будет делать то же самое, и перенаправить на веб-сайт платежного партнера, который должен заботиться о процессе оплаты, поэтому вкратце я хотел добитьсяТо же самое программно, я пытался: 

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, теперь получается, что вместо перенаправления на сайт партнера по оплате, HttpClientМетод POST на самом деле возвращает веб-страницу в виде строки из конечной точки службы, а это не то, что я хотел бы сделать,

Пожалуйста, обратитесь к этому stackBlitz , длядальнейшее понимание.

Итак, подведем итогЯ пытаюсь преобразовать POST-запрос, работающий на основе шаблона, в программную версию.поэтому я мог сначала выполнить некоторый набор операций, а затем перенаправить на внешний URL-адрес, используя POST.Я считаю, что то, что я пытаюсь программно, вероятно, отличается от того, что происходит с HTML <form> POST + Action.Должен быть некоторый программный эквивалент той же вещи.

PS : я нашел этот похожий вопрос, но, к сожалению, у него нет рабочего ответа.

PSS : я не могу использовать window.location.href или RouterLink в качестве предполагаемого POST, и предполагается, что такая информация, как сумма, валюта и другие вещи, должна быть передана партнеру по платежу вместе со стороной.

1 Ответ

0 голосов
/ 07 декабря 2018

Изначально я не думал, что это сработает, но после целой недели исследований и проб и ошибок.Это хорошо работает для меня, используя Angular 6. Вы, вероятно, можете использовать javascript или любой другой язык, который вы хотите.Как правило, необходимо выполнить 2 шага:

1) При вызове перенаправления формы входа в систему необходимо установить responsetType = 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 вы ожидаете получить это из успешного входа в систему и отправить обратно JSESSIONID с запросом API.В 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);
    }
}

Надеюсь, это поможет.

...