使用 header - Javascript XMLHttpRequest 的基本身份验证

Question

我正在尝试访问需要基本身份验证凭据的 Adyen 测试 API。 https://docs.adyen.com/developers/ecommerce-integration

我的凭据在通过浏览器访问 API 页面时有效。

但是我在尝试使用 XMLHttpRequest POST 请求访问 API 时收到 401 Unauthorized 响应.

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

该屏幕截图显示“Request Method: OPTIONS”，这表明显示的详细信息是针对 CORS preflight OPTIONS request 由您的浏览器自动生成的，而不是针对您的 POST.

您的浏览器在发出 OPTIONS 请求时不会（也不能）发送 Authorization header，这会导致预检失败，因此浏览器永远不会继续尝试您的 POST.

只要 https://pal-test.adyen.com/pal/servlet/Payment/v25/authorise 要求对 OPTIONS 请求进行身份验证，就无法成功 POST。

原因是因为这里发生的事情是这样的：

您的代码告诉您的浏览器它想要发送带有 Authorization header.
您的浏览器说，好的，带有 Authorization header 的请求需要我进行 CORS 预检 OPTIONS 以确保服务器允许带有 header 的请求.
您的浏览器将 OPTIONS 请求发送到服务器 而没有 Authorization header — 因为 OPTIONS 检查是看是否可以发送。
该服务器看到 OPTIONS 请求，但没有以表明它允许 Authorization 请求的方式响应它，而是用 401 拒绝它，因为它缺少 header.
您的浏览器期望 CORS 预检响应为 200 或 204，但实际得到的是 401 响应。所以你的浏览器就停在那里，永远不会尝试来自你的代码的 POST 请求。

Answer 2

PAL 是付款授权API。您永远不会 想从浏览器调用它。您只想公开您的用户名和密码以在您的后端代码中发送付款。

在客户端加密中，加密是在浏览器中完成的。然后，您将加密数据发送到您自己的服务器。然后在您的服务器上创建一个付款授权请求（加密数据是其中的一个元素，以及付款金额等）。

如果您能够通过浏览器实现此运行，您的最终解决方案将允许您的购物者从 JavaScript 层更改金额、货币、支付元数据等。绝不会如此。

授权是文档 "Server side" 集成部分的一部分：https://docs.adyen.com/developers/ecommerce-integration?ecommerce=ecommerce-integration#serverside

根据您的服务器端环境，您最喜欢的语言的 CURL 实现会有所不同，但大多数情况下都很容易找到。

亲切的问候，

阿诺德

使用 header - Javascript XMLHttpRequest 的基本身份验证

Basic authentication with header - Javascript XMLHttpRequest

javascript

xmlhttprequest

cors

basic-authentication

adyen