Angular 2 - 未显示授权屏幕

我试图创建一个登录函数，用户通过LinkedIn登录，授予某些配置文件数据的权限并返回持有此信息的对象。Angular 2 - 未显示授权屏幕

现在我按照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>

步骤来重现

如果您尚未安装离子和科尔多瓦npm install -g ionic cordova
创建一个空的项目ionic start myApp blank --v2 --ts
注册LinkedIn应用程序（集回调） - 复制客户端ID
调整3个文件，以便它们看起来像上面所示

来源

2016-11-16 Ivaro18

Apparen如果IN.User.authorize不向回调提供数据，但可以调用IN.Raw.api来检索数据。位任意工作tbh，但它的工作原理。

来源

2016-11-23 13:03:36 Ivaro18

Angular 2 - 未显示授权屏幕

回答

相关问题