app html5 cookie,在HTML5 Web App中使用OAuth2

我目前正在尝试使用OAuth2开发一个完全用JavaScript构建的移动应用程序,该应用程序与CakePHP API进行通信.看看下面的代码,看看我的应用程序当前的外观(请注意,这是一个实验,因此代码混乱,缺乏结构区域等等.)

var access_token,

refresh_token;

var App = {

init: function() {

$(document).ready(function(){

Users.checkAuthenticated();

});

}(),

splash: function() {

var contentLogin = 'Log in';

$('#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();

}

};

我有很多与OAuth实施有关的问题:

1.)显然将access_token存储在localStorage中是不好的做法,我应该使用cookie.有谁能解释为什么？因为这不是更安全或更不安全,因为cookie数据不会被加密.

更新:根据这个问题:本地存储与存储localStorage中的数据的Cookie仅在客户端可用,并且不像cookie那样做任何HTTP请求,所以对我来说似乎更安全,或者至少似乎没有据我所知,有任何问题!

2.)与问题1相关,使用cookie到期时间对我来说同样毫无意义,就好像你查看代码一样,在app上发出请求以获取用户信息,如果查询,则会返回错误它已在服务器端过期,并需要refresh_token.所以不确定在BOTH客户端和服务器上有到期时间的好处,当服务器真正重要时.

3.)如何在没有A的情况下获取刷新令牌,将其与原始access_token一起存储以供以后使用,以及B)还存储client_id？我被告知这是一个安全问题,但我怎样才能在以后使用它们,但是在仅限JS的应用程序中保护它们？再次看到上面的代码,看看到目前为止我是如何实现的.