Angular 2 - 不显示授权屏幕

Question

我正在尝试创建一个登录功能，用户通过 LinkedIn 登录，授予对某些个人资料数据和 returns 持有此信息的对象的权限。

现在我按照 Javascript SDK - Getting Started. And the Sign In with LinkedIn (Javascript SDK) 创建了我的应用程序，它告诉我 2 个不同的选项。

第一个是 IN.User.authorize(callbackFunction, callbackScope)，在入门中讨论过。

第二个是在您的 HTML 中有一个 <script type="in/Login"></script>，这将创建一个登录按钮。

我都试过了第一个（入门）确实显示了授权屏幕，但问题是它只会在浏览器中设置一个 cookie，表明验证成功。（调用 IN.User.isAuthorized() returns 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>

重现步骤

如果您还没有安装 ionic 和 cordova npm install -g ionic cordova
创建一个空项目ionic start myApp blank --v2 --ts
注册 LinkedIn 应用程序（设置回调）- 复制 client-id
调整 3 个文件，使它们看起来如上所示

Answer 1

显然 IN.User.authorize 不向回调提供数据，但可以调用 IN.Raw.api 来检索数据。位任意工作 tbh 但它有效。

Angular 2 - 不显示授权屏幕

Angular 2 - Not showing authorization screen

typescript

linkedin-api

angular