React Native のパスワード入力：マスク、表示、自動入力
React Native のパスワード入力ガイド
React Native のパスワード入力：表示切り替え、自動入力、強度 | We.Inc
React Native でパスワード欄を作る方法を解説します。secureTextEntry、表示と非表示の切り替え、パスワード管理アプリ向けの autoComplete と textContentType、そして試せる強度メーター付きです。
TextInput をパスワード欄にするには secureTextEntry を使います。すべての文字がマスクされ、multiline とは併用できません。表示と非表示を切り替えるには、そのプロパティを反転させる Pressable の目のボタンを加えます。パスワード管理アプリのために、ログイン画面では autoComplete="password"、登録画面では "new-password" を設定し、対応するiOSの textContentType も設定しましょう。
ログインと登録のパスワード欄に使うプロパティ
- secureTextEntry
- true（表示するまで）
- true（表示するまで）
- autoComplete
- "password"
- "new-password"
- textContentType (iOS)
- "password"
- "newPassword"
- passwordRules (iOS)
- 不要
- 生成されるパスワードの任意のルール
- autoCapitalize
- "none"
- "none"
下の入力欄を試してみましょう。パスワードを入力し、表示ボタンを切り替え、メーターの反応を見てください。ログインと登録を切り替えると、それぞれの画面に必要な自動入力のプロパティがわかります。メーターの処理は、アプリにそのまま貼り付けられる短い関数です。
- state の真偽値 hidden は true から始まり、secureTextEntry に渡されます。
- 目の Pressable は入力欄の横にあり、押すたびに hidden を反転させます。
- その accessibilityLabel は「パスワードを表示」と「パスワードを隠す」の間で切り替わるので、操作の内容が常に明確です。
- 強度の関数は長さと文字の種類の多さを採点し、入力欄の下のバーに表示するラベルを返します。
- キーボードがパスワードを書き換えないよう、autoCorrect をオフにし、autoCapitalize を none に設定しましょう。
- 登録画面とリセット画面では new-password を使いましょう。保存済みのパスワードではなく、生成したパスワードを提案するようシステムに伝えます。
- 表示ボタンはタップしやすい大きさにし、テキスト領域の外に置いて、最後の数文字を隠さないようにしましょう。
- クライアント側のメーターはあくまで目安として扱いましょう。最も重要なのは長さで、何を受け付けるかはサーバーが決めます。
- デバッグ中でも、入力欄の値をログに出したりアナリティクスに送ったりしないでください。
よくある質問
React Native でパスワードを隠すには？
TextInput に secureTextEntry を設定します。ドキュメントによると、パスワードを安全に保つためにテキストを伏せ字にし、デフォルトは false で、multiline を true にすると機能しません。
パスワードを表示するボタンを追加するには？
state に真偽値 hidden を持ち、それを secureTextEntry に渡して、入力欄の横にそれを切り替える Pressable を描画します。押すと何が起きるかをスクリーンリーダーが読み上げるよう、ボタンにラベルを付けましょう。
登録時にiOSが強力なパスワードを提案しないのはなぜですか？
入力欄に textContentType="newPassword" を設定しましょう。この値なら、Apple のパスワードルール構文で書いた passwordRules も渡せるので、生成されるパスワードを自分の要件に合わせられます。
パスワード欄にはどの autoComplete の値を使うべきですか？
既存のパスワードを入力する場所では "password"、新しく作る場所では "new-password" です。どちらもクロスプラットフォームの autoComplete の値として掲載されています。
両方のプラットフォームでの自動入力
- autoComplete は両方のプラットフォームが読むヒントで、textContentType はiOS専用で入力欄を端末のキーチェーンに結び付けます。両方を設定しても手間はかからず、より多くのパスワード管理アプリに対応できます。
- パスワード欄は、autoComplete="username" か "email" を持つユーザー名欄またはメールアドレス欄と組み合わせましょう。パスワード管理アプリが、そのパスワードがどのアカウントのものかを判断できます。
強度メーターが測るもの
- このページのメーターは、長さと使われている文字の種類（小文字、大文字、数字、記号）を数えます。これは手軽な後押しであって監査ではなく、よくあるパスワードや既に流出したパスワードは見抜けません。
- 4点のうち3点は長さから、文字の種類の組み合わせからは1点だけなので、長いパスフレーズはここで高く評価されます。検証では、メーターと最小文字数のチェックを組み合わせましょう。
パスワード欄のコード
表示ボタン付きの PasswordInput
登録画面では isNew を渡します。ボタンのラベルは常に、次に押したときに何が起きるかを表します。
強度スコアの関数
空でない文字列なら 1 から 4 を返します。数値をラベルとバーの幅に対応させましょう。
パスワード欄のプレビュー
画面
ログイン
登録
パスワード
パスワードを表示
パスワードを隠す
強度：{v}
この画面のプロパティ
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る