ヘッダーによる基本認証 - Javascript XMLHttpRequest

Question

基本認証資格情報を必要とするAdyenテストAPIにアクセスしようとしています。 https://docs.adyen.com/developers/ecommerce-integration

ブラウザからAPIページにアクセスする際に資格情報が機能します。

しかし、XMLHttpRequestのPOSTリクエストでAPIにアクセスしようとしたとき、私は401権限応答を取得します。

Javascriptのコードショーをスクリーンショット

var url = "https://pal-test.adyen.com/pal/servlet/Payment/v25/authorise"; 

var username = "ws@Company.CompanyName"; 
var password = "J}5fJ6+?e6&lh/Zb0>r5y2W5t"; 
var base64Credentials = btoa(username+":"+password); 

var xhttp = new XMLHttpRequest(); 
xhttp.open("POST", url, true); 
xhttp.setRequestHeader("content-type", "application/json"); 
xhttp.setRequestHeader("Authorization", "Basic " + base64Credentials); 

var requestParams = XXXXXXXX; 
xhttp.send(requestParams); 

結果

Answer 1

PALはPayment Authorization APIです。あなた決してブラウザから呼び出すこと。バックエンドコードで支払いを送るためにユーザー名とパスワードを公開したいだけです。

クライアント側の暗号化では、暗号化はブラウザで行われます。暗号化されたデータを自分のサーバーに送信します。あなたのサーバーでは、次に、支払い承認要求（暗号化されたデータが要素の1つである、支払い額の額など）を作成します。

これをブラウザから実行することができれば、最終的なソリューションにより、買い物客は金額、通貨、支払いメタデータなどをJavaScriptレイヤーから変更することができます。これは事実ではありません。

認可がその理由で、「サーバー側」のドキュメントの統合部分の一部です：サーバーサイドの風景にあなたの好きな言語が異なる中CURLの実装に依存https://docs.adyen.com/developers/ecommerce-integration?ecommerce=ecommerce-integration#serverside

が、時間のほとんどはに簡単です見つける。

敬具、

Arnoud

Answer 2

「リクエスト方法： OPTIONS」、表示された詳細はのためであることを示しブラウザで自動的に作成されます。POSTでは使用できません。

OPTIONSリクエストが行われたときにブラウザがAuthorizationヘッダーを送信しない（送信できない）ため、プリフライトが失敗するため、ブラウザはあなたのPOSTに移動することはありません。

https://pal-test.adyen.com/pal/servlet/Payment/v25/authoriseがOPTIONSリクエストの認証を必要とする限り、POSTを成功させる方法はありません。

1. あなたのコードは、それがAuthorizationヘッダーとリクエストを送信したいブラウザを伝えます：何ここで起こっていることは、これがあるので

   理由があります。

2. お使いのブラウザでは、Authorizationヘッダーの要求でCORSプリフライトOPTIONSを実行して、サーバーがそのヘッダーを要求できることを確認する必要があります。
3. お使いのブラウザはOPTIONSチェックの全体の目的-because AuthorizationヘッダせずにサーバーにOPTIONS要求を送信し、それはそれを送信するためにOKだかどうかを確認することです。
4. そのサーバーはOPTIONS要求を表示しますが、要求にAuthorizationを許可する方法で応答するのではなく、そのヘッダーが存在しないため401で拒否します。
5. ブラウザはCORSプリフライトの応答を200または204にする代わりに、その401応答を取得します。したがって、ブラウザはすぐに停止し、コードからPOSTリクエストを試みることはありません。