Appery.io

The Appery.io Developer Hub

Welcome to the Apperyio developer hub. You'll find comprehensive guides and documentation to help you start working with apperyio as quickly as possible, as well as support if you get stuck. Let's jump right in!

Documentation    Latest Updates

OAuth Login with Google App

This sample app demonstrates how to setup OAuth login with Google. This sample app will log in​ the user into his/her Google account and then display a list of files in user's Google Drive.

Sample app uses and demonstrates:

  • jQuery Mobile.
  • Server Code.
  • OAuth for Google.

OAuth Login with Google App in Android/iOS Apps

Since April 20, 2017, all OAuth requests through InAppBrowser are blocked (see http://blog.ionic.io/google-oauth-changes/ for details). Now it’s necessary to use the Google Sign-In Cordova/PhoneGap plugin, the steps for iOS and Android are described in our blog: https://blog.appery.io/2017/07/oauth-login-with-google-app-in-androidios-apps-an-update/

The app consists of the app UI (client) and the app backend. You also need to setup a project in Google Developer Console and enable the Google Drive API.

OAuth

This sample app uses Google but it can be adapted to use any other provider that supports OAuth such as Facebook.

Google Project

You need to create a Google project, which will give you a client ID and client secret values that you will use. If you already have a Google project, then you can skip this step.

  1. Go to https://console.developers.google.com/ and sign in.
  2. Create a new project.
  3. When the new project is created, go to API Manager (in the left menu) > Library. This is where you will enable any Google APIs you want to use in the app. For this example, you are going to enable the Google Drive API.
  4. Enter drive to search for Google Drive API.
  5. Click on Google Drive API and on the next page click Enable.
  6. Click on Go to Credentials button. You can also access the page from by clicking the Credentials link in the left menu.
  7. For Where will you be calling the API from? select Web server option.
  8. For What data will you be accessing? select User data option.
  9. Click What credentials do I need? button.
  10. On the next screen, you can give the client a different name or keep the default name. Click Create Client ID button.
  11. Enter a product name that will be shown when the user is signing in, then click Continue.
  12. Click Done to finish.

Your page should look like this:

Google OAuth client.

Google OAuth client.

When you click on Web client 1, you will see the client details. You will need to use the Client ID and Client secret later.

Client ID and Client secret.

Client ID and Client secret.

You will need to come back to this page at the end to set the redirect URLs.

App (UI)

To get the app UI:

  1. Create a new jQuery Mobile app based on the Blank template.
  2. Inside the App Builder, select Create new > From plugin. Under Appery.io Examples, select OAuth Login with Google App.
  3. Click the Import selected plugin button.
  4. Select LoginWithGoogle as the starter page and click Apply settings.

App Backend

The app backend consists of two Server Code scripts. The first script will help with authentication and the second script will invoke Google Drive API to get a list of files.

Google Login Script

The first script helps with the login flow.

  1. In Server Code, create a new script.
  2. Name the script: googleOAuthLogin.
  3. Copy the code below and paste it over the new script you just created.
// Get code from Google
var code = request.get("code");

// Appery.io app ID. Get it from the App Builder URL:
// http://appery.io/app/project/ID/editor
var app_id = "";

// Appery.io Server Code script ID. 
// Get it from API information tab
// https://api.appery.io/rest/1/code/ScriptID/exec
var script_id = "";

// Google client ID.
var client_id = "";

// Google client secret.
var client_secret = "";

var redirect_page = "https://appery.io/app/view/"+app_id+"/app/Welcome.html";
var redirect_uri  = "https://api.appery.io/rest/1/code/"+script_id+"/exec";

var XHRResponse = XHR2.send("POST", "https://www.googleapis.com/oauth2/v4/token", {
  "body": "code=" + code + "&client_id=" + client_id + "&client_secret=" + client_secret + "&redirect_uri=" + redirect_uri + "&grant_type=authorization_code"
});

var responseObject = JSON.parse(XHRResponse.body);
response.redirect(redirect_page + "?" + responseObject.access_token);

Now, you need to fill out various IDs for this script.

  1. Set the app_id. You can find the ID in the App Builder editor URL.
  2. Set the script_id. It is the ID of this script. You can find it on the API information tab.
  3. Set the client_id from Google Developer Console.
  4. Set the client_secret from Google Developer Console.

Google Drive File Script.

This script will invoke a Google Drive API and return a list of files.

  1. Create a new Server Code script and name it listGoogleDriveFiles.
  2. Copy and paste the following code:
// Google Drive API
var url   = "https://www.googleapis.com/drive/v3/files";
var token = request.get("token");

var XHRResponse = XHR2.send("GET", url, { 
  "headers": {
    "Authorization": "Bearer " + token
  }
});
Apperyio.response.success(XHRResponse.body, "application/json");

Next you need to connect the app with the backend.

Connecting the App with the Backend

The next step is to connect the app with the backend.

  1. Inside the App Builder, open Services > Settings. This file has a number of properties you need to set.
  2. Set the ScriptID value - that's the googleOAuthLogin script which helps with login.
  3. The scope is already set. The scope includes resources to which the app is requesting access. If you add additional resources once the app is running, Google will prompt you to permit the app to access these resources.
  4. The clientID is the value from Google Developer Console.

The last step is to setup the listGoogleDriveFiles_service service which invokes the Google Drive API.

  1. Open Services > listGoogleDriveFiles_service > Settings.
  2. In the URL, replace {servercode_googledrivefiles} with the Server Code ID of the second listGoogleDriveFiles script.

Setting the Callback URL

The last step is to set the callback (redirect) URL in the Google project. Go back to this page:

Setting redirect URL.

Setting redirect URL.

And for Authorized redirect URLs, enter the full URL of googleOAuthLogin script. The script URL can be found in API information tab in Server Code tab.

You are ready to test the app.

OAuth Login with Google App in Android/iOS Apps

If you want to test this on Android/iOS device you will need to use the Google Sign-In Cordova/PhoneGap plugin for more details visit our blog: https://blog.appery.io/2017/07/oauth-login-with-google-app-in-androidios-apps-an-update/

Testing the App

When you go to test the app in the browser it's important you remove the mobile frame. You need to run the app directly in the browser. Click Login with Google, you will see a familiar Google login screen. When you login, Google will ask you if you give this app permissions to access the listed resources.

Testing Without the Mobile Frame.

It's important you test the app without the mobile frame otherwise, it will not work.

OAuth Login with Google App