如何使用 Ionic Framework for LinkedIn 实现 OAuth.io？答案

【问题标题】：How to implement OAuth.io using Ionic Framework for LinkedIn?如何使用 Ionic Framework for LinkedIn 实现 OAuth.io？
【发布时间】：2016-07-17 05:12:06
【问题描述】：

我已经创建了 LinkedIn 应用并检索了客户 ID 和 client_secret。

现在在 OAuth.io 的集成 api 里面创建了一个 api 并添加了密钥和权限范围。

我想使用 Ionic 框架运行这个项目。应该做些什么来实现它。

P.S：我是 Ionic Framework 和 OAuth.io 的新手。所以请不要介意我提问的方式。

整个 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>

整个 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);  
              })
        });
      };
  }
});

【问题讨论】：

标签： ionic-framework linkedin linkedin-api oauth.io

【解决方案1】：

我认为您阅读了 ngCordova 插件。

【讨论】：

我必须使用 OAuth.io

【解决方案2】：

请执行以下步骤和以下代码：
1）从终端创建一个项目作为离子启动linkedinlogin空白
2)cdlinkedinlogin 项目
3）在终端中添加所需的平台为离子添加平台****
4)在我们项目的cordova.ja文件上方添加ng-cordova.min.js文件
5) 安装 ng-cordova-oauth 作为 bower install ng-cordova-oauth -S
6）然后在 index.html 中包含 ng-cordova-oauth.min.js 文件
7) 在 app.js 文件中注入 'ngCordova' 和 'ngCordovaOauth' 作为依赖项
8）在 index.html 中通过linkedin创建一个按钮作为登录
9）在 app.js 中使用以下代码创建一个控制器
10)如果上述插件不起作用，请更新您的cordova平台

$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);
    })

【讨论】：

我知道这个方法。但我必须使用 OAuth.io
这应该被标记为正确答案！使用 ngCordova

【解决方案3】：

使用 oauth.io 我已经通过linkedin实现了登录：

请按以下步骤操作：
1. 在 oauth.io 中创建一个应用并获取公钥。
2. 单击左侧栏中的集成 API 菜单。
3. 现在点击右上角的 ADD APIs 绿色按钮。
4. 现在搜索并选择 LinkedIn。
5. 现在在密钥和权限范围中添加 Client id 和 Client Secret。
6. 使用以下命令将插件添加到项目中：

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

7。对于控制器代码检查下面的代码。

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);  
              })
        });
      };
  }

希望对你有所帮助..

【讨论】：

你没有为 html 页面中的按钮编写 ng-click .. 编写如下代码..
您已经编写了两次 ng-click 函数...我已经在我的控制器代码中编写了按钮单击代码（在第 7 步中）...所以您只需将我的控制器代码包含在您的控制器中。 ..不要添加任何提取线
在 html 页面中你没有提到 ng-app="starter"... 像下面这样包含..