web-dev-qa-db-ja.com

パスワードをプレーンテキスト（マスクなし）で表示するサインインおよび登録フォームのパターン？

Jakob Nielsenが2009年に提案した（ http://www.nngroup.com/articles/stop-password-masking/ ）、Luke Wも同意する（ http：//www.lukew .com/ff/entry.asp？165 ）ですが、このような「表示されるパスワード」フィールドの実際の実装はありますか？

登録フォームまたはサインインフォームにデフォルトでパスワードをプレーンテキストで表示するWebサイトの例や実際のWordエクスペリエンスはありますか？

問題は何ですか？ （誰かがメモ帳で肩越しに見ているのは明らか）

website-designformspasswordsign-in
8
edeverett

「ユーザーの肩越しに見ている」誰かのセキュリティへの影響に関するすべての懸念があるので、忘れないように思いますプレーンなパスワードを表示する実際のユーザーエクスペリエンス。

パスワードは通常、知られたくないものであり、ほとんどの場合、ユーザーにとって個人的な意味があります。パスワードを難読化して表示する方法（安心感を強化する）、ユーザーがパスワードを入力しているインターフェイスでさえ、シークレットを読み取ることができないことを視覚的に示すことにより、ユーザーにユーザーが選択したトークン。技術的にはもちろん、これはまったく別の問題ですが、ユーザーインターフェイスは単なる技術的な事実やプログラムの状態以上のものを伝えます。

従来、ユーザーは非常に個人のパスフレーズ（もちろんIT専門家のアドバイスに対して）を使用する傾向があり、愛する人、ある意味の場所、彼らが強く感じている愛情の項目のように...私が得ているのは、ユーザーがcryptographic関心を示し、プレーンテキストでパスワードを表示したくないということですが、心理的または社会的側面、つまり「ディスプレイ上でこの「最も重要なもの」への参照を望まない」、ユーザーが公然と表示するものではない可能性があるため認めるか、支持する。

11
kontur

Smashing Magazineもこの記事を取り上げました。

http://uxdesign.smashingmagazine.com/2011/08/22/new-approaches-to-designing-login-forms/

下部にあるのは、モバイルログインでパスワードを正しく取得できない場合にプレーンテキストのパスワードフィールドを提供するFacebookの例です。

明らかなのは、肩越しに見ている人ですが、実際にはかなりトリッキーです。ハッカーは、人を知っていなければ、電子メールアドレスとWebサイトを入手する必要があります。見渡される。

安全性の高い環境で使用されている場合でも、パスワードはほとんど常に隠蔽されており、ユーザーは必ずしもブラウザでの処理方法の専門性を知っているとは限らないため、それほど明白ではない問題として、サイトが安全ではないように見える可能性があります。オンラインバンクを信頼し、プレーンテキストでパスワードを入力する技術者ではないユーザーを想像できますか？

主な問題は、セキュリティ（暗黙的および実際）と使いやすさのバランスです。特に、ログインなどの反復的なアクションの場合は、この記事を読んで詳細を確認してください。

http://uxmovement.com/forms/why-password-masking-can-hurt-your-sign-up-form/

5
Toni Leigh

サインインと登録のユースケースは異なります。サインインしているときは（忘れていない限り）パスワードを知っているため、プレーンテキストを使用する主な理由は、入力ミスを防ぐためです。ただし、登録するときは、既存のデータを確認するのではなく、新しいデータを入力するため、タイプミスの影響が大きくなる可能性があります。これが、登録フォームに通常2番目の「パスワードの確認」フィールドがある理由です。

今年の初めに、クライアントのログイン/登録フォームを再設計したときにこの問題に取り組みました。私が好んだデザインパターンは、パスワードの最後の文字が数秒間プレーンテキストで表示されてから箇条書きでマスクされるという、ロジャーアトリルが言及している携帯電話でした。デスクトップ用にこの動作を再現するいくつかのjsプラグインを見つけましたが、それらにはすべていくつかの欠点があったため、このアプローチを採用しませんでした。

私が行ったソリューションは、サインインと登録の動作の違いを反映しています。

サインイン

標準のマスクされたパスワード入力。これは（konturによって言及されたように）安心感を強化しますが、気付かれないタイプミスになりがちです。私がこのパターンに固執した最も重要な理由は、それがユーザーの期待と一致していたからです。

Sign-in form

登録用紙

SHOW/HIDEボタンを備えた拡張パスワードフィールド。二次的な「パスワードの確認」入力はありません。これにより、ユーザーは自分のパスワードを表示/非表示にして、入力した内容を視覚的に確認できます。パスワードを表示できるつまり、登録フォームを短く簡単に保つためのパスワード確認フィールドは不要です。

Registration form

このためのjqueryコードは次のとおりです（jquery以外の純粋主義者への謝罪）。

// Show/hide plain text password
$('#pw a').on('click', function() {
  var $pw = $('#pw input.pw').not('.placeholder'), $txt = $('#pw input.txt');
  var isNowTxt = $('#pw').toggleClass('plain').hasClass('plain');
  isNowTxt ? $(this).text('Hide') : $(this).text('Show');
  isNowTxt ? $txt.val($pw.val()) : $pw.val($txt.val() != $txt.attr('placeholder') ? $txt.val() : '');
  isNowTxt ? $txt.focus() : $pw.prev().length ? $pw.prev().focus() : $pw.focus();
})

// and make sure the password value is correctly submitted
$('#pw a').closest('form').on('submit', function() {
  if ($('#pw .txt').is(':visible')) $("#pw a").click();
});
5
Mark Chitty