CODEWITHSUNDEEP
ionic-frameworklinkedin-apioauth.io
Himanshu K
Himanshu K

Reputation: 224

How to implement OAuth.io using Ionic Framework for LinkedIn?

I have created the LinkedIn app and retrieved the client id and client_secret.

Now inside the integrated api of OAuth.io created an api and have added the keys and permission scope.

I want to run this project using Ionic Framework. What should be done to achieve it.

P.S: I am new to Ionic Framework and OAuth.io. So please don't mind my style of asking the question.

whole index.html:

<!DOCTYPE html>
<html>
 <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <script src="lib/ionic/js/ionic.bundle.js"></script>

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

    <script src="js/app.js"></script>
</head>

 <body ng-controller="MainCtrl">
<button class="button" ng-click="linkedInLogin()">Login via LinkedIn</button>
 </body>
</html>

whole app.js:

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

.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
  cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
  cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
  StatusBar.styleDefault();
 }
});
})
.controller("MainCtrl", function($scope, $cordovaOauth) {
document.addEventListener( "deviceready", onDeviceReady );
  function onDeviceReady( event ) {
      // on button click code
      $scope.linkedInLogin = function(){
        OAuth.initialize('07IxSBnzVoGGQL2MpvXjSYakagE')
        OAuth.popup('linkedin').done(function(result) {
            // Here you will get access token
            console.log(result)
              result.me().done(function(data) {
                  // Here you will get basic profile details of user
                  console.log(data);  
              })
        });
      };
  }
});

Upvotes: 0

Views: 689

Answers (3)

HARITHA UPPARA
HARITHA UPPARA

Reputation: 274

Using oauth.io i have implemented login via linkedin:

Please follow the steps:
1. Create a app in oauth.io and get public key.
2. Click on the Integrated APIs menu from the left side bar.
3. Now click on ADD APIs green button on the right top corner.
4. Now Search and select LinkedIn.
5. Now add the Client id and Client Secret in keys and permission scope.
6. use below command to add plugin to project:

cordova plugin add https://github.com/oauth-io/oauth-phonegap

7. For controller code check below code.

document.addEventListener( "deviceready", onDeviceReady );
  function onDeviceReady( event ) {
      // on button click code
      $scope.linkedInLogin = function(){
        OAuth.initialize('your public key')
        OAuth.popup('linkedin').done(function(result) {
            // Here you will get access token
            console.log(result)
              result.me().done(function(data) {
                  // Here you will get basic profile details of user
                  console.log(data);  
              })
        });
      };
  }

Hope it may be help you..

Upvotes: 0

HARITHA UPPARA
HARITHA UPPARA

Reputation: 274

Please go through the steps and below code:
1) create a project from terminal as ionic start linkedinlogin blank
2)cd linkedinlogin project
3)Add the required platform in terminal as ionic add platform ****
4)Add the ng-cordova.min.js file above the cordova.ja file in our project
5)Install ng-cordova-oauth as bower install ng-cordova-oauth -S
6)Then include ng-cordova-oauth.min.js file in index.html
7)Inject 'ngCordova' and 'ngCordovaOauth' as dependency in app.js file
8)In index.html create a button as login via linkedin
9)In app.js create a Controller with below code
10)Please update your cordova platform if the above plugin doesn't work

$cordovaOauth.linkedin(clientId, clientSecret, ['r_basicprofile', 'r_emailaddress']).then(function(success){
      //Here you will get the access_token

      console.log(JSON.stringify(success));

      $http({method:"GET", url:"https://api.linkedin.com/v1/people/~:(email-address,first-name,last-name,picture-url)?format=json&oauth2_access_token="+success.access_token}).success(function(response){

        // In response we will get firstname, lastname, emailaddress and picture url
        // Note: If image is not uploaded in linkedIn account, we can't get image url

        console.log(response);
      }, function(error){
        console.log(error);
      })
    }, function(error){
      console.log(error);
    })

Upvotes: 4

Anurag Pandey
Anurag Pandey

Reputation: 744

I thing you read the ngCordova plugins.

Upvotes: 1

Related Questions