Twitter Login in Ionic Mobile App

Ionic is a hybrid mobile app framework for creating mobile app using web technologies. It builds on top of JavaScript framework AngularJS to create sleek and robust mobile apps. In this Ionic tutorial, we’ll see how to implement Twitter login in Ionic hybrid mobile app. We’ll make use of $cordovaOauth plugin for implementing the Twitter login.

Getting Started With Ionic

Getting started with hybrid mobile app development using Ionic is quick. All you need to do is install the Ionic command line tool.

npm install -g cordova ionic

Make sure that you have the required Android and iOS SDK installed in your development system. Let’s create our starter project using Ionic default templates.

ionic start twitterApp tabs

Navigate to the twitterApp directory and add the target mobile platform and build the app.

cd twitterApp
ionic platform add android
ionic build android

Once the app has build successfully, copy the .apk file to the target android device and install. Here is how the default Ionic hybrid mobile app would look like:

[caption id=“attachment_683” align=“aligncenter” width=“576”] Ionic Hybrid Mobile App[/caption]

Adding ngCordova & ng-cordova-oauth to Ionic App

We’ll make use of bower to install ngCordova and ng-cordova-oauth to the twitterApp mobile app.

bower install ngCordova
bower install ng-cordova-oauth

Next you need to add the $cordovaOauth plugin to the twitterApp project.

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git

Once down with the installations, include the following scripts in the index.html page.

Twitter require sha.js for request signing. So, navigate to jsSHA project and download and copy the sha.js file to the www/lib folder. During the time of writing this tutorial, jsSHA latest release doesn’t seem to work with Twitter. The version which I had used for this tutorial is jsSHA 1.6.0.

Creating a Twitter App For Oauth Login

In order to implement Twitter login we need to create a Twitter App. To create one, sign in using your twitter account to Twitter Apps. Click on the create new app link once you have signed in. Fill in the details as shown in the image below:

[caption id=“attachment_696” align=“aligncenter” width=“830”] Twitter App[/caption]

Click on the Create You Twitter Application button to create the twitter app. Once the app has been created make a note of the Consumer Key and Consumer Secret.

[caption id=“attachment_698” align=“aligncenter” width=“775”] Twitter Consumer Key & Secret Key[/caption]

Implementing Twitter Login in Ionic Hybrid Mobile App

Open the app.js file in www/js/ and inject the ngCordova and ngCordovaOauth in the twitterApp application.

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services','ngCordova','ngCordovaOauth'])

Inject the $cordovaOauth in the DashCtrl in the controller.js file in www/js/. Inside the DashCtrl create a function called twitterLogin to make the cordova Oauth call. Here is how the twitterLogin function would look like:

$scope.twitterLogin = function() {
        
      $cordovaOauth.twitter("consumer-key","consumer-secret-api", {redirect_uri: "http://10.0.2.2/callback"}).then(function(result){
          alert('success');
      },  function(error){
          alert('error');
      });
  }

Add the following code to tab-dash.html file in the www/templates/ folder to bind the button on dashboard to the twitterLogin function.

    Code Handbook - Twitter Login
    
      Login With Twitter

Save the above changes and build the android app.

Wrapping It Up

In this Ionic tutorial, we saw how to implement Twitter Login in Ionic Hybrid Mobile App. We made use of $cordovaOauth plugin to implement Twitter login. Have you used any other plugin for implementing social media Oauth login ? Do let us know your thoughts in the comments below.