webMethods API Portal tutorial
Introduction
A CAPTCHA an acronym for "Completely Automated Public Turing test to tell Computers and Humans Apart" (thats verrryy lengthy ;)) is a type of challenge–response test used in computing platforms to determine whether or not the user is human. Usually any applications will have some forms to feed the data into the system. These applications will have basic validations enforced on the data entered by the enduser. Often times thse validations focus only on the mandatory checks or syntactical formatting (ex: email / phone number) of the keyed data. CAPTCHAs widely used to prevent bots from automatically submitting forms with SPAM or other unwanted content.
Captcha Integration with webMethods API Portal
We have a signup form for onboarding external application developer. This form will be used to capture the basic information about the developers who are willing to signup with your API Portal. We can integrate Google Recaptcha easily along with this signup form so that a simple challenge-response test can be performed to identify whether the user is humar or some malicious bot.
Prerequisites
Before reading further down, please signup with Google (https://www.google.com/recaptcha) for getting your API KEY pair for your site. API Key pair includes the so called SITEKEY & SECRETKEY.
SITEKEY:
The site key is used to invoke reCAPTCHA service on webMethods API Portal. SITEKEY is embeded inside the client code.
SECRETKEY:
The secret key authorizes communication between your application backend and the reCAPTCHA server to verify the user's response. The secret key needs to be kept safe.
Next item would be to create a new modification set with in API Portal and activate this modification set. For this tutorial i have created a modification set named "recaptcha" and activated it.
Now edit the modification set and navigate to pages. Starting from 10.4 we have a new page named "Sign-up form". Let us open the "Sign-up form" to edit its content. We will explore the integration of Recaptcha with webMethods API Portal from below two categories
Client side integration:
- Adding a container for recaptcha
Edit the signup template (html) to include the containers for rendering the captcha
|
<input id="recaptcha-response" type="hidden" data-portal-registration-field-name="recaptcha-response" data-portal-registration-field=""> |
Please take a note on the container(div element) with id ("g-recaptcha"). Exactly on this element the recaptcha widget will be loaded.
- Register plugin
Now edit the javascript code available to include the new registration plugin. A registration plugin can provide implementation for below standarded interfaces. These lifecycle methods will be invoked during various phases of user registration.
|
PORTAL_CONFIG_SETTINGS.JSCRIPT_URLS = ["https://www.google.com/recaptcha/api.js"]; PORTAL_CONFIG_SETTINGS.REGISTER_PLUGINS = []; var plugin = new Object();
plugin.type = "captcha";
plugin.name = "recaptcha";
PORTAL_CONFIG_SETTINGS.REGISTER_PLUGINS.push(plugin);
|
In above piece of code, we create a plugin object and add it to the list of registered plugins(REGISTER_PLUGINS). Also pleaes note that JSCRIPT_URLS cotains the Google Recaptcha CDN URL from where the widget will be loaded to DOM.
Render()
|
var processResponse = function(response) {
$("#recaptcha-response").val(response);
};
plugin.render = function() {
grecaptcha.render('g-recaptcha', {
'sitekey': '<<YOUR SITE KEY>>',
'callback' : processResponse,
});
};
|
This plugin lifecycle method will be called by the framework to initate the rendering of registered plugin. This will be called when the registration page is loaded into DOM.
Execute()
|
plugin.execute = function() {
executed(plugin.name);
};
|
This plugin lifecycle method will be called by the framework before sending the registration data to the API Portal server. If there is a need todo custom logic to persist the provided data into an external server, we can use this method. BUT for captcha integration we may not need this. We simply report back to the caller with a message "executed"
Validate()
|
plugin.validate = function(data) { }; |
This plugin lifecycle method will be called by the framework for validating the data entered by the user to individual plugins. plugins can perform validation and show any client side validation results.
onSubmitComplete()
|
plugin.onSubmitComplete = function(data) { }; |
With above changes we are 50% done on our integration.
Server side integration:
Now we have to provide the secret key to the server side registration plugin to get the captcha response validated in the server side. Below CURL command will update the required details in the server end.
| curl --request POST \ --url http://apiportal-host/abs/apirepository/configurations/com.aris.apiportal.plugin.extension.configuration/ \ --header 'authorization: Basic c3lzdGVtOm1hbmFnZXI=' \ --header 'content-type: application/json' \ --data '[ { "clazz":"com.aris.apiportal.registration.extn.WorldpayExtension", "activated":false, "configuration":{ "key":"" }, "name":"worldpay", "type":"paymentgateway", "displayName":"Worldpay" }, { "clazz":"com.aris.apiportal.registration.extn.ReCaptchaExtension", "configuration":{ "key":"YOUR_SERVER_KEY" }, "name":"recaptcha", "activated":true, "type":"captcha", "displayName":"reCAPTCHA" }, { "clazz":"com.aris.apiportal.registration.extn.StripeExtension", "activated":false, "configuration":{ "key":"" }, "name":"stripe", "type":"paymentgateway", "displayName":"Stripe" } ] |
Please do not forget the replace your secret key in above payload.
Now we are done and if you logout and move to the registration page, your registration dialog will contain the recaptcha widget.
You can get the modification set used for this tutorial here.