Mar 10

Multiple Security Provider Implementation

The document provides an overview for implementing authentication for the application created in Studio using the Database as the security provider as well as using Google Oauth integration.

App settings to configure in Google Developer Console:

  1. Login into the Google Developer Console
    https://console.developers.google.com/
  2. Create a project in the google developer account.
  3. From the API Manager left nav, select the Credentials option and navigate to the “OAuth Consent screen” tab. Provide Product Name and save the settings.
  4. Navigate to the Credentials tab, and create “oAuth client ID” credentials for the project.
  5. Choose the Application type as Web application. Enter the Authorized JavaScript Origin and Authorized Redirect URIs. An example of a sample redirect URI is as below:

    Note : In the above URL change the container name and your project name accordingly.
  6. Click on Create. A client ID and client secret is issued for the specific client/user. Note down the client ID and secret as it will be used in the Studio application for further development purpose.

Configurations to be made in the Studio application:

  1. Create a new application in Studio.
  2. Add Database to your app by Connect to Database to import Sample  hrdb. You can choose to import any DB of your choice, ensure that there exists a table with Username/Role details.
  3. Create New page in the application to place the Google OAuth prefab for login.(lets call the page as GoogleLogin for reference in later points)
    NOTE: For the sake of convenience we have shown the use case with a different page for Google Login. You can implement these steps using the default Login page provided by WaveMaker.
  4. Drag and drop the Google OAuth prefab in this newly created page. For the prefab, specify the Secret, Scope, Appid, Page parameters.
    Please note that the Scope is with reference to the google API being utilised for ex: email. The Page parameter is the name of the page in which the googleOAuth prefab is placed i.e., the current page itself (GoogleLogin page)
  5. Open the Login page of the application and add a button widget below the Login button.
  6. Provide “Login Using Google” as the caption of the button widget. For the onClick event of the button widget, choose the Navigation variable for the page in which the google oAuth prefab is placed i.e., GoogleLogin page in the sample scenario.
  7. In the GoogleLogin page, create a page level Login action with the access token received from the googleOAuth prefab as input to the variable by binding it to the password field.
  8. For the on Load event of the google OAuth prefab, choose JavaScript as operation. In the function generated in the script tab of the page, place the code snippet below:
  9. Open the File Explorer and locate pom.xml file and add the below dependency for the spring social google in the dependencies tag.
  10. Create a query which retrieves the user details based on the logged in user name. This query will be later on autowired and used in the Java Service for authenticating the user if DB as security provider is used.
  11. Create a Java Service named MyAuthenticationManager.
  12. Add the following import statements:
  13. The class definition is as follows:
  14. Open Security Dialog and choose the Security Provider as custom. Provide the Class Name property as the package name of the MyAuthenticationManager java service created above. Save the settings.
  15. Run the Application.
    1. The login page appears, Login using the Login Page – admin/admin; you will see the Employee Data
    2. Logout and Login using Google Button; Google Login Page shows up
 
We use cookies to provide you with a better experience. By using our website you agree to the use of cookies as described in our Privacy Policy.