Как мне запретить браузеру отображать диалог сохранения имени пользователя с паролем javascript? - PullRequest
0 голосов
/ 25 октября 2019

Существует ли какой-либо способ управления отображением в браузере своего списка имен пользователей и паролей и диалогового окна сохранения имени пользователя и пароля?

В моем веб-приложении есть две страницы, посвященныеучетная запись пользователя, страница создания / редактирования учетной записи и страница входа. Страница создания / редактирования учетной записи собирает и проверяет информацию о пользователе, включая имя пользователя и пароль, но в режиме создания она никогда не должна отображать список сохраненных имен пользователей и паролей в браузере, поскольку ожидается, что пользователь будет создавать новые учетные записи пользователей, а не выбирать исуществующий из списка браузера. После того как пользователь вошел в систему, он может редактировать данные своей учетной записи, возможно, для изменения своего имени пользователя и пароля, и браузер может заполнить эти два поля из сохраненных имён пользователей и пароля, которыми он управляет, если эта функция браузера включена.

На странице создания / редактирования учетной записи пользователя есть флажок «Мое устройство», который может установить пользователь, который управляет некоторыми функциями в моем веб-приложении, а браузер отображает диалоговое окно сохранения имени пользователя и пароля и егосписок имен пользователей / паролей, если они отмечены, или скрыть их, когда они не отмечены.

Диалоговое окно сохранения имени пользователя и пароля в браузере должно отображаться только в том случае, если пользователь создает новую учетную запись или редактирует существующую учетную запись, а также имя пользователя и пароли настраница еще не сохранена в системе управления именем пользователя и паролем браузера, и флажок «Мое устройство» установлен.

показать ifAfter после создания новой учетной записи или ее редактирования и изменения имени пользователя и / или пароля,браузер плечd показывает

У моего приложения есть флажок «Мое устройство», который пользователь может установить на странице создания / редактирования учетной записи пользователя, который управляет отображением / скрытием списка имен пользователей и паролей на странице входа в систему, когда он установлен. или скрывается, когда он не установлен. Идея состоит в том, что, когда пользователь находится на своем собственном устройстве, он может выбрать имя пользователя и пароль своей учетной записи из списка браузера, но когда пользователь не на своем собственном устройстве или в аренде не проверял настройки, тогдасписок сохраненных имен пользователей и паролей в браузере не должен отображаться, главным образом потому, что пользователь не сохранял или не должен был сохранять имя пользователя и пароль своей учетной записи на любом устройстве, которое не принадлежит им, например, на общедоступном компьютере в библиотеке. Это приводит к тому, что диалоговое окно сохранения имени пользователя и пароля браузера никогда не должно отображаться на странице входа в систему.

В моем веб-приложении правильно отображается диалоговое окно сохранения имени пользователя и пароля браузера, когда пользователь изначально создает свою учетную запись, чтоконечно, есть новая и уникальная комбинация имени пользователя и пароля, и это именно то, что я хочу. Однако это должно происходить только при создании новой учетной записи пользователя или изменении существующей учетной записи пользователя и изменении его имени пользователя или пароля.

Опять же, когда пользователь сначала создает свою учетную запись или позже обновляет свое имя пользователя или пароль, я хочубраузер для сохранения имен пользователей и паролей с помощью диалогового окна сохранения имени пользователя и пароля в соответствии с тем, как пользователь настроил свой браузер. Я не хочу заменять / дублировать средство поддержки имени пользователя и пароля браузера.

Вот пример упрощенного сценария создания / редактирования учетной записи, который собирает имя пользователя и пароль учетной записи:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Username-Password Test.html</title>
  </head>
  <body>

    <!--
      When using this page to create a new user account, a php script substitutes
      blank ('') values into the input element's value properties.

      When using this page to edit an existing user account, the same php script
      substitutes the account values, including the username, but not the password,
      into those input element's value properties so that the user could see them.

      Finally, in the real version of this page, there are two other javascript
      functions that doubly protect that user's username and password on this page,
      but which are not shown here:
        - one to clear the password value that the browser substitutes into the
          password input element when the page is first displayed from the browser's
          username/password maintenance system
        - another to prevent someone from using the browser history feature to
          'jump back' to this page and seeing what the browser substituted into the
          password element before the first function cleared it.
      -->

Источник страницы продолжен ...

    <form action="Username_Password_Test.php" method="post"
          onsubmit="return submitIt( event );">
      Username:&nbsp;
      <input type="text" id="username" name="username"
             placeholder="Enter a username." value="test" /><br />
      <br />
      Password:&nbsp;
      <input type="password" id="password" name="password"
             placeholder="Enter a password." value="" /><br />
      <button type="submit">Submit</button><br />
      <br />
    </form>

    ⫶

  </body>
