Autenticazione di base tramite JavaScript

Question

Sto costruendo un'applicazione che utilizza lo Caspio API. Sto riscontrando dei problemi durante l'autenticazione con la loro API. Ho trascorso 2-3 giorni a cercare di capirlo, ma potrebbe essere dovuto ad una certa comprensione da parte mia. Ho letto innumerevoli articoli sul post StackOverflow e in altro modo, ma non ho risolto il problema. Di seguito è riportato un esempio di codice della mia soluzione in base a ciò che ho visto e ricevo un messaggio di 400 Status Code; Cosa sto facendo di sbagliato qui? (Si prega di fornire esempio di codice ben commentato e io preferirei NON hanno link postato qui riferimento a altri materiali come ho visto anche questi ampiamente Grazie.!):

Alcuni riferimenti Ho guardato:

1) Pure JavaScript code for HTTP Basic Authentication?

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

desidero utilizzare questo metodo di autenticazione come descritto da caspio seguito:

In alternativa alle credenziali incluse nel corpo della richiesta, un client può utilizzare lo schema di autenticazione di HTTP Basic. In questo caso, richiesta di autenticazione sarà messa a punto nel modo seguente:

Metodo: POST

URL: tuo punto finale gettone

Corpo: grant_type = client_credentials

parametro Intestazione:

Autorizzazione: autenticazione di base di base regno

Qui di seguito sono il mio codice Javascript e 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

Dopo aver trascorso un bel po 'di tempo alla ricerca in questo, mi si avvicinò con la soluzione per questo; In questa soluzione non sto usando l'autenticazione di base, ma sono andato con il protocollo di autenticazione oAuth. Ma per usare l'autenticazione di base dovresti essere in grado di specificarlo nella "setHeaderRequest" con modifiche minime al resto dell'esempio di codice.Spero che questo sarà in grado di aiutare qualcun altro in futuro:

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

Se si utilizza l'API REST Caspio su qualche richiesta, può essere di importanza fondamentale che per codificare i paramaters per certa richiesta al punto finale; vedere la documentazione di Caspio su questo problema;

NOTA: encodedParams NON è utilizzato in questo esempio ma è stato utilizzato nella mia soluzione.

Ora che avete il token memorizzato dal punto finale di token si dovrebbe essere in grado di autenticare con successo per la successiva richiesta dalla risorsa endpoint Caspio per la vostra applicazione

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

     } 
    } 
} 

Questa soluzione non solo considera come fare con successo il richiesta autenticata utilizzando l'API di Caspio in puro javascript. Ci sono ancora molti difetti, ne sono sicuro ...

Answer 2

La variabile EncodedParams viene ridefinita in quanto la variabile params non funzionerà. È necessario avere la stessa chiamata predefinita alla variabile, altrimenti sembra possibile con un po 'più di lavoro. Saluti! json non è abituato alle sue piene capacità in php ci sono modi migliori per chiamare json che non ricordo al momento.