Utilizzo di OAuth2 nell’app Web HTML5

Attualmente sto sperimentando con OAuth2 lo sviluppo di un’applicazione mobile interamente costruita in JavaScript che parla con un’API CakePHP. Dai un’occhiata al seguente codice per vedere come appare attualmente la mia app (tieni presente che si tratta di un esperimento, quindi del codice disordinato e della mancanza di struttura nelle aree, ecc.)

var access_token, refresh_token; var App = { init: function() { $(document).ready(function(){ Users.checkAuthenticated(); }); }(), splash: function() { var contentLogin = '  '; $('#app').html(contentLogin); }, home: function() { var contentHome = '

Welcome

Log out'; $('#app').html(contentHome); } }; var Users = { init: function(){ $(document).ready(function() { $('#login').live('click', function(e){ e.preventDefault(); Users.login(); }); $('#logout').live('click', function(e){ e.preventDefault(); Users.logout(); }); }); }(), checkAuthenticated: function() { access_token = window.localStorage.getItem('access_token'); if( access_token == null ) { App.splash(); } else { Users.checkTokenValid(access_token); } }, checkTokenValid: function(access_token){ $.ajax({ type: 'GET', url: 'http://domain.com/api/oauth/userinfo', data: { access_token: access_token }, dataType: 'jsonp', success: function(data) { console.log('success'); if( data.error ) { refresh_token = window.localStorage.getItem('refresh_token'); if( refresh_token == null ) { App.splash(); } else { Users.refreshToken(refresh_token); } } else { App.home(); } }, error: function(a,b,c) { console.log('error'); console.log(a,b,c); refresh_token = window.localStorage.getItem('refresh_token'); if( refresh_token == null ) { App.splash(); } else { Users.refreshToken(refresh_token); } } }); }, refreshToken: function(refreshToken){ $.ajax({ type: 'GET', url: 'http://domain.com/api/oauth/token', data: { grant_type: 'refresh_token', refresh_token: refreshToken, client_id: 'NTEzN2FjNzZlYzU4ZGM2' }, dataType: 'jsonp', success: function(data) { if( data.error ) { alert(data.error); } else { window.localStorage.setItem('access_token', data.access_token); window.localStorage.setItem('refresh_token', data.refresh_token); access_token = window.localStorage.getItem('access_token'); refresh_token = window.localStorage.getItem('refresh_token'); App.home(); } }, error: function(a,b,c) { console.log(a,b,c); } }); }, login: function() { $.ajax({ type: 'GET', url: 'http://domain.com/api/oauth/token', data: { grant_type: 'password', username: $('#Username').val(), password: $('#Password').val(), client_id: 'NTEzN2FjNzZlYzU4ZGM2' }, dataType: 'jsonp', success: function(data) { if( data.error ) { alert(data.error); } else { window.localStorage.setItem('access_token', data.access_token); window.localStorage.setItem('refresh_token', data.refresh_token); access_token = window.localStorage.getItem('access_token'); refresh_token = window.localStorage.getItem('refresh_token'); App.home(); } }, error: function(a,b,c) { console.log(a,b,c); } }); }, logout: function() { localStorage.removeItem('access_token'); localStorage.removeItem('refresh_token'); access_token = window.localStorage.getItem('access_token'); refresh_token = window.localStorage.getItem('refresh_token'); App.splash(); } };

Ho una serie di domande relative alla mia implementazione di OAuth:

1.) Apparentemente l’archiviazione del token di accesso in localStorage è una ctriggers pratica e dovrei invece usare i cookie. Qualcuno può spiegare perché? Poiché non è più sicuro o meno sicuro per quanto posso dire, dato che i dati dei cookie non sarebbero crittografati.

AGGIORNAMENTO: In base a questa domanda: Local Storage e Cookies che memorizzano i dati in localStorage sono SOLO disponibili sul lato client e non fa alcuna richiesta HTTP a differenza dei cookie, quindi mi sembra più sicuro, o almeno non sembra ho problemi per quanto posso dire!

2.) In relazione alla domanda 1, l’uso di un cookie per la scadenza, sarebbe altrettanto inutile per me, come se si guardasse il codice, viene richiesta una richiesta all’avvio dell’app per ottenere le informazioni dell’utente, che restituirebbero un errore se era scaduto sul server e richiedeva un refresh_token. Quindi non sono sicuro dei vantaggi di avere tempi di scadenza su ENTRAMBI client e server, quando quello del server è ciò che conta davvero.

3.) Come posso ottenere un token di aggiornamento, senza A, memorizzandolo con il token di accesso originale da utilizzare in seguito e B) anche memorizzando un client_id? Mi è stato detto che si tratta di un problema di sicurezza, ma come posso utilizzarli in seguito, ma proteggerli in un’app solo JS? Ancora una volta vedi il codice qui sopra per vedere come ho implementato questo finora.