使用JavaScript的基本身份验证
我正在构建一个使用Caspio API的应用程序。我在验证他们的API时遇到了一些问题。我花了2-3天的时间试图弄清楚这个问题，但这可能是因为我对此有一些理解。我读过无数关于stackoverflow和其他的文章，但都没有解决这个问题。下面是基于我所看到的解决方案的代码示例，我得到了一个400状态码消息；我在这里做错了什么？(请提供注释良好的代码示例，我更喜欢而不是在这里发布链接，参考其他材料，因为我已经广泛地查看了这些材料。谢谢！)：
我看过一些参考资料：
1) Pure JavaScript code for HTTP Basic Authentication?
2) How to make http authentication in REST API call from javascript
我想使用下面caspio所描述的这种身份验证方法：
作为在请求正文中包括凭据的替代方法，客户端可以使用HTTP基本身份验证方案。在这种情况下，认证请求的设置方式如下：
方法： POST
URL:你的令牌终结点
Body: grant_type=client_credentials
头部参数：
Authorization:基本基本身份验证领域
下面是我的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();" />
回答 4
Stack Overflow用户
发布于 2016-01-28 01:17:10
在花了相当多的时间研究这个问题之后，我想出了一个解决方案；在这个解决方案中，我不使用基本身份验证，而是使用oAuth身份验证协议。但要使用基本身份验证，您应该能够在"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，但我的解决方案中使用了它。
现在您已经从令牌端点存储了令牌，您应该能够成功地对来自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成功地发出经过身份验证的请求。我敢肯定还有很多缺陷...
Stack Overflow用户
发布于 2018-08-11 01:57:11
今天，我们更多地使用Bearer token，也就是Basic Authentication，但是如果你想让Basic Authentication首先获得持有者令牌，那么有几种方法：
const request = new XMLHttpRequest();
request.open('GET', url, false, username,password)
request.onreadystatechange = function() {
// D some business logics here if you receive return
if(request.readyState === 4 && request.status === 200) {
console.log(request.responseText);
}
}
request.send()完整语法为here
使用Ajax的第二种方法：
$.ajax
({
type: "GET",
url: "abc.xyz",
dataType: 'json',
async: false,
username: "username",
password: "password",
data: '{ "key":"sample" }',
success: function (){
alert('Thanks for your up vote!');
}
});希望这能为您提供使用JS启动API调用的提示。在像Angular，React等框架中，有更强大的方式来使用Basic Authentication或Oauth Authentication进行API调用。就去探索它吧。
Stack Overflow用户
发布于 2016-10-26 06:28:11
重新定义了参数变量，因为EncodedParams变量将不起作用。您需要对变量进行相同的预定义调用，否则只需多做一点工作就可以了。干杯!json不习惯于它在php中的全部功能，还有更好的方法来调用json，我现在不记得了。
https://stackoverflow.com/questions/34860814
复制相似问题