How to integrate Linkedin into Angular2

Question

I have a problem with LinkedIn authentication in Angular2 my code.

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 copy error: angular2-polyfills.js:1250 Uncaught Error: Could not execute 'function () {'. Please provide a valid function for callback. angular2-polyfills.js:1250 Uncaught Error: Could not execute 'function () {'. Please provide a valid function for callback.

Please help me what is wrong, I do ...

Answer 1

I found the problem by checking the source code output in the first script tag.

The problem is where you put:

 "onLoad:" + this.OnLinkedInFrameworkLoad; 

It will be displayed as:

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

And as they say in the official documentation for developers

Attention!

Line breaks between arguments in tags are important because there is no other field separator. If you use a template language or minifier code that removes spaces from your display HTML, keep in mind that you will need to make an exception to keep line breaks in this tag, otherwise they will not be parsed correctly.

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

---

I have not yet found how to solve the LinkedIn login problem using Angular 2, but I will try other solutions again.

Answer 2

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

Answer 3

Using javascript dom functions, so you need to change this:

 "onLoad:" + this.OnLinkedInFrameworkLoad ; 

For this:

 "onLoad: onLinkedInLoad"; 

Now add this to the <head> your 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 basic profile data function getProfileData() { IN.API.Raw("/people/~").result(onSuccess).error(onError); } </script>