Autenticazione Linkedin con Javascript
Oggi vediamo come autenticare gli utenti di Linkedin sul nostro sito usando Jascript.
In pratica avremo un tasto di Linkedin che cliccato controllerà se l'utente è autenticato.
In caso di esito positivo mostraremo alcune info del profilo, in caso negativo spunterà una finestrella per autenticarsi.
Diciamo che molte operazioni verranno fatte in automatico dall'SDK.
Prima di tutto dovete avere un account su Linkedin ovviamente, e poi dovete creare una app sulla pagina dedicata agli sviluppatori.
Cliccate su Aggiungi una nuova applicazione e poi configurate la app.
Per usare il Jvascript SDK dovete configurare obbligatoriamente anche l'ultimo campo (Domini API Javascript) mettendoci l'url dal quale viene fatta la richiesta dell'SDK (che vedremo dopo).
Dopo che avete creato la app potete procedere con la pagina HTML:
<!DOCTYPE html>
<html>
<head>
<title>Linkedin</title>
<script type="text/javascript" src="http://platform.linkedin.com/in.js">/*
api_key: API_KEY
onLoad: onLinkedInLoad
authorize: true
*/</script>
<script type="text/javascript">
function onLinkedInLoad() {
IN.Event.on(IN, "auth", onLinkedInAuth);
}
function onLinkedInAuth() {
IN.API.Profile("me").result(displayProfiles);
}
function displayProfiles(result) {
var member = result.values[0];
document.getElementById("profiles").innerHTML = '<p id="' + member.id + '">HELLO ' + member.firstName + ' ' + member.lastName + '</p>';
}
</script>
</head>
<body>
<script type="IN/Login"></script>
<div id="profiles"></div>
</body>
</html>
Nell'head della pagina, prima di tutto includiamo l'SDK; in quel tag <script> aggiungiamo alcune impostazioni.
Nello specifico la prima gli diciamo che funzione richiamare a caricamento avvenuto; poi gli diciamo che quello che richiediamo è l'autorizzazione al login.
Nella funzione onLinkedInLoad richiediamo l'autorizzazione e poi richiamiamo la funzione onLinkedInAuth.
Questa si occupa di prendere le info dell'utente in caso di autorizzazione avvenuta.
In casso affermativo richiamiamo la funzione displayProfiles che altro non fa che prendere le info dell'utente e metterle nel <div> sottostante.
Le informazioni che ho messo sono il nome e il cognome, e poi l'id univoco dell'utente messo l'attributo id del tag <p>.
Linkedin ci restituisce un Object con un parametro values, che è dove si trovano le nostre informazioni.
Per capire bene vi conviene staparvmi in console i valori che vengono inviati dall'SDK.
Nel <body> della pagina abbiamo un tag <script> che ci visualizza il bottone di Linkedin, e il <div> che ci mostra le varie info.
Commentami!