Creating Twitter SSO App with Monaca and Onsen UI

Khemry Khourn
Apr 18, 2017 · 5 min read
Image for post
Image for post

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 and by registering your Monaca app with Twitter Apps page. Please do as follows:

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

Fill in the information of your app such as: Name, Description, Website and Callback URL (optional). Then, tick and click Create your Twitter application button.

  1. Go to tab and tick . Then, click button.
  2. Go to tab, you will find the and here.

Getting Fabric API Key

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

  1. Login to Fabric account and open Crashlytics page. If you are new to Fabric, please sign up here.
  2. Find your API Key in inside code block in file (see the screenshot below).
Image for post
Image for post

Step 1: Creating a Project

From Monaca Cloud IDE, create a new project with a template called .

Step 2: Adding the Plugin

Image for post
Image for post

Step 3: Editing config.xml File

Open the file and add the following code within the tag. Please remember to replace your own and .

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

Step 4: It’s Coding Time!

Image for post
Image for post

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

  • and : Each one of these pages is a combination of HTML, Onsen UI v2 and Angular 1 elements.
  • : This is a stylesheet for the application.
  • : 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 file:

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

home.html

Please create a file with the following content:

This page contains two sections which is shown based on the 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.

Image for post
Image for post

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

Image for post
Image for post

style.css

There is a default empty 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 file:

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

There is also one controller called which consists of two main functions such as and . Inside the function, 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.

Image for post
Image for post

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

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

Image for post
Image for post

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.

The Web Tub

Pushing the web current through hybrid mobile and PWA…

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store