PingID Administration Guide

Customizing the HTML Form Adapter for passwordless authentication with a FIDO2 passkey

Customize the passwordless authentication flow by adding a passkey icon to the sign on window. You can also choose to show the passkey 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

Add an HTML Form Adapter so that you can:

  • Modify the icon to the passwordless flow button in the HTML Form Adapter to display a passkey icon.

  • You can choose to show the passkey button only when the browser is WebAuthn compatible.

Steps

  1. To add a passwordless authentication flow icon:

    1. Download the passkey image here and in the relevant PingFederate folder, save the icon to the server/default/conf/template/assets/images folder as icon-passkey.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, body .button-container .social-media.Security.Key, body .button-container .social-media.securitykey, body .button-container .social-media.security.key {
  background-image: url("../images/icon-passkey.png");
  background-position: left 10px center;
  background-size: 25px auto;
  font-size: 0;
  line-height: 0;
}
body .button-container .social-media.SecurityKey::after, body .button-container .social-media.Security.Key::after, body .button-container .social-media.securitykey::after, body .button-container .social-media.security.key::after {
  content: 'Passkey';
  font-size: 14px;
  line-height: 42px;
}
      The css styling can be modified in accordance with your organization’s style guide.

    4. (Optional) To modify the name of the passwordless authentication button that appears in the UI, in the main css file, modify the following line:

      content: 'Passkey';

  2. To hide the passkey 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 isWebAuthnSupported(); to the onload attribute.

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

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

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