html5 js保存token,javascript-在HTML5 Web应用程序中使用OAuth2

妖狐艹你老母 2022-10-08 00:46 45阅读 0赞

我目前正在试验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);

\});

\},

$.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的应用程序中保护它们？ 再次查看上面的代码，看看到目前为止我是如何实现的。

html5 js保存token,javascript-在HTML5 Web应用程序中使用OAuth2

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 html5 js保存token,javascript-在HTML5 Web应用程序中使用OAuth2

相关 html5 保存搜索历史,HTML5历史存储

相关 HTML5 应用程序缓存

相关 HTML5 Web SQL

相关 HTML5 离线应用程序

相关 HTML5中Web Storage

相关 HTML5应用程序缓存

相关 HTML5 Web SQL

相关 HTML5 应用程序缓存--manifest

相关 HTML5的Web存储应用