Access Django Rest Framework API using Javascript - getting a Token

Question

I have an API setup using Django Rest Framework. It works fine when accessing via cURL or HTTPie or even the browsable API. The API has token authentication so initially you have to supply credentials which will return a token. Using HTTPie (or even curl) you would do this:

http POST http://127.0.0.1:8000/api/v1/api-token-auth/ username="user1" password="testpassword"

This would return a response e.g.:

HTTP/1.0 200 OK
Allow: POST, OPTIONS
Content-Type: application/json
Date: Sun, 03 Sep 2017 16:57:38 GMT
Server: WSGIServer/0.2 CPython/3.6.1
X-Frame-Options: SAMEORIGIN

{
    "token": "fgfdgfdgfdgfdgd45345345lkjlj"
}

You would then take the token and perform a GET/PUSH/etc like so:

http --json POST http://127.0.0.1:8000/api/v1/test/ test_text="Testing" 'Authorization: Token fgfdgfdgfdgfdgd45345345lkjlj'

I have been Google searching for a while now and cannot find any clear answers as to how the above two lines would translate into Javascript? How do I (1) Pass through credentials to get a token; (2) Retrieve the Token; (3) Use the token to make a GET and PUSH request?

Hi @bryan60, i am not using any particular Javascript library. I am happy to use whichever JS library gets the job done. — shaz
you cannot send data in the url, using post method. You need to pass the credentials in the form of key value pairs in the header. — Abhishek Parmar
use jQuery, its easy to use and lots of functionality provided — Abhishek Parmar
@AbhishekParmar appreciate the comment but how exactly do i do this with jquery? Syntactically, what would it look like? — shaz

Alex Alex · Accepted Answer · 2017-09-03T18:14:36

I agree you should use Ajax.

You need an ajax call in the very beginning of you app:

var data = {username:'user',password:'password'}

$.ajax({
       type: 'POST',
       data: data,
       url: 'http://your_url',
       success: function(res){
               console.log(res)
               $.ajaxSetup({
                  headers: {
                    "token": res.token
                  }
               });
       },
       error: function(error) {
           callbackErr(error,self)
       }
   })

Haven`t tested, but idea is use an Ajax call to get the token and use .ajaxSetup to save the token to a header for all following ajax requests.

The you can do this:

var data = {test_text="Testing"}
$.ajax({
           type: 'POST',
           data: data,
           url: 'http://127.0.0.1:8000/api/v1/test/',
           success: function(res){
                   console.log(res)  //answer of api call.
                   });
           },
           error: function(error) {
               callbackErr(error,self)
           }
       })

Or this:

$.ajax({
           type: 'GET',
           url: 'http://127.0.0.1:8000/api/v1/ANOTHER_TES/',
           success: function(res){
                   console.log(res)  //answer of api call.
                   });
           },
           error: function(error) {
               callbackErr(error,self)
           }
       })

Change type parameter of the call to change your request.

Access Django Rest Framework API using Javascript - getting a Token

2 Answers