Linkedin 与 Angular 2

Question

我正在尝试将 LinkedIn login 集成到 Angular 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

改用 window['angularComponentRef'] 和 window['IN'] 或者用这两个字段扩展窗口接口

Answer 2

几个月前有人问过这个问题，但我还是想回答一下，因为我们在一个项目中遇到了类似的情况，甚至在我们在 npm (https://github.com/evodeck/angular-linkedin-sdk) 上发布的库中提取了我们的解决方案。

1. 您似乎正在从 ngOnInit 中的组件加载 Linkedin SDK。这将导致每次加载组件时再次附加脚本标记。更好地使用服务并在构造函数中完成。

2. 在应用程序中使用窗口对象时，注入它而不是使用全局引用。

3. 就像已经提到的，如果你的窗口界面提供了window['IN'] 或window.IN，或者当使用任何类型的窗口对象时。但不要选择declare let IN: any。

我希望它有所帮助。不要介意使用我们图书馆的源代码。

Answer 3

实际上，我今天写了一篇中篇文章，讨论了一个类似的问题。当 Angular 发布 Angular Universal 时，出于性能和 SEO 原因，它最初呈现模板服务器端。这样做时，它会失去对窗口对象的引用。

这是我的文章https://medium.com/@D_ofashandfire/i-love-hate-linkedin-oauth-2d7b602926c6

tldr，是 SDK 在这种情况下真的坏了。我发现使用 REST API 然后通过服务器端实现接收身份验证代码要容易得多。

这是一个示例组件。

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 或类似的东西中，具体取决于您的应用程序流程。

这将授权用户并使用参数code 将其返回到您的重定向 uri，您可以通过 Angular 2 将其解析为路由上的可选参数。