我使用 Python/Django 和出色的 Django REST 框架创建了一个 REST Web API。
我目前正在试验身份验证方法,想知道对 AJAX Web 应用程序使用“令牌身份验证”是否是一种好习惯。
我在一个非常基本的 CRUD Web 应用程序中包含了一个示例 HTML 文件,演示了我目前如何使用令牌身份验证。它工作正常,但是只在源中包含身份验证令牌真的可以(关于安全性等)吗?基本身份验证似乎是一个不错的选择,但是我必须在源中同时包含用户名和密码,这对我来说似乎更糟?
脚注:我知道通过 HTTPS 协议更好地使用 REST 以提高安全性,但显然我正在我的开发机器上运行此代码。我计划在生产中使用 HTTPS。
提前感谢您的任何提示!
亲切的问候,克里斯托夫
{% extends 'base.html' %}
{% block title %}Games{% endblock %}
{% block content %}<script type="text/javascript">/*<![CDATA[*/
function getBase() {
return 'http://api.sandbox.dev:8080/';
}
function getData() {
return {
id: $('#id').val(),
title: $('#title').val(),
};
}
function getToken() {
return 'b26ffd6ddb66428ce9164d606f694cd4184ce73e';
}
$(document).ready(function(){
$('#create').click(function(e){
$.ajax({
url: getBase() + 'games/',
type: 'POST',
data: getData(),
dataType: 'json',
headers: {
authorization: 'token ' + getToken(),
},
complete: function(xhr, textStatus) {
console.log('textStatus = ' + textStatus);
},
success: function(data, textStatus, xhr) {
console.log('textStatus = ' + textStatus);
},
error: function(xhr, textStatus, errorThrown) {
console.log('textStatus = ' + textStatus + '\nerrorThrown = ' + errorThrown);
},
});
});
$('#update').click(function(e){
if(getData().id) {
$.ajax({
url: getBase() + 'games/' + getData().id + '/',
type: 'PUT',
data: getData(),
dataType: 'json',
headers: {
authorization: 'token ' + getToken(),
},
complete: function(xhr, textStatus) {
console.log('textStatus = ' + textStatus);
},
success: function(data, textStatus, xhr) {
console.log('textStatus = ' + textStatus);
},
error: function(xhr, textStatus, errorThrown) {
console.log('textStatus = ' + textStatus + '\nerrorThrown = ' + errorThrown);
},
});
}
});
$('#delete').click(function(e){
if(getData().id) {
$.ajax({
url: getBase() + 'games/' + getData().id + '/',
type: 'DELETE',
data: {},
dataType: 'json',
headers: {
authorization: 'token ' + getToken(),
},
complete: function(xhr, textStatus) {
console.log('textStatus = ' + textStatus);
},
success: function(data, textStatus, xhr) {
console.log('textStatus = ' + textStatus);
},
error: function(xhr, textStatus, errorThrown) {
console.log('textStatus = ' + textStatus + '\nerrorThrown = ' + errorThrown);
},
});
}
});
});
/*]]>*/</script><form action="" method="post" onsubmit="return false">
<dl>
<dt><label for="id">ID</label></dt>
<dd><input type="text" id="id" name="id" size="20" maxlength="10" /></dd>
<dt><label for="title">Title</label></dt>
<dd><input type="text" id="title" name="title" size="20" maxlength="20" /></dd>
</dl>
<p><button type="button" id="create">Create</button></p>
<p><button type="button" id="update">Update</button></p>
<p><button type="button" id="delete">Delete </button></p>
</form>{% endblock %}