Podstawowe uwierzytelnianie za pomocą JavaScript

Question

Buduję aplikację, która zużywa Caspio API. Mam problem z uwierzytelnianiem ich interfejsu API. Spędziłem 2-3 dni próbując to zrozumieć, ale może to wynikać z pewnego zrozumienia po mojej stronie. Czytałem niezliczone artykuły na temat stackoverflow i poza tym, ale nie rozwiązałem problemu. Poniżej znajduje się przykładowy kod mojego rozwiązania w oparciu o to, na co patrzyłem i otrzymuję komunikat o kodzie statusu 400; Co ja tu robię źle? (Proszę podać dobrze skomentowany przykład kodu i woleliby NIE linki zamieszczone tutaj odnośniki do innych materiałów, jak mam spojrzał na obszernie tych dzięki.!):

Niektóre referencje Mam spojrzał na:

1) Pure JavaScript code for HTTP Basic Authentication?

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

ja jak używać tej metody uwierzytelniania, jak opisano w caspio poniżej:

Jako alternatywę dla włączania poświadczeń w treści żądania, klient może korzystać ze schematu uwierzytelniania HTTP Basic. W tym przypadku żądanie uwierzytelnienia będzie ustawione w następujący sposób:

Metoda: POST

URL: token końcowym

ciała: grant_type = client_credentials

parametr Header:

odpowiedzialny: Podstawowe uwierzytelnianie podstawowe sfery

Poniżej mój kod JavaScript i 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

Po spędzeniu trochę czasu patrząc na to, jak wpadł na rozwiązanie tego problemu; W tym rozwiązaniu nie korzystam z uwierzytelniania podstawowego, ale zamiast tego korzystam z protokołu uwierzytelniania oAuth. Ale aby użyć uwierzytelniania podstawowego, powinieneś być w stanie to określić w "setHeaderRequest" z minimalnymi zmianami w pozostałym przykładzie kodu.Mam nadzieję, że będzie w stanie pomóc komuś w przyszłości:

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

Jeśli używasz API Caspio spocząć na jakimś życzenie może być konieczne, aby do kodowania paramaters do pewnego wniosku do swojej końcowego; zobacz dokumentację Caspio na ten temat;

UWAGA: kodowaneParams NIE jest używane w tym przykładzie, ale zostało użyte w moim rozwiązaniu.

Teraz, że masz token przechowywany od końca tokena powinieneś być w stanie skutecznie uwierzytelnić dla późniejszego wniosek końcowym zasobów caspio dla aplikacji

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

     } 
    } 
} 

To rozwiązanie nie tylko rozważa, jak skutecznie uczynić uwierzytelnione żądanie przy użyciu interfejsu API Caspio w czystym javascript. Ciągle mam wiele wad, jestem pewien ...

Answer 2

Zmienna EncodedParams jest przedefiniowana, ponieważ zmienna params nie zadziała. Musisz mieć to samo predefiniowane wywołanie dla zmiennej, w przeciwnym razie będzie to możliwe przy odrobinie więcej pracy. Twoje zdrowie! json nie jest przyzwyczajony do swoich pełnych możliwości w php istnieją lepsze sposoby na wywołanie json, których nie pamiętam w tej chwili.