我目前正在尝试使用 OAuth2 开发一个完全用 JavaScript 构建的移动应用程序，该应用程序与 CakePHP API 对话。查看以下代码以了解我的应用程序当前的外观（请注意，这是一个实验，因此代码混乱，区域缺乏结构等。）
var access_token,
refresh_token;
var App = {
init: function() {
$(document).ready(function(){
Users.checkAuthenticated();
});
}(),
splash: function() {
var contentLogin = '<input id="Username" type="text"> <input id="Password" type="password"> <button id="login">Log in</button>';
$('#app').html(contentLogin);
},
home: function() {
var contentHome = '<h1>Welcome</h1> <a id="logout">Log out</a>';
$('#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 数据不会被加密。
更新：根据这个问题：Local Storage vs Cookies storage the data in localStorage 无论如何都只能在客户端使用，并且不像 cookie 那样做任何 HTTP 请求，所以对我来说似乎更安全，或者至少似乎没有据我所知有任何问题！
2.）关于问题 1，使用 cookie 作为过期时间，对我来说同样毫无意义，就像你看代码一样，在应用程序开始时发出请求以获取用户信息，如果它已在服务器端过期，需要一个 refresh_token。所以不确定在客户端和服务器上都有到期时间的好处，当服务器一个才是真正重要的时候。
3.) 如何在没有 A 的情况下获取刷新令牌，将其与原始 access_token 一起存储以供以后使用，以及 B) 还存储 client_id？有人告诉我这是一个安全问题，但我以后如何使用这些，但在仅限 JS 的应用程序中保护它们？再次查看上面的代码，了解到目前为止我是如何实现的。