Démarrage utilisation AJAX et API

**altair8080** · 09/05/2014, 23h16

Bonsoir,

je commence à développer une API -> cela fonctionne en utilisant l'extension Chrome.

Maintenant j'essaye de passer par le biais d'une page HTML avec jquery

Au niveau de mon API lorsque je passe par l'extension

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

http://localhost/api/v1/tasks

Method : POST
Headers : Authorization : 440eb3ed294c7f1e3ccbd002a8503e33
Payload : action : mavaleur

j'obtiens bien en retour status 201 created avec en JSON

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
{
error: false
message: "Task created successfully"
task_id: 2
}

Par contre lorsque j'essaye de faire la même chose par une page web, cela ne fonctionne pas

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $.ajax({
          url: 'http://localhost/api/v1/tasks',
          type: 'POST',
          data: {task: valeur1} ,
          success: function() { alert('hello!'); },
          error: function() { alert('boo!'); },
          beforeSend: setHeader
        });
      });
 
      function setHeader(xhr) {
        xhr.setRequestHeader('Authorization', '440eb3ed294c7f1e3ccbd002a8503e33');
      }
    </script>
  </head>
  <body>
    <h1>Some Text</h1>
  </body>
</html>

Merci de votre aide

**Bovino** · 10/05/2014, 11h11

Un problème classique de Same Origin Policy...

**altair8080** · 10/05/2014, 11h41

Merci donc si j'ai bien compris en faisant qlq recherches il faut utiliser JSONP.

Reste à voir ce que je dois modifier côté client et/ou serveur.

Je pouvais encore chercher car avec l extension cela fonctionnait.
Entretemps j ai effectué des tests et j ai désactivé l authentification et cela avait l air de fonctionner donc je pensais que cela venait du passage du header

**altair8080** · 10/05/2014, 14h06

Bovino, je vais avoir besoin de ton aide.

Environnement : Wamp dernière version 64.
J'utilise le framework : slimframework
Je me suis basé sur ce code pour l'API : http://www.androidhive.info/2014/01/...-mysql-day-23/

Avec l'extension RESTclient de chrome cela fonctionne
API/v1/register en post pour créer un user avec les 3 variables (email, password, name)
API/v1/login en post avec les 2 variables (email, password) pour récupérer APIkey
API/v1/tasks avec dans le header Authorization (apikey) et tasks pour le contenu

J'ai créé une seconde version en retirant la partie authentification dans le routage TASKS avec la méthode POST. cela fonctionne toujours

J'ai créé dans un autre répertoire le code suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
 
        $.ajax({
                 url: 'http://localhost/bkpapi/v1/tasks',
        //    url: 'http://localhost/taskmanager/v1/tasks',
            type: 'POST',
            headers: {"Authorization": "4736e3f02a4e2cab381868b79f806436"},
          data: {'email': 'essai1%40gmail.com','password': 'essai1','task': 'bonjour'},
          dataType: 'json',
          success: function(data){ alert('hello!');},
          error: function(data){
              alert("erreur");
             }
        });
      });
 
    </script>
  </head>
  <body>
    <h1>exemple</h1>
  </body>
</html>

Lorsque j'utilise l'api initiale avec authentification cela ne fonctionne pas.
Lorsque j'utilise l'api modifiée sans authentification cela fonctionne .

Tu parles de SOP mais je ne vois pas comment contourner et/ou si c'est bien là le problème.

la fonction d'authentification :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
function authenticate(\Slim\Route $route) {
    // Getting request headers
    $headers = apache_request_headers();
    $response = array();
    $app = \Slim\Slim::getInstance();
 
    // Verifying Authorization Header
    if (isset($headers['Authorization'])) {
        $db = new DbHandler();
 
        // get the api key
        $api_key = $headers['Authorization'];
        // validating api key
        if (!$db->isValidApiKey($api_key)) {
            // api key is not present in users table
            $response["error"] = true;
            $response["message"] = "Access Denied. Invalid Api key";
            echoRespnse(401, $response);
            $app->stop();
        } else {
            global $user_id;
            // get user primary key id
            $user_id = $db->getUserId($api_key);
        }
    } else {
        // api key is missing in header
        $response["error"] = true;
        $response["message"] = "Api key is misssing";
        echoRespnse(400, $response);
        $app->stop();
    }
}

Merci

**altair8080** · 10/05/2014, 14h29

Je veux bien appeler une page locale en php mais cette dernière devra toujours appeler et passer des paramètres à ma page distante donc je reporte le problème sur une autre page et je ne trouve pas comment faire.

Démarrage utilisation AJAX et API

jQuery

Vue hybride

Discussions similaires

Partager

Partager