WaveMaker Docs

WaveMaker Docs

  • Get started
  • Widgets
  • Mobile
  • How-to
  • Enterprise
  • Releases
  • Blog
  • Sign-in

›Developer options

How-to-documents

  • How-to Wiki
  • WaveMaker Best Practices

App solution

  • Creating a Registration Page
  • Support for Password Encryption
  • Error Handling in WaveMaker App
  • Leaving Page with Unsaved Changes
  • Micro frontend using iframes
  • Enabling PWA

UI design

  • Passing Parameters to Pages
  • Passing Parameters to Partial Page
  • Accessing Script
  • Use Static Variable to pass data between pages
  • Customise Login Page
  • Incorporating Additional Icons
  • Change Icon Color on Condition
  • Change Icon for the Global Spinner
  • Changing Default Favicon
  • Changing App Logo
  • Changing Page Title
  • Customise App Style
  • How to use Conditional Class Property
  • How to use Conditional Style Property
  • Customize an Existing Theme
  • Adjust Left Navigation Width
  • Customizing Theme
  • Enable SPA
  • Choose Widget Template and Layout
  • Widget Template and Icons
  • Custom Template for Widgets
  • Apply Custom Data Formatter

Nav & Dropdown

  • Dynamic Menu based on User Role
  • Restricting Menu Items based on the User Role
  • Localization for Dropdown Menu

Localization

  • Localization in WaveMaker Apps
  • Setting Language and Date Format
  • Localization Using Select Locale
  • Localization of Error Messages

Security

  • SAML Integration - OneLogin
  • SAML Integration - ADFS
  • OpenID Integration - Azure AD
  • Custom Security using Google OAuth Prefab
  • Multiple Security Provider Implementation
  • Customizing Post Authentication Handlers
  • Configuring Content-Security-Policy
  • Configuring MTLS

Databases

  • Queries with Dynamic Where Clause
  • Connect To Azure SQL Server
  • Recommended JDBC Driver Versions for Databases
  • How to fetch more than the default number(100) of records from database?
  • How To: One-to-Many Relationship
  • Working with Temporals
  • Connect To AWS Redshift Database
  • Connect To SAP Hana Cloud Database
  • Transactional History of Entity
  • Row-Level Security using DB Event Listeners
  • Validations using CRUD Listeners
  • Custom Logic DB Event Listeners
  • Connect to MySQL database using SSL
  • How to Switch MariaDB to MySQL Connector

Web services

  • Using App Environment Properties
  • Consuming an Existing WaveMaker API
  • Using POST method to send data to a REST API
  • Request-Response Processing for REST Services
  • How to Intercept Request and Response of all API Calls in One Place
  • WebSocket Usage - Chatroom App
  • UI for API Server-side Pagination
  • Working with API with different pagination formats

Java services

  • Sending Email using WaveMaker Connector
  • Implementing Forgot Password feature using Java Service
  • Accessing REST APIs from Java Service
  • Scheduling a Java Service
  • Integrating JUnit Tests for WaveMaker Application
  • ORM Artifacts
  • Pre-Post Processing for Database Service APIs
  • Accessing Logged-in User Details using Java Service
  • Design a workflow in Camunda BPM and integrate into a WaveMaker app
  • Integrate Azure File Storage
  • Insert Data from Excel into Database
  • Integrate Amazon S3 into WaveMaker App
  • Integrate Twilio Connector
  • Integrate OTP (One-Time Passcode) Verification with WaveMaker App

Variables

  • Using Filter Conditions on Variable
  • Using Live Variable APIs
  • Using Notification Actions
  • Using Navigation Action
  • Using Variables for Queries and Procedure
  • Using Service Variable in a Form
  • Using Filter Criteria for a Data and Live Widgets
  • Using Filter Criteria for a Database CRUD Variable

JavaScript

  • Using JavaScript in Binding
  • Using JavaScript from External URL
  • Using JavaScript to loop a command
  • Using function for evaluating conditions

Developer options

  • Synchronizing WaveMaker Apps with IDEs
  • Synchronizing Java Services Controller
  • Integrating Amazon Cognito for User Authentication
  • Integrating Sample Jasper Report in WaveMaker Application
  • How to generate PDF File using Jasper Reports
  • Upgrading an App from WaveMaker 9.x to WaveMaker 10.0
  • App Migration from WaveMaker 9x to 10x
  • Setup Fusion Reactor for Debugging Issues

Deployment

  • SSL Termination in LoadBalancer

