Базовая аутентификация с использованием JavaScript

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

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

1) Чистый код JavaScript для базовой аутентификации HTTP?

2) Как сделать проверку подлинности HTTP в REST API вызовом из 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();" />

Ответ 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 по этому вопросу;

ПРИМЕЧАНИЕ: кодированныйParams не используется в этом примере, но был использован в моем решении.

Теперь, когда у вас есть токен, сохраненный из конечной точки токена, вы сможете успешно пройти аутентификацию для последующего запроса от конечной точки ресурса 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... 

        }
    }
}

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

Ответ 2

Сегодня мы используем Bearer token чаще, чем Basic Authentication, но если вы хотите, чтобы Basic Authentication сначала получил токен на предъявителя, есть несколько способов:

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

Полный синтаксис здесь

Второй подход с использованием Ajax:

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

Надеюсь, это даст вам подсказку, с чего начать с вызова API с JS. В таких фреймворках, как Angular 2+, React и т.д., Существует более эффективный способ вызова API с помощью Basic Authentication или Oauth Authentication. Просто исследуй это.

Ответ 3

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