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 imagexx_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:

    Copy

    /* 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"]
    ]; 

    Note: 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:

    Copy

     "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:

    Copy

     "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:

       Copy

       <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.