For more information regarding the security incident at F5, the actions we are taking to address it, and our ongoing efforts to protect our customers, click here.

Forum Discussion

ktm_2000's avatar
ktm_2000
Icon for Altostratus rankAltostratus
Nov 10, 2023

Want to add button to logon page which when clicked changes session variable

Hi Folks, I'm new to F5 and please excuse my terminology as I am learning. I've built up an APM logon process which presents a TOTP logon screen that collects TOTP and calls an API to validate it, ...
application delivery
Lucas_Thompson's avatar
Lucas_Thompson
Icon for Employee rankEmployee
Nov 10, 2023

Hi ktm_2000, 

APM has two different kinds of HTML framework/customization systems: "Modern", which uses Preact (with a virtual DOM, etc) "Standard" which uses plain javascript that operates on the regular HTML DOM. You select between these two when you create the Access Profile. You cannot switch an existing profile to the other mode.

In Standard customization, you can put any code directly into any of the customization boxes. In Modern customization you can't. So for, say a logon page, you can put whatever code you want directly into the logon page fields, like this example that uses a span tag to apply CSS attributes to the input field:

Then you end up with this:

With "Modern" customization, it's a little harder because you can't just place arbitrary code into those boxes. You have to apply styles into the user stylesheet and code into the user code area. Here's what that looks like in the UI, using the example doc'd here:

With this method, you can simply execute javascript code to directly manipulate the DOM with vanilla JS or use React-style JS. 

Finally I'm sure you're probably aware that APM has a built-in OTP mechanism. It's split into 3 parts: Generate the OTP (with OTP generate agent), Ask user for OTP (with logon page agent), then validate OTP (using OTP validate agent. Any of these 3 steps can be substituted for custom functions because you can read and (over)write any APM session variables with whatever data you want using iRules and VPE rules. So to use these OTP verify you could just load the value you got from your API into the OTP session variable. The variable names that APM uses for this are:

(in a per-request policy it's "subsession" instead of "session")

  • session.otp.assigned.ttl = timeout (sec)
  • session.otp.assigned.expire = timeout + current time (unix format)
  • session.otp.assigned.val = generated OTP value

Any further questions please let us know. APM has a lot of flexibility but it can be confusing at times.