Using Intel® Cloud Services SDK with Apache Cordova

The following tutorials show how you can use the Intel® Cloud Services SDK with Apache Cordova (formerly called PhoneGap) to create Android or iOS mobile applications. These tutorials demonstrate adding Cloud Services login functionality to your apps using the SDK, but you can take advantage of many other Cloud Services capabilities as well. See the Cloud Services SDK API Reference for details.

Using the SDK with Cordova in Android Apps

Using the SDK with Cordova in iOS Apps

For both versions, these are the steps:

Create a basic Cordova app
Add ChildBrowser plugin support
Add the Intel® Identity Services Login feature Using the Cloud Services SDK

Using the SDK with Cordova in Android Apps

This tutorial assumes you are using Eclipse* as your Android development environment, and that you have installed the Android SDK. If you need more information regarding Eclipse or the Android SDK, refer to the following links:

Set up Eclipse

Set up Android SDK

Create a Basic Android App with Cordova

You can find steps to create a new Android app here: Getting Started with Android .

Add ChildBrowser Plugin Support

ChildBrowser is a plugin that enables apps to open resources in a child browser of the application instead of launching the Android browser. In this case, the Cloud Services SDK uses ChildBrowser to open the login popup.

Download the ChildBrowser plugin for Cordova for Android.
Install the plugin by first moving www/childbrowser.js to your project's www folder. Then include a reference to it in your HTML file after phonegap.js (or cordova-js, depending on the version you're using), like this:
```
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>

<script type="text/javascript" charset="utf-8" src="childbrowser.js"></script>
```
Copy the image files folder, www/childbrowser, to your project's www folder. Make sure to copy the entire folder, not just the images.
Create a directory within your project called "src/com/phonegap/plugins/childBrowser" and move ChildBrowser.java into it.

In your res/xml/plugins.xml file, add the following line:

<plugin name="ChildBrowser" value="com.phonegap.plugins.childBrowser.ChildBrowser"/>

Now you are ready to use Cloud Services SDK in your Cordova for Android project.

Add the Intel® Identity Services Login feature Using the Cloud Services SDK

This example shows how to implement the Cloud Services SDK Login feature in an Android app. To do so, create a login test page.

Create a login.html page within the assets/www folder with this code:

<!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="content-type"
                content="text/html; charset=UTF-8" />
            <title> Cloud Services SDK - Login </title>
            <script type="text/javascript"src=
                    "https://api.intel.com/js/v1/intel.cloudservices.js" >
            </script>
        </head>
        <body>
        <div id="title">Login with Intel or Social Account</div>
        <button id="runButton" type="button"
            onclick='execute();'>RUN</button>
        <div id="console">Click RUN to start</div>
        <script type="text/javascript">
             execute = function() {
                intel.auth.logout(function (){}, function (){});
                intel.auth.init({
                    clientId: "myClientId",
                    secretId: "mySecretId",
                    scope: "user:details user:scope profile:full
                            profile:basicprofile:full:write
                            location:basic"
             },
             function(data){
                  intel.auth.login({
                      redirectUri: "myRedirectUri",
                     name: "myLoginWindow",
                     specs: "location=1,status=1,
                         scrollbars=1,width=940,height=760"
             },
             successCallback,
             errorCallback
        );
    },
errorCallback
 );
}
successCallback = function(data) {
    document.getElementById("console").innerHTML +=
         "</br></br> Login Success </br></br>" + JSON.stringify(data);
    }
errorCallback = function(error) {
    document.getElementById("console").innerHTML +=
        "</br> Error: " + error.desc;
    }
</script>
</div>
</body>
</html>

Modify the super.loadUrl() method into the main Activity to point to the login.html page, like this:
```
super.loadUrl('file:///android_asset/www/login.html ');
```
Run the application. A login option is displayed:

ADD IMAGE: Login
Click Run. The Intel Identity Services login page is displayed. This prompts the user to log in. You can close this window or log in.

ADD IMAGE: IntID

Using the SDK with Cordova in iOS Apps

This tutorial assumes you are using Xcode as your iOS development environment, and that you have installed the iOS SDK.

Create a Basic iOS App with Cordova

You can find steps to create a new iOS app here: Getting Started with iOS.

Add ChildBrowser Plugin Support

ChildBrowser is a plugin that enables apps to open resources in a child browser of the application instead of launching Safari*. The Cloude Services SDK uses ChildBrowser to open the login popup. These steps assume that you're using the phonegap.js library, but if you're using cordova-js, just make the substitutions as needed.

Download the ChildBrowser plugin.
Drag all of the .m, .h, and .bundle files from the ChildBrowser folder to the Plugins folder of your project:

ADD IMAGE childbrowse
In your project, in the Supporting Files folder, open the Cordova.plist file. It contains a list of key/value pairs. Under Plugins, add the following two keys by clicking the Add button that's displayed when you highlight the Plugins section.
```
Key: ChildBrowser, Type:String, Value: ChildBrowser.js

Key: ChildBrowserCommand, Type:String, Value:ChildBrowserCommand
```
Copy the Childbrowser.js (or mini version) from the project files to your project's www folder.

ADD IMAGE childbrowser2
Create a directory within your project called "src/com/phonegap/plugins/childBrowser" and move ChildBrowser.java into it.

In your res/xml/plugins.xml file, add the following line:

<plugin name="ChildBrowser" value="com.phonegap.plugins.childBrowser.ChildBrowser"/>

Now you're ready to use Cloud Services SDK in your Cordova project for iOS.

Add the Intel Identity Services Login feature Using the Cloud Services SDK

This example shows how to implement the Cloud Services SDK Login feature in an iOS app. To do so, create a login test page.

Create a login.html page within the www folder with this code:

<!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="content-type" content="text/html;
                 charset=UTF-8" />
            <title> Cloud Services SDK - Login </title>
            <script type="text/javascript"
                   src="https://api.intel.com/js/v1/intel.cloudservices.js" >
             </script>
    </head>
    <body>
    <div id="title">Login with Intel or Social Account</div>
    <button id="runButton" type="button" onclick='execute();'
           >RUN</button>
    <div id="console">Click RUN to start</div>
    <script type="text/javascript">
        execute = function() {
            intel.auth.logout(function (){}, function (){});
            intel.auth.init({
                 clientId: "myClientId",
                 secretId: "mySecretId",
                 scope: "user:details user:scope profile:full profile:basic
                      profile:full:write location:basic"
            },
            function(data){
                intel.auth.login({
                    redirectUri: "myRedirectUri",
                    name: "myLoginWindow",
                    specs: "location=1,status=1,scrollbars=1,
                       width=940,height=760"
               },
        successCallback,
        errorCallback
        );
    },
    errorCallback
    );
}
    successCallback = function(data) {
        document.getElementById("console").innerHTML +=
            "</br></br> Login Success </br></br>" +
              JSON.stringify(data);
    }
errorCallback = function(error) {
    document.getElementById("console").innerHTML +=
        "</br> Error: " + error.desc;
    }
</script>
</div>
</body>
</html>

Modify the AppDelegate.m filto point to the login.html page, like this:
```
self.viewController.startPage = @"login.html";
```
Run the application. Click Run to display the Intel Login page.
Click Login. The Intel Identity Services login page is displayed. This prompts the user to log in. You can close this window or log in.

ADD IMAGE: IntIDiOS

More SDK Information

Intel Cloud Services SDK beta Developer's Guide

Intel Cloud Services SDK API Reference

Tutorials

Managing Commerce Carts and Orders

Managing Application Keys

Managing User Profiles

Legal Information