Campo password in React Native: maschera, mostra e autofill
Guida al campo password in React Native
Campo password in React Native: mostra/nascondi, autofill, robustezza | We.Inc
Crea un campo password in React Native: secureTextEntry, un pulsante per mostrare e nascondere, autoComplete e textContentType per i password manager, più un misuratore di robustezza da provare.
Trasforma un TextInput in un campo password con secureTextEntry, che maschera ogni carattere e non si può combinare con multiline. Aggiungi un pulsante a forma di occhio con Pressable che inverte quella prop per mostrare e nascondere. Per i password manager, imposta autoComplete="password" nelle schermate di login o "new-password" in quelle di registrazione, e il textContentType iOS corrispondente.
Props per i campi password di login e registrazione
Prop
Campo di login
Campo di registrazione
secureTextEntry
true (finché non viene mostrata)
true (finché non viene mostrata)
autoComplete
"password"
"new-password"
textContentType (iOS)
"password"
"newPassword"
passwordRules (iOS)
non necessario
regole opzionali per le password generate
autoCapitalize
"none"
"none"
autoCorrect
Prova il campo qui sotto: scrivi una password, premi il pulsante per mostrarla e guarda il misuratore reagire. Passa da login a registrazione per vedere quali props di autofill deve avere ciascuna schermata; la logica del misuratore è la stessa breve funzione che puoi incollare nella tua app.
Un booleano nello state, hidden, parte da true e alimenta secureTextEntry.
Il Pressable a forma di occhio sta accanto al campo e inverte hidden a ogni pressione.
Il suo accessibilityLabel passa da Mostra password a Nascondi password, così l'azione è sempre chiara.
La funzione di robustezza valuta la lunghezza e la varietà dei caratteri e restituisce un'etichetta per la barra sotto il campo.
Disattiva autoCorrect e imposta autoCapitalize a none, così la tastiera non riscrive mai una password.
Usa new-password nelle schermate di registrazione e di reset; dice al sistema di proporre una password generata invece di una salvata.
Tieni il pulsante per mostrare abbastanza grande da toccare e fuori dall'area di testo, così non copre mai gli ultimi caratteri.
Considera qualsiasi misuratore lato client solo un'indicazione. Conta soprattutto la lunghezza, e decide il server cosa accettare.
Non scrivere mai nei log il valore del campo e non inviarlo agli analytics durante il debug.
Domande frequenti
Come si nasconde una password in React Native?
Imposta secureTextEntry sul TextInput. La documentazione dice che oscura il testo per mantenere sicure le password, ha come default false e non funziona con multiline impostato a true.
Come aggiungo un pulsante per mostrare la password?
Tieni un booleano hidden nello state, passalo a secureTextEntry e renderizza accanto al campo un Pressable che lo inverte. Dai un'etichetta al pulsante così gli screen reader annunciano cosa succede premendolo.
Perché iOS non propone una password sicura in registrazione?
Imposta textContentType="newPassword" sul campo. Con quel valore puoi anche passare passwordRules, scritte nella sintassi delle regole per le password di Apple, così la password generata rispetta i tuoi requisiti.
Quale valore di autoComplete deve usare un campo password?
"password" dove si digita una password esistente e "new-password" dove se ne crea una. Entrambi sono tra i valori di autoComplete multipiattaforma.
Autofill su entrambe le piattaforme
autoComplete è l'indicazione che leggono entrambe le piattaforme, mentre textContentType vale solo per iOS e collega il campo al portachiavi del dispositivo. Impostarli entrambi non costa nulla e copre più password manager.
Abbina il campo password a un campo username o email con autoComplete="username" o "email", così il password manager sa a quale account appartiene la password.
Cosa misura il misuratore di robustezza
Il misuratore in questa pagina conta la lunghezza e i tipi di caratteri usati: minuscole, maiuscole, cifre e simboli. È una spinta veloce, non una verifica, e non riconosce una password comune o già trapelata.
Le passphrase lunghe qui ottengono un buon punteggio, perché tre dei quattro punti vengono dalla lunghezza e solo uno dal mescolare tipi di caratteri. Abbina il misuratore a un controllo di lunghezza minima nella tua validazione.
Codice del campo password
PasswordInput con un pulsante per mostrare
Passa isNew nelle schermate di registrazione. L'etichetta del pulsante descrive sempre cosa farà la pressione successiva.
Funzione di punteggio della robustezza
Restituisce da 1 a 4 per qualsiasi stringa non vuota. Associa il numero a un'etichetta e a una larghezza della barra.