如何在Angular2中集成Linkedin

关于Angular2中的LinkedIn身份验证，我有问题。我的代码是

import {Component , OnInit , NgZone} from 'angular2/core';
import {HTTP_PROVIDERS} from 'angular2/http';
import {ROUTER_DIRECTIVES , Router} from 'angular2/router';

declare var IN : any;

@Component({
  directives : [ROUTER_DIRECTIVES],
  selector : '.main',
  providers : [HTTP_PROVIDERS],
  templateUrl : './app/registration/employee.reg.html'
})

export class EmployeeRegistrationComponent implements OnInit{

 constructor(private zone : NgZone){
    this.zone.run(() => {
        $.proxy(this.OnLinkedInFrameworkLoad, this);
    });
}

ngOnInit(){
    var linkedIn = document.createElement("script");
    linkedIn.type = "text/javascript";
    linkedIn.src = "http://platform.linkedin.com/in.js";
    linkedIn.innerHTML = "\n"+
        "api_key: **********\n" +
        "authorize: true\n" +
        "onLoad:" + this.OnLinkedInFrameworkLoad ;
    document.head.appendChild(linkedIn);

    var script = document.createElement("script");
    script.type = "in/Login";
    document.body.appendChild(script);
}

OnLinkedInFrameworkLoad = () => {
    IN.Event.on(IN, "auth", this.OnLinkedInAuth);
}

OnLinkedInAuth = () => {
    IN.API.Profile("me").result(result => this.ShowProfileData);
}

ShowProfileData(profiles) {
    console.log(profiles);
    var member = profiles.values[0];
    var id=member.id;
    var firstName=member.firstName;
    var lastName=member.lastName;
    var photo=member.pictureUrl;
    var headline=member.headline;

    //use information captured above
   }

}

控制台抛出错误：

angular2 polyfills.js:1250未捕获错误：无法执行“函数（）{”。请为回调提供有效函数。

---

请帮我找出我做错了什么…

我通过检查第一个脚本标记中的源代码输出发现了问题

问题在于你把：

"onLoad:" + this.OnLinkedInFrameworkLoad;

它将输出为：

onLoad: function () {↵            IN.Event.on(IN, "auth", _this.OnLinkedInAuth);↵        }

就像官方开发人员文档中所说的那样

重要

标记中参数之间的换行符很重要，因为没有其他形式的字段分隔符。如果您使用的模板语言或代码缩略器从呈现的HTML中去除空白，请注意，您将需要执行一个例外以保留此标记中的换行符，否则它们将不会被删除纵火行为恰当

资料来源：

---

---

我还没有找到如何使用Angular 2解决LinkedIn登录问题的方法，但我会再次尝试其他解决方案，这对我很有效：

import { Component, OnInit, NgZone } from '@angular/core';

   export class RegistrationComponent implements OnInit{

constructor(private ngZone: NgZone) {
       window['onLinkedInLoad'] = () => ngZone.run(() => this.onLinkedInLoad());
        window['displayProfiles'] = (profiles) => ngZone.run(() => this.displayProfiles(profiles));
        window['displayProfilesErrors'] = (error) => ngZone.run(() => this.displayProfilesErrors(error));
    }

    ngOnInit() {
              var linkedIn = document.createElement("script");
                        linkedIn.type = "text/javascript";
                        linkedIn.src = "http://platform.linkedin.com/in.js";
                        linkedIn.innerHTML = "\n" +
                           "api_key: ****\n" +
                           "authorize: true\n" +
                           "onLoad: onLinkedInLoad\n"+
                           "scope: r_basicprofile r_emailaddress";
                        document.head.appendChild(linkedIn);
                        var script = document.createElement("script");
                        script.type = "in/Login";
                        document.body.appendChild(script);
                }

                public onLinkedInLoad() {
                        IN.Event.on(IN, "auth", this.onLinkedInProfile);
                }

                public onLinkedInProfile() {
                            IN.API.Profile("me")
                                .fields("id", "firstName", "lastName", "email-address")
                                .result(this.displayProfiles)
                                .error(this.displayProfilesErrors);
                }
                public displayProfiles(profiles) {
                    console.log(profiles);
                }
                public displayProfilesErrors(error) {
                        console.debug(error);
                }
                //Invoke login window with button
                public liAuth() {
                   IN.User.authorize(function () {
                            console.log('authorize callback');
                   });
                }   
            }

---

您使用的是javascript dom函数，因此需要更改：

"onLoad:" + this.OnLinkedInFrameworkLoad ;

为此：

"onLoad: onLinkedInLoad";

现在将其添加到index.html的

<script type="text/javascript">

// Setup an event listener to make an API call once auth is complete
function onLinkedInLoad() {
    IN.Event.on(IN, "auth", getProfileData);
}

// Handle the successful return from the API call
function onSuccess(data) {
    console.log(data);
}

// Handle an error response from the API call
function onError(error) {
    console.log(error);
}

// Use the API call wrapper to request the member's basic profile data
function getProfileData() {
    IN.API.Raw("/people/~").result(onSuccess).error(onError);
}

</script>

//设置事件侦听器，以便在完成身份验证后进行API调用
函数onLinkedInLoad（）{
IN.Event.on（在“auth”中，getProfileData）；
}
//处理API调用的成功返回
函数onSuccess（数据）{
控制台日志（数据）；
}
//处理来自API调用的错误响应
函数onError（错误）{
console.log（错误）；
}
//使用API调用包装器请求成员的基本配置文件数据
函数getProfileData（）{
IN.API.Raw（“/people/~”）.result（onSuccess）.error（onError）；
}

angular是否允许您将脚本标记附加到dom？是的..因为我正在使用javascript dom函数..来处理脚本tags@DoubleH你有没有让它工作过？我很难实现它，而且几乎没有关于如何做这样的事情的文档。我尝试过，但我得到了.Event.on（在undefined中，您能告诉我如何修复吗？检查原始post:declare var IN:any；@Component（{我已经添加了，但是相同的错误，如果我尝试您的代码函数没有调用，LinkedIn不再支持JavaScript SDK