JavaScriptを使用した基本認証

Question

私はCaspio APIを消費するアプリケーションを構築しています。私は彼らのAPIに対して認証するのにいくつかの問題を抱えています。私はこれを理解しようと2〜3日を費やしましたが、それは私の最後の理解のせいかもしれません。私はstackoverflowの記事やそれ以外の無数の記事を読んだが、問題を解決していない。以下は、私が見たものに基づいて私のソリューションのコード例です。私は400ステータスコードメッセージを取得しています。私はここで間違って何をしていますか？ （よくコメントしたコード例を提供し、私は、NOTを好むだろうしてくださいリンクは、私は広範囲にこれらを見てきたように、他の材料を参照してここに掲載されているおかげ。！）：

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

1 ）Pure JavaScript code for HTTP Basic Authentication?

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

以下caspioによって記載されたように、私は、この認証方法を使用したい：

要求本体に認証情報を含める代わりに、クライアントはHTTP基本認証方式を使用できます。この場合、認証要求は、次のように設定されます：

方法： POST

URL：あなたのトークンエンドポイント

ボディ： grant_type = client_credentials

ヘッダパラメータ：

認証：以下基本基本認証レルム

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

Answer 1

このに探してかなりの時間を過ごした後、私はこのための解決策を考え出しました。このソリューションでは、私は基本認証を使用していませんが、代わりにoAuth認証プロトコルを使用しました。しかし、基本認証を使用するには、コード例の残りの部分を最小限に変更して、これを "setHeaderRequest"で指定できる必要があります。私は、これは将来的に他の誰かを助けることができることを願っています：あなたは、いくつかの要求にCaspio REST APIを使用している場合は

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

あなたがあなたのエンドポイントに特定の要求のためのPARAMATERSをエンコードすることが不可欠であってもよく、この問題に関する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_.readyState == 200) { 
      var response = request_.responseText; 
      var obj = JSON.parse(response); 
      // handle data as needed... 

     } 
    } 
} 

を認証することができるはずです純粋なjavascriptでCaspio APIを使用して認証されたリクエスト。まだ確かな多くの欠陥があります...

Answer 2

EncodedParams変数はparams変数として再定義されても動作しません。変数に対して同じ事前定義された呼び出しを行う必要があります。そうでなければ、もう少し作業が可能です。乾杯！ jsonはphpの完全な機能に慣れていないので、私は現時点では思い出していないjsonを呼び出すより良い方法があります。