Creating Twitter SSO App with Monaca and Onsen UI

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 tickAllow this application to be used to Sign in with Twitter
. Then, clickUpdate Settings
button. - Go to
Keys and Access Tokens
tab, you will find theConsumer Key
andConsumer 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 inAndroidManifest.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
andhome.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.