F5 Logo MyF5
Search
  1. MyF5 Home
  2. BIG-IP Access Policy Manager: Advanced Customization Examples
  3. Advanced Customization with the OAuth Logon Page Template
  4. Adding images and customizing buttons for the OAuth Logon Page
Manual Chapter : Adding images and customizing buttons for the OAuth Logon Page

Applies To:

Show Versions Show Versions

BIG-IP APM

  • 17.1.0, 17.0.0, 16.1.4, 16.1.3, 16.1.2, 16.1.1, 16.1.0
Manual Chapter

Adding images and customizing buttons for the OAuth Logon Page

You might want to add an image for a custom OAuth provider or use an image other than the ones that are available in the advanced customization template. You might also want to customize the colors you use for an OAuth provider.
  1. On the Main tab, select
    Access
    Profiles / Policies
    Customization
    General
    .
    The Customization screen displays with the Branding tab selected.
  2. Navigate to the
    OAuth Logon Page
     folder for your per-session policy (located in the
    Access Profiles
     folder) or your per-request policy (located in the
    Per-Request Policies
     folder).
  3. Expand the
    OAuth Logon Page
     folder and, in it, click
    Advanced Customization
    .
    An Advanced Customization Images screen displays.
  4. To upload a new image:
    For best results make sure that the image is 25 x 25 px.
    1. Click
      Image Browser
      .
      An Image Browser popup screen opens.
    2. Click
      Add Image
      , find and select the image, and click
      Open
      .
      The image loads and a thumbnail opens.
    3. Close the Image Browser popup screen.
  5. Back on the Advanced Customization Images screen, in any
    Value
     field that contains
    /public/images/my/tr.gif
     (a default value), click the field, then click the icon that displays at the end of the field, then click
    Replace
    .
    A Choose an Image popup screen opens.
  6. Select the image that you uploaded previously, then click
    Change
    .
    The popup screen closes. A path and the name of the image file that you chose displays in the
    Value
     field.
  7. On your keyboard, press Enter to finalize the change; then, on your screen on the menu bar, click
    Save
    .
    In the
    Value
     field, the path and the image file name completely change. The file name changes to something like
    image
    xx
    _
    nn
    .png
     where
    xx
     is a number and
    nn
     represents a language code.
  8. Click the new value, copy it, and paste it to a text file to save it temporarily.
    You will need to paste this exact value into the code for the OAuth Logon Page in a later step.
  9. From the
    View
     list at the top right of the screen, select
    Advanced Customization
    .
    The Customization tool switches to the advanced view.
  10. In the
    OAuth Logon Page
     folder, click
    logon.inc
    .
    The code displays in the Advanced Customization Editor.
  11. Search for the phrase
    authLoginSelectCusts
    .
    The phrase displays within these lines of code:
    /* BEGIN OF ADDED CODE */
$settings = ["patchFieldId" => "oauthprovidertype", "patchFieldValue" => "ROPC"];
$authLoginSelectCusts = [
    "__default__" =>  ["/public/images/my/tr.gif", "#e59c91", "#D92138", "#FFFFFF"], 
    // please use low case in keys because of $authLoginSelectCusts[strtolower($o)] later in code
    "f5" =>         ["/public/images/my/flogo_mobile.png", "#ea7281", "#D92138", "#FFFFFF"],    
    "google" =>     ["/public/images/customization/Common/vs-show-profile-2_act_oauth_logon_page_ag/image00_en.png", "#96C3E0", "#557CBF", "#FFFFFF"],
    "facebook" =>   ["/public/images/customization/Common/vs-show-profile-2_act_oauth_logon_page_ag/image01_en.png", "#7b94ca", "#4768b2", "#FFFFFF"],
    "ping" =>       ["/public/images/customization/Common/vs-show-profile-2_act_oauth_logon_page_ag/image02_en.png", "#EE6E81", "#EA4A62", "#FFFFFF"]
];
    The code specifies an OAuth provider name in lowercase, an image name and path, and hexadecimal color codes for the foreground, background, and text.
  12. Duplicate one of the lines of code for a provider.
    For example, your result might look like this: 
     "f5" =>     ["/public/images/my/flogo_mobile.png", "#ea7281", "#D92138", "#FFFFFF"],    
 "f5" =>     ["/public/images/my/flogo_mobile.png", "#ea7281", "#D92138", "#FFFFFF"],
  13. Update the duplicated line of code:
    1. Replace the provider name with a provider name that you specified in the properties for the OAuth Logon Page (as configured in the visual policy editor).
      Type the provider name in lowercase, regardless of the case you used in the visual policy editor when you configured the OAuth Logon Page properties.
    2. Replace the image name and path with the exact image name and path that you copied from the Advanced Customization Images screen.
    3. Replace the hexadecimal color codes with the ones you want to use.
    Your result, for example, might look like this: 
     "f5" =>             ["/public/images/my/flogo_mobile.png", "#ea7281", "#D92138", "#FFFFFF"],    
 "siterequest" =>    ["/public/images/customization/Common/vs-profile-2_act_oauth_logon_page_ag/image03_en.png", "#FFFFFF", "#000000", "#FF0000"],
  14. On the menu bar, click
    Save
    .
  15. If you want to remove the Logon button from the OAuth Logon Page screen, you can do that while you are still in the Advanced Customization view:
    1. In the
      OAuth Logon Page
       folder, click
      logon.inc
      .
    2. Search for and remove these lines of code:
      <tr id="submit_row">
<?
        if( $GLOBALS["label_position"] == "above" ){
?>
        <td class="credentials_table_unified_cell"><input type=submit 
class="credentials_input_submit" value="%[logon]"></td>
<?
                   }else{
?>
                   <td class="credentials_table_label_cell" ></td>
                   <td class="credentials_table_field_cell"><input type=submit 
class="credentials_input_submit" value="%[logon]"></td>
<?
                            }
?>
       </tr>
    3. On the menu bar, click
      Save
      .
  16. If you've been working on a per-session policy, click the
    Apply Access Policy
     link.
Contact Support Contact Support

Have a Question?

Support and Sales >

About F5

Education

F5 Sites

Support Tasks




©2023 F5, Inc. All rights reserved.


Trademarks Policies Privacy California Privacy Do Not Sell My Personal Information