Angular 2 - 不显示授权屏幕答案

【问题标题】：Angular 2 - Not showing authorization screenAngular 2 - 不显示授权屏幕
【发布时间】：2016-11-23 21:03:36
【问题描述】：

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

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

第一个是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>

复制步骤

如果你还没有安装 ionic 和 cordova npm install -g ionic cordova
创建一个空项目ionic start myApp blank --v2 --ts
注册 LinkedIn 应用（设置回调） - 复制客户端 ID
调整 3 个文件，使其如上所示

【问题讨论】：

标签： angular typescript linkedin-api

【解决方案1】：

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

【讨论】：