The objectives of this chapter are to

• Understand the various required services
• Understand how third-party components can help save time
• Learn about the costs and limitations of libraries

No matter which platform or framework that you choose for HMAD, there is always some functionality missing from the framework vendor. This gives third parties the chance to offer something and possibly make money out of it.

We have used Telerik AppBuilder throughout the book. All APIs required by a developer or project may not exist with AppBuilder, so AppBuilder has third-party plug-in integration. Some of the third-party plug-ins are also available for direct addition into the AppBuilder project properties.

This chapter discusses some of the popular plug-ins required by the project, such as the payment gateways and OpenID Authentication through Twitter or Facebook.

CAPTCHA APIs

We all know that CAPTCHA APIs are used by many web sites. It assures that a human is operating at the other end and not a robot! It works by asking complex questions in the form of images and sequences containing content like characters or numbers that are supposed to be identified. This can be done by humans only by manually reading the images’ embedded contents.

There are also other forms of CAPTCHA API available on the market. Such forms may ask users to enter the characters or numbers emailed or sent over text message or a phone call. There is no direct plug-in that exists for CAPTCHA in AppBuilder-based HMAD.

So, you will have to REST or AJAX calls to achieve the same. One such third party can help with REST APIs.

Although a paid API, RingCaptcha has major benefits—it’s easy to use, user-friendly, and has very powerful documentation. You can learn more about RingCaptcha at http://www.ringcaptcha.com.

You can refer a RingCaptcha–specific JS library into index.html, as shown in Figure 10-1.

Instead of referring the JS file from the content delivery network (CDN), you can download and refer locally. The first step is to register at ringcaptcha.com. Then create an app at https://my.ringcaptcha.com/apps. You can get an app key and secret key. You can track the project by using the online dashboard at https://my.ringcaptcha.com/apps, as shown in Figure 10-2.

Further, you can use JavaScript or JQuery to call RingCaptcha to get updates regarding verification. JS code may look like this:

POST /${app_key}/code/${service} HTTP/1.1
Host: https://api.ringcaptcha.com
Content-Type: application/x-www-url-encoded, charset=utf-8

You can get an update in the callback, like this:

Status: 200 OK
{
   "id":"Transaction ID",
   "token":"Transaction token",
   "status":"SUCCESS or ERROR",
   "message":"Error code when Status is ERROR",
   "phone":"Cleansed phone number",
   "service":"Service used to send PIN code",
   "expires_in":"Seconds this token is still active",
   "retry_in":"Seconds you need to wait until a new request can be made"
}

The preceding code is referred from https://my.ringcaptcha.com/docs/api.

Refer to the URL mentioned earlier if you want to use this API over web, Android, and iPhone native applications.

OPEN ID Authentication

Nowadays, Internet users are never interested in creating a new user profile with a new username and password. Most Internet users have a Microsoft Live, Google, Yahoo!, Facebook, or Twitter account. So, instead of creating a new account on some web site or app, users prefer to use existing IDs so that they don’t have to remember yet another username and password combo.

So, can we leverage the same Open ID Authentication in mobile apps as well? Yes! With AppBuilder, you can directly get an OAuth plug-in from the available and trusted plug-in set.

To use this plug-in, you have to first register at https://oauth.io. After all the registration formalities, you have to add integrated APIs. Over 120 OAuth providers can be used with the application including Twitter, Facebook, and so forth. A very detailed procedure on how to use such an API is offered by Telerik at https://plug-ins.telerik.com/cordova/plug-in/oauth.io. You can add many providers at the same time. An OAuth dashboard is shown in Figure 10-3.

As you can see, I picked Twitter for the OAuth. The configuration panel is shown in Figure 10-4.

As discussed earlier, we are required to have a public key (identifier number) passed. How do you get one? Refer to the next section, “Twitter API.”

Twitter API

To create a Twitter account–based OAuth app, you must first have a Twitter account. As discussed earlier in the OAuth API (see Figure 10-4), you have to pass a public key and a secret key to make OAuth work.

So, create a Twitter account at https://apps.twitter.com, and then create an app. After all the formal details have been completed, you can find a public key and a secret key inside the dashboard (see Figure 10-5).

After you get a public key and a secret key, pass it on to the OAuth API. To test connectivity between the OAuth API and Twitter, you can use the OAuth API’s UI. Click the Test Auth button. The OAuth API should connect to Twitter. You may see the alert dialog shown in Figure 10-6.

After this test, you can refer the following code (after installing OAuth plug-in) to integrate Twitter with the application.

OAuth.popup("twitter", {cache: true},function (result) {alert("Success: " + JSON.stringify(result)),},function (err) {alert(err),}),

Other OAuth providers can be used in a similar way. One of the vital functionalities required nowadays is the ability to accept payments from the app user or client.

Payment Gateways

Many payment gateways exist. However, for mobile applications, many may prefer PayPal or Paytm. A plug-in for PayPal can be loaded directly from Telerik trusted plug-ins (see Figure 10-7).

A very good, easy, step-by-step example is on GitHub at https://github.com/Telerik-Verified-Plug-ins/PayPal.

You may be required to have a PayPal account. To use the account, you have to provide valid bank information. This verification is normally done by transferring a random amount of money, like $0.77 to the account. You are asked about this amount during verification. After creating a PayPal account, you get two client ids: for production and for testing.

The following code can be referred to integrate with the PayPal with application.

  var clientIDs =
   {
      "PayPalEnvironmentProduction": "YOUR_PRODUCTION_CLIENT_ID",
      "PayPalEnvironmentSandbox": "YOUR_SANDBOX_CLIENT_ID"
    },
    PayPalMobile.init(clientIDs, app.onPayPalMobileInit),

GPS Services

We used an HTML5 API in previous chapters to track location. Paid services can also be purchased, in terms of REST APIs from providers like HERE Maps.

Summary

In this chapter, you learned about the various plug-ins available for Captcha, payment gateways, and Open ID Authentication. Increasingly, you can find more plug-ins from vendors. PhoneGap is a vendor that is rich with plug-ins.

The next chapter discusses the set up and deployment of HMAD.