Neste artigo, gostaríamos de apresentar a você a maneira mais popular e moderna de proteger ou proteger seu aplicativo Web React Typescript usando Autenticação JWT. Então, o que é essa segurança ou proteção e por que precisamos dela.
Bem, vamos discutir todas essas coisas em nosso blog. Então, vamos começar:
O que é Segurança e Proteção em Software?
Para proteger ou salvar os dados e informações do usuário de uma biblioteca desconhecida de terceiros, Ataques XSS, web scraping ou um hacker profissional, você pode usar certos protocolos de segurança como HTTPS Acima de HTTP ou fazer autenticação em seu aplicativo ou talvez você possa usar qualquer outro método de criptografia de segurança ou métodos de soma de verificação para que os dados e a integridade do seu aplicativo permaneçam seguros.
Por que precisamos de segurança?
Bem, para proteger seus aplicativos de certos ataques e hackers, como mencionamos acima, alguns motivos pelos quais precisamos. Deixe-me explicar o mesmo com um exemplo:
1 exemplo:
Se você planeja ir a uma estação de montanha para um piquenique com toda a família, então por que você mantém as portas e janelas trancadas quando sai de casa?
Porque alguém pode entrar em sua casa se suas portas e janelas não estiverem trancadas, certo? Os ladrões podem levar itens preciosos; qualquer animal pode reabilitar como uma cobra. E você não pode fazer nada porque o que se foi, se foi, porque você não tinha a segurança. Certo? Lock protege sua casa da mesma forma que a segurança faz em seus aplicativos de software.
Quase todas as empresas hoje em dia usam segurança ou autenticação como JWT (Token da Web JSON). Se o JWT não for implementado, um grande número de contas de usuário pode ser invadido por qualquer hacker.
O que é JWT ou JSON Web Token?
Token da Web JSON é um padrão moderno de nível de Internet para gerar os dados com um assinatura voluntária e criptografia voluntária cuja carga carrega JSON que declara um certo número de declarações. Os tokens foram assinados usando um segredo privado ou uma chave pública/privada.
Além disso, leia: Interfaces em Typescript: O que são e como usá-las?
Como implementar o JWT no aplicativo React TypeScript (processo passo a passo)
Passos 1: Crie uma Aplicativo Reagir TypeScript em seu sistema seguindo o comando:
npx create-react-app <Any-name-you want> --template typescriptPassos 2:
Vá para sua Aplicativo React Typescript Diretório e instale um inicialização, axios, forma de gancho de reação, reagir-torrar & react-roteador-dom pacote seguindo o comando:
npm install axios bootstrap [email protected] react-hook-form react-toastifyPassos 3:
Em sua Aplicativo.tsx arquivo, limpe todo o código e colar a seguir. Basicamente, o que estamos tentando fazer aqui é importar todos os componentes que criaremos no futuro e adicionar react-roteador-dom funcionalidade de roteamento para as páginas com links diferentes:
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;
Passos 4:
Agora vamos criar uma rota privada para nossa aplicação. Crie uma pasta chamada “Auth” e nesta pasta crie um novo arquivo conhecido como PrivateRoute.tsx arquivo, copie todo o código e cole o seguinte, basicamente o que estamos tentando fazer aqui é tirar nosso token JWT do Armazenamento local.
E verifique se não temos um token JWT em nosso Armazenamento local então iremos para a rota Login, caso contrário, se tiver um token, ele permanecerá na página inicial.
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;
Passos 5:
Agora vamos criar uma interface do usuário para isso. Primeiro vá para o src pasta e, em seguida, dentro da src pasta crie uma nova pasta com o nome “Componentes".
E dentro da pasta de componentes faça 3 arquivos como:
- Login.tsx
- Cadastre-se.tsx
- Página inicial.tsx
- home.css
Antes de prosseguirmos, certifique-se de que tem o seu próprio API do nó de Autenticação JWT que fornece Token JWT. Porque estamos usando o criado em nossa máquina local. Por favor, altere o http://localhost:4000 URL em código de acordo com o seu Código de URL da API.
Em 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;
Em 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;
Em Home.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;
Em casa.css
.buttons
{
color: white;
background: cornflowerblue;
padding: 10px 40px;
margin: 10px;
border: none;
border-radius: 30px;
cursor: pointer;
}
Além disso, leia: Como chamar a API da Web com o gancho useEffect no React TypeScript?
Passos 6:
Agora execute o código seguindo o comando:
npm startPassos 7:
Agora você verá sua saída assim:
Página de inscrição:
Página de login:
Depois de inserir um detalhe de login válido, inspecione o navegador se há algum token JWT ou não? Se for um login válido, a tela ficará assim, senão mostrará uma mensagem de senha incorreta da sua API.
Agora, se você perceber que há um token de autenticação estranho gerado no aplicativo 'Aba' Sob Armazenamento local área de autenticação. Isso é assinado ou uma chave privada exigida pela autenticação JWT de uma API que você usou.
Caso você exclua este token do navegador, você será redirecionado novamente para a página de login, pois não há token disponível nele e a rota privada desempenhará seu papel aqui.
Pequeno trecho de lógica:
- Entrar: No Login, você está apenas passando os dados json de um usuário e obtendo um token de um API RESTful.
- Inscrever-se: Em Sign Up, você está novamente passando os dados json de um usuário e salvando o usuário no banco de dados.
- Home page: Em Home, você está logando nosso usuário com a credencial correta que ele digita e configura nosso JWT Token para o do navegador Armazenamento local que vem da API de login.
- Sair: No Logout, você limpa o Token JWT do seu Armazenamento local.
Além disso, leia: Principais desafios e soluções de desenvolvimento da Web
Conclusão:
Autenticação JWT são amplamente utilizados hoje em dia, por favor, use-o apenas onde for necessário em seus projetos. Não os use se você estiver apenas usando o login de inscrição para seu uso pessoal. Como seus dados são locais e estarão disponíveis apenas para você, não faz sentido usá-los para uso pessoal. Mas sim, é um método muito poderoso, robusto e seguro para transmitir seus dados.
Disponibilidade do código:
https://github.com/Akshay80/React-TS-login-using-jwt/tree/main/src/Auth
Muito obrigado por ler este blog com tanta paciência 😊,
Bom dia 👋.
Serviços de desenvolvimento web
Você está procurando uma empresa de desenvolvimento web confiável? Nossos desenvolvedores web altamente qualificados nos permitem entregar serviços de desenvolvimento web orientados a resultados. Entre em contato com nossa equipe para entender como podemos ajudá-lo a atingir seus objetivos de negócios.
