Ivaro18 Ivaro18 - 11 days ago 5
TypeScript Question

Angular 2 - Not showing authorization screen

I'm trying to create a login function where the User logs in via LinkedIn, grants permission to some profile data and returns the object holding this information.

Now I created my app following the Javascript SDK - Getting Started. And the Sign In with LinkedIn (Javascript SDK) which tells me 2 different options.

First one is

IN.User.authorize(callbackFunction, callbackScope)
which is discussed in the Getting Started.

Second one is having a
<script type="in/Login"></script>
in your HTML, which would create a login button.

I tried both
The first one (Getting Started) does show the authorization screen but the problem is that it will just set a cookie in the browser, showing that a succesfull validation happened. (calling
IN.User.isAuthorized()
returns
true
).

The problem with the second one (Sign in with LinkedIn) is that no button is shown in my browser (Chrome) so I have nothing to click on. Here is my code: (removed API key)

home.html

<ion-header>
<ion-navbar>
<ion-title>
LinkedIN
</ion-title>
</ion-navbar>
</ion-header>

<ion-content padding>
<h2> LinkedIn login test </h2>

<!-- option 2 -- Sign in with LinkedIn docs -->
<script type="in/Login"></script>

<!-- option 1 -- check typescript -->
<button (click)="authorize()">Linkedin</button>
</ion-content>


home.ts

import { Component, OnInit } from '@angular/core';
import { NavController } from 'ionic-angular';

declare var IN;

@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage implements OnInit {
constructor(public navCtrl: NavController) {}

ngOnInit() {
IN.Event.on('auth', () => {
console.log("authing"); // never printed
IN.API.Raw("/people/~").result((data) => {
console.log(data);
}).error((error) => {
console.log(error);
})
});

}

authorize() {
// note: I figured data is an empty object ({}). Nothing returned
IN.User.authorize((data) => {
console.log("data is "+ JSON.stringify(data)); //[object, Object]
console.log("DATA: "+ data.firstName); //undefined
console.log("hl: "+ data.headLine); //undefined
});

console.log("AUTH: "+IN.User.isAuthorized()); //true if succesfull
}

}


index.html (just the head - nothing else changed from default)

<head>
....
<script src="//platform.linkedin.com/in.js" type="text/javascript">
api_key: 1234apikey5678
</script>
....
</head>


Steps to reproduce


  1. If you haven't already install ionic and cordova
    npm install -g ionic cordova

  2. create an empty project
    ionic start myApp blank --v2 --ts

  3. register a LinkedIn app (set callback) - copy the client-id

  4. adjust the 3 files so they look like shown above


Answer

Apparently the IN.User.authorize doesn't provide data to the callback but the IN.Raw.api can be called to retrieve the data. Bit arbitrary work tbh but it works.

Comments