使用 JavaScript 的基本身份验证

在花了相当多的时间研究这个之后，我想出了解决方案；在这个解决方案中，我没有使用基本身份验证，而是使用 oAuth 身份验证协议.但是要使用基本身份验证，您应该能够在setHeaderRequest"中指定这一点，只需对代码示例的其余部分进行最少的更改.我希望这将能够在未来对其他人有所帮助:

var token_//变量将存储令牌var userName = "clientID";//应用客户端IDvar passWord = "secretKey";//应用程序客户端秘密var caspioTokenUrl = "https://xxx123.caspio.com/oauth/token";//您的应用程序令牌端点var request = new XMLHttpRequest();函数 getToken(url, clientID, clientSecret) {变量键；request.open("POST", url, true);request.setRequestHeader("内容类型", "应用程序/json");request.send("grant_type=client_credentials&client_id="+clientID+"&"+"client_secret="+clientSecret);//指定凭据以在请求时接收令牌request.onreadystatechange = function () {如果(request.readyState == request.DONE){var response = request.responseText;var obj = JSON.parse(response);键 = obj.access_token；//存储accesstoken的值令牌_ =键；//将令牌存储在全局变量token_"中，或者您可以简单地从函数中返回访问令牌的值}}}//获取令牌getToken(casioTokenUrl, 用户名, 密码);

如果您在某些请求上使用 Caspio REST API，您可能必须为对端点的某些请求编码参数；请参阅有关此问题的 Caspio 文档；

注意:encodedParams 未在此示例中使用，但在我的解决方案中使用.

现在您已经从令牌端点存储了令牌，您应该能够成功地对来自应用程序的 caspio 资源端点的后续请求进行身份验证

function CallWebAPI() {var request_ = new XMLHttpRequest();var encodedParams = encodeURIComponent(params);request_.open("GET", "https://xxx123.casio.com/rest/v1/tables/", true);request_.setRequestHeader("授权", "承载"+ token_);request_.send();request_.onreadystatechange = function () {if (request_.readyState == 4 && request_.status == 200) {var response = request_.responseText;var obj = JSON.parse(response);//根据需要处理数据...}}}

此解决方案只考虑如何在纯 javascript 中使用 Caspio API 成功发出经过身份验证的请求.我敢肯定还有很多缺陷......

I am building an application that consumes the Caspio API. I am having some trouble authenticating against their API. I have spent 2-3 days trying to figure this out but it may be due to some understanding on my end. I have read countless articles on stackoverflow post and otherwise but have not solved the issue. Below is a code example of my solution based on what i have looked at and i am getting a 400 Status code message; What am i doing wrong here? (Please provide well commented code example and i would prefer to NOT have links posted here referencing other material as i have looked at these extensively. Thanks!):

Some references i have looked at:

1) Pure JavaScript code for HTTP Basic Authentication?

2) How to make http authentication in REST API call from javascript

I would like to use this authentication method as described by caspio below:

As an alternative to including credentials in the request body, a client can use the HTTP Basic authentication scheme. In this case, authentication request will be setup in the following way:

Method: POST

URL: Your token endpoint

Body: grant_type=client_credentials

Header parameter:

Authorization: Basic Basic authentication realm

Below are my Javascript and HTML code.

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();" />

After Spending quite a bit of time looking into this, i came up with the solution for this; In this solution i am not using the Basic authentication but instead went with the oAuth authentication protocol. But to use Basic authentication you should be able to specify this in the "setHeaderRequest" with minimal changes to the rest of the code example. I hope this will be able to help someone else in the future:

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

If you are using the Caspio REST API on some request it may be imperative that you to encode the paramaters for certain request to your endpoint; see the Caspio documentation on this issue;

NOTE: encodedParams is NOT used in this example but was used in my solution.

Now that you have the token stored from the token endpoint you should be able to successfully authenticate for subsequent request from the caspio resource endpoint for your application

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... 

        }
    }
} 

This solution does only considers how to successfully make the authenticated request using the Caspio API in pure javascript. There are still many flaws i am sure...