</html>

Вот функция submitIt:

    <script>
      function submitIt( event ) {
        var activeElement = document.activeElement;
        var inputElement  = document.getElementById( 'password' );

        //
        // Only submit the form when the user clicks or presses the enter key on the
        // submit button.
        //

        if( ( activeElement.nodeName === 'BUTTON' ) &&
            ( activeElement.type === 'submit' ) ) {

          // Validate the input element values.  Return true when data is good.

          ⫶

          return true; // Create/Update user account.

        }
        else {

          findNextInput( activeElement );
          alert( 'Please press the Submit button to login.' );

          return false; // Don't create/Update user account.

        } // End of if( ( activeElement.nodeName === 'BUTTON' ) &&
          //            ( activeElement.type === 'submit' ) ) ...

      } // End of submitIt( event ) function.
    </script>

Вот функция findNextInput:

    </script>
      function findNextInput( element ) {

        //
        // The submitIt function, above, prevents default form submissions when the form
        // element that caused submission is not the Submit button or the data validation
        // fails, no shown, this function causes pressing the return key in an input
        // element to act like the tab key, which even if not standard is required by the
        // customer.
        // 
        // Find the next input element in the form and set the focus on it.
        // Expand search to other tag-elements, when necessary.
        //

        // First, get a list of the form's input elements.

        var formInputs = element.form.elements;

        var tabIndex = element.tabIndex;

        // Locate the element in the form's list of elements ...

        for( var i = 0, l = formInputs.length; i < l; ++i ) {

          if( element === formInputs[ i ] ) {

            //
            // Element found
            //
            // Find the next enabled/visible element in the form elements with a
            // tabIndex equal to or greater than the active element's
            // tabIndex and set the focus on it ...
            //

            //
            // Set j to i + 1 if i + 1 is within the form elements bounds
            // else, set j to the first form element's index.
            //

            var j = ( ( ( j = ( i + 1 ) ) < l ) ? j : 0 );

            for( ; j !== i; ( ( j === l ) ? 0 : ++j ) ) {

              var nextElement = formInputs[ j ];

              if( ( nextElement.style.display !== 'none' ) &&
                  ( nextElement.style.visibility !== 'hidden' ) &&
                  ( nextElement.tabIndex >= tabIndex ) ) {

//
// This isn't actually correct because it should take the 'next' element with the lowest
// tabIndex of the elements that pass the above if-then statement, which might appear
// before the element parameter, but for this example, since tab order isn't used, this
// solution is more than sufficient.
//

                nextElement.focus();

                break;

              } // End of if( ( nextElement.style.display !== 'none' ) &&
                //            ( nextElement.style.visibility !== 'hidden' ) &&
                //            ( nextElement.tabIndex >= tabIndex ) ) ...

            } // End of for( var j = ( i + 1 ); j !== i; ( ( j === l ) ? 0 : ++j ) ) ...

            break;

          } // End of if( element === formInputs[ i ] ) ...

        } // End of for( var i = 0, l = formInputs.length; i < l; ++i ) ...

      } // End of findNextInput( ) function.
    </script>

Вот простойсерверный php-скрипт, который показывает опубликованные значения имени пользователя и пароля:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Username-Password Test.php</title>
  </head>
  <body>
    $_POST Keys:&nbsp;
<?php
    echo implode( ', ', array_keys( $_POST ) );
?>
    <br />

    Username:&nbsp;
    <span>
<?php
    echo $_POST[ 'username' ];
?>
    </span><br />

    Password:&nbsp;
<?php
    if( array_key_exists( 'password', $_POST ) ) {

        echo $_POST[ 'password' ];

    }
    else {

        echo 'missing!';
    }
?>
  </body>
</html>

Спасибо

1 Ответ

0 голосов
/ 26 октября 2019

В ответ на ваш комментарий (и без большого количества соответствующего кода, чтобы увидеть, в чем заключается ваша настоящая проблема), это будет одним из способов дать пользователю возможность переключать свой пароль, чтобы показать его по команде в vanilla javascript

const myInput = document.getElementById("password")

document.getElementById("passwordButton").addEventListener("click", ()=>{
  myInput.type === 'text' 
    ? myInput.type = 'password'
    : myInput.type ='text'
})
<input id='password' type='password' />
<button id='passwordButton' type='button'> Show/Hide </button>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...