web-dev-qa-db-ja.com

JavaScriptを使用した基本認証

Caspio API を消費するアプリケーションを構築しています。 APIに対する認証に問題があります。私は2〜3日かけてこれを理解しようと試みましたが、それは私の理解のせいかもしれません。私はstackoverflowの投稿で無数の記事を読んだことがありますが、問題を解決していません。以下は、私が見たものに基づいたソリューションのコード例で、400ステータスコードメッセージが表示されています。ここで何が間違っていますか？ （よくコメントされたコード例を提供してください。私は[〜＃〜] not [〜＃〜]を選びます。これらを広範囲に見てきました。ありがとう！）：

私が見たいくつかの参照：

1） HTTP基本認証の純粋なJavaScriptコード？

2） REST javascriptからのAPI呼び出し）でhttp認証を行う方法

以下のcaspioで説明されているこの認証方法を使用したいと思います。

要求本文に資格情報を含める代わりに、クライアントはHTTP基本認証スキームを使用できます。この場合、認証要求は次の方法でセットアップされます。

Method：POST

URL：トークンエンドポイント

Body：grant_type = client_credentials

ヘッダーパラメータ：

認可：Basic 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();" />
javascriptauthenticationxmlhttprequest
12
Rex CoolCode Charles

これにかなりの時間を費やした後、私はこれに対する解決策を思いつきました。このソリューションでは、基本認証を使用していませんが、代わりに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を使用して認証済みリクエストを正常に作成する方法のみを考慮しています。私は確信している多くの欠陥がまだあります...

7
Rex CoolCode Charles

今日、私たちはBearer tokenより頻繁にBasic Authenticationを使用しますが、Basic Authenticationを最初にBearerトークンを取得したい場合、いくつかの方法があります：

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を使用した2番目のアプローチ：

$.ajax
({
  type: "GET",
  url: "abc.xyz",
  dataType: 'json',
  async: false,
  username: username,
  password: password,
  data: '{ "sample" }',
  success: function (){
    alert('Thanks for your up vote!');
  }
});

これが、JSを使用したAPI呼び出しの開始点のヒントとなることを願っています。 Angular 2 +、Reactなど）のようなフレームワークでは、Basic AuthenticationまたはOauth Authenticationを使用してAPI呼び出しを行うより強力な方法があります。それを調べてください。

2
V.Tran