Dans cet article, nous aimerions vous présenter le moyen le plus populaire et le plus moderne de protéger ou de sécuriser votre application Web React Typescript en utilisant Authentification JWT. Alors, quelle est cette sécurité ou protection et pourquoi en avons-nous besoin.
Eh bien, nous discuterons de toutes ces choses dans notre blog. Alors, commençons :
Qu'est-ce que la sécurité et la protection dans les logiciels ?
Afin de sécuriser ou de sauvegarder les données et les informations de l'utilisateur d'une bibliothèque tierce inconnue, Attaques XSS, web scraping ou hacker professionnel, vous pouvez utiliser certains protocoles de sécurité comme HTTPS plus de HTTP ou faire une authentification dans votre application ou peut-être pouvez-vous utiliser toute autre méthode de cryptage de sécurité ou méthode de somme de contrôle afin que les données et l'intégrité de votre application restent en sécurité.
Pourquoi avons-nous besoin de sécurité ?
Eh bien, afin de protéger vos applications contre certaines attaques et pirates, comme nous l'avons mentionné ci-dessus, certaines raisons pour lesquelles nous en avons besoin. Laissez-moi vous expliquer la même chose avec un exemple :
1 Exemple:
Si vous prévoyez d'aller dans une station de montagne pour un pique-nique avec toute la famille, alors pourquoi gardez-vous les portes et les fenêtres verrouillées lorsque vous quittez votre maison ?
Parce que quelqu'un peut entrer dans votre maison si vos portes et fenêtres ne sont pas verrouillées, n'est-ce pas ? Les voleurs peuvent prendre des objets précieux; n'importe quel animal peut se réhabiliter comme un serpent. Et vous ne pouvez rien faire parce que ce qui est parti est parti, parce que vous n'aviez pas la sécurité. Droit? Lock protège votre maison de la même manière que la sécurité dans vos applications logicielles.
Presque toutes les entreprises utilisent aujourd'hui la sécurité ou l'authentification comme JWT (Jeton Web JSON). Si JWT n'est pas implémenté, un grand nombre de comptes d'utilisateurs peuvent être piratés par n'importe quel pirate.
Qu'est-ce que le jeton Web JWT ou JSON ?
Jeton Web JSON est une norme moderne de niveau Internet pour générer les données avec un signature volontaire et le cryptage volontaire dont la charge utile porte JSON qui déclare un certain nombre de réclamations. Les jetons ont été signés soit à l'aide d'un secret privé, soit d'une clé publique/privée.
Aussi, lisez: Les interfaces dans Typescript : de quoi s'agit-il et comment les utiliser ?
Comment implémenter JWT dans l'application React TypeScript (processus étape par étape)
Étapes 1: Créer un Réagir à l'application TypeScript sur votre système en suivant la commande :
npx create-react-app <Any-name-you want> --template typescriptÉtapes 2:
Accédez à votre Réagir à l'application dactylographiée Répertoire et installer un bootstrap, axios, réagir-crochet-forme, réagir-toastifier & réagir-routeur-dom package en suivant la commande :
npm install axios bootstrap [email protected] react-hook-form react-toastifyÉtapes 3:
Dans votre App.tsx fichier, effacez tout le code et paste ce qui suit. Fondamentalement, ce que nous essayons de faire ici est d'importer tous les composants que nous créerons à l'avenir et d'ajouter réagir-routeur-dom fonctionnalité de routage dans les pages avec des liens différents-différents :
import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.bundle.min.js";
import SignUp from "./Components/SignUp";
import Login from "./Components/Login";
import PrivateRoute from "./Auth/PrivateRoute";
import Home from "./Components/Home";
import {BrowserRouter, Route, Switch} from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<Switch>
<PrivateRoute exact path="/login" component={Login}/>
<Route exact path="/register" component={SignUp} />
</Switch>
</BrowserRouter>
);
}
export default App;
Étapes 4:
Nous allons maintenant créer une route privée pour notre application. Créez un dossier nommé "Auth" et sous ce dossier créez un nouveau fichier connu sous le nom de PrivateRoute.tsx fichier, copiez tout le code et collez ce qui suit, essentiellement ce que nous essayons de faire ici, c'est que nous retirons notre jeton JWT du Stockage local.
Et vérifiez si nous n'avons pas de jeton JWT dans notre Stockage local ensuite, nous irons à la route de connexion, sinon s'il a un jeton, il restera sur la page d'accueil.
import React from "react";
import { Redirect, Route } from "react-router-dom";
const PrivateRoute = (props) => {
const token = localStorage.getItem("auth");
return <>{token ? <Route {...props} /> : <Redirect to="/login" />}</>;
};
export default PrivateRoute;
Étapes 5:
Nous allons maintenant créer une interface utilisateur pour cela. Allez d'abord au src dossier, puis à l'intérieur du src dossier créer un nouveau dossier nommé "Composantes ».
Et à l'intérieur du dossier des composants, créez 3 fichiers comme suit :
- Connexion.tsx
- Inscription.tsx
- Accueil.tsx
- accueil.css
Avant de continuer, assurez-vous que vous avez votre propre API de nœud de l'authentification JWT qui fournit le jeton JWT. Parce que nous utilisons celui créé sur notre machine locale. Veuillez changer le http://localhost:4000 URL en code selon votre Code URL de l'API.
Dans Login.tsx
import React, { FC } from "react";
import { Link } from "react-router-dom";
import { useForm } from "react-hook-form";
import axios from "axios";
import { ToastContainer, toast, Flip } from "react-toastify";
import "react-toastify/dist/ReactToastify.min.css";
import { RouteComponentProps } from "react-router";
type SomeComponentProps = RouteComponentProps;
const Login: FC<SomeComponentProps> = ({ history }): JSX.Element => {
const {
register,
handleSubmit,
formState: { errors },
} = useForm();
const login = (data: any) => {
let params = {
email: data.email,
password: data.password,
};
axios
.post("http://localhost:4000/api/login", params)
.then(function (response) {
// IF EMAIL ALREADY EXISTS
if (response.data.success === false) {
toast.error(response.data.error, {
position: "top-right",
autoClose: 3000,
hideProgressBar: true,
closeOnClick: true,
pauseOnHover: true,
draggable: false,
progress: 0,
toastId: "my_toast",
});
} else {
toast.success(response.data.message, {
position: "top-right",
autoClose: 3000,
hideProgressBar: true,
closeOnClick: true,
pauseOnHover: true,
draggable: false,
progress: 0,
toastId: "my_toast",
});
localStorage.setItem("auth", response.data.token);
setTimeout(() => {
history.push("/");
}, 3000);
}
})
.catch(function (error) {
console.log(error);
});
};
return (
<>
<div className="container">
<div
className="row d-flex justify-content-center align-items-center"
style={{ height: "100vh" }}
>
<div className="card mb-3" style={{ maxWidth: "320px" }}>
<div className="col-md-12">
<div className="card-body">
<h3 className="card-title text-center text-secondary mt-3">
Login Form
</h3>
<form autoComplete="off" onSubmit={handleSubmit(login)}>
<div className="mb-3 mt-4">
<label className="form-label">Email</label>
<input
type="email"
className="form-control shadow-none"
id="exampleFormControlInput1"
{...register("email", { required: "Email is required!" })}
/>
{errors.email && (
<p className="text-danger" style={{ fontSize: 14 }}>
{errors.email.message}
</p>
)}
</div>
<div className="mb-3">
<label className="form-label">Password</label>
<input
type="password"
className="form-control shadow-none"
id="exampleFormControlInput2"
{...register("password", {
required: "Password is required!",
})}
/>
{errors.password && (
<p className="text-danger" style={{ fontSize: 14 }}>
{errors.password.message}
</p>
)}
</div>
<div className="text-center mt-4 ">
<button
className="btn btn-outline-primary text-center shadow-none mb-3"
type="submit"
>
Submit
</button>
<p className="card-text pb-2">
Have an Account?{" "}
<Link style={{ textDecoration: "none" }} to={"/register"}>
Sign Up
</Link>
</p>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<ToastContainer
position="top-right"
autoClose={5000}
hideProgressBar
closeOnClick
rtl={false}
pauseOnFocusLoss={false}
draggable={false}
pauseOnHover
limit={1}
transition={Flip}
/>
</>
);
};
export default Login;
Dans SignUp.tsx
import React, { FC } from "react";
import { Link, RouteComponentProps } from "react-router-dom";
import { useForm } from "react-hook-form";
import axios from "axios";
import { ToastContainer, toast, Flip } from "react-toastify";
import "react-toastify/dist/ReactToastify.min.css";
type SomeComponentProps = RouteComponentProps;
const SignUp: FC<SomeComponentProps> = ({ history }) => {
const {
register,
handleSubmit,
watch,
reset,
formState: { errors },
} = useForm();
const submitData = (data: any) => {
let params = {
firstname: data.firstname,
lastname: data.lastname,
email: data.email,
password: data.password,
confirmpassword: data.cpassword,
};
console.log(data);
axios
.post("http://localhost:4000/api/signup", params)
.then(function (response) {
toast.success(response.data.message, {
position: "top-right",
autoClose: 3000,
hideProgressBar: true,
closeOnClick: true,
pauseOnHover: true,
draggable: false,
progress: 0,
toastId: "my_toast",
});
reset();
setTimeout(() => {
history.push("/login");
}, 3000);
})
.catch(function (error) {
console.log(error);
});
};
return (
<>
<div className="container">
<div
className="row d-flex justify-content-center align-items-center"
style={{ height: "100vh" }}
>
<div className="card mb-3 mt-3 rounded" style={{ maxWidth: "500px" }}>
<div className="col-md-12">
<div className="card-body">
<h3 className="card-title text-center text-secondary mt-3 mb-3">
Sign Up Form
</h3>
<form
className="row"
autoComplete="off"
onSubmit={handleSubmit(submitData)}
>
<div className="col-md-6">
<div className="">
<label className="form-label">Firstname</label>
<input
type="text"
className="form-control form-control-sm"
id="exampleFormControlInput1"
{...register("firstname", {
required: "Firstname is required!",
})}
/>
{errors.firstname && (
<p className="text-danger" style={{ fontSize: 14 }}>
{errors.firstname.message}
</p>
)}
</div>
</div>
<div className="col-md-6">
<div className="">
<label className="form-label">Lastname</label>
<input
type="text"
className="form-control form-control-sm"
id="exampleFormControlInput2"
{...register("lastname", {
required: "Lastname is required!",
})}
/>
{errors.lastname && (
<p className="text-danger" style={{ fontSize: 14 }}>
{errors.lastname.message}
</p>
)}
</div>
</div>
<div className="">
<label className="form-label">Email</label>
<input
type="email"
className="form-control form-control-sm"
id="exampleFormControlInput3"
{...register("email", { required: "Email is required!" })}
/>
{errors.email && (
<p className="text-danger" style={{ fontSize: 14 }}>
{errors.email.message}
</p>
)}
</div>
<div className="">
<label className="form-label">Password</label>
<input
type="password"
className="form-control form-control-sm"
id="exampleFormControlInput5"
{...register("password", {
required: "Password is required!",
})}
/>
{errors.password && (
<p className="text-danger" style={{ fontSize: 14 }}>
{errors.password.message}
</p>
)}
</div>
<div>
<label className="form-label">Confirm Password</label>
<input
type="password"
className="form-control form-control-sm"
id="exampleFormControlInput6"
{...register("cpassword", {
required: "Confirm Password is required",
validate: (value) =>
value === watch("password") ||
"Passwords don't match.",
})}
/>
{errors.cpassword && (
<p className="text-danger" style={{ fontSize: 14 }}>
{errors.cpassword.message}
</p>
)}
</div>
<div className="text-center mt-4 ">
<button
className="btn btn-outline-primary text-center shadow-none mb-3"
type="submit"
>
Submit
</button>
<p className="card-text">
Already have an account?{" "}
<Link style={{ textDecoration: "none" }} to={"/login"}>
Log In
</Link>
</p>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<ToastContainer
position="top-right"
autoClose={5000}
hideProgressBar
closeOnClick
rtl={false}
pauseOnFocusLoss={false}
draggable={false}
pauseOnHover
limit={1}
transition={Flip}
/>
</>
);
};
export default SignUp;
Dans Accueil.tsx
import React, { FC } from "react";
import { RouteComponentProps } from "react-router-dom";
import "./home.css";
type SomeComponentProps = RouteComponentProps;
const Home: FC<SomeComponentProps> = ({ history }) => {
const logout = () => {
localStorage.clear();
history.push("/login");
};
return (
<>
<div
style={{
display: "flex",
justifyContent: "space-between",
paddingLeft: 50,
paddingRight: 50,
}}
>
<div>
<h3 className="m-3">Home</h3>
</div>
<div>
<button type="submit" className="buttons" onClick={logout}>
Logout
</button>
</div>
</div>
<div className="container">
<div
className="row d-flex justify-content-center align-items-center text-center"
style={{ height: "100vh" }}
>
<p className="muted display-6">Hello User👋</p>
</div>
</div>
</>
);
};
export default Home;
Dans home.css
.buttons
{
color: white;
background: cornflowerblue;
padding: 10px 40px;
margin: 10px;
border: none;
border-radius: 30px;
cursor: pointer;
}
Aussi, lisez: Comment appeler l'API Web avec le crochet useEffect dans React TypeScript ?
Étapes 6:
Exécutez maintenant le code en suivant la commande :
npm startÉtapes 7:
Maintenant, vous verrez votre sortie comme ceci :
Page d'inscription :
Page de connexion:
Après avoir entré des informations de connexion valides, inspectez le navigateur s'il y a un jeton JWT ou non ? S'il s'agit d'une connexion valide, l'écran ressemblera à ceci, sinon il vous montrera un message de mot de passe incorrect de votre API.
Maintenant, si vous remarquez qu'il y a un jeton d'authentification étrange généré sur Application 'Languette' En dessous de Stockage local zone d'authentification. Il s'agit d'une clé privée ou signée qui est requise par l'authentification JWT à partir d'une API que vous avez utilisée.
Si vous supprimez ce jeton du navigateur, vous serez à nouveau redirigé vers la page de connexion car il n'y a pas de jeton disponible dessus et la route privée jouera son rôle ici.
Petit extrait de logique :
- Connexion: Dans Login, vous transmettez simplement les données json d'un utilisateur et obtenez un jeton d'un API RESTful.
- Inscription: Dans Sign Up, vous transmettez à nouveau les données json d'un utilisateur et enregistrez l'utilisateur dans la base de données.
- Accueil: Dans Accueil, vous vous connectez à notre utilisateur avec les informations d'identification correctes qu'il a saisies et définissez notre jeton JWT sur celui du navigateur. Stockage local qui provient de l'API de connexion.
- Déconnexion: Dans Déconnexion, vous effacez le jeton JWT de votre Stockage local.
Aussi, lisez: Principaux défis et solutions de développement Web
Conclusion:
Authentifications JWT sont largement utilisés de nos jours, veuillez ne les utiliser que là où cela est nécessaire dans vos projets. Ne les utilisez pas si vous utilisez uniquement la connexion d'inscription pour votre usage personnel. Parce que vos données sont locales et qu'elles ne seront disponibles que pour vous, il est donc inutile de les utiliser à des fins personnelles. Mais oui, c'est une méthode très puissante, robuste et sécurisée pour transmettre vos données.
Disponibilité des codes :
https://github.com/Akshay80/React-TS-login-using-jwt/tree/main/src/Auth
Merci beaucoup d'avoir lu ce blog si patiemment 😊,
Bonne journée 👋.
Services de développement Web
Êtes-vous à la recherche d'une entreprise de développement Web fiable? Nos développeurs Web hautement qualifiés nous permettent de fournir des services de développement Web axés sur les résultats. Contactez notre équipe pour comprendre comment nous pouvons vous aider à atteindre vos objectifs commerciaux.