Mobile App Solutions

  • Notify users about new update

Mobile gesture

  • Setting Swipe Gestures on a List Widget
  • Working with Pull to Refresh

Mobile widgets

  • Using Search Widget within the Navbar

Mobile UI design

  • Setting Splashscreen Images and App Icons
  • Using Cordova Plugins
  • Designing Tablet Views in Mobile Project
  • Sliding left navigation for Mobile App
  • Mobile App using Bar code
  • Custom Date Picker in Mobile

Cards

  • Capturing Card Items

DataTable

  • Customising Data Table Row Action
  • How to Configure Row Expansion in a Data Table
  • Using Widgets to represent Data Table Columns
  • View Master-Detail Data Records using Data Table
  • Add Master-Detail records using Data Table
  • Export Data from Data Table
  • Export Data from Data Table - 2
  • Setting Blob Filename
  • Dynamic Data Tables
  • Customize Dynamic Datatable
  • Data Table Column bound to Query
  • Combining Columns in Data Table
  • Custom Styling Data Table Columns & Rows
  • Formatting Data Table Columns
  • Concurrency and Record Locking in WaveMaker
  • Edit DataTable records bound to Query API

List

  • Creating an Employee List grouped by City
  • Creating an Employee List grouped by Birth Month and City
  • OnRender Event
  • Including a Data Table within a List
  • Building an Editable List
  • Building Cascading Lists
  • Accessing List Items
  • Localization of Data Table Column Headings

Forms

  • Using Live Form
  • How Tos: Form
  • Building Tabbed Live Form
  • How Tos: Live Form
  • Linking Live Form with another Widget for Input
  • Handling Related Fields in a Live Form
  • How to Get Validation Messages from a Form
  • Adding Master-Detail records in the same transaction
  • Submit Parent and Child Records in a Single Transaction
  • Submit Parent and Child Records in a Single Transaction using Form and Data Table
  • Using Cascading Select & Autocomplete for Live Form Fields
  • Using Cascading Select within Live Form
  • Using cascading Filter to populate Live Form
  • Using Wizard for Master-Detail Live Form
  • Copy to Clipboard
  • Create a form with multiple wizard steps
  • Smart Forms: Conditional Flows for form Widget

Calendar

  • How Tos: Calendar
  • Calendar Usage - Create an Event
  • Calender Usage - Google Calendar Integration

CheckboxSet

  • CheckboxSet to Filter List data

FileUpload

  • FileUpload - Basic Usage
  • File Upload Widget Operations
  • Upload File & Save in Database
  • File Upload & Blob Data
  • File Upload - Custom Directory
  • Accessing File Upload from Java Code
  • Upload Files from Live Form & Form

Radioset

  • Radioset to Filter a List

Rating

  • Building Rating Widget using Static Data
  • Building Rating Widget using Static Variable
  • Build Rating Widget using Model Variable
  • Building an Interactive Rating Widget

Select

  • Configuring Select Widget from a Static List of Values
  • Configuring Select Widget from a Static Variable
  • Configuring Select Widget from a Variable
  • Configuring Select Widget using Display and Data Fields
  • Configuring Select Widget from Database Fields
  • Configuring Cascading Select
  • Selection Widgets - Use Case

Progress Circle

  • Using Progress Circle Widget

Charts

  • Working with Charts
  • Display User Selection in another Widget
  • Handling Dynamic Data
  • Custom Data

Richtext Editor

  • Adding Custom Fonts to Richtext Editor

Live filter

  • Applying Live Filter to a Data Table or a Chart
  • Building a Multiple Selection Live Filter
  • Building a Range Live Filter

Container

  • Setting partial page content for Accordion within a List
  • Setting partial page content for Panel within a List using JavaScript
  • How Tos: Wizard
  • Dynamic Tabs and Accordions

Tree

  • Tree using Static Variable
  • Tree using Java Service
  • Tree using Dynamic Tree

Prefabs

  • Creating Partials in a Prefab
  • Create Prefab using Third Party UI Widgets
  • Create a Simple Prefab
  • Create Prefab Using D3 & NVD3 Charts
  • Create Prefab Using D3 Library DataMaps
  • Create Prefab using JQuery Plugin
  • Create Prefab using Angular Module
  • Create Prefab using Angular, React Components
  • Azure OAuth Prefab Integration

Team Poral Configure Vcs

  • Configure Azure Repos In CodeRepository
Edit

Integrating Amazon Cognito for User Authentication


