PingID Administration Guide

(Legacy) Customizing the HTML Form Adapter for passwordless authentication with a security key

Customize the passwordless authentication flow by adding a security key icon to the passwordless flow button. You can also choose to show the security key button when using webAuthn-compatible browsers only.

Before you begin

Before you start, create a PingFederate policy for passwordless authentication with a security key.

About this task

PingFederate 10.2 and later automatically includes a passwordless security key icon with the HTML Form Adapter, and automatically hides the security key button when the browser is not compatible with WebAuthn. For PingFederate 10.1 and lower, manually customize the HTML Form Adapter to:

  • Add an icon to the passwordless flow button in the HTML Form Adapter. Add the security key icon provided by Ping Identity, or add your own custom icon.

  • Choose to show the security key button only when the browser is webAuthn compatible.

Steps

  1. To add a passwordless authentication flow icon:

    1. Download the security key image here, and in the relevant PingFederate folder, save the icon to the server/default/conf/template/assets/images folder as icon-securitykey.png.

    2. In the PingFederate folder, go to server/default/conf/template/assets/css and open the main.css file in a text editor.

    3. Add the following code to the main.css file, and then save the file.

      body .button-container .social-media.securitykey {
  background-image: url("../images/icon-securitykey.png");
  background-size: auto 10px;
  background-position: left 10px center
}

  2. To hide the security key button when a browser does not support WebAuthn:

    1. In the relevant PingFederate folder, go to server/default/conf/template and open html.form.login.template.html file in a text editor.

    2. In the html body add isSecurityKeyAvailable(); to the onload attribute.

      <body onload="setFocus();isSecurityKeyAvailable();isWebAuthnPlatformAuthenticatorAvailable();">

    3. In the script element, add a new function, and then save the file.

      function isSecurityKeyAvailable() {
    var webauthnSupported = IsWebAuthnSupported();
    if (!webauthnSupported) {
        theElement = document.getElementById("securitykey-div");
        if (theElement) {
            theElement.style.display = "none";
        }
    }
}