Neste tutorial, mostraremos como você pode armazenar credenciais de usuário em um aplicativo React Native com segurança e usar essas credenciais para autenticar o usuário.
Quando você estão implementando seu sistema de login em um aplicativo, você precisa de uma maneira de salvar as credenciais de login. Por exemplo, você pode querer salvar um token de login de usuário ou token de atualização para evitar reinserir um nome de usuário e senha sempre que os usuários abrirem o aplicativo.
Então a questão é, onde podemos salvar as credenciais de login? Alguns dirão: “Vamos salvar essas informações no AsyncStorage”, mas acredite em mim, você não deve salvar informações críticas em um ambiente simples, claro e inseguro.
Para armazenar as informações com segurança nativamente, você deve use react-native-keychain .
Deseja saber como usar react-native-chaveiro em seu aplicativo React Native? Para entender alguma coisa, o melhor é aprender com o exemplo.
Então, vamos fazer um aplicativo pequeno e básico que simula o fluxo de login e vai mostrar como salvar tokens com segurança e usar um token para autenticar o usuário.
Crie uma IU básica
Primeiro, vamos construir uma IU básica para a tela de login. Veja abaixo a imagem para ver a aparência de nossa tela de login.
Uma IU de login bastante básica com um tema escuro (PS: Eu adoro temas escuros 
).
Aqui está o código para esta IU:
//App.js import React from”react”; importar {StyleSheet, Text, TextInput, View, Dimensions} de”react-native”; exportar a função padrão App () {return (
Instalar react-native-keychain
Temos a IU de login; agora, vamos instalar o keychain para armazenar com segurança as credenciais de login.
Para instalar, execute este comando na raiz do seu projeto:
yarn add react-native-keychain
Ou, se você usar npm:
npm i-S react-native-keychain
Depois de instalar o react-native-keychain, podemos continuar a implementar o sistema de login.
Implementar react-native-keychain
Este keychain fornece muitos métodos que podemos usar em vários cenários, mas por uma questão de simplicidade, usaremos três métodos principais para salvar, recuperar e excluir credenciais.
Esses métodos são:
setGenericPassword getGenericPassword resetGenericPassword
É autoexplicativo o que esses métodos fazem. Mas darei uma breve visão geral.
Para armazenar as credenciais, usamos o método setGenericPassword e passamos dois argumentos. O primeiro é um nome de usuário e o segundo argumento é um token ou senha.
Para ler os valores das credenciais armazenadas, podemos usar o método getGenericPassword sem nenhum argumento.
Por fim, para remover as credenciais, podemos usar o método resetGenericPassword sem nenhum argumento.
Vamos armazenar as credenciais do usuário:
//App.js import React, {useEffect, useState} de”react”; importar {StyleSheet, Text, TextInput, View, Dimensions} de”react-native”; import * como Keychain de”react-native-keychain”; função padrão de exportação App () {const [isLoggedIn, setIsLoggedIn]=useState (false); const [userDetails, setUserDetails]=useState ({}); const handleLogin=assíncrona ()=> {//de login chamada api aqui const símbolo=”eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c”; const username=”Akshay”; esperar Keychain.setGenericPassword (nome de usuário, token); setIsLoggedIn (true); setUserDetails ({token, nome de usuário}); }; return (
Como você pode ver no código acima, eu criei uma função handleLogin e a defini para o texto de login onPress.
Na função handleLogin, não implementamos um sistema de login completo, mas nós presumindo que o usuário está autorizado e o servidor de login retornou detalhes do usuário e um token.
Portanto, salvaremos essas informações em um armazenamento seguro.
Observe que estamos salvando o usuário token, não a própria senha. Não é uma boa prática salvar senhas de usuário no lado do cliente. Sempre vá com um token com alguma validade.
Para salvar as informações, estamos usando o método setGenericPassword e passando o nome de usuário e o token como argumentos.
Depois de salvar com sucesso, estamos atualizando nossos estados para alterar a tela de login para a tela de boas-vindas.
Crie uma tela de boas-vindas
Após o login, mostraremos uma tela de boas-vindas com o nome de usuário. Nossa tela de boas-vindas será semelhante a esta:
Apenas uma mensagem de boas-vindas seguida pelo nome de usuário e um botão de logout.
Com base na mudança de estado de isLoggedIn, nós mostrará uma IU de boas-vindas e ocultará a IU de login.
Nosso código se parecerá com este:
//App.js import React, {useEffect, useState} from”react”; importar {StyleSheet, Text, TextInput, View, Dimensions} de”react-native”; import * como Keychain de”react-native-keychain”; função padrão de exportação App () {const [isLoggedIn, setIsLoggedIn]=useState (false); const [userDetails, setUserDetails]=useState ({}); useEffect (()=> {(async ()=> {try {const credentials=await Keychain.getGenericPassword (); if (credentials) {setIsLoggedIn (true); setUserDetails (credentials);} else {console.log (“Não credenciais armazenadas”);}} catch (error) {console.log (“Keychain não pôde ser acessado!”, erro);}}) ();}, []); const handleLogin=assíncrona ()=> {//de login chamada api aqui const símbolo=”eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c”; const username=”Akshay”; esperar Keychain.setGenericPassword (nome de usuário, token); setIsLoggedIn (true); setUserDetails ({token, nome de usuário}); }; const handleLogout=async ()=> {const logout=await Keychain.resetGenericPassword (); console.log ({logout}); if (logout) {setIsLoggedIn (false); setUserDetails ({}); }} return (
Todo o nosso código será assim:
Primeiro, nosso estado isLoggedIn é definido como falso no estágio inicial. Portanto, mostraremos nossa IU de login e, quando um usuário fizer login com sucesso, estaremos salvando as credenciais no armazenamento seguro e atualizando o estado de login e o estado de detalhes do usuário.
Após a atualização do estado, estamos mostrando uma IU de boas-vindas com um nome de usuário junto com um botão de logout.
No botão de logout, adicionamos uma função handleLogout. Nesta função, estamos redefinindo ou removendo as credenciais do usuário de nosso armazenamento seguro e definindo nossos estados para os dados iniciais.
Você deve ter notado que há um gancho useEffect que também está escrito. Neste gancho, estamos recuperando as credenciais do usuário do armazenamento seguro e atualizando os estados com base nessas informações quando o usuário voltará ao aplicativo.
Se um usuário salvou suas informações no armazenamento, em seguida, mostraremos a eles a IU de boas-vindas. Caso contrário, mostraremos a eles a IU de login que informa que eles não estão conectados.
É assim que você pode armazenar e ler facilmente as credenciais do usuário sem comprometer a segurança do usuário.
Conclusão
Neste tutorial, você aprendeu como salvar com segurança as informações do usuário em seus dispositivos sem comprometer a segurança usando as chaves react-native. Agora você pode implementar seu próprio sistema de login completo em seu aplicativo.
