+

Search Tips   |   Advanced Search

Implementing client-side components for hybrid applications

We can implement client-side components for custom device provisioning in the hybrid applications.

For more information about the prerequisites, see Implementing client-side components for custom device provisioning.

To implement client-side components for custom device provisioning, complete the following steps.

  1. Create an application.

  2. Add an iPhone, iPad, Android, or Windows Phone 8 environment to the application.

  3. Configure the application for the Application Authenticity test.

    The authenticity test works only with MPF Consumer Edition and IBM MobileFirst Platform Foundation Enterprise Edition. For more information about application authenticity, see MobileFirst application authenticity overview.

  4. Update the application HTML file. 
    <body id="content" style="display: none;">
  <div id="AppBody">
    <div class="header">
      <h1>CustomProvisioningApp</h1>
    </div>
    <div id="wrapper">
      Device authentication with custom device provisioning was not complete
    </div>
    <button id="conectToServerButton">
      Connect to MobileFirst Server     </button>
  </div>
  <div id="ProvBody" style="diplay: none">
    <div id="provisioningError></div>
    <input id="submitProvCodeButton">Send</button>
  </div>
...
</body>

  5. Add a listener to connectToServerButton.

  6. Optional: Use the WL.Client.connect API to connect to the MobileFirst Server. 
    function wlCommonInit() {
    $("#connectToServerButton").click(function(){
        WL.Client.connect();
    });
}

  7. For the WL.Client.connect function to trigger authentication, specify the MobileFirst Server instance as the protected resource by adding a custom security test or mobile security test in the application descriptor.

      <iphone securityTest="ADPSecurityTest" version="1.0">

    or

      <ipad securityTest="ADPSecurityTest" version="1.0">

    or

      <android securityTest="ADPSecurityTest" version="1.0">

    or

      <windowsPhone8 securityTest="ADPSecurityTest" version="1.0">

  8. Add a CustomDeviceProvisioningRealmChallengeHandler.js file and reference it from the main HTML file.

  9. Implement the following methods required by the device provisioning challenge handler:

    • The handler.createCustomCsr(challenge) method is responsible for returning custom properties that are added to the certificate signing request (CSR) . Add a custom activationCode property, used in the adapter's validateCSR function.

      This method is asynchronous to allow collecting custom properties through native code or separate flow.

    • The handler.processSuccess(identity) method is called when certificate validation is successfully completed by the validateCertificate adapter function.

    • The handler.handleFailure() method is called when certificate validation fails.

  10. Implement the device provisioning challenge handler. 
    var customDevProvChallengeHandler =
    WL.Client.createProvisioningChallengeHandler("CustomDeviceProvisioningRealm");
customDevProvChallengeHandler.createCustomCsr = function(challenge) {
    WL.Logger.debug("createCustomCsr :: " + JSON.stringify(challenge));
    $("#AppBody").hide();
    $("#ProvBody").show();
    $("#provisioningCode").val("");
    if (challenge.error) {
        $("#provigioningError").html(new Date() + " " + challenge.error);
    } else {
        $("#provisioningError").html(new Data() + " Enter activation code.");
    }
    $("#submitProvCodeButton").click(function() {
        var customCsrProperties = {
            activationCode: $("#provisioningCode").val()
        };
        customDevProvChallengeHandler.submitCustomCsr(customCsrProperties, challenge);
    });
};
customDevProvChallengeHandler.processSuccess = function(identity) {
    WL.Logger.debug("processSuccess :: " + JSON.stringify(identity));
    $("#connectToServerButton").hide();
    $("#AppBody").show();
    $("#ProvBody").hide();
    $("#wrapper").text("Device authentication with custom device provisioning " +
        "was successfully completed");
};
customDevProvChallengeHandler.handleFailure = function() {
    WL.Logger.debug("handleFailure");
    $("#AppBody").show();
    $("#ProvBody").hide();
    $("#wrapper").text.("Server has rejected the device. We must reinstall the       application and perform device provisioning again.");
};


Results

You implemented client-side components for custom device provisioning.


What to do next

We can implement server-side components for custom device provisioning. For more information about implementing server-side components, see Implementing server-side components for custom device provisioning. For more information about custom device provisioning, see the tutorials on the Get Started page.


Parent topic: Implementing client-side components for custom device provisioning