Manual Chapter : Adding images and customizing buttons for the OAuth Logon Page

Applies To:

Show Versions Show Versions


  • 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
    Profiles / Policies
    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
  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
      The image loads and a thumbnail opens.
    3. Close the Image Browser popup screen.
  5. Back on the Advanced Customization Images screen, in any
    field that contains
    (a default value), click the field, then click the icon that displays at the end of the field, then click
    A Choose an Image popup screen opens.
  6. Select the image that you uploaded previously, then click
    The popup screen closes. A path and the name of the image file that you chose displays in the
  7. On your keyboard, press Enter to finalize the change; then, on your screen on the menu bar, click
    In the
    field, the path and the image file name completely change. The file name changes to something like
    is a number and
    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
    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
    The code displays in the Advanced Customization Editor.
  11. Search for the phrase
    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
  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
    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
  16. If you've been working on a per-session policy, click the
    Apply Access Policy