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

Introduction

The OAuth 2 Template is an Appery.io plugin that contains code snippets and services that help to rapidly set up authentication with OAuth 2.0 providers. Basically, you get a template that can be easily adapted for different needs. This template implements the following authentication flow:

  1. Users clicks “Sign in”, and OAuth window opens. The user should provide his/her credentials and grant access.
  2. Once the access is granted, the access_token parameter is returned to the Appery.io app where it is stored to a local storage variable.
  3. With the access token retrieved, API calls can be made.

Necessary parameters can be configured via the OAuth_Settings asset. Here are the basic parameters that should be filled:

  • Redirect URL – URL where user will be redirect after signing in with OAuth 2.0 provider. In our case, this is an Appery.io app URL that will look like the following:
    If you’re using libraries version below 3.0, the URL will look as following:
  • Login URL – OAuth 2.0 provider authentication URL. For example:
  • Client ID – this value should be obtained once the app is created on the OAuth 2.0 provider side. For example, the Google Client ID looks like the following:
  • Scope – this parameter specifies which data your app requests from the user. May vary with different providers. For Google this parameter looks like the following:

Plugin structure

Here is what OAuth 2 Template consists of:

  • OAuth_Home page is the initial page. The “Sign in” button is placed here, and it initiates OAuth flow on a click:
  • OAuth_Details page contains two Label components for displaying data. This page opens when the user grants access to your app. Once the page loaded, GetProfile service triggers, assuming that access token is available.
  • GetProfile service – is a generic service to grab a profile details. Initially, the URL field is empty, it should be filled depending on OAuth 2 provider authentication URL. For Google it will be:
    The response of this service can be mapped to the page to display returned data.
  • OAuth_Settings – contains necessary parameters and their values.
  • OAuth_Helper.js – JavaScript file that handles OAuth flow.

The following tutorial shows how to configure this plugin to authenticate with Google.

Before you begin

  1. Tutorial level: intermediate.
  2. Prerequisites:

Creating an Appery.io app

1. Open Appery.io and click “Create new app”, enter any app name, and click “Create”.

Once the mobile editor loads, you’ll see a start page.

Importing the OAuth 2 Template plug-in

1. To import the plug-in, click Create New > From Plug-in:
create_from_plugin

2. Check the box for the OAuth 2 Template plug-in. Click “Import selected plug-ins”:
import_oauth_template

Once the plug-in is successfully installed, you will be asked to choose a start page and enter API keys. Select the check box and choose OAuth_Home as the start page:setting_home

Authentication examples

Google

The following steps show how to adapt this plugin to make it work with Google:

  1. Go to http://console.developers.google.com/ and create a project if you don’t already have one.
  2. Once the app is created, you’ll see the app credentials:
  3. Copy the CLIENT ID and paste it to client_id parameter in OAuth_Settings.
  4. Type following URL to login_url:
  5. Type the following URL to scope:
  6. Change the Appery.io App ID to yours, and copy the following URL to the redirect_url parameter:
    If you’re using libraries version below 3.0, the URL will look as following:
    You can find the Appery.io App ID in the browser address bar:
  7. The redirect_url should be also pasted to the Google project settings. Type the redirect URL for Authorized redirect URIs:
  8. Click “Save”.
  9. Here is how your OAuth_Settings should look:
  10. Open the GetProfile service and paste the following string to the URL:
    Make sure that Use Appery.io Proxy is enabled.
  11. Switch to the Response > Body tab, click “Import” and paste the following JSON:
  12. Click “Import”:
    json_import
  13. Go to the OAuth_Details page (under Pages folder) and switch to the DATA tab.
  14. Click “Mapping” to the right of the Success event of the getProfile datasource:
    google_success
  15. Create the following mapping and click “Save and return”:
    google_profile_mapping

Testing the app

Click the down arrow to the right of the “TEST” button and then “Launch” under Launch without frame:
launch_without_frame

You’ll see a Home page with a “Sign in” button:
oauth_2_template_home

After clicking “Sign in”, you will be navigated to https://accounts.google.com/o/oauth2/auth (this URL is taken from the login_url value that defined in OAuth_Settings). You will be prompted to provide your Google credentials and grant access to the app:
sign_in_google

Once access is granted, you will be navigated back to the Appery.io app (redirect URL is taken from OAuth_Settings > redirect_url). Once the GetProfile service returns “success,” you’ll see profile details (it can take a few seconds to get the profile details):
google_test