Lab 07 - Testing Your Application

Return to Workshop

Lab 7

Testing the International Inc. Locations webpage

Testing your web application

<img src="../images/agenda-05.png “Login” width=“900” />

Overview

This lab demonstrates the International Inc. Locations page using our newly authenticated locations API.

Why Red Hat?

Applications can be built from many technologies. In this case we use a simple web application, but a wide range of Red Hat and non-Red Hat technologies could be used.

Lab Instructions

Step 1: Update OpenShift Deployment

OpenShift let you automatically redeploy your changes when you setup a Continuous Integration / Continuous Deployment (CI/CD) pipeline through the use of webhook. For this lab we will trigger the new build and deployment manually through the OpenShift Console.

  1. Go back to your OpenShift web console. Navigate to your project’s overview page.

  2. Scroll down and click in the www link in the BUILDS section.

    <img src="../images/deploy-10.png “Scroll Down”" width=“900” />

  3. In the build environment variables page, replace the CLIENT_ID from CHANGE_ME to the one generated from the previous lab.

  1. Click Save button to persist the changes. A green pop up will show you that the changes were saved.

  2. Click the Start Build button to trigger a new build using the new environment variables pointing to your service.

    <img src="../images/deploy-12.png “Start Build”" width=“900” />

  3. A new build will be triggered. Expand the row by clicking the Builds Icon.

    <img src="../images/deploy-13.png “View Build”" width=“900” />

The build process checks out the code from the git repo, runs a source-to-image container image build, and redeploys the container with the new image using a rolling upgrade strategy.

  1. Wait for until the new Build to complete and the rolling upgrade to finish to test your new deployment.

    <img src="../images/consume-22.png “Updated App”" width=“900” />

Step 2: Update Secured Service with Red Hat Single Sign On Application Callback

Redirect URLs are a critical part of the OAuth flow. After a user successfully authorizes an application, the authorization server will redirect the user back to the application with either an authorization code or access token in the URL. Because the redirect URL will contain sensitive information, it is critical that the service doesn’t redirect the user to arbitrary locations.

  1. Open a browser window and navigate to your SSO Console. Please check with your instructor for the link. It should be similar to the following. Replace userX with your assigned user and OCP_URL.

    http://sso-sso.apps.[OCP_URL]/auth/admin/[userX]/console/
    

    Remember to replace the X with your user number.

  2. Log into Red Hat Single Sign On using your designated user and password. Click on Sign In.

    <img src="../images/00-login-sso.png “RH SSO Login” width=“900” />

  3. Select Clients from the left menu.

    <img src="../images/00-clients.png “Clients”" width=“900” />

    3scale, through it’s zync component, already synchronized the application information into the Red Hat SSO security realm.

  4. Click on the CLIENT_ID link to view the details.

    Remember to select CLIENT_ID with the one you got in the API Security Lab. It will easily identifiable as its and hexadecimal name.

    If you do not find the CLIENT_ID, make sure you correctly executed the sync between 3scale and RHSSO in Step 3.12 Lab05

    <img src="../images/consume-24.png “Client Application”" width=“900” />

  5. Scroll down, type in and select the following options in the application configuration:

    Field Value
    Access Type Public
    Standard Flow Enabled ON
    Implicit Flow Enabled OFF
    Valid Redirect URIs http://www-userX.apps.[OCP_URL]/*
    Web Origins *

    Remember to replace the X with your user number.

    <img src="../images/consume-25.png “Client Configuration”" width=“900” />

  6. Finally, click Save button to persist the changes.

Step 3: Opening International Inc Web Page

International Inc web development create a Node.js application for the company home page. They added a map service to locate the offices around the world. In this step you will deploy that application.

  1. Open a Private Browser tab and navigate to your SSO Location App. Update userX and OCP_URL :
  1. You should now see what the development team created for International Inc. Click LOCATIONS to check the locations page.

    <img src="../images/consume-13.png “Webpage”" width=“900” />

  2. You can notice now the Sign In button in the page.

    <img src="../images/consume-222.png “Sign-In”" width=“900” />

Step 4: Test the Single Sign On Integration

  1. Let’s test the integration. Click the Sign In button.

  2. You are being redirected to Red Hat Single Sign On Login Page. Login using the user credentials you created in the API Security Lab. Please check with your instructor if you need credentials.

    <img src="../images/consume-23.png “Login Realm”" width=“900” />

  3. You will be redirected again to the LOCATIONS page where now you will be able to see the map with the International Inc Offices.

    <img src="../images/consume-14.png “Locations Page”" width=“900” />

Step 5: Troubleshooting the Locations Page

  1. In most cases, the Locations web page will NOT show the locations because of a self-signed certificate issue in your web-browser. See the below example with missing locations:

    <img src="../images/00-missing-locations.png “Missing Locations”" width=“900” />

  2. To resolve this issue in Chrome, navigate to View > Developer > Developer Tools menu. A Developer Tools console should appear.

    <img src="../images/00-developer-console.png “Developer Console”" width=“900” />

  3. In the developer console, a red error should appear indicating a cert issue. Click on the link and accept the certificate.

Example link: https://location-userX-api-staging.amp.ocp-ai.redhatgov.io/locations

  1. Refresh the page, and the locations should appear.

    <img src="../images/consume-14.png “Locations Page”" width=“900” />

  2. If you get an “Authentication Parameter is Missing” Error. It’s most likely your backend api is not working

    • Make you created the location-service API from Lab 3
    • Go into 3Scale and update the Private Base URL for the SSO Locations API to a working API such as the sample Locations API that your instructor can give you.
  3. Also, make sure to use an Incognito Browser Window or Clear your Browser Cache when viewing the International Sample Application

  4. Also you can try relaxing your browser security settings. In Settings > Advanced > Privacy and Security > Protect you and your device from dangerous sites

Congratulations! You have successfully tested the International Inc. Locations webpage using a full SSO authenticated API.

Steps Beyond

So, you want more? You can explore in detail the documentation on the Javascript Adapter to check what other things can you get from your authenticated user.

Summary

In total you should now have been able to follow all the steps from designing and API, deploying it’s code, issuing keys, connecting OpenID connect and calling it from an application. This gives you a brief overview of the creation and deployment of an API. There are many variations and extensions of these general principles to explore!

This is the last lab of this workshop.

Notes and Further Reading

Return to Workshop