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 - 未顯示授權屏幕

回答

相關問題