使用JavaScript的基本身份验证

我正在构建一个使用。我在根据他们的API进行身份验证时遇到一些问题。我已经花了2-3天的时间试图弄明白这一点，但这可能是由于我的理解。我读过无数关于stackoverflow post和其他方面的文章，但没有解决这个问题。下面是我的解决方案的代码示例，基于我所看到的，我收到一条400状态代码消息；我做错了什么？（请提供评论良好的代码示例，我希望不要在此处发布引用其他材料的链接，因为我已经详细阅读了这些内容。谢谢！）：

我看过一些参考资料：

(一)

(二)

我想使用caspio下面描述的身份验证方法：

作为在请求主体中包含凭据的替代方案，客户端可以使用HTTP基本身份验证方案。在这种情况下，将按以下方式设置身份验证请求：

方法：发布

URL:您的令牌端点

正文：授予类型=客户凭据

标题参数：

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;
}

<div>
<div id="response">

</div>
<input type="button" class="btn btn-primary" value="Call Web API" onclick="javascript:CallWebAPI();" />

授权：基本身份验证领域

下面是我的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;
}

<div>
<div id="response">

</div>
<input type="button" class="btn btn-primary" value="Call Web API" onclick="javascript:CallWebAPI();" />

HTML:

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;
}

<div>
<div id="response">

</div>
<input type="button" class="btn btn-primary" value="Call Web API" onclick="javascript:CallWebAPI();" />

---

在花了很多时间研究这个问题之后，我想出了解决这个问题的办法；在这个解决方案中，我不使用基本身份验证，而是使用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中使用CaspioAPI成功发出经过身份验证的请求。我确信仍然有许多缺陷…

EncodedParams变量被重新定义为params变量将不起作用。您需要对变量进行相同的预定义调用，否则看起来需要做更多的工作。干杯json在php中并没有充分发挥其功能，有更好的方法调用json，我现在不记得了

今天，我们使用

承载令牌

的频率比使用

基本身份验证

的频率更高，但是如果您想先使用

基本身份验证

来获取承载令牌，那么有两种方法：

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()

完整语法是

使用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等框架中，有更强大的方法通过

基本身份验证

或

Oauth身份验证

进行API调用。只是探索一下。

这实际上并不是问题的解决方案，这是关于基本身份验证的。我想我在最初的回答中明确了你的观点。尽管如此，这是使用不同身份验证方法完成相同任务的替代方法。请阅读完整答案。