python - AJAX Web アプリに REST トークン認証を使用することをお勧めしますか?

Question

Python/Django と優れた Django REST Framework を使用して REST Web API を作成しました。

私は現在、認証方法を試していて、AJAX Web アプリに「トークン認証」を使用するのが良い方法かどうか疑問に思っていました。

I included a sample HTML file with a very basic CRUD web app, demonstrating how I'm using token authentication at the moment. It works fine, but is it really OK (regarding security and so) to just include the authentication token in the source? Basic authentication seems like a good alternative, but then I would have to include both the username AND password in the source, which seems even worse to me?

Footnote: I know REST is better used through the HTTPS protocol for security, but I'm running this code on my development machine, obviously. I'm planning on using HTTPS in production.

Thanks in advance for any tips!

Kind regards, Kristof

{% 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 %}