我目前正在尝试使用 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.example/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.example/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.example/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 实施相关的问题：
-
显然，将 access_token 存储在 localStorage 中是不好的做法，我应该使用 cookie。谁能解释为什么？据我所知，这不再安全或不太安全，因为 cookie 数据不会被加密。
根据这个问题：本地存储与 Cookie https://stackoverflow.com/questions/3220660/local-storage-vs-cookies无论如何，将数据存储在 localStorage 中仅在客户端可用，并且不会像 cookie 那样执行任何 HTTP 请求，因此对我来说似乎更安全，或者至少据我所知似乎没有任何问题！* *
-
关于问题1，使用cookie来确定过期时间，对我来说同样毫无意义，就好像你看代码一样，在应用程序启动时发出请求来获取用户信息，如果它已过期，则会返回错误在服务器端，并且需要一个refresh_token。因此，不确定在客户端和服务器上都有过期时间的好处，而服务器才是真正重要的。
-
如何获取刷新令牌，无需 A、将其与原始 access_token 一起存储以供稍后使用，以及 B) 还存储 client_id？我被告知这是一个安全问题，但我以后如何使用这些，但在纯 JS 应用程序中保护它们呢？再次查看上面的代码，了解到目前为止我是如何实现的。