Amazon Cognito is a service that enables you to create unique identities for your users and authenticate them using either your own user pools or by using federated identity providers. Here we will see hot to create Cognito User Pool and implement custom authentication service in WaveMaker App using this user pool. Know more about Amazon Cognito from here.

Setting Up Cognito User Pools

  1. Go to Amazon Management Console
  2. Configure the User Pool as required
  3. Note down the generated pool id and Pool ARN values

  1. From the Apps tab, create an application with following configuration, make sure that “Generate Client Secret” is unchecked
  2. Create the application and note down the App client ID

Configuring JS Libraries in WaveMaker

Download pre-requisite JS files

Download and include the following:

  • Amazon Cognito AWS SDK for JavaScript files here: aws-cognito-sdk.zip
note

The Amazon Cognito AWS SDK for JavaScript is a slimmed down version of the AWS Javascript SDK namespaced as AWSCognito instead of AWS. It references only the Amazon Cognito Identity service. Similar to the AWS JavaScript SDK, the config.credentials property needs to be populated (either globally for AWSCognito or per-service).

Upload JS files to WaveMaker

  1. Upload the JS files to WaveMaker. Go to Import Resource and Upload the JS files downloaded in the previous section. The files should be uploaded to project/src/main/webapp/ directory.
  2. From File Explorer, Navigate to index.html and include the JS files manually.
important

Ensure the path is correct.

At this point, we’ve integrated the Amazon JavaScript SDK into our project.

Getting started with User Registration

  1. Create a New Page named “Registration”, using the Sign-up template and blank layout.
  2. Add Form Fields as per your requirement. For example, contant, email ID, and more, required for creating a user.
  3. Add On Click event for the “Create Account” button and include the following code in JS:
Page.button4Click = function($event, widget) {
    AWSCognito.config.region = 'ap-southeast-2';
    // AWSCognito.config.credentials = new AWS.CognitoIdentityCredentials({
    //     IdentityPoolId: '...'
    // });

    // AWSCognito.config.region = 'ap-southeast-2'; //This is required to derive the endpoint
    var poolData = {
        UserPoolId: '{user pool id}',
        ClientId: '{clientid}'
    };

    var userPool = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserPool(poolData);
    var attributeList = [];
    var dataEmail = {
        Name: 'email',
        Value: Page.Widgets.email.datavalue
    };


    var dataPhoneNumber = {
        Name: 'phone_number',
        Value: Page.Widgets.phone.datavalue
    };

    var attributeEmail = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserAttribute(dataEmail);
    var attributePhoneNumber = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserAttribute(dataPhoneNumber);
    attributeList.push(attributeEmail);
    attributeList.push(attributePhoneNumber);
    userPool.signUp(Page.Widgets.username.datavalue, Page.Widgets.password.datavalue, attributeList, null,
        function(err, result) {
            if (err) {
                alert(err);
                return;
            }
            var userData = {
                Username: "sample",
                Pool: userPool
            };

            var cognitoUser = new AWSCognito.CognitoIdentityServiceProvider.CognitoUser(userData);
            cognitoUser = result.user;
            //Handle for On success of Signup - Navigation to Page/Verify user Page
            console.log('user name is ' + cognitoUser.getUsername());
            alert('User Created ' + cognitoUser.getUsername());
            Page.Actions.goToPage_Login.invoke();
        });
};
  1. Additionally create a Navigation Action (goToPage_Login) to navigate to Login page on successfully creating a User. The below mentioned code has already been added in the On Success for SignUp.
Page.Variables.goToPage_Login.navigate();

Configuring WaveMaker Security

Implement a custom Authentication Service which will take the JWT access token , ID token and create a WMUser Object.

  1. Create a Java Service - CognitoUPoolLogin.
  2. Add the import statements as following.
import com.wavemaker.runtime.security.WMCustomAuthenticationManager;
import com.wavemaker.runtime.security.WMUser;
import com.wavemaker.runtime.security.AuthRequestContext;
import java.util.Arrays;

  1. Edit the code as following.
import java.util.ArrayList;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.security.authentication.BadCredentialsException;
import org.springframework.security.core.AuthenticationException;

import com.wavemaker.runtime.security.AuthRequestContext;
import com.wavemaker.runtime.security.WMCustomAuthenticationManager;
import com.wavemaker.runtime.security.WMUser;

import org.springframework.security.core.AuthenticationException;
import javax.servlet.http.*;
import java.util.*;
public class CognitoUPoolLogin implements WMCustomAuthenticationManager {

