I Love/Hate LinkedIn OAuth

Release The Kraken

Let me rephrase…

In Angular 2 (4) with angular universal killing the javascript sdk, doin’ OAuth for LinkedIn is like pulling teeth.

So when you get started with the LinkedIn JS SDK, life seems (dare I say) optimistic. There are butterflies floating around your office (closet) and everything seems fantastic. Even in Angular 2 (prior to universal) the sdk makes OAuth a breeze.

<script type="text/javascript" src="//platform.linkedin.com/in.js">
    api_key:   [API_KEY]
    onLoad:    [ONLOAD]
    authorize: [AUTHORIZE]
    lang:      [LANG_LOCALE]
</script>

Seems simple enough, a little js here, a little js there, and wa-lah magic. Your authentication works, you get a nice little temp code that you can exchange for your clients access token and start querying away, to your hearts content.

But wait, now we have the almighty Angular 2 (4) crew kicking out Angular Universal and you want to take advantage of this. But how?

Stop, it’s a trap! (Actually don’t stop, or your site will suck, embrace code hell)

Angular-Universal is a great package, don’t get me wrong, it allows you to pre-render your templates with logic server side, so as to improve performance and SEO. We all know (well, i know) that SEO has been one of the great banes of the SPA’s existence. It basically says “Fuck you, no likey likey” and congrats google looks down on you like the pretty girl (or guy) in highschool. Angular-Universal solves this problem, but creates a tiny problem in return. No more access to the window object.

You would think the Angular Team could possibly potentially maybe fix this issue for customers since it breaks a good 25–30% of all Angular 2 (4) packages? Nah, they don’t give a shit and neither should you.

I know you must be thinking, But Daniel, there is still a way to access the window object. Which is true. But it sucks. Try it, you’ll see.

Then come back to this article and learn from my mistakes, smart ass.

So how do we get around this problem for something like LinkedIn OAuth?

With the REST API of course!

Let me show you….

First, fuck the LinkedIn javascript sdk, it means nothing to you now. It’s useless. Burn it with fire.

Here is your example component that works, dammit, and that’s what matters in the real world.

And you are got damn right i actually use types in my Angular 2 (4), and that’s because i’m not one of those lazy :any asshats.

I am a real red blooded ‘Murican trying to make (Ken Fuckin Wheeler) proud. Even if he hates typescript (mouth of word).

Make sure that you register your redirect_uri with your linkedin application, make sure your client id is accurate and this will work ;)

Note: After the user authenticates LinkedIn will redirect users to your page and append your URI with the param `code=”gibberishgibberishgibberish”`
Parse that param from the redirect and send it to your server in order to get the access code.

So there you go, don’t be an idiot trying to use outdated angular2 modules that no longer work or worse, breakdown on refresh because window doesn’t exist, be smart and just use the REST API until LinkedIn Creates a functioning sdk for Angular 2 (4).