Search code examples
htmlauthenticationinternet-explorer-11microsoft-edge

Autofill (login credentials) don’t work in IE11 and Edge

I develop a public portal with asp.net core 2.2, where users have to login to be able to rate. If the user want to rate and is not logged in, a bootstrap modal (see below) login form is showed.

Problem:
Google Chrome (desktop and mobile), FireFox and Safari mobile are working as expected: After first login, the browser ask, if the credential should be stored in the browser and the credentials are filled automatically by next login.

In IE11 and Edge, this don’t work (the browsers don’t ask, if the credentials should be stored and don’t fill it automatically). Notes:

  • The browsers are configured correct for credentials (under autofill, "save password", and "save form entries" are activated).
  • IE11 and Edge store credentials for other sites

It seems as GC , FF and safari looks for input type="password" what then triggers the save credentials.
It seems as this don’t work for IE and Edge.

By my search, I have found this thread: How browser's identify login forms?

I then have changed the id to the password input to “password” and added name = “password”.
To the nickname, I have added name = “username”. (note: this is not needed for FF and GC).

Unfortunately, this don’t help....

What do I have to change, to let the credentials also store from IE11 and Edge?

Code to login:

<div class="modal fade;" id="BenutzerAnmeldung">
<div class="modal-dialog modal-dialog-centered">
  <div class="modal-content">
    <!-- Modal Header -->
    <div class="modal-header">
      <h4 class="modal-title">Anmelden als Benutzer</h4>
      <button type="button" class="close" data-dismiss="modal">&times;</button>
    </div>
    <!-- Modal body -->
    <div class="modal-body">
      <div style="font-size: 14px"> Um diese Funktion auszuführen, müssen Sie als Benutzer angemeldet sein. </div>
      <hr /> 
      <div id=Status style="padding-top: 5px; padding-bottom: 10px; font-size:16px">
        Aktueller Status: Nicht angemeldet
      </div>
      <hr /> 

      <div style="font-size: 16px"> Ihre Anmeldedaten:</div>
      <div class="form-group row" style="font-size: 14px ; padding-top:10px">
        <label for="TBNickname" style="width: 100px; font-size: 14px; padding-left: 15px; padding-top:5px ">Nickname:</label>
        <input name="username" type="text" class="form-control" id="TBNickname" placeholder="Ihr Nickname..." style="width: 150px; font-size: 14px; padding-top:10px ">
      </div>
      <div class="form-group row" style="font-size: 14px ; padding-top:10px">
        <label for="TBPasswort" style="width: 100px; font-size: 14px; padding-left: 15px; padding-top:5px ">Passwort:</label>
        <input  name="password" type="password" class="form-control" id="Password" placeholder="Ihr Passwort..." style="width: 150px; font-size: 14px; padding-top:10px ">
      </div>
    </div>
    <!-- Modal footer -->
    <div class="modal-footer">
      <div class="form-group row">
        <button type="button" class="btn btn-secondary" id="BenutzerAnmelden" style="width:135px; margin:5px;">Anmelden</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal" style="width:135px; margin:5px;">Schliessen</button>
        <div>
          <button type="button" class="btn btn-secondary" id="BenutzerNeuErfassen" style="width:280px; margin:5px;">Ganz neu als Benutzer erfassen</button>
        </div>
      </div>
    </div>
  </div>
</div>

Solution

  • I have found the reason, why it don't have worked in IE11 and Edge:
    I simply have embedded the code additonally in a <form> tag and now it works....

    So my conclusion:
    It seems as IE11 and Edge only triggers the the "save credentials dialog", if the fields are in ebmbeded in <form> tag, whereby this is no needed for GC and FF.