html5 js保存token,javascript-在HTML5 Web应用程序中使用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数据不会被加密。

更新：根据此问题：无论如何，本地存储vs Cookies将数据存储在localStorage中始终仅在客户端可用，并且不像cookie一样执行任何HTTP请求，因此对我来说似乎更安全，或者至少看起来不安全 据我所知有任何问题！

2.)关于问题1，使用cookie过期时间对我来说同样毫无意义，就好像您在看代码时一样，在应用开始时发出了获取用户信息的请求，如果返回该错误，则返回错误 它已在服务器端过期，并且需要refresh_token。 因此，当真正重要的是服务器时，不确定在客户端和服务器上都有到期时间的好处。

3.)如何在没有A的情况下获得刷新令牌，将其与原始access_token一起存储以供以后使用，并且B)还存储client_id？ 有人告诉我这是一个安全性问题，但是我以后如何使用它们，却只能在仅JS的应用程序中保护它们？ 再次查看上面的代码，看看到目前为止我是如何实现的。