来自客户端 javascript 的错误 400 Cognito /oauth2/token 端点
Error 400 Cognito /oauth2/token endpoint from client-side javascript
我正在使用 AWS Cognito 托管 UI 进行注册和登录。没有定义应用客户端密码。
我正在尝试从浏览器 javascript 代码向 /oauth2/token 端点发出 API 调用,以便用 ID 令牌交换 autohorization_token。
问题是,当我通过 Postman 拨打电话时,Insomnia 工作正常。 但是,当我通过 [=52= 拨打同样的电话时] 从浏览器 它以 400 响应类型失败,我不太了解原因。
这是成功的 Insomnia 呼叫;
但是,当我通过 javascript 进行相同的调用时,它失败了。
我同时使用了 fetch 和 XMLHttpRequest,结果相同。
const XHR = new XMLHttpRequest();
let urlEncodedData = "",
urlEncodedDataPairs = [],
name;
urlEncodedDataPairs.push( encodeURIComponent( 'grant_type' ) + '=' + encodeURIComponent( 'authorization_code' ) );
urlEncodedDataPairs.push( encodeURIComponent( 'code' ) + '=' + encodeURIComponent( code ) );
urlEncodedDataPairs.push( encodeURIComponent( 'client_id' ) + '=' + encodeURIComponent( 'xxxxx' ) );
urlEncodedDataPairs.push( encodeURIComponent( 'redirect_url' ) + '=' + encodeURIComponent( 'https://www.xxx.me/xxx' ) );
XHR.addEventListener( 'load', function(event) {
alert( 'Yeah! Data sent and response loaded.' );
} );
// Define what happens in case of error
XHR.addEventListener( 'error', function(event) {
alert( 'Oops! Something went wrong.' );
});
// Set up our request
XHR.open( 'POST', 'https://xxx.auth.us-west-2.amazoncognito.com/oauth2/token' );
// Add the required HTTP header for form data POST requests
XHR.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded' );
// Finally, send our data.
XHR.send( urlEncodedData );
这是我得到的回复:
我用 fetch 尝试了相同的请求,结果是一样的。
let tokenRequest = new Request(tokenURL, {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
'Origin' : 'https://www.xxx.me'
},
body: new URLSearchParams({
'grant_type': 'authorization_code',
'code': code,
'client_id': 'xxx',
'redirect_url': 'https://www.xxx.me/xxx'
}).toString()
});
let response = await fetch(tokenRequest);
let data = await response.json();
当我检查浏览器开发人员工具是否有其他 POST 对内容类型为 application/x-www-form-urlencoded 的身份验证端点的调用时,我意识到一件事,它显示添加到 URL 的查询参数如下所示,但是,对于我的调用,参数未编码为 URL 的一部分。我不确定问题是否与此有关。
知道如何通过客户端进行此调用吗javascript?
看起来浏览器使用的 redirect_url
是错误的,而 Postman 使用的 redirect_uri
是正确的。此外,您应该使用 PKCE 使消息更安全 - 请参阅我的 blog post 的第 4 步和第 8 步以了解它的外观。
另请注意,在 OAuth 中,如果提供了无法识别的客户端 ID 或重定向 URI,通常不会 return 错误详细信息或 return 应用程序。如果这些都是正确的,您应该改为在响应负载中接收标准 OAuth error
和 error_description
字段。
我正在使用 AWS Cognito 托管 UI 进行注册和登录。没有定义应用客户端密码。
我正在尝试从浏览器 javascript 代码向 /oauth2/token 端点发出 API 调用,以便用 ID 令牌交换 autohorization_token。
问题是,当我通过 Postman 拨打电话时,Insomnia 工作正常。 但是,当我通过 [=52= 拨打同样的电话时] 从浏览器 它以 400 响应类型失败,我不太了解原因。
这是成功的 Insomnia 呼叫;
但是,当我通过 javascript 进行相同的调用时,它失败了。 我同时使用了 fetch 和 XMLHttpRequest,结果相同。
const XHR = new XMLHttpRequest();
let urlEncodedData = "",
urlEncodedDataPairs = [],
name;
urlEncodedDataPairs.push( encodeURIComponent( 'grant_type' ) + '=' + encodeURIComponent( 'authorization_code' ) );
urlEncodedDataPairs.push( encodeURIComponent( 'code' ) + '=' + encodeURIComponent( code ) );
urlEncodedDataPairs.push( encodeURIComponent( 'client_id' ) + '=' + encodeURIComponent( 'xxxxx' ) );
urlEncodedDataPairs.push( encodeURIComponent( 'redirect_url' ) + '=' + encodeURIComponent( 'https://www.xxx.me/xxx' ) );
XHR.addEventListener( 'load', function(event) {
alert( 'Yeah! Data sent and response loaded.' );
} );
// Define what happens in case of error
XHR.addEventListener( 'error', function(event) {
alert( 'Oops! Something went wrong.' );
});
// Set up our request
XHR.open( 'POST', 'https://xxx.auth.us-west-2.amazoncognito.com/oauth2/token' );
// Add the required HTTP header for form data POST requests
XHR.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded' );
// Finally, send our data.
XHR.send( urlEncodedData );
这是我得到的回复:
我用 fetch 尝试了相同的请求,结果是一样的。
let tokenRequest = new Request(tokenURL, {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
'Origin' : 'https://www.xxx.me'
},
body: new URLSearchParams({
'grant_type': 'authorization_code',
'code': code,
'client_id': 'xxx',
'redirect_url': 'https://www.xxx.me/xxx'
}).toString()
});
let response = await fetch(tokenRequest);
let data = await response.json();
当我检查浏览器开发人员工具是否有其他 POST 对内容类型为 application/x-www-form-urlencoded 的身份验证端点的调用时,我意识到一件事,它显示添加到 URL 的查询参数如下所示,但是,对于我的调用,参数未编码为 URL 的一部分。我不确定问题是否与此有关。
知道如何通过客户端进行此调用吗javascript?
看起来浏览器使用的 redirect_url
是错误的,而 Postman 使用的 redirect_uri
是正确的。此外,您应该使用 PKCE 使消息更安全 - 请参阅我的 blog post 的第 4 步和第 8 步以了解它的外观。
另请注意,在 OAuth 中,如果提供了无法识别的客户端 ID 或重定向 URI,通常不会 return 错误详细信息或 return 应用程序。如果这些都是正确的,您应该改为在响应负载中接收标准 OAuth error
和 error_description
字段。