Js AJAX auth

De The Linux Craftsman
Aller à la navigation Aller à la recherche

Introduction

Le mécanisme Auth Basic consiste a faire passer le login et le mot de passe dans le header "Authorization" de la requête HTTP.

Le login et le mot de passe sont ajoutés comme suit, login:password, puis encodé en base 64.

Par exemple, pour toto:password on aura le header suivant: Basic dG90bzpwYXNzd29yZA==

Mise en place

Coté Serveur

Nous allons gérer l'authentification en renvoyant le code 202 Accepted si l'authentification est correcte et 401 Authorization Required si elle échoue. Pour cela nous allons avoir besoin du code suivant dans le index.php :

<?php

// Utilisé pour autoriser les appel Web Service en AJAX depuis toutes les adresses
header ( "Access-Control-Allow-Origin: *" );
// Utilisé pour autoriser les méthodes GET, POST, PUT et DELETE
header ( "Access-Control-Allow-Methods: GET, POST, PUT, DELETE" );
// On autorise les données dans le header
header ( "Access-Control-Allow-Headers: Content-Type" );
// On positione l'encodage en UTF-8 sinon json_encode ne fonctionnera pas !
header ( 'Content-Type: application/json; charset=utf-8' );
// On inclut l'objet User ainsi que les classes nécessaires

function getServerVariable($var) {
  if (isset ( $_SERVER [$var] ) && ! empty ( $_SERVER [$var] )) {
    return $_SERVER [$var];
  }
  return false;
}

function main(){
  $method = $_SERVER ['REQUEST_METHOD'];
  if($method !== "GET"){
    // HTTP 405 : Method Not Allowed
    http_response_code(405);
    echo json_encode(false);
  }
  $login = getServerVariable("PHP_AUTH_USER");
  $password = getServerVariable("PHP_AUTH_PW");
  if ($login === FALSE || $password === FALSE) {
    // Pas d'identifiant on retourne false et HTTP 401 : Unauthorized
    http_response_code ( 401 );
    echo json_encode ( false );
    return false;
  }
  if($login !== "toto" || $password !== "password"){
    // Identifiants faux, on retourne false et HTTP 401 : Unauthorized
    http_response_code ( 401 );
    echo json_encode ( false ); 
  }else{
    // Identifiants ok, on retourne true et HTTP 202: Accepted
    http_response_code ( 202 );
    echo json_encode ( true );
  }
}
main();

Coté client

Coté client, il nous trois fichiers. Le fichier ajax.js pour instancier l'objet XmlHttpRequest :

function getXhr() {
  var xhr;
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xhr = new XMLHttpRequest();
  } else {
    // code for IE6, IE5
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
  }
  return xhr;
}

Le fichier auth.js qui va faire l'authentification :

function auth(user, password) {
  // Création de l'objet XHR
  var xhr = getXhr();
  // Ouverture de l'URL en GET
  xhr.open("GET", "http://127.0.0.1", false);
  // Envoie de la requête
  xhr.setRequestHeader("Authorization", "Basic " + btoa(user + ":" + password)); 
  xhr.send();
  // Récupération de la réponse
  return xhr.status == 202;
}
function doAuth(user, password){
	if(auth(user, password)){
	  alert("Auth OK!");
	}else{
	 alert("Try again");
	}
}

Et enfin, le fichier index.html pour appeler le tout :

<html>
<head>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript" src="auth.js"></script>
</head>
<body onLoad="doAuth('toto', 'password')">
</body>
</html>

Vous devriez voir s'afficher Auth OK! avec comme code HTTP 202 !