Creating Twitter SSO App with Monaca and Onsen UI

Apr 18, 2017

In this article, you will learn how to use Twitter Single Sign On (SSO) with Monaca Cloud IDE using Angular 1 and Onsen UI. The authentication is done by using twitter-connect-plugin. This plugin uses Twitter’s Fabric SDK to enable SSO with your Android and iOS apps. After a successful authentication, the user’s basic information will be displayed in the app.

Tested Environments: Android 6.2 & iOS 10.1

Prerequisite

Getting Twitter Consumer Key and Consumer Secret

You are required to obtain Consumer Key and Consumer Secret by registering your Monaca app with Twitter Apps page. Please do as follows:

Go to Twitter Apps page and sign in with a valid Twitter account.
Click on Create New App button.

Fill in the information of your app such as: Name, Description, Website and Callback URL (optional). Then, tick Yes, I have read and agree to the Twitter Developer Agreement. and click Create your Twitter application button.

Go to Settings tab and tick Allow this application to be used to Sign in with Twitter. Then, click Update Settings button.
Go to Keys and Access Tokens tab, you will find the Consumer Key and Consumer Secret here.

Getting Fabric API Key

In order to get Fabric API key, please do as follows:

Login to Fabric account and open Crashlytics page. If you are new to Fabric, please sign up here.
Find your API Key in inside <meta-data> code block in AndroidManifest.xml file (see the screenshot below).

Step 1: Creating a Project

From Monaca Cloud IDE, create a new project with a template called Onsen UI v2 Angular 1 Minimum.

Step 2: Adding the Plugin

Step 3: Editing config.xml File

Open the config.xml file and add the following code within the <widget> tag. Please remember to replace your own Twitter Consumer Key and Twitter Consumer Secret.

NOTE: For iOS, the deployment target needs to be at least 7.0. You can set this in the config.xml file like so:

<preference name="deployment-target" value="7.0" />

Step 4: It’s Coding Time!

In this sample application, there are 4 main files such as:

index.html and home.html: Each one of these pages is a combination of HTML, Onsen UI v2 and Angular 1 elements.
style.css: This is a stylesheet for the application.
app.js: An Angular 1 file containing a service and a controller used in the application.

index.html

This is, of course, the main page of the application, the one loaded by default. Replace the following code to index.html file:

As you can see, inside the body there is only an component. It provides page stack management and navigation. The attribute page is used to identify the first page in the stack. Since we have only one main page in this sample application, home.html (will be described in the next section) is of course the first in the page stack and will be loaded as soon as the index.html file is completed.

home.html

Please create a home.html file with the following content:

This page contains two sections which is shown based on the login status (login_status variable) of the user in the application:

1. Login section: This section is shown if there is no existing login information found in the device.

2. Profile section: When the existing login info is found, this section will be displayed.

style.css

There is a default empty style.css file after you creating a project with the specified template. Add the following code to it. The main purpose of this sheet is simply for the page and Twitter profile image.

app.js

This is an Angular 1 file containing a service and a controller used in the application. Add the following code to app.js file:

Inside this file, there is service called StorageService to store the login information of the user using the device’s Local Storage.

There is also one controller called HomeCtrl which consists of two main functions such as Login() and Logout(). Inside the Login() function, TwitterConnect.login() is called asking the user the login with a valid Twitter account information.

NOTE: If you have logged in with a Twitter application on your device, the information of that account will be shown automatically (see the screenshot below as example). If you want to login with a different account, please go to your Twitter application and change the account there.

After a successful login, StorageService is called to store the login information and you will be directed back to home.html page showing the profile information of the logged in user. Inside the Logout() function, a confirmation dialog is shown to confirm the activity (see the screenshot below). If the user selects Yes, the TwitterConnect.logout() function is called and StorageService is also called to remove the login information.

NOTE: This Logout() function can only log the user out of this application, not the Twitter application.

Conclusion

Until this point, you have completed a Twitter SSO app with Monaca. Now, you can start testing your app with Monaca Debugger. Then, try to build it and install on your device.