 private static final Logger logger=LoggerFactory.getLogger(CognitoUPoolLogin.class);

 public WMUser authenticate(AuthRequestContext authRequestContext) throws AuthenticationException {
       HttpServletRequest httpServletRequest = authRequestContext.getHttpServletRequest();
     boolean isSecurityUrl = httpServletRequest.getRequestURI().endsWith("j_spring_security_check");
     WMUser user = null;
     String securityProvider = httpServletRequest.getParameter("j_username");
     String token = httpServletRequest.getParameter("j_password");

     if (isSecurityUrl && securityProvider != null && token != null) {
         user = new WMUser(securityProvider,token, Arrays.asList("user"));
     }
     return user;
    }
}

  1. Configure the Security with provider as Custom and give the above Class Name.

Configuring Login Page

  1. In the Login page, create Login Action, called cognitoLogin.
note

Note we are using this action in the code snippet given below, if you are creating the action with a different name, you need to change the code accordingly.

  1. Add On Click event to the Login Button.
  2. Add the Following code into the loginButtonClick function.
     Page.loginButtonClick = function($event, widget) {
    //Creating authentication data object 
    var authenticationData = {
        Username: Page.Widgets.j_username.datavalue,
        Password: Page.Widgets.j_password.datavalue
    };
    // Creating the aws cognito autheticationDetails with the authetication object
    var authenticationDetails = new AWSCognito.CognitoIdentityServiceProvider.AuthenticationDetails(authenticationData);
    var poolData = {
        UserPoolId: '{user pool id}',
        ClientId: '{client id}'
    };
    //creating user pool object 
    var userPool = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserPool(poolData);
    var userData = {
        Username: Page.Widgets.j_username.datavalue,
        Pool: userPool
    };
    var cognitoUser = new AWSCognito.CognitoIdentityServiceProvider.CognitoUser(userData);

    //handle the new password 
    function newPasswordRequired() {
        //Write logic here 
        alert("New Password Required");
        AWS.config.region = 'us-east-1';
        AWS.config.credentials = new AWS.CognitoIdentityCredentials({
            IdentityPoolId: 'us-east-1:0bf0ab2c-c013-4617-be40-e587d29a1c49'
        });
    }

    //Calling aws to authenticate the user passing the details
    cognitoUser.authenticateUser(authenticationDetails, {
        onSuccess: function(result) {
            console.log('access token + ' + result.getAccessToken().getJwtToken());
            /*Use the idToken for Logins Map when Federating User Pools with Cognito Identity or when passing through an Authorization Header to an API Gateway Authorizer*/
            console.log('idToken + ' + result.idToken.jwtToken);
            console.log(Page)            
            Page.Actions.cognitoLogin.dataBinding.j_username = result.getAccessToken().getJwtToken();
            Page.Actions.cognitoLogin.dataBinding.j_password = result.idToken.jwtToken;
            Page.Actions.cognitoLogin.login();
        },

        onFailure: function(err) {
            //Handle for Invalid User/Register User
            alert(err);
        },
        newPasswordRequired: function() {
            //Handle for New Password Required
        }

    });
};
  1. From the Settings dialog of the project, set the Landing page as Registration page and from the security dialog, set the permission for the Registrations page as Everyone.

  1. The JWT - Access token, ID token will be available in the Logged In User Variable.

Post-registration Process

  1. On running the application, the Registration Page shows up. This page allows you to create a user who will be added to the user pool created.

  1. After creating the account, Login page shows up. Verification of the user should be done by going to to the Amazon Cognito Create User Pool page and click on Users and Groups in the Left Navigation Pane. This will show you the all the Users added to the user pool.

The user added should be confirmed by using the verification option chosen for verifying the user (EMail or Phone Number).

  1. Once the user is confirmed, the user can login into the account.

Last updated on 12/31/2019 by Swetha Kundaram
← Synchronizing Java Services ControllerIntegrating Sample Jasper Report in WaveMaker Application →
  • Setting Up Cognito User Pools
  • Configuring JS Libraries in WaveMaker
    • Download pre-requisite JS files
    • Upload JS files to WaveMaker
  • Getting started with User Registration
  • Configuring WaveMaker Security
  • Configuring Login Page
  • Post-registration Process
WaveMaker
  • PRICING
  • PARTNERS
  • CUSTOMERS
  • ABOUT US
  • CONTACT US
Terms of Use | Copyright © 2013-2023 WaveMaker, Inc. All rights reserved.