我正在构建一个使用 Caspio API 的应用程序.我在针对他们的 API 进行身份验证时遇到了一些问题。我花了 2-3 天的时间试图解决这个问题,但这可能是由于我的一些理解。我已经阅读了无数关于 stackoverflow 帖子的文章,但没有解决问题。下面是我的解决方案的代码示例,基于我所查看的内容,我收到了 400 状态代码消息;我在这里做错了什么? (请提供注释良好的代码示例,我希望不要在此处发布引用其他 Material 的链接,因为我已经广泛查看了这些 Material 。谢谢!):
我看过的一些引用资料:
1) Pure JavaScript code for HTTP Basic Authentication?
2) How to make http authentication in REST API call from javascript
我想使用下面 caspio 描述的这种身份验证方法:
作为在请求正文中包含凭据的替代方法,客户端可以使用 HTTP 基本身份验证方案。在这种情况下,身份验证请求将按以下方式设置:
方法: POST
URL:您的 token 端点
正文: grant_type=client_credentials
header 参数:
授权: Basic 基本认证领域
下面是我的 Javascript 和 HTML 代码。
JavaScript:
var userName = "clientID";
var passWord = "secretKey";
function authenticateUser(user, password)
{
var token = user + ":" + password;
// Should i be encoding this value????? does it matter???
// Base64 Encoding -> btoa
var hash = btoa(token);
return "Basic " + hash;
}
function CallWebAPI() {
// New XMLHTTPRequest
var request = new XMLHttpRequest();
request.open("POST", "https://xxx123.caspio.com/oauth/token", false);
request.setRequestHeader("Authorization", authenticateUser(userName, passWord));
request.send();
// view request status
alert(request.status);
response.innerHTML = request.responseText;
}
HTML:
<div>
<div id="response">
</div>
<input type="button" class="btn btn-primary" value="Call Web API" onclick="javascript:CallWebAPI();" />
最佳答案
在花了很多时间研究这个之后,我想出了解决方案;在此解决方案中,我没有使用基本身份验证,而是使用了 oAuth 身份验证协议(protocol)。但是要使用基本身份验证,您应该能够在“setHeaderRequest”中指定它,而对代码示例的其余部分进行最少的更改。我希望这能在将来帮助其他人:
var token_ // variable will store the token
var userName = "clientID"; // app clientID
var passWord = "secretKey"; // app clientSecret
var caspioTokenUrl = "https://xxx123.caspio.com/oauth/token"; // Your application token endpoint
var request = new XMLHttpRequest();
function getToken(url, clientID, clientSecret) {
var key;
request.open("POST", url, true);
request.setRequestHeader("Content-type", "application/json");
request.send("grant_type=client_credentials&client_id="+clientID+"&"+"client_secret="+clientSecret); // specify the credentials to receive the token on request
request.onreadystatechange = function () {
if (request.readyState == request.DONE) {
var response = request.responseText;
var obj = JSON.parse(response);
key = obj.access_token; //store the value of the accesstoken
token_ = key; // store token in your global variable "token_" or you could simply return the value of the access token from the function
}
}
}
// Get the token
getToken(caspioTokenUrl, userName, passWord);
如果您在某些请求上使用 Caspio REST API,则可能必须对端点的某些请求的参数进行编码;请参阅有关此问题的 Caspio 文档;
注意:此示例中未使用 encodedParams,但在我的解决方案中使用了它。
现在您已经从 token 端点存储了 token ,您应该能够成功验证来自应用程序的 caspio 资源端点的后续请求
function CallWebAPI() {
var request_ = new XMLHttpRequest();
var encodedParams = encodeURIComponent(params);
request_.open("GET", "https://xxx123.caspio.com/rest/v1/tables/", true);
request_.setRequestHeader("Authorization", "Bearer "+ token_);
request_.send();
request_.onreadystatechange = function () {
if (request_.readyState == 4 && request_.status == 200) {
var response = request_.responseText;
var obj = JSON.parse(response);
// handle data as needed...
}
}
}
此解决方案仅考虑如何在纯 javascript 中使用 Caspio API 成功发出经过身份验证的请求。我敢肯定还有很多缺陷......
关于javascript - 使用 JavaScript 的基本身份验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34860814/