VueJS authentification

Bob456
Javascript

Bonjour,

J'aimerais comprendre comment doit fonctionner une connexion sécurisée avec VueJS

Ce que je fais

BackEnd :
J'ai une API en PHP qui permet de me donner les informations de la BDD.

FrontEnd :
J'ai un front avec VueJS.
Avec Vue-ressource et Vue-Router

J'arrive à discuter avec l'API.

Ce que je veux

J'aimerais savoir ce que je doit faire pour avoir une connexion securisée.
Que lorsque la personne est connectée elle puisse naviguer tranquillement.
Si elle n'est pas connectée, elle doit être redirigé vers la page de Login automatiquement.

J'ai vu que l'on devait utiliser un system de Token mais je ne comprends pas comment cela fonctionne.
Si quelqu'un pourrait m'expliquer comment cela fonctionne cela serait simpa :)

(le token est donné par l'API, mais il est lié à quoi ? Un code généré au hasard à chaque identifcation correcte ?)
Comment je peux savoir que le token est bien le bon ?
Une fois le token attribué par l'API, le token est stocké quelque part ?
Un utilisateur ne pourrait pas mettre un Token et un nom d'utilisateur bidon pour que VueJS se dise
"Si il à un token c'est qu'il est identifié, donc il peut accéder au site ?"
Je dois obligatoirement utilisé vueX ?

En tout cas merci pour votre temps et bonne année et meilleurs voeux :)

8 réponses

Hadrien

J'apprend également en ce moment à me faire un espace de connexion avec VueJS.
Côté Vue, j'utilise la dépendance Vue-Auth qui permet de simplifier le travail : https://github.com/websanova/vue-auth
Côté PHP, j'utilise Laravel, et la dépendance JWT Auth qui me permet de générer un token et de restreindre l'accès à mon API en fonction de ce token : https://github.com/tymondesigns/jwt-auth
C'est une façon de faire parmi d'autres. Je n'utilise pas Vuex avec cette dépendance, mais j'imagine que tu peux le faire.

Bob456
Auteur

Merci pour ta réponse :)

Je vais regarder Vue Auth

Moi qui voulait utiliser seulement php et Vue....
Utiliser Laravel est vraiment necessaire ?
C'est pas beaucoup pour si peu ?

Maenhyr

Bonjour,

le principe d'authentification est le même peut importe le langage. Je t'invite à lire cette page pour mieux comprendre https://github.com/teesloane/Auth-Boss.

Concernant la technologie, @Hadrien t'a donné sa solution, mais tu peux tout a fait en faire une maison.

Lartak

Bonjour.

Utiliser Laravel est vraiment necessaire ?

Non, ce n'est pas obligatoire, tu peux par exemple utiliser : A simple library to work with JSON Web Token and JSON Web Signature, qui est spécifique à PHP, mais à aucun framework.

Bob456
Auteur

Merci pour vos réponses :)
Je vais lire vos documents pour le BackEnd

Edit : je vais suivre aussi ce tuto là : lien vers le tuto
Il à l'air vraiment bien fait par rapport à ce que j'ai besoins (pour le front)

Bob456
Auteur

Bonjour,

J'ai suivi le tuto qui utilise un serveur NodeJs express en Back et VueJs en Front : Tuto
Tout fonctionne mais j'ai maintenant un doute sur la sécurité.

et quelqu'un à dit :
"All this is really dangerous and insecure... in addition to RedPlanet, someone with no rights at all, can easily set a random token in the localstorage and get an access to the whole app..."

Je viens d'essayer juste ça :
localStorage.setItem('jwt', 'xxxx');
jet cela suffit à "hacker" la sécurité... On a vu mieux :p

et une autre :
"I would advise against using localStorage for storing the JWT, instead cookies with HttpOnly set should be used."

Savez vous comment je pourrais sécuriser mes données pour éviter que quelqu'un créer un Token directement dans l'application ?
Et comment faire pour stocker l'informations dans un cookie 'HttpOnly' ?
Ou une autre manière ?

Merci pour vos réponses :)

Maenhyr

Si tu as déjà PHP, pourquoi utiliser un autre serveur NodeJS?

Bob456
Auteur

Bonjour,

J'ai eu du mal à comprendre comment fonctionnait le JWT.
J'ai suivi un tuto avec un serveur avec NodeJs
Le backend PHP en était qu'au début Maintenant tout est fait avec NodeJs
Il me reste plus qu'à améliorer la sécurité
et réussir à mettre le https