使用JavaScript的基本身份验证 [英] Basic Authentication Using JavaScript

问题描述

我正在构建一个使用 Caspio的应用程序API .我在根据其API进行身份验证时遇到了一些麻烦.我花了2-3天的时间来解决这个问题，但这可能是出于对我的理解.我已经阅读了无数关于stackoverflow帖子的文章，但是还没有解决问题.下面是根据我所查看的内容并得到400状态代码消息的解决方案的代码示例；我在这里做错了什么? (请提供注释良好的代码示例，我更愿意不在此处发布链接，以引用我广泛浏览的其他材料.谢谢！):

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)用于HTTP基本身份验证的纯JavaScript代码?

2)如何在javascript的REST API调用中进行http身份验证

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

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

作为在请求正文中包括凭据的替代方法，客户端可以使用HTTP Basic身份验证方案.在这种情况下，将通过以下方式设置身份验证请求:

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:

方法: POST

Method: POST

URL: 您的令牌端点

URL: Your token endpoint

正文: grant_type = client_credentials

Body: grant_type=client_credentials

标题参数:

Header parameter:

授权: 基本基本身份验证领域

Authorization: Basic Basic authentication realm

下面是我的Javascript和HTML代码.

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

推荐答案

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

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

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

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;

注意:在本示例中未使用encodeParams，但在我的解决方案中使用了它.

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

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

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

        }
    }
} 

此解决方案仅考虑如何使用纯javascript使用Caspio API成功完成已验证的请求.我确信仍有很多缺陷...

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

这篇关于使用JavaScript的基本身份验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！