If you find any errors, typos or have general feedback, select the text and click CTRL+ALT+ENTER.

What are we going to build?

In this tutorial, you’ll learn how to setup OAuth protocol via the oauth.io service in your Appery.io mobile app. OAuth.io uses OAuth 2.0 protocol, and supports many API providers. OAuth.io also provides a PhoneGap plugin.

This tutorial will show you how to authorize with Google and Facebook. The final app is pretty simple; it contains two buttons to authenticate with Google and Facebook:

Before you begin

  1. Tutorial level: advanced.
  2. Prerequisites:
    • An Appery.io account.
    • A registered Google developer account with a registered application (if you don’t have one, you’ll need to create it before you begin).
    • A registered Facebook developer account with a registered application (if you don’t have one, you’ll need to create it before you begin).
    • A registered oauth.io account.

Creating a new app

Create a new app in the builder. From the Apps page, enter an app name (use any name) and click “Create.” You’ll see a start page.

Creating the UI

As mentioned above, the UI of this app is quite simple:

1. First, place the Button on the page. Change its Text property to Auth with Google. Change its Name property to google_auth.

2. Place the second Button on the page. Change its Text property to Auth with Facebook. Change its Name property to facebook_auth.

That’s all for the UI.

Add the OAuth.io JavaScript

This method of using OAuth can be used when developing a web application. If you’re developing a mobile app, use the OAuth PhoneGap plugin.

The following steps will show how to add the oauth.js file to the Appery.io project:

1. Go to the OAuth.io documentation page and click Javascript button:

2. On a page that opens, locate  the “Download ZIP” button and click it:DownloadZIP

2. After downloading, unzip the file.

3. Now, open the Appery.io builder. Click “CREATE NEW”, then JavaScript . Type oauthio as name, select Upload from file and upload the oauth.js file from the unzipped folder:CreateJS

4. Click “Create JavaScript”.

That’s all here. Skip the next section and head to the Configuring the services section if you don’t need to use OAuth.io as a PhoneGap plugin.

Adding the OAuth.io PhoneGap plugin

If you’re developing a mobile app, you should use OAuth.io PhoneGap plugin. But in this case, the application will work only on the device.

The following steps will show you how to configure and add the OAuth.io plugin to your Appery.io app:

1. Go to the OAuth.io PhoneGap plugin page, download the .zip archive, and unzip it:DownloadZIP

2. Open the Appery.io builder and switch to the Source tab. Navigate to the following folder:
ANDROID > OAuth > assets > www > files > resources > lib > plugins.

3. Create the following folder structure in the plugins folder:

4. Upload the oauth.js files that were unzipped to the www folder. In this example, it was:

5. Some changes need to be done to this file to make it properly included in the PhoneGap build. Open the just-uploaded oauth.js file, and add the following code to the beginning:

6. Add the closing brackets to the end of  the file. The last function, plus the closing brackets, should look like:

7. Configure the cordova_plugins.js file. Open this file. You can find it at:
ANDROID > OAuth > assets > www > files > resources > lib > cordova_plugins.js.

8. Add the following code to the end of the file:

It should look like:JS

Configuring the services

Configuring Google app

Let’s start by configuring the Google and oauth.io projects:

1. Login to the Google developers console, and open the needed application. Make sure your Javascript Origins and Redirect URIs match the following:GoogleCredentials

2. Go to the oauth.io website, log-in, and switch to the Integrated APIs tab. Click the “+Add IPIs” button on the left, find Google in the list and click it:AddAPIs

3. In the newly opened window, choose online for access_type. The next two parameters should be taken from the Google Developer Console. Copy the Client ID from the Google project, and paste it to the client_id on the oauth.io website. Do the same for the Client secret:GoogleConsole

4. Choose the scope your application needs. This tutorial uses email as an example.

The completed form should look like:

5. Click “Save changes” to close this window.

6. Try to authenticate directly from the oauth.io website to make sure that everything is configured properly.

Click “Try Auth” to see the result:

Configuring Facebook app

Let’s add Facebook to oauth.io’s default app:

1. Now, find Facebook in the Integrated APIs list, and click it.

2. Paste the client_id and client_secret.

Get these parameters from the registered Facebook app:

Where: client_id is App ID and the client_secret is the App Secret. (Click “Show” to the right of the App Secret field, and enter your Facebook password to make it visible).

3. Since this app will publish posts on the user’s wall, publish_actions should be selected as scope.

The filled-in form should look like:

4. Click “Save changes”.

5. There’s one thing left to do: go to the General App’s page (where App’s keys are kept) and type appery.io into the input field to the right of the Domains & URLs whitelist field and click “Save changes”:

6. You can test to authenticate directly from the oauth.io website. Click “Try Auth” and see the result. If everything is successful, you’ll see the access_token in the result field:SuccesssAuthFacebook

7. Copy the App’s Public key from the General App’s page to the clipboard. You’ll need it later:

Adding the events & JavaScript

1. Select startScreen.
2. Open the EVENTS tab, and add the following event: startScreen > Device Ready > Run JavaScript. Paste the following JavaScript code:

Paste your public key that was copied from the oauth.io website as a parameter for the OAuth.initialize() method.

3. Click “Save”. The added event should look like:DeviceReady

Lets add the JavaScript code to authenticate with Google:

1. On startScreen, select the “google_auth” button.

2. Add the following event: google_auth > Click > Run JavaScript. Add the following JavaScript code:

3. Click “Save”. All the added events should look like:2events

Clicking on the “google_auth” button will simply initialize the authentication procedure and show the retrieved token via an alert command when it’s done.

For the Facebook example, let’s authenticate and display the name and email of the logged-in user. After that, let’s post a message on the user’s wall via a REST service.

First, lets create the service:

1. From Projects view: CREATE NEW > Service > REST, enter name FacebookREST, and click “Create Service.” The service will be listed under the Services folder.

2. In the Settings tab of this service, define the following string for the URL field:

3. Choose POST as Method. The Settings tab should look like:

4. Switch to the Request tab, and add two parameters – access_token and message:FacebookRESTRequest

The results of this service will be displayed by JavaScript code, so there is no need to add fields on the Response tab. Lets authenticate with Facebook, and invoke the FacebookREST service:

1. On the startScreen, select the “facebook_auth” button.

2. Add the following event: facebook_auth > Click > Run JavaScript.

Add the following JavaScript code and save:

In the case of successful publishing, the post ID will be returned by the server. Let’s display it on the FacebookREST service success event:

1. Switch to the DATA tab. Select Service for the datasource and FacebookREST for the service. Click “Add”:

2. Change the name of the added service to facebook_service.

3. Open the EVENTS tab, and add the following event: facebook_service > Success > Run JavaScript. Add the following JavaScript code and save:

Those are all the events for this app. Now the app can be tested.

Testing the app

If you build the app with OAuth PhoneGap plugin, it can only be tested on the device. Our Appery.io Mobile Tester doesn’t support the OAuth.io plugin yet, so one way to test this app is to export it as binary, and install it on the device.

The final view of the mobile app will look like:

The final view of the web app will look like the following: