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
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
Settingstab and tick
Allow this application to be used to Sign in with Twitter. Then, click
- Go to
Keys and Access Tokenstab, you will find the
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.xmlfile (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
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:
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.
This is, of course, the main page of the application, the one loaded by default. Replace the following code to
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.
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.
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.
This is an Angular 1 file containing a service and a controller used in the application. Add the following code to
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
Logout(). Inside the
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
TwitterConnect.logout() function is called and
StorageService is also called to remove the login information.
Logout()function can only log the user out of this application, not the Twitter application.
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.