Adicione autenticação de usuário ao seu aplicativo React
Ao criar aplicativos Web, a autenticação de usuários é um recurso necessário a ser adicionado ao seu aplicativo. A autenticação de usuários permite que os usuários verificados acessem os recursos disponíveis no seu aplicativo e nega o acesso a usuários não verificados.
Integrar a autenticação de usuários em aplicativos React não é uma tarefa fácil e consome muito tempo, pois envolve vários processos complexos, como hash de senhas, geração e gerenciamento de tokens de autenticação e muito mais.
No entanto, com plataformas como o Back4App, a integração da autenticação de usuário com seus aplicativos React é simples e fácil. Neste artigo, você explorará como adicionar autenticação de usuário ao seu aplicativo React usando o Back4App.
Contents
Entendendo a autenticação do usuário
A autenticação do usuário é o processo de determinar a identidade de uma pessoa que está tentando obter acesso ao seu aplicativo.
Exige que a pessoa que tenta obter acesso ao seu aplicativo forneça credenciais verificáveis, que podem estar na forma de um nome de usuário e senha, dados biométricos, chaves/tokens de acesso etc.
Se o seu mecanismo de autenticação considerar as credenciais válidas, ele concederá ao usuário acesso ao seu aplicativo; caso contrário, ele rejeitará a solicitação de autenticação com a mensagem de erro apropriada.
Métodos comuns de autenticação
Alguns métodos comuns de autenticação são os seguintes:
- Nome de usuário e senha: esse método de autenticação exige que o usuário forneça um nome de usuário e uma senha válidos para autenticar sua identidade. Depois que um usuário fornece um nome de usuário e uma senha, esse mecanismo de autenticação os compara com os dados armazenados no banco de dados e só aprova a solicitação de autenticação se eles corresponderem.
- Autenticação multifatorial (MFA): A MFA refere-se à combinação de vários mecanismos de autenticação para autenticar um usuário. Em um sistema de autenticação que usa MFA, o usuário precisa validar sua identidade mais de uma vez. Por exemplo, um usuário pode ser solicitado a inserir um código de autenticação depois de autenticar sua identidade usando um nome de usuário e uma senha.
- Autenticação biométrica: A autenticação biométrica refere-se a mecanismos de autenticação que dependem de características biológicas, como rosto, padrões de íris, impressões digitais ou reconhecimento de voz para autenticar um usuário.
- OAuth: O OAuth é um protocolo de autenticação que permite que os usuários autentiquem suas identidades concedendo ao seu aplicativo acesso ao provedor OAuth preferido deles, como o Facebook ou o X (antigo Twitter). Quando um usuário tenta se autenticar usando o OAuth, ele é redirecionado para a tela de login do provedor do OAuth para autenticar sua identidade.
- Tokens da Web JSON (JWT): Os JWTs são formatos de token compactos portáteis e seguros para URIs, geralmente usados para transmitir detalhes de autenticação e autorização de forma segura entre diferentes partes. A autenticação com JWTs envolve o envio do token de acesso JWT pelo usuário em suas solicitações para validar sua identidade.
Adição de autenticação de usuário ao seu aplicativo com o Back4app
O Back4app é uma plataforma de nuvem que oferece uma ampla gama de serviços, incluindo um recurso de Backend como serviço (BaaS). A opção BaaS do Back4app oferece vários recursos, inclusive autenticação de usuário.
A implementação da autenticação de usuário com o Back4app envolve algumas etapas. Para este tutorial, você criará um aplicativo simples de gerenciamento de banco usando o React.
Esse aplicativo integrará os recursos de autenticação do Back4app, permitindo que você crie uma conta, faça login na sua conta, acesse suas informações de login atuais e faça logout.
Criação de um aplicativo React
Para criar um novo aplicativo React, comece criando um novo aplicativo React usando o Vite. O Vite é uma ferramenta de construção de desenvolvimento da Web que oferece uma experiência de desenvolvimento mais rápida e eficiente.
Execute o comando a seguir em seu terminal para criar o novo aplicativo React:
npm init vite
Depois de executar o comando acima, uma série de prompts será exibida na tela, solicitando que você especifique o nome do aplicativo, a estrutura escolhida e a variante de idioma a ser usada.
Assim:
Na imagem acima, o nome do aplicativo é react-authentication-app, a estrutura selecionada é React e a variante de linguagem é JavaScript.
Em seguida, altere seu diretório atual para o diretório do aplicativo e instale as dependências necessárias executando os comandos abaixo:
cd react-authentication-app && npm install
Em seguida, instale o React Router em seu aplicativo executando o comando abaixo:
npm install react-router-dom
Em seguida, abra seu aplicativo React em um IDE (Ambiente de Desenvolvimento Integrado) e modifique o arquivo main.jsx substituindo o conteúdo pelo bloco de código abaixo.
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import { BrowserRouter } from 'react-router-dom'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>,
)
Esse bloco de código importa o componente BrowserRouter do pacote react-router-dom e envolve o componente App.
Isso permite o roteamento em todo o aplicativo. Em seu componente App, defina as diferentes rotas no aplicativo.
Assim:
import { Route, Routes } from "react-router-dom";
import Signup from "./pages/Signup";
import Login from "./pages/Login";
import Home from "./pages/Home";
function App() {
return (
<>
<Routes>
<Route path="/home" element={<Home />} />
<Route path="" element={<Signup />}/>
<Route path="/login" element={<Login />}/>
</Routes>
</>
)
}
export default App
O bloco de código acima define três rotas separadas, permitindo que os usuários naveguem entre as páginas de inscrição, login e home com base nos caminhos de URL.
Agora, crie uma pasta de componentes no diretório src do aplicativo. Nessa pasta, crie um arquivo Authnavbar.jsx. Esse componente conterá uma barra de navegação que será exibida nas páginas de registro e login.
No componente Authnavbar, escreva este código:
import React from "react";
import { Link } from "react-router-dom";
function Authnavbar(props) {
return (
<nav>
<h3>Banka</h3>
{props.type === "signup" ? (
<div>
If you already have an account{""}
<Link to="/login" className="link">
Log in
</Link>
</div>
) : props.type === "login"? (
<div>
If you don't have an account{""}
<Link to="/" className="link">
Sign Up
</Link>
</div>
) : null}
</nav>
);
}
export default Authnavbar;
O bloco de código acima cria uma barra de navegação com renderização condicional com base no valor da propriedade type, permitindo que os usuários naveguem entre as páginas de inscrição e login no aplicativo.
Em seguida, gere uma pasta de páginas no diretório src do aplicativo. Nessa pasta, crie três componentes: Home.jsx, Sign-up.jsx e Login.jsx. Esses arquivos servirão como páginas inicial, de registro e de login.
A página de inscrição conterá um formulário no qual os usuários poderão inserir seus detalhes, como nome de usuário, e-mail e senha.
Por exemplo:
import React from "react";
import Authnavbar from "../components/Authnavbar";
function Signup() {
const [formData, setFormData] = React.useState({
username: "",
email: "",
password: "",
});
const handleChange = (event) => {
setFormData((prevState) => ({
...prevState,
[event.target.name]: event.target.value,
}));
};
return (
<>
<Authnavbar type= "sign-up"/>
<form>
<input
type= "text"
name= "username"
placeholder= "Username..."
onChange={handleChange}
value={formData.username}
/>
<input
type= "email"
name= "email"
placeholder= "Email..."
onChange={handleChange}
value={formData.email}
/>
<input
type= "password"
name= "password"
placeholder= "Password..."
onChange={handleChange}
value={formData.password}
/>
<div>
<button>Sign Up</button>
</div>
</form>
</>
);
}
export default Sign-up;
Esse bloco de código representa uma página de registro. Ele contém um formulário com campos de entrada, incluindo o nome de usuário, o e-mail e a senha do usuário.
Há também um estado formData que armazena os valores dos campos de entrada de nome de usuário, e-mail e senha. A função handleChange atualiza o estado formData sempre que o usuário digita nos campos de entrada.
No componente Login, escreva as seguintes linhas de código:
import React from "react";
import Authnavbar from "../components/Authnavbar";
function Login() {
const [formData, setFormData] = React.useState({
username: "",
password: "",
});
const handleChange = (event) => {
setFormData((prevState) => ({
...prevState,
[event.target.name]: event.target.value,
}));
};
return (
<>
<Authnavbar type= "login"/>
<form>
<input
type= "text"
name= "username"
placeholder= "Username..."
onChange={handleChange}
value={formData.username}
/>
<input
type= "password"
name= "password"
placeholder= "Password..."
onChange={handleChange}
value={formData.password}
/>
<div>
<button>Log In</button>
</div>
</form>
</>
);
}
export default Login;
A página de login é bastante semelhante à página de registro, exceto pelo fato de que não há campo de entrada de e-mail no formulário de login e o estado do objeto formData não tem a propriedade e-mail.
Agora, estilize seu aplicativo substituindo o código em seu arquivo index.css pelas seguintes linhas de código:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
color: #333333;
background-color: #E8F7F5;
inline-size: 50%;
margin: auto;
font-family: "Montserrat", sans-serif;
}
input{
padding: 0.7rem 1rem;
border-radius: 10px;
border: none;
outline: none;
color: #333333;
background-color: #FFFFFF;
font-family: "Montserrat", sans-serif;
inline-size: 100%;
}
input::placeholder{
font-family: "Montserrat", sans-serif;
font-weight: 500;
}
button{
padding: 0.7rem 1rem;
background-color: #00C3A5;
color: #FFFFFF;
font-family: "Montserrat", sans-serif;
font-size: 14px;
border-radius: 7px;
border: none;
}
form{
margin-block-start: 25%;
display: flex;
flex-direction: column;
gap: 2rem;
align-items: center;
}
nav{
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 0;
}
.link{
text-decoration: none;
color: #00C3A5;
}
Depois de criar o estilo do aplicativo, execute o comando abaixo para iniciar o aplicativo:
npm run dev
A execução do comando acima fornecerá o link http://localhost:5173/. Navegue até esse link no navegador da Web para visualizar o aplicativo.
Com os estilos que você definiu, a página de registro deve se parecer com a página abaixo:
Sua página de login deve se parecer com a imagem abaixo:
Agora que você criou seu aplicativo React, precisa criar um novo aplicativo Back4app para lidar com a autenticação.
Criação de um novo aplicativo Back4App
Para usar o Back4app, você precisa ter uma conta. Se ainda não tiver uma, você pode se inscrever gratuitamente.
Para este tutorial, você criará um novo aplicativo Back4app usando o agente Back4app AI. O Back4app AI Agent é um auxiliar de IA que ajuda você a executar tarefas no Back4app usando prompts.
Entre na sua conta Back4app, localize e clique no botão “AI Agent” na barra de navegação do seu painel (veja a imagem abaixo).
Para usar o Back4app AI Agent para gerar um aplicativo, digite o prompt abaixo:
create a new application named react-authenticationVocê deverá receber uma resposta semelhante à mostrada na imagem abaixo:
Conforme mostrado na imagem acima, o Back4app AI Agent criou um aplicativo chamado react-authentication. Você pode encontrar esse aplicativo na página da Web “My App”.
Como alternativa, você pode criar um novo aplicativo Back4app usando a UI (Interface do usuário) intuitiva do Back4app.
No aplicativo react-authentication no Back4app, crie uma classe de carteira. Essa classe de carteira conterá informações valiosas sobre a carteira do usuário.
Você pode criar a classe com o AI Agent usando o prompt abaixo:
Create a Wallet class and add the following fields: balance, owner(relation to the User class indicating which user owns the wallet), createdAt, and updatedAt in the react-authentication appO AI Agent iniciará o processo de criação da classe de carteira e adicionará o especificado, conforme mostrado na imagem abaixo.
Como conectar seu aplicativo React ao Back4app
Depois de criar o aplicativo Back4app, você precisa conectar o aplicativo Back4app ao aplicativo React usando o Parse SDK.
Instale o Parse em seu aplicativo executando o comando abaixo:
npm install parse
Em seguida, inicialize-o em seu aplicativo importando o objeto Parse em seu componente de aplicativo e configurando-o com as chaves do aplicativo Back4app.
Assim:
import Parse from 'parse';
Parse.initialize('YOUR_APP_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = '<https://parseapi.back4app.com/>';
Substitua "YOUR_APP_ID" e "YOUR_JAVASCRIPT_KEY" pelas respectivas chaves fornecidas pela Back4App. Você encontrará as chaves do aplicativo na tela após criar seu aplicativo com o Back4app AI Agent.
Observe que você deve sempre proteger as chaves adequadamente em seu aplicativo, de preferência usando variáveis env.
Implementação da autenticação de usuário usando o Parse SDK
Com o Parse inicializado, agora você pode implementar a autenticação de usuário em seu aplicativo React.
O Back4App fornece automaticamente uma classe User para autenticação de usuário. Essa classe tem campos padrão como nome de usuário, senha, e-mail etc.
Adicione as seguintes linhas de código ao componente Sign-up para implementar a inscrição do usuário em seu aplicativo React.
import Parse from "parse"
import { useNavigate } from "react-router-dom";
const navigate = useNavigate();
const signUpUser = async () => {
try {
const newUser = new Parse.User();
newUser.set("username", formData.username);
newUser.set("email", formData.email);
newUser.set("password", formData.password);
const user = await newUser.signUp();
let Wallet = Parse.Object.extend("Wallet");
let wallet = new Wallet();
let userPointer = {
__type: "Pointer",
className: "_User",
objectId: user.id,
};
wallet.set("owner", userPointer);
wallet.set("balance", 100);
wallet.save();
console.log(`${user} have successfully signed up`);
navigate("/login");
} catch (error) {
console.log("you encountered an error signing up");
}
};
O bloco de código acima usa o hook useNavigate do react-router-dom para navegar programaticamente para diferentes rotas. O hook useNavigate retorna uma função navigate atribuída à variável navigate.
A função signUpUser é responsável pela inscrição de um novo usuário. A função cria um novo objeto newUser do Parse User usando o método Parse.User e define os valores de suas propriedades de nome de usuário, e-mail e senha com os valores das propriedades correspondentes do estado do objeto formData. Em seguida, ela chama o método signUp de forma assíncrona no objeto newUser.
Depois que o código cria um novo usuário, ele define uma classe Parse chamada “Wallet” com o método Parse.Object.extend.
Em seguida, ele cria um objeto userPointer, que representa um ponteiro para o usuário com o nome de classe _User e o ID de objeto do usuário recém-inscrito. Usando o método set, o código define o proprietário da carteira como o objeto userPointer e define o saldo inicial da carteira como 100.
Em uma inscrição bem-sucedida, a função registra uma mensagem de sucesso e redireciona para a rota de login usando a função navigate. Se ocorrer um erro durante o registro, ele será detectado e registrará uma mensagem de erro.
Em seguida, crie uma função handleSubmit que invoca a função signUpUser. Vincule essa função ao formulário de registro usando o manipulador de eventos onSubmit.
Isso garante que, quando um usuário enviar o formulário de inscrição, a função handleSubmit seja acionada automaticamente.
A função handleSubmit deve ter a seguinte aparência:
const handleSubmit = (event) => {
event.preventDefault();
signUpUser();
};
Para implementar o login do usuário, você criará uma função logInUser que contém a lógica para fazer o login de um usuário.
Adicione o bloco de código abaixo ao seu componente Login:
import Parse from "parse"
import { useNavigate } from "react-router-dom";
const navigate = useNavigate();
const logInUser = async () => {
try {
const user = await Parse.User.logIn(formData.username, formData.password);
console.log("User logged in successfully:", user);
navigate("/home");
} catch (error) {
console.log("Error logging in user:", error);
}
};
const handleSubmit = (event) => {
event.preventDefault();
logInUser();
};
A função logInUser chama o método logIn da classe Parse.User de forma assíncrona, passando os valores das propriedades de nome de usuário e senha do estado do objeto formData.
A função verifica se o nome de usuário e a senha inseridos pelo usuário correspondem aos armazenados na classe User do Back4App. Se corresponderem, o usuário fará o login com êxito.
Vincule a função handleSubmit ao formulário de login usando o evento onSubmit. A função handleSubmit chamará a função logInUser e tentará fazer o login do usuário.
Após o login, o Parse SDK gerencia a sessão do usuário. Você pode acessar o usuário atual com o método Parse.User.current. Você usará esse método no componente Home.
Abra o componente Home e escreva este código:
import React from "react";
import Parse from "parse";
import { useNavigate } from "react-router-dom";
function Home() {
const navigate = useNavigate();
const [balance, setBalance] = React.useState(0);
const user = Parse.User.current();
const fetchBalance = async () => {
const Wallet = await Parse.Object.extend("Wallet");
const query = new Parse.Query(Wallet);
query.equalTo("owner", user);
const wallet = await query.first();
setBalance(wallet.get("balance"));
};
fetchBalance();
return (
<>
<nav>
<h1 className="title">Banka</h1>
<button>Log out</button>
</nav>
<div className="home">
<p className="top">Welcome {user.get("username")}</p>
<div className="balance-card">
<p>Total Wallet Balance</p>
<h1>{balance}</h1>
<button>Top Up</button>
</div>
<div className="features">
<div className="card">
<p>Pay Bills</p>
</div>
<div className="card">
<p>Airtime/Data</p>
</div>
<div className="card">
<p>Transfers</p>
</div>
<div className="card">
<p>Withdraw</p>
</div>
</div>
</div>
</>
);
}
export default Home;
O bloco de código acima representa a página inicial de seu aplicativo. A função fetchBalance obtém o saldo da carteira do usuário atual.
Ele consulta a classe “Wallet” com o método Parse.Query e define uma restrição na consulta para recuperar a carteira em que a propriedade owner é igual ao usuário atual usando o método query.equalTo.
O método query.first executa a consulta e retorna o primeiro resultado que corresponde às restrições da consulta.
Com a função setBalance, o código define o saldo da carteira para o estado de saldo. O código exibe o nome do usuário e o saldo da carteira.
Na seção JSX do bloco de código, você encontrará o botão “top up” na tag div com a classe balance-card.
Clicar nesse botão deve aumentar o saldo da carteira em 10. Para que isso seja possível, você criará uma função topUp que contém a lógica para aumentar o saldo.
Assim:
const topUp = async () => {
const Wallet = await Parse.Object.extend("Wallet");
const query = new Parse.Query(Wallet);
query.equalTo("owner", user);
const wallet = await query.first();
wallet.increment("balance", 10);
const newBalance = await wallet.save();
setBalance(newBalance.get("balance"));
};
Esse código busca a carteira do usuário no backend do Parse, aumenta o saldo em 10 com o método increment, salva a carteira atualizada de volta no backend e atualiza o estado do saldo. Associe a função topUp ao botão “top up” usando o manipulador de eventos de clique.
Em seguida, no componente Home, adicione uma função logOutUser responsável por fazer o logout do usuário. A função deve ter a seguinte aparência:
const logOutUser = async () => {
try {
const user = await Parse.User.logOut();
console.log("User logged out successfully:", user);
navigate("/");
} catch (error) {
console.error("Error logging out user:", error);
}
};
A função logOutUser chama o método logOut da classe Parse.User de forma assíncrona para fazer o logout do usuário atual. Associe a função logOutUser ao botão “logout” no componente Home usando o evento de clique.
Para estilizar o componente Home, adicione as classes CSS definidas abaixo ao arquivo index.css.
.home{
display: flex;
flex-direction: column;
gap: 3rem;
margin-block-start: 4rem;
}
.title{
text-align: center;
margin-block-start: 2rem;
}
.top{
font-size: 25px;
font-weight: 500;
}
.balance-card{
background-color: #FFFFFF;
inline-size: 40%;
padding: 1rem 2rem;
border-radius: 7px;
display: flex;
flex-direction: column;
gap: 2rem;
}
.features{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
.card{
background-color: #FFFFFF;
color: #00C3A5;
margin-block-end: 1rem;
padding: 1rem 2rem;
font-size: 25px;
border-radius: 10px;
}
.card:hover{
opacity: 0.6;
}
Testando seu aplicativo
Quando terminar de criar o aplicativo React e implementar a autenticação de usuário com o Back4app.
A próxima etapa é testar o aplicativo. Para isso, navegue até o link http://localhost:5173/ em seu navegador da Web e a página de inscrição será exibida na tela.
Preencha o formulário de registro e envie-o.
Depois de se inscrever, você pode confirmar se a inscrição foi bem-sucedida visitando o painel do aplicativo no Back4app. Se a inscrição for bem-sucedida, o Back4app adicionará os detalhes do usuário à classe Usuário em seu aplicativo.
Assim:
Depois de se inscrever, o aplicativo o redirecionará para a página de login, onde você fará o login usando o nome de usuário e a senha que usou no formulário de inscrição.
Por exemplo:
Quando estiver conectado, a página inicial será exibida na tela e deverá ter a seguinte aparência:
Agora, clique no botão “top up” para aumentar seu saldo em 10.
Implantação de seu aplicativo React no Back4app
Para implantar seu aplicativo React no Back4app, você usará o aplicativo Container as a Service (CaaS) do Back4app.
O CaaS da Back4app permite que você implante e gerencie contêineres do Docker no ambiente de nuvem fornecido pela Back4App.
Antes de poder implantar seu aplicativo React, você precisa primeiro dockerizar o aplicativo. Para fazer isso, crie um Dockerfile no diretório raiz de seu aplicativo e adicione as seguintes linhas de código:
FROM node:16
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 5173
CMD ["npm", "run", "dev"]
Esse Dockerfile configura um ambiente Node.js, cria um diretório de trabalho, instala dependências, copia o código do aplicativo, expõe uma porta e especifica o comando padrão para executar o aplicativo.
Além disso, crie um arquivo .dockerignore. No arquivo .dockerignore, adicione os arquivos e diretórios excluídos do contexto ao criar imagens do Docker.
Por exemplo:
#.dockerignore
node_modules
Como você criou o aplicativo React com o Vite, é necessário atualizar o arquivo de configuração do Vite para oferecer suporte ao Docker. Em seu arquivo vite.config.js, substitua o código existente pelo bloco de código abaixo:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// <https://vitejs.dev/config/>
export default defineConfig({
plugins: [react()],
server: {
host: true,
strictPort: true,
port: 5173,
},
})
Esse bloco de código define o servidor para usar o host padrão, geralmente localhost. Ele define o número da porta em que o servidor de desenvolvimento escutará a porta 5173 e garante que o Vite falhará ao iniciar o servidor se a porta especificada não estiver disponível.
Agora você pode criar a imagem do docker do seu aplicativo executando o seguinte comando no terminal:
docker build -t quote-generator .
Certifique-se de enviar o aplicativo para a sua conta do GitHub antes de tentar implantá-lo no Back4app. Quando terminar de enviar o aplicativo, integre sua conta do GitHub ao Back4app.
Você pode fazer isso com o aplicativo Back4app Github. Depois de integrar seu GitHub com o Back4app, agora você pode implantar seu aplicativo usando o Back4app AI Agent.
Para implantar o aplicativo, digite o prompt abaixo:
Deploy my repository <<repository-url>> on Back4app containers
No bloco de código acima, substitua o repository-url pela URL do repositório do GitHub do seu aplicativo.
Conforme mostrado na imagem acima, ao se comunicar com o agente de IA, forneça o link do repositório do GitHub do aplicativo que você deseja implantar.
Depois que o agente de IA do Back4app iniciar a implantação do aplicativo, aguarde alguns minutos e, em seguida, confirme o status atual da implantação.
Por exemplo:
Após a implantação bem-sucedida, o Back4app AI Agent atualizará o status de implantação do aplicativo para “implantado” e fornecerá a você um link para acessar o aplicativo no seu navegador.
Você pode encontrar o aplicativo finalizado neste repositório do GitHub e o aplicativo ativo neste URL.
Conclusão
Este artigo explicou como adicionar autenticação a um aplicativo React usando um backend como serviço.
Integrar a autenticação do usuário em seu aplicativo React usando o Back4App é um processo simples que aumenta significativamente a segurança e a funcionalidade do seu aplicativo.
Ao aproveitar os serviços da Back4App, você pode se concentrar na criação de aplicativos da Web com excelentes experiências de usuário, deixando as tarefas de autenticação e gerenciamento de back-end para uma plataforma confiável.
