web-dev-qa-db-fra.com

Authentification de base à l'aide de JavaScript

Je construis une application qui utilise le API Caspio . J'ai des problèmes d'authentification avec leur API. J'ai passé 2 ou 3 jours à essayer de comprendre cela, mais c'est peut-être dû à une certaine compréhension de ma part. J'ai lu d'innombrables articles sur stackoverflow post et sinon, mais je n'ai pas résolu le problème. Vous trouverez ci-dessous un exemple de code de ma solution basé sur ce que j’ai examiné et j’obtiens un message de code de statut 400; Qu'est-ce que je fais mal ici? (Veuillez fournir un exemple de code bien commenté et je préférerais que ET NON PAS affiche des liens qui font référence ici à d'autres éléments, car je les ai examinés en détail. Merci!):

Quelques références que j'ai consultées:

1) Code JavaScript pur pour l'authentification de base HTTP?

2) Comment effectuer une authentification http dans un appel API REST à partir de javascript

Je voudrais utiliser cette méthode d'authentification comme décrit par caspio ci-dessous: 

Au lieu d'inclure des informations d'identification dans le corps de la demande, un client peut utiliser le schéma d'authentification HTTP Basic. Dans ce cas, la demande d'authentification sera configurée de la manière suivante:

Méthode: POST

URL: _ Votre noeud final de jeton

Body: grant_type = client_credentials

Paramètre d'en-tête:

Authorization: Domaine d'authentification de base basique

Ci-dessous sont mon code Javascript et 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();" />

javascriptauthenticationxmlhttprequest
6
Rex CoolCode Charles

Après avoir passé pas mal de temps à regarder cela, j'ai trouvé la solution pour ça; Dans cette solution, je n'utilise pas l'authentification de base, mais plutôt le protocole d'authentification oAuth. Mais pour utiliser l'authentification de base, vous devriez pouvoir le spécifier dans "setHeaderRequest" avec un minimum de modifications par rapport au reste de l'exemple de code. J'espère que cela pourra aider quelqu'un d'autre à l'avenir: 

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

Si vous utilisez l'API Caspio REST à certaines requêtes, il peut être impératif de coder les paramètres de certaines requêtes sur votre point de terminaison. voir la documentation de Caspio sur ce problème; 

REMARQUE: encodedParams n'est PAS utilisé dans cet exemple, mais a été utilisé dans ma solution. 

Maintenant que le jeton est stocké à partir du point de terminaison du jeton, vous devriez être en mesure de vous authentifier pour une demande ultérieure émanant du point de terminaison des ressources caspio pour votre application. 

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

        }
    }
}

Cette solution ne prend en compte que la manière de réussir la requête authentifiée à l'aide de l'API Caspio en JavaScript pur. Il y a encore beaucoup de défauts, j'en suis sûr ...

5
Rex CoolCode Charles

Aujourd'hui, nous utilisons plus souvent Bearer token que Basic Authentication, mais si vous voulez que Basic Authentication soit le premier à obtenir le jeton de porteur, vous pouvez procéder de différentes manières:

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

La syntaxe complète est ici

Deuxième approche utilisant 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!');
  }
});

J'espère que cela vous indique comment commencer avec l'appel API avec JS. Dans les cadres tels que Angular 2+, React, etc., il existe un moyen plus puissant de passer des appels API avec Basic Authentication ou Oauth Authentication. Juste l'explorer.

1
V.Tran