Hot File

How to Authenticating Users via OAuth with Cordova and Ionic

View: 220    Dowload: 0   Comment: 0   Post by: hanhga  
Author: none   Category: Android   Fields: Other

0 point/0 review File has been tested

You will need to install Cordova (I recommend SitePoint’s QuickTip) and the Ionic framework (again, I recommend SitePoint’s QuickTip)

Introduction

You will need to install Cordova (I recommend SitePoint’s QuickTip) and the Ionic framework (again, I recommend SitePoint’s QuickTip)

Note: This example will use the Android platform.

Create an Ionic app using the tabs template.

ionic start myGoogleIonicApp tabs

Navigate to the project directory myGoogleIonicApp and run the server.

ionic serve

You should now have the app running at http://localhost:8100.

Installing ngCordova and $cordovaOauth

Navigate to the myGoogleIonicApp directory and install ngCordova using bower (Yes, of course SitePoint has a QuickTip!).

bower install ngCordova

Include the ngCordova script before the cordova script in the index.html page.

<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>

Add the $cordovaOauth plugin to the project.

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

Install ng-cordova-oauth in the project.

bower install ng-cordova-oauth

Include the $cordovaOauth script after the ngCordova script in the index.html page.

<script src="lib/ng-cordova-oauth/dist/ng-cordova-oauth.js"></script>

Creating the User Interface

Navigate to www/templates/tab-dash.html and replace the existing code with this code:

<ion-view view-title="Dashboard">
  <ion-content class="padding">
    <h2>Welcome to Ionic</h2>
    <div>
      <a href="" ng-click="googleLogin()"><button>Login With Google</button></a>
    </div>
  </ion-content>
</ion-view>

Add the Android platform to the mobile app and build the code:

ionic platform add android
ionic build android

Run the application with:

ionic run android

And you should see the below:

Implementing OAuth Using Google Login

Navigate to www/js/app.js and inject the ngCordova and ngCordovaOauth module.

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

Inside www/js/controllers.js add the googleLogin function inside DashCtrl as shown :

.controller('DashCtrl', function($scope, $cordovaOauth, $http) {

    $scope.googleLogin = function() {
        $cordovaOauth.google("app-id", ["email", "profile"]).then(function(result) {

        }, function(error) {

        });
    }
})

Breaking down the above code, you injected the cordovaOauth module into the DashCtrl controller, and using the cordovaOauth module you called the Google API. You will need an application key to enable Google OAuth Login which you can get from the Google developer console. Once logged in, click on the right side corner drop down to create a new project.

Click on the credentials tab on the left side menu and click the Create credentials button.

Create credentials

Select OAuth Client ID from the menu and click Create credentials.

Once you have created the client it should show the client ID, copy the value and add it to thegoogleLogin method in DashCtrl.

$scope.googleLogin = function() {
        $cordovaOauth.google("YOUR GOOGLE CLIENT ID", ["email", "profile"]).then(function(result) {
            $scope.details = result.access_token;
        }, function(error) {
          // Error code here
        });
    }

Next you need to bind the scope.details to the user interface to see if it works. Changewww/templates/tab-dash.html as shown :

<ion-view view-title="Dashboard">
  <ion-content class="padding">
    <h2>Welcome to Ionic</h2>
    <div>
      <a href="" ng-click="googleLogin()"><button>Login With Google</button></a>
      <span>{{details}}</span>
    </div>
  </ion-content>
</ion-view>

Save the changes, build the ionic app and deploy the .apk file to the device. Run the app and click to login using Google account. On a successful login you should be able to see the access token displayed on the app screen.

Pulling User Info With Access Token

Using the access token, extract the user info and display it in the app. Inside the googleLogin function, make an http call to the Google APIs to get the user information.

$http.get("https://www.googleapis.com/plus/v1/people/me", {
        params: {
            access_token: result.access_token
        }
    })
.then(function(res) {
    // success callback
}, function(error) {
    alert("Error: " + error);
});

In the success callback function, bind the user info to a scope variable and display it in the app.

$scope.details = res.data;

Now change the user interface by adding a class to the existing button.

<div>
  <a href="" ng-click="googleLogin()"><button class="button button-block button-positive">Login With Google</button></a>
</div>

To display the user information, add a list as shown below:

<div ng-show="showProfile" class="list">
  <a class="item item-avatar" href="#">
    <img ng-src="{{details.image.url}}">
    <h2>{{details.displayName}}</h2>
    <p>Back off, man. I'm a scientist.</p>
  </a>
</div>

You added the showProfile scope variable to hide the list when the app loads, set the showProfilevariable to true when the googleLogin method fetches the user info.

$scope.showProfile = true;

Here is the complete googleLogin method:

$scope.googleLogin = function(){

  $cordovaOauth.google("YOUR GOOGLE CLIENT ID", ["email","profile"]).then(function(result) {

      $scope.showProfile = false;
      $http.get("https://www.googleapis.com/plus/v1/people/me", {params: {access_token: result.access_token }})
      .then(function(res) {

       $scope.showProfile = true;
       $scope.details = res.data;

      }, function(error) {
          alert("Error: " + error);
      });

  },function(error) {
        // error
        $scope.details = 'got error';
    });
}

 

Select the Application type as Web Application, set the callback URL and click Create as shown :

 

How to Authenticating Users via OAuth with Cordova and Ionic

How to Authenticating Users via OAuth with Cordova and Ionic Posted on 21-07-2016  You will need to install Cordova (I recommend SitePoint’s QuickTip) and the Ionic framework (again, I recommend SitePoint’s QuickTip) 5/10 220

Comment:

To comment you must be logged in members.

Files with category

  • How to Monetizing Apps with the Google AdMob SDK

    View: 401    Download: 0   Comment: 0   Author: none  

    How to Monetizing Apps with the Google AdMob SDK

    Category: Android
    Fields: Other

    4.75/2 review
    AdMob is a mobile advertising platform from Google that developers can use to generate revenue from apps through in-app advertising. AdMob provides different sets of ads like banner ads, interstitial ads, video ads, or native ads integrated with...

  • How to Securing Your Android Apps with the Fingerprint API

    View: 336    Download: 0   Comment: 0   Author: none  

    How to Securing Your Android Apps with the Fingerprint API

    Category: Android
    Fields: Other

    5/1 review
    Passwords have had their day, with software vendors and hardware manufacturers encouraging users to try other methods of securing their data. Fingerprint readers are becoming more common on Android devices since Marshmallow introduced a new...

  • Transfer Data between Activities with Android Parcelable with android

    View: 750    Download: 0   Comment: 0   Author: none  

    Transfer Data between Activities with Android Parcelable with android

    Category: Android
    Fields: Other

    0/0 review
    An Android app typically consists of more than one activity that need to pass data between each other. For example a primary activity with a list of elements and a corresponding secondary activity to show the details of these elements

  • Optimize Your Java Code with Android Butter Knife

    View: 497    Download: 0   Comment: 0   Author: none  

    Optimize Your Java Code with Android Butter Knife

    Category: Android
    Fields: Other

    1.5/3 review
    Creating code can sometimes be frustrating. Developers have to deal with redundant coding that is visually unattractive.

  • How to Use React Native to a Create a Face Recognition App

    View: 436    Download: 0   Comment: 0   Author: none  

    How to Use React Native to a Create a Face Recognition App

    Category: Android
    Fields: Other

    2.25/2 review
    nce you have signed up for an account, login and click on the search icon at the top of the screen and search for ‘cognitive services’. From the dropdown that shows, click on Cognitive Services accounts (preview) and you should see the following...

  • How to Authenticating Users via OAuth with Cordova and Ionic

    View: 220    Download: 0   Comment: 0   Author: none  

    How to Authenticating Users via OAuth with Cordova and Ionic

    Category: Android
    Fields: Other

    0/0 review
    You will need to install Cordova (I recommend SitePoint’s QuickTip) and the Ionic framework (again, I recommend SitePoint’s QuickTip)

  • Make Access Platform APIs with React Native Modules

    View: 22083    Download: 0   Comment: 0   Author: none  

    Make Access Platform APIs with React Native Modules

    Category: Android
    Fields: Other

    4.5/1 review
    SitePoint has a full guide for installing React Native available here. Once it’s installed, create a new project with the following command

  • Build Animating an Android Floating Action Button

    View: 445    Download: 0   Comment: 0   Author: none  

    Build Animating an Android Floating Action Button

    Category: Android
    Fields: Other

    4.5/1 review
    The Floating Action Button looks something like this in a layout file and will be auto generated if create an Android Studio project with a Blank Activity:

 
Newsletter Email

File suggestion for you

File top downloads

logo codetitle
Codetitle.com - library source code to share, download the file to the community
Copyright © 2015. All rights reserved. codetitle.com Develope by Vinagon .Ltd