How to Integrate Linkedin in Angular2

Question

I have problem regarding LinkedIn Authentication in Angular2 my code is.

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
   }

}

Console Throwing Error : angular2-polyfills.js:1250 Uncaught Error: Could not execute 'function () {'. Please provide a valid function for callback.

Please Help me out what is wrong I'm doing...

Answer 1

I found the issue by inspecting the source code output in the first script tag.

The issue is where you put:

"onLoad:" + this.OnLinkedInFrameworkLoad;

It will be output as:

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

And like it says in the official developper documentation

Important!

The line breaks between the arguments within the tags are important since there is no other form of field separator. If you are using a templating language or code minifier that strips whitespace from your rendered HTML, be aware that you will need to make an exception to preserve the line-breaks within this tag, otherwise they will not be parsed properly.

Source: https://developer.linkedin.com/docs/getting-started-js-sdk

---

I don't find yet how to resolve the LinkedIn login problem with Angular 2 but I will try again other solutions

Answer 2

this is working for me :

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');
                   });
                }   
            }