Différences entre versions de « Js AJAX auth »

De The Linux Craftsman
Aller à la navigation Aller à la recherche
 
(7 versions intermédiaires par le même utilisateur non affichées)
Ligne 5 : Ligne 5 :
  
 
Par exemple, pour ''toto:password'' on aura le header suivant: ''Basic dG90bzpwYXNzd29yZA==''
 
Par exemple, pour ''toto:password'' on aura le header suivant: ''Basic dG90bzpwYXNzd29yZA==''
−
 
+
=Mise en place =
−
=== Coté Serveur ===
+
== 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.
 
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'' :  
 
Pour cela nous allons avoir besoin du code suivant dans le ''index.php'' :  
 
<source lang="php" style="border:1px solid black;font-size:120%">
 
<source lang="php" style="border:1px solid black;font-size:120%">
 
<?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) {
 
function getServerVariable($var) {
Ligne 34 : Ligne 44 :
 
     return false;
 
     return false;
 
   }
 
   }
−
   if($login !== "toto" && $password !== "password"){
+
   if($login !== "toto" || $password !== "password"){
 
     // Identifiants faux, on retourne false et HTTP 401 : Unauthorized
 
     // Identifiants faux, on retourne false et HTTP 401 : Unauthorized
 
     http_response_code ( 401 );
 
     http_response_code ( 401 );
Ligne 48 : Ligne 58 :
  
 
=== Coté client ===
 
=== Coté client ===
−
Coté client, il nous faut le fichier pour
+
Coté client, il nous faut trois fichiers.
 +
Le fichier ''ajax.js'' pour instancier l'objet XmlHttpRequest :
 +
<source lang="javascript" style="border:1px solid black;font-size:120%">
 +
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;
 +
}
 +
</source>
 +
Le fichier ''auth.js'' qui va faire l'authentification :
 +
<source lang="javascript" style="border:1px solid black;font-size:120%">
 +
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");
 +
}
 +
}
 +
</source>
 +
Et enfin, le fichier index.html pour appeler le tout :
 +
<source lang="html5" style="border:1px solid black;font-size:120%">
 +
<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>
 +
</source>
 +
Vous devriez voir s'afficher ''Auth OK!'' avec comme code HTTP 202 !

Version actuelle datée du 11 février 2018 à 22:47

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 faut 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 !

Récupérée de « https://www.tala-informatique.fr/wiki/index.php?title=Js_AJAX_auth&oldid=3037 »