Documentation | 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!

Guides    

OAuth Login with Google jQM Sample App

A sample jQuery Mobile application

This app demonstrates how to set up an 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 the user's Google Drive.

This app uses and demonstrates:

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

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

šŸ‘

OAuth

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

šŸ“˜

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 mandatory that the Google Sign-In Cordova/PhoneGap plugin be used. To comply, please follow the steps described here.
The steps for implementing it with iOS and Android are also described in our blog.

šŸ“˜

Want to know more?

Please check our instructional video that shows how to add the Google login feature to Android and iOS applications built with Ionic 4 from Appery.io:

šŸ“˜

Want to know more?

You might also like this Community video instruction to learn how you can easily build an Appery.io Ionic 4 app that allows login by using your Apple ID:

Google Project

You need to create a Google project, which will provide you with 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:
  1. Click the left menu button and select APIs & Services > Credentials:
  1. To add a new credential, select the + CREATE CREDENTIALS tab and click Help me choose. Then, for Where will you be calling the API from? select the Web server option.
  2. For What data will you be accessing? select the User data option.
  3. Click What credentials do I need? button:
Adding CredentialAdding Credential

Adding Credential

  1. On the next screen, you can give the client a different name or keep the default name. Click the CreateOAuth client ID button.
  2. Enter a product name that will be shown when the user is signing in, then click Continue.
  3. Click Done to finish.

Your page should look like this:

Google OAuth clientGoogle 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.

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 API Provider, 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. Under the Server Code tab, create a new Server Code script.
  2. Name the script: googleOAuthLogin.
  3. Copy the code below and paste it over the new script you just created and save.
// 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 (line 6 of the code). You can find the ID in the App Builder editor URL.
  2. Set the script_id (line 11). It is the ID of this script. You can find it under its API information tab (or in the script editor URL).
  3. Select your client for Android to access the following details.
  4. Go back to your Web client 1 to copy the client_id from Google Developer Console and paste it into line 14.
  5. Copy the client_secret from Google Developer Console into the code (line 17) .
  6. Save the script.

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, save it:
// 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 the Google Developer Console.

The last step is to set up 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 the page with the details on Web client 1 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):

Setting redirect URL.Setting redirect URL.

Setting redirect URL.

Using Google Sign-In Cordova/PhoneGap plugin

We also need to add the Google Sign-In Cordova/PhoneGap plugin; otherwise, all OAuth requests through InAppBrowser will be blocked (see http://blog.ionic.io/google-oauth-changes/ for details).

So, first of all, download the plugin andĀ import it to the project under Resources > Cordova plugins (more details on this). Ā When ready, you can proceed with specifying the settings for iOS or Android apps. We'll describe both ways and then show you how to set up your app at the end.

Google setting for iOS projects

  1. On theĀ Google project page, go to theĀ CredentialsĀ tab and select Create credentialsĀ > OAuth client ID:Ā 
OAuth client ID (iOS)OAuth client ID (iOS)

OAuth client ID (iOS)

  1. In a new window, select iOS.
  2. DefineĀ the Bundle ID (you can get it from App settings > iOS binaryĀ > Bundle ID).
  3. Click Create.
  4. Now, copy theĀ iOS URL scheme from the created Š”lient ID:
Client ID for iOSClient ID for iOS

Client ID for iOS

  1. Add theĀ iOS URL scheme as theĀ REVERSED_CLIENT_ID parameter of the Google Sign-In plugin and save:
Google SignIn pluginGoogle SignIn plugin

Google SignIn plugin

Ready!

Google setting for Android projects

  1. On theĀ Google project page, go to Credentials and select Create credentialsĀ > OAuth client ID:Ā 
OAuth client ID (Android)OAuth client ID (Android)

OAuth client ID (Android)

  1. In a new window, selectĀ Android.
  2. You will need theĀ SHA-1 fingerprint of the certificate that you are using for signing up your app to link the client ID to the app. To get it, export your certificate (ResourcesĀ > Certificates):
Exporting cerificateExporting cerificate

Exporting cerificate

  1. Now, unzip it and open the SHA-1 file in a notepad, for example. Copy it.

šŸ‘

You can also run the following command in the console: keytool -exportcert -keystore path-to-debug-or-production-keystore -list -v.

keytool is a key and certificate management utility. It is included in the JDK, you can install either JDK or download the keytool utility.

  1. The obtained SHA1 code should be added toĀ the Signing certificate fingerprint.
  2. Insert theĀ Package name (can be found in the App Builder: App settings > Android binary > Package name).
Creating OAuth client IDCreating OAuth client ID

Creating OAuth client ID

  1. Click Create.
    Check that it is added under Credentials:
Android Client addedAndroid Client added

Android Client added

šŸ“˜

Please note that the selected Android certificate will only work with the release option enabled so, enable the Release checkbox under App settings > Android binary.

Also, make sure that the valid certificate is selected in the App settings > Android binary > Certificate section.

Testing App

šŸ‘

Important Note

When testing the app in the browser it's important that you remove the mobile frame. You need to run the app directly in the browser.

Click Login with Google, in a new window, you will see a familiar Google login screen:

Window to choose an accountWindow to choose an account

Window to choose an account

When you log in, Google will ask you if you give this app permissions to access the listed resources.

šŸš§

Testing Without the Mobile Frame

Once again: it's important you test the app without the mobile frame; otherwise, it will not work.

Updated 6 months ago

OAuth Login with Google jQM Sample App


A sample jQuery Mobile application

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.