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

我已经创建了LinkedIn应用程序，并检索了客户端id和client_secret。

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

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

p.S：我是Ionic Framework和OAuth.io的新手。所以请不要介意我提问的风格。

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>

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

请完成以下步骤和代码：
1）从终端创建一个项目作为离子启动链接登录空白
2） cd链接登录项目
3）在终端中添加所需平台作为离子添加平台***
4）在我们的项目中，将ng-codova.min.js文件添加到cordova.ja文件之上
5）安装ng cordova oauth作为bower安装ng cor多瓦oauth-S
6）然后在index.html中包含ng-codova-oauth.min.js文件
7）在app.js文件中注入"ngCordova"one_answers"ngCor多瓦Oauth"作为依赖项
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);
    })

我想你读过ngCordova插件。

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

请按照以下步骤操作：
1.在oauth.io中创建一个应用程序并获取公钥
2.单击左侧栏中的Integrated API（集成API）菜单
3.现在点击右上角的添加API绿色按钮
4.现在搜索并选择领英
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);  
              })
        });
      };
  }

希望对你有帮助。。

相关内容

最新更新

热门标签：