Angular 2 - Not showing authorization screen

Question

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

If you haven't already install ionic and cordova npm install -g ionic cordova
create an empty project ionic start myApp blank --v2 --ts
register a LinkedIn app (set callback) - copy the client-id
adjust the 3 files so they look like shown above

Answer 1

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.

Angular 2 - Not showing authorization screen

Question

1 answers

solution1
0 ACCPTED 2016-11-23 13:03:36

Angular 2 - Not showing authorization screen

Question

1 answers

solution1 0 ACCPTED 2016-11-23 13:03:36

solution1
0 ACCPTED 2016-11-23 13:03:36