2 Input Fields for Username on Hosted Login Widget

Questions
1

Hello,

Can I use the hosted login widget (with customizations) to have multiple input fields for authenticatoin? Moving from a legacy system, I need to bridge and have the username made up of two separate input fields (think: RegionID, UserID). I know I can use an event to merge these before they go to Okta (Okta will only see one combined username that is RegionID+UserID), but how can I get the input captured in 2 separate fields for the username?

1 Like
2

Hi @chu123

We do not have an out of the box integration for this scenario, however you can create a custom integration that would do the following operations:

  • Take the username and password and verify them against the /api/v1/authn endpoint
  • If the credentials are valid, the third field would be verified against a profile attribute that the user has
  • If the profile attribute matches the third field, the user is allowed to log in
3

I don’t know that it needs to be even that hard? If I can just insert another text box (with the same Okta look’n’feel), I think I can just use transformUsername: function (username, operation) function to merge the two input fields, no?

4

Hello. I was able to solve by modifying the Custom Login Widget HTML code within the Okta Admin console. This was performed by basically having the following code:

  function sleep(ms) {
      return new Promise(resolve => setTimeout(resolve, ms));
  }

[...]

async function showPartnerID() {
     await sleep(400);
     var mydiv = document.getElementsByClassName("o-form-input-name-username o-form-control okta-form-input-field input-fix");
     mydiv[0].insertAdjacentHTML('beforebegin','<span data-se="o-form-input-username" class="o-form-input-name-username o-form-control okta-form-input-field input-fix o-form-has-errors"><span class="input-tooltip icon form-help-16" data-hasqtip="0"></span><span class="icon input-icon person-16-gray"></span><input type="text" placeholder="Partner ID" name="partner" id="okta-signin-username" value="" aria-label="User ID" autocomplete="off"></span>');
   }

[....]

window.addEventListener('load', function(){showPartnerID()}, false);

So basically there are 3 functions:

  • Adding an event listener when the page loads (put this before oktaSignIn.renderE
  • Find the HTML element with the UserName class and insert another form field above it
  • Put in a “helper” wait for the page to load first (sleep 400ms)

I agree the UserName class search is probably not what I want - better to use the attribute name which is shorter and potentially more accurate.
capture

1 Like
5

Just correcting my own post if someone else sees it - I switched from using the “window.AddEventListener” to just using the afterRender event. i.e.:

 oktaSignIn.on('afterRender', function(context) {
                showPartnerID();
            }

This avoids the sleep (which is non-compliant with all browsers and really, was just an amateur move on my part) and integrates properly with the way Okta UI wants it…

3 Likes