Step-by-step
-
Base de données
- Réaliser la base de données patisserie comme indiqué dans ce mini guide :
https://developer.ibm.com/recipes/tutorials/ibmcloud-mysql-france/ - Renommer le service en patisserie-mysql dans le tableau de bord. On utilisera ce nom pour le déploiement de l’API.
- Réaliser la base de données patisserie comme indiqué dans ce mini guide :
-
Déploiement de l'API REST
- Cliquer sur le bouton Deploy to IBM Cloud de l’API. L’application va être déployer sur votre espace.
https://github.com/cherryclass/IBM-API-SLIM-patisserie
- Observez le fichier manifest.yml et composer.json. Toutes les dépendances vont être ajoutées lors du déploiement. Cette version de SLIM fonctionne uniquement avec PHP 7 Attention à provisionner un minimum de mémoire (>256Mo).
L’application ne fonctionnera pas tant que le service de base de données de l’étape 1 n’est pas relié. Si vous n’avez pas nommé correctement le service MySQL à l’étape 1:
- Dans le tableau de bord, cliquer sur l’api correspondante, puis sur connexions, créer une connexion. Ajouter le service Mysql avec connect et reconstituer. On récupere automatiquement les identifiants dans l’application.
- Cliquer sur le bouton Deploy to IBM Cloud de l’API. L’application va être déployer sur votre espace.
-
Test de l'application
- Tester l’URI gateau/8 de votre application. Attention à bien remplacer l’url de l’application par la votre.
Exemple “https://ibm-api-patisserie-20180812173213203.eu-de.mybluemix.net/gateau/8“On pourra tester avec le navigateur ou REASTED, RESTEASY et POSTMAN par exemple.
- Le serveur renvoie les éléments en JSON.
- Tester l’URI gateau/8 de votre application. Attention à bien remplacer l’url de l’application par la votre.
-
Déploiement du client
- Déployer le client.
https://github.com/cherryclass/IBM-client-patisserie - Modifier la variable myUrl de index.js avec l’URL correspondante de l’étape 2, depuis le dépôt git d’IBM dans la chaine d’outils. L’application sera redéployée automatiquement.
- Tester l’application cliente une fois redéployée.
- Déployer le client.
-
Authentification
Nous allons utiliser les JSON Web Tokens de Firebase: https://jwt.io/
Ce package est déjà installé dans cette application. On implémente deux URI :- token pour obtenir un token en fonction d’un mot de passe :
En cas de mot de passe correct, on retourne un token et un statut http valide, sinon un statut http unauthorized.
- validetoken indique si le token est valide :
En cas de token valide, on retourne un statut http valide, sinon unauthorized.
$app->get('/token', function(Request $request, Response $response){
$pass = $request->getQueryParam('pass');
$allowed= ckeckPass($pass);
if($allowed){
$token=getTokenJWT();
return $response->withJson($token,200);
}else{
return $response->withStatus(401);
}
});
$app->get('/validetoken', function(Request $request, Response $response){
$token = $request->getQueryParam('token');
if(validJWT($token)){
return $response = $response->withStatus(200);
}else{
return $response = $response->withStatus(401);
}
});- Voici les fonctions ckeckPass, getTokenJWT et validJWT. Il est préférable d’indiquer sa propre clef secrete en remplaçant myOwnKey.
function getTokenJWT() {
//30 min
payload = array("exp" => time() + (60 * 30));
return JWT::encode($payload, "myOwnKey");
}
function ckeckPass($pass){
$sitepass="mypass";
return (strcmp($sitepass,$pass)==0);
}
function validJWT($token) {
$res = false;
try {
$decoded = JWT::decode($token, "myOwnKey", array('HS256'));
$res = true;
} catch (Exception $e) {}
return $res;
}- N’oubliez pas de tester ces URI avec REASTEASY. On pourra modifier cette solution par un test selon login/mdp au lieu d’un seul mot de passe.
- Modifiez les paramètres de l’URI gateau en POST qui permet d’ajouter un gateau. Cette URI doit tenir compte du token.
$token = $request->getQueryParam('token');
if(validJWT($token)){
//insertion du gateau
return $response->withStatus(200);
}else{
return $response->withStatus(401);
}- Modifiez le client en ajoutant une étape de saisie de mot de passe et récupération de token.
$( "#btn-valide").click(function(event) {
$.ajax({
type: "GET",
url: urlServeur+"/token",
data: "pass="+ $("#password").val(),
success: function(data){
sessionStorage.setItem('token', data);
//renvoie vers une autre page ou modification du contenu de la page en cours au choix
window.location.href = "secondepage.html";
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
//on indique avec bootsrap une erreur sur le mot de passe
$(".form-group-password").addClass("has-danger");
$("#password").addClass("form-control-danger");
}
});
});- Puis pour l’enregistrement d’un gateau, n’oubliez pas de renvoyer le token.
var htmlSession="<div class='container section2'><p> Session expirée <div class='offset-5 col-3'>
<a class='btn btn-danger' href='index.php' role='button'>Page principale</a> </div> </p> </div> ";
var token=sessionStorage.getItem('token');
$.ajax({
type: "POST",
contentType: 'application/json; charset=utf-8',
url: urlServeur+"/gateau/"+id+"?token="+token,
success: function(data){
//gateau inseré
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
//erreur, mauvais token ou probleme à l'insertion à gérer selon le code HTTP !
}
}); - token pour obtenir un token en fonction d’un mot de passe :
-
[ Exercices ]
Implementez les URI suivantes en choisissant judicieusement la méthode :
- gateaux qui permet d’afficher tous les gateaux.
- gateau/{id} qui supprime un gateau en fonction de son id avec gestion du jeton.
- gateau/{id} qui modifie le nom d’un gateau en fonction de son id avec gestion du jeton.
-
What else ?
Ces tutoriels peuvent vous intéresser :
https://developer.ibm.com/recipes/author/l-frebourg/