Основная проверка подлинности с использованием JavaScript

Question

Я создаю приложение, которое потребляет Caspio API. У меня возникли проблемы с аутентификацией их API. Я потратил 2-3 дня, пытаясь понять это, но это может быть из-за некоторого понимания на моем конце. Я прочитал бесчисленные статьи о postoverflow post и в противном случае, но не решил проблему. Ниже приведен пример кода моего решения на основе того, на что я смотрел, и я получаю сообщение с кодом состояния 400; Что я здесь делаю неправильно? (Пожалуйста, предоставьте также комментировал пример кода, и я предпочел бы НЕ есть ссылки, размещенные здесь, ссылающиеся другой материал, как я смотрел на это обширно спасибо.!):

Некоторых ссылки я посмотрел на:

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» с минимальными изменениями в остальной части примера кода.Я надеюсь, что это будет в состоянии помочь кому-то еще в будущем:

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

Если вы используете API Caspio REST на некоторый запрос может быть необходимо, чтобы вы закодировать для определенной Счетчики запроса к конечной точке; см. документацию 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... 

     } 
    } 
} 

Этого решение имеет только рассматривает, как успешно сделать аутентифицированный запрос с использованием API Caspio в чистом javascript. Есть еще много недостатков, я уверен ...

Answer 2

Переменная EncodedParams переопределяется, поскольку переменная params не будет работать. У вас должен быть такой же предопределенный вызов переменной, в противном случае это выглядит возможным с немного большей работой. Ура! json не используется для своих полных возможностей в php, есть лучшие способы вызвать json, о котором я не помню в данный момент.