MVC Angular JS + API Laravel
Bonjour tout le monde,
je dois réaliser une web app. Du côté back-end, j'ai réalisé mon API, qui est fonctionnelle et prête à l'emploi, avec Laravel, framework avec lequel je débute et pour le front-end, je dois utiliser Angular JS, que je n'ai jamais utilisé et je suis un peu perdu dans les systèmes MVC entre les deux frameworks (j'ai suivi la formation Angular JS de Grafikart et de Code School).
Je suis un peu perdu car dans Laravel, pour mon API, la structure MCV est assez clair, dossiers et fichiers déjà prêt à l'emploi lors de l'installation d'un nouveau projet Laravel et du coup je vois où modifier mes routes, mes models, mes controllers, ... Par contre avec Angular, je suis entièrement paumé et j'ai du mal à voir, mettre en place, ... la structure MVC avec mes routes, vues, modèles, ...
La première étape de mon web app, est la connexion de l'utilisateur. Il doit arriver sur une page où on demande son login et password, puis il accède à son espace perso. Je ne vois pas pas trop comment faire cela, dois-je tout faire sur la même page, des pages séparées, ...
Voici ce que j'ai déjà réussi à faire et qui fonctionne :p
<!DOCTYPE html>
<html ng-app="MyApp" ng-controller="RouteController">
<head>
<title></title>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.11/angular-route.min.js"></script>
<script src="routes.js"></script>
</head>
<body>
<a href="#/route1/">Route 1</a><br/>
<a href="#/route2/">Route 2</a><br/>
<div ng-view></div>
</body>
</html>(function(){
var module = angular.module("MyApp", ['ngRoute']);
module.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/route1/', {
templateUrl: 'partials/test01.php',
controller: 'RouteController'
})
.when('/route2/', {
templateUrl: 'partials/test02.php',
controller: 'RouteController'
})
.otherwise({
redirectTo: '/'
});
}
]);
module.controller("RouteController", function($scope, $routeParams) {
$scope.param = $routeParams.param;
});
})();Ca fonctionne, mais j'aurais plus besoins d'explications, comment mettre ma structure en place, ... :)
Merci d'avances à ceux qui répondront =D
15 réponses
Pour ma part j'ai utilisé le basic authentication pour mon projet. Hormis le fait que le password soit envoyé en clair lors du login, cela répond à mes besoins.
Voici le fonctionnement d'un point de vue utilisateur :
1) tu crées un utilisateur
2) tu vas sur le formulaire de login
3) tu entres tes identifiants
4) la méthode login() de mon serveur est appelée. Si ce sont les bons identifiants, le serveur me renvoie la personne connectée. Sinon ça me renvoie une erreur 401.
5) Côté AngularJS, je stocke dans un cookie les informations de mon utilisateur. Je crée le token basic auth en faisant un hash en base64 de <email>:<password>.
6) Il te faut ensuite envoyer ce token dans le header de chacune de tes nouvelles requêtes.
Salut, c'est exactement le projet sur lequel je suis actuellement (backend laravel, frontend AngularJS). Voici la partie client du projet https://github.com/Arato/client, tu peux t'inspirer de la structure.
Je suis parti d'un projet yeoman avec generator-angular.
La partie concernant l'authentification va se trouver dans plusieurs fichiers :
- run.js : la fonction routeChangeStart se charge va se lancer à chaque changement de route. Si personne n'est connecté, on redirige vers la page de login.
- controllers/login.js : le controller angular qui va se charger de l'authentification avec le backend laravel.
je suis quand même un peu perdu :p Avant, quand je ne faisais pas encore d'api, donc pas de token, ... je faisais un site avec une page de login, un formulaire avec pseudo et mot de passe, puis j'intérogeais la db, si l'user existe, on créé une session avec des infos dedans et je ré-utilisais cette session sur toutes mes pages php. Ici maintenant je ne vois pas comment faire cela pour un one page avec angular ...
ok, ça me parait plus clair expliqué comme ça :) moi j'ai juste déjà un token généré côté api, donc là maintenant je suis arriver à faire mon http.post sur mon api en passant les identifiants et mon api me retourne toutes les infos en json sur mon utilisateur ainsi que le token généré, maintenant il faut que je fasse en sorte, côté angular, que le système vérifie bien que l'user existe lors de l'appelle de chaque route, si c'est pas le cas, on redirige vers le formulaire de login, sinon il peut accéder à la route.
Merci pour ton aide en tous cas, car ça m'a bien débloquer :)
que le système vérifie bien que l'user existe lors de l'appelle de chaque route, si c'est pas le cas, on redirige vers le formulaire de login, sinon il peut accéder à la route
C'est dans mon fichier run.js
oki super, j'vais y jeter un oeil :)
par contre j'ai une autre question, mon token, je le met dans mon cookie ... tout le monde y a accès alors ... c'est pas problèmatique ça niveau sécurité ?
oui ça je sais, j'ai mal formulé ma question :)
En gros, tout ce que je stocke dans mon cookie pourra être lû par l'user, idem si j'utilise le sessionStorage ... J'aurais voulu que mon user n'ai pas accès à certaines infos que j'aimerais garder en session, un peu comme les sessions en php ... En fait voila, j'aurais aimé avoir une sorte de session php, dans laquelle je stock les infos de l'user (id, nom, token, ...) que je puisse utiliser quand je veux, mais que l'user n'ai pas accès ... en php, pas de soucis mais ici avec angular, je vois pas comment je peux sécuriser ça ... si tu vois ce que je veux dire :)
mais bon, sachant que qu'il est facile d'accéder au code js, je sais pas si c'est faisable :)
Je ne pense pas que construire une app autour de cookie ou session que l'user peut modifier facilement ... soit une bonne idée :p à moins que j'ai pas capté un truc avec angular :p
que veux tu modifier ? normalement tu envoies un token basé sur l'email:password, le tout encodé en Base64. poir ma part je ne renvoie jamais le mot de passe (de toute façon il est encrypté). donc en effet, il peut modifier son token, mais ça n'aura pour effet que de l'embêter. il ne pourra pas se faire passer pour quelqu'un d'autre.
oki mais je pense que niveau api je devrais rajouter une sécurité alors. Car si j'ai une route genre /user/id?token=xxx si l'user genre l'id dans le cookie il aura accès aux autres user alors qu'à la base c'est pour récupérer ses infos
le token ne s'envoie pas en paramètre Get mais dans le header de ta requête HTTP.
dans Laravel tu as quand même un système de session, tu peux avoir la personne authentifiée donc tu peux protéger l'édition de cette manière.