Angular 2 - 未显示授权屏幕

时间:2016-11-16 10:34:31

标签: angular typescript linkedin-api

我尝试创建登录功能,用户通过LinkedIn登录,授予某些个人资料数据的权限,并返回包含此信息的对象。

现在我在Javascript SDK - Getting Started之后创建了我的应用。 Sign In with LinkedIn (Javascript SDK)告诉我两种不同的选择。

第一个是IN.User.authorize(callbackFunction, callbackScope),将在“入门指南”中讨论。

第二个是HTML中有<script type="in/Login"></script>,这会创建一个登录按钮。

我试过了两个 第一个(入门)确实显示授权屏幕,但问题是它只会在浏览器中设置一个cookie,表明发生了成功的验证。 (调用IN.User.isAuthorized()返回true)。

第二个问题(使用LinkedIn登录)是我的浏览器(Chrome)中没有显示任何按钮,因此我无需点击任何内容。这是我的代码:(删除了API密钥)

home.html的

<ion-header>
  <ion-navbar>
    <ion-title>
      LinkedIN
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h2> LinkedIn login test </h2>

  <!-- option 2 -- Sign in with LinkedIn docs -->
  <script type="in/Login"></script>

  <!-- option 1 -- check typescript -->
  <button (click)="authorize()">Linkedin</button>
</ion-content>

home.ts

import { Component, OnInit } from '@angular/core';
import { NavController } from 'ionic-angular';

declare var IN;

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage implements OnInit {
  constructor(public navCtrl: NavController) {}

  ngOnInit() {
    IN.Event.on('auth', () => {
      console.log("authing");  // never printed
      IN.API.Raw("/people/~").result((data) => {
        console.log(data);
      }).error((error) => {
        console.log(error);
      })
    });

  }

  authorize() {
    // note: I figured data is an empty object ({}). Nothing returned
    IN.User.authorize((data) => {
      console.log("data is "+ JSON.stringify(data)); //[object, Object]
      console.log("DATA: "+ data.firstName);         //undefined
      console.log("hl: "+ data.headLine);            //undefined
    });

    console.log("AUTH: "+IN.User.isAuthorized());    //true if succesfull
  }

}

index.html(只是头部 - 没有其他更改默认设置)

<head>
  .... 
  <script src="//platform.linkedin.com/in.js" type="text/javascript">
      api_key: 1234apikey5678
  </script>
  ....
</head>

重现的步骤

  1. 如果您尚未安装ionic和cordova npm install -g ionic cordova
  2. 创建一个空项目ionic start myApp blank --v2 --ts
  3. 注册一个LinkedIn应用(设置回调) - 复制客户端ID
  4. 调整3个文件,使其看起来如上所示

1 个答案:

答案 0 :(得分:0)

显然IN.User.authorize没有向回调提供数据,但可以调用IN.Raw.api来检索数据。任意工作tbh,但它的工作原理。