Linkedin с угловой 2

Question

Я пытаюсь интегрировать LinkedIn login в угловом 2, все они работают хорошо, но я получаю несколько ошибок в WebPack, ниже мой код и ошибки я получаю:

//linkedin.component.ts 
constructor(private zone: NgZone) { 
    window.angularComponentRef = { 
     zone: this.zone, 
     componentFn:() => this.onLinkedInLoad(), 
     component: this 
    }; 
} 

ngOnInit() { 
    // Creating script tag with linkedin src and required api details 
    var linkedinEle = document.createElement('script'); 
    linkedinEle.type = 'text/javascript'; 
    linkedinEle.src = 'http://platform.linkedin.com/in.js'; 
    linkedinEle.innerHTML = 'api_key: xxxxxxxxxxx \n authorize: true \n onLoad: onLinkedInLoad'; 
    document.head.appendChild(linkedinEle); 
} 
// this will called when the linkedin api gets load 
onLinkedInLoad() { 
    IN.Event.on(IN, "auth", function() { 
     console.log('Hell yeah'); 
    }); 
} 

// index.html 
function onLinkedInLoad() { 
    window.angularComponentRef.zone.run(function() { window.angularComponentRef.componentFn()}) 
} 

Этот все работает нормально, но получить эти ошибки в WebPack:

1. Property 'angularComponentRef' does not exist on type 'Window'. 
2. Cannot find name 'IN'. 

Так я думал, что я могу разрешить его, объявив его как declare let IN: any, но не повезло.

Answer 1

Используйте окно [ «angularComponentRef»] и окно [ «IN»] вместо или расширить оконный интерфейс с этими двумя полями

Answer 2

Это несколько месяцев назад этот вопрос был задан вопрос, но я хочу ответить в любом случае, потому что мы столкнулись с аналогичной ситуацией в проекте и даже извлекли наше решение в библиотеке, опубликованной на npm (https://github.com/evodeck/angular-linkedin-sdk).

1. похоже, что вы загружаете SDK Linkedin из компонента в ngOnInit. Это приведет к добавлению тега сценария снова при каждом загрузке компонента. Лучше использовать сервис и выполнять его в конструкторе.

2. при использовании объекта window в вашем приложении, введите его вместо использования глобальной ссылки.

3. как уже упоминалось, используйте window['IN'] или window.IN, если ваш оконный интерфейс предоставляет его или при использовании оконного объекта типа any. Но не ходите с declare let IN: any.

Надеюсь, это поможет. Не возражайте использовать источник из нашего либрана.

Answer 3

Сегодня я написал среднюю статью по аналогичной проблеме. Когда угловой выпущен Angular Universal, он сначала берет сторону сервера шаблонов для повышения производительности и SEO. При этом он теряет ссылку на объект окна.

Вот моя статья https://medium.com/@D_ofashandfire/i-love-hate-linkedin-oauth-2d7b602926c6

tldr, является то, что SDK действительно сломана в этом случае. Я считаю, что там гораздо проще и проще использовать REST API, а затем получить код auth через реализацию на стороне сервера.

Вот пример компонента.

https://gist.github.com/dashcraft/4b3853e558eaec656123342d1174912c

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'LinkedInExample', 
    template: '<a [href]="url">LinkedIn</a>' 
}) 

export class LinkedInExample{ 
    client_id: String = 'ClientStringHere'; 
    redirect_uri:String = encodeURI("http://localhost:5000/endpoint"); 
    url: String = `https://www.linkedin.com/oauth/v2/authorization?response_type=code&client_id=${this.client_id}&redirect_uri=${this.redirect_uri}`; 
} 

Конечно, вы могли бы поставить свойства внутри конструктора, OnInit или что-то подобное, в зависимости от вашего потока приложения.

Это позволит авторизовать пользователя и вернуть его обратно к вашему перенаправлению uri с параметром code, который вы можете проанализировать через Angular 2 в качестве необязательного параметра на вашем маршруте.