Pole hasła w React Native: maskowanie, podgląd i autofill
Pole hasła w React Native: przewodnik
Pole hasła w React Native: pokaż/ukryj, autofill, siła hasła | We.Inc
Zbuduj pole hasła w React Native: secureTextEntry, przycisk pokaż i ukryj, autoComplete i textContentType dla menedżerów haseł oraz miernik siły hasła, który możesz wypróbować.
Zamień TextInput w pole hasła za pomocą secureTextEntry, które maskuje każdy znak i nie może być łączone z multiline. Dodaj przycisk z ikoną oka w Pressable, który przełącza ten props, aby pokazywać i ukrywać hasło. Dla menedżerów haseł ustaw autoComplete="password" na ekranach logowania lub "new-password" przy rejestracji oraz odpowiadający mu textContentType dla iOS.
Propsy dla pól hasła przy logowaniu i rejestracji
Props
Pole logowania
Pole rejestracji
secureTextEntry
true (do momentu odsłonięcia)
true (do momentu odsłonięcia)
autoComplete
"password"
"new-password"
textContentType (iOS)
"password"
"newPassword"
passwordRules (iOS)
niepotrzebne
opcjonalne reguły dla generowanych haseł
autoCapitalize
"none"
"none"
autoCorrect
Wypróbuj pole poniżej: wpisz hasło, przełącz przycisk podglądu i obserwuj reakcję miernika. Przełączaj między logowaniem a rejestracją, aby zobaczyć, jakie propsy autouzupełniania powinien mieć każdy ekran; logika miernika to ta sama krótka funkcja, którą możesz wkleić do swojej aplikacji.
Wartość logiczna hidden w stanie początkowo ma wartość true i zasila secureTextEntry.
Pressable z ikoną oka znajduje się obok pola i przy każdym naciśnięciu przełącza hidden.
Jego accessibilityLabel zmienia się między Pokaż hasło a Ukryj hasło, więc akcja jest zawsze jasna.
Funkcja siły ocenia długość i różnorodność znaków i zwraca etykietę dla paska pod polem.
Wyłącz autoCorrect i ustaw autoCapitalize na none, aby klawiatura nigdy nie zmieniała hasła.
Na ekranach rejestracji i resetu hasła używaj new-password; mówi to systemowi, aby zaproponował wygenerowane hasło zamiast zapisanego.
Przycisk podglądu powinien być wystarczająco duży, aby łatwo go dotknąć, i znajdować się poza obszarem tekstu, aby nigdy nie zasłaniał ostatnich znaków.
Traktuj każdy miernik po stronie klienta wyłącznie jako wskazówkę. Najważniejsza jest długość, a o tym, co jest akceptowane, decyduje serwer.
Podczas debugowania nigdy nie loguj wartości pola ani nie wysyłaj jej do analityki.
Najczęściej zadawane pytania
Jak ukryć hasło w React Native?
Ustaw secureTextEntry w TextInput. Dokumentacja mówi, że zasłania on tekst, aby hasła pozostały bezpieczne, domyślnie ma wartość false i nie działa z multiline ustawionym na true.
Jak dodać przycisk pokazywania hasła?
Trzymaj w stanie wartość logiczną hidden, przekaż ją do secureTextEntry i wyrenderuj obok pola Pressable, który ją przełącza. Nadaj przyciskowi etykietę, aby czytniki ekranu ogłaszały, co zrobi jego naciśnięcie.
Dlaczego iOS nie proponuje silnego hasła przy rejestracji?
Ustaw w polu textContentType="newPassword". Przy tej wartości możesz też przekazać passwordRules, zapisane w składni reguł haseł Apple, aby wygenerowane hasło spełniało Twoje wymagania.
Której wartości autoComplete powinno używać pole hasła?
"password" tam, gdzie ktoś wpisuje istniejące hasło, i "new-password" tam, gdzie je tworzy. Obie są na liście wieloplatformowych wartości autoComplete.
Autouzupełnianie na obu platformach
autoComplete to podpowiedź odczytywana przez obie platformy, a textContentType działa tylko na iOS i łączy pole z pękiem kluczy urządzenia. Ustawienie obu nic nie kosztuje i obejmuje więcej menedżerów haseł.
Połącz pole hasła z polem nazwy użytkownika lub e-maila z autoComplete="username" lub "email", aby menedżer wiedział, do którego konta należy hasło.
Co mierzy miernik siły
Miernik na tej stronie liczy długość i rodzaje użytych znaków: małe litery, wielkie litery, cyfry i symbole. To szybka podpowiedź, a nie audyt, i nie wykryje hasła, które jest popularne lub już wyciekło.
Długie frazy hasłowe dostają tu wysoką ocenę, bo trzy z czterech punktów pochodzą z długości, a tylko jeden z mieszania rodzajów znaków. Połącz miernik ze sprawdzaniem minimalnej długości w walidacji.
Kod pola hasła
PasswordInput z przyciskiem podglądu
Na ekranach rejestracji przekaż isNew. Etykieta przycisku zawsze opisuje, co zrobi następne naciśnięcie.
Funkcja oceny siły
Zwraca od 1 do 4 dla dowolnego niepustego tekstu. Przypisz liczbie etykietę i szerokość paska.