Results 1 to 5 of 5

Thread: Django 1.3 Login with ExtJS 4 and CSRF

  1. #1
    Sencha User
    Join Date
    Apr 2011
    Posts
    1

    Question Django 1.3 Login with ExtJS 4 and CSRF

    The following code works fine in Django 1.2 and ExtJS 3.x. but adapting to ExtJS 4 + Django 1.3 give an eternal CSRF error. I cant pass the csrf_token via POST to django login / auth procedure.
    Some idea ?? Thanks.

    ==================================================================
    {% extends 'base.html' %}

    {% block js %}

    function get_csrf_token(token) {
    return token.slice(81,113);
    }

    Ext.onReady( function() {

    var loginForm = new Ext.FormPanel({
    url: '.',
    frame: true,
    standardSubmit: true,
    items: [{
    xtype: 'textfield',
    fieldLabel: '{{ form.username.label }}',
    name: '{{ form.username.name }}',
    },{
    xtype: 'textfield',
    inputType: 'password',
    fieldLabel: '{{ form.password.label }}',
    name: '{{ form.password.name }}'
    },{
    xtype: 'hidden',
    value: '',
    name: 'csrfmiddlewaretoken',
    id: 'token',
    }],
    buttons: [{
    text: 'Ok',
    handler: function() {
    loginForm.getForm().submit({
    method:'POST',
    waitTitle:'Connecting',
    waitMsg:'Sending data...',
    success: function(f,a) {
    Ext.Msg.alert('Success', 'It worked');
    },
    failure: function(f,a) {
    Ext.Msg.alert('Warning', 'Error');
    }
    });

    }
    }]
    });

    var win = new Ext.Window({
    title:'Login',
    modal: false,
    closable: false,
    resizable: false,
    layout: 'form',
    width: 300,
    height: 130,
    items: loginForm,
    }).show();

    var nav = new Ext.KeyNav(loginForm.getForm().getEl(), {
    'enter': function(e) {
    this.getForm().submit();
    },
    scope: loginForm,
    });


    win.add(loginForm);
    win.show();

    {% if form.errors %}
    Ext.Msg.alert('Error','<span style="color:red">Usurio ou senha incorretos.</span>');
    {% endif %}

    $("#token").val( get_csrf_token("{% csrf_token %}") );
    });

    {% endblock %}

    {% block main %}

    {% endblock %}
    ==================================================================

  2. #2
    Ext JS Premium Member
    Join Date
    Jan 2008
    Location
    Virginia
    Posts
    34

    Default

    I would like to know this too.

  3. #3
    Sencha User
    Join Date
    May 2011
    Posts
    1

    Default

    Code below adds csrf token to every Ajax request (in headers), so you don't have to add csrf token to every request manually. Just put this code on the top of your application's code.
    Code:
    Ext.require(["Ext.util.Cookies", "Ext.Ajax"], function(){
        // Add csrf token to every ajax request
        var token = Ext.util.Cookies.get('csrftoken');
        if(!token){
            Ext.Error.raise("Missing csrftoken cookie");
        } else {
            Ext.Ajax.defaultHeaders = Ext.apply(Ext.Ajax.defaultHeaders || {}, {
                'X-CSRFToken': token
            });
        }
    });
    Also note about this ticket: https://code.djangoproject.com/ticket/15354 because it may bite you.

  4. #4

    Default hm, help?

    Tried that code snippet...I put it at the top of my launch function like so:
    Code:
    new Ext.Application({
    launch: function() {
    Ext.require(....);
    }
    });
    But consistently get:
    Code:
    Uncaught TypeError: Object #<Object> has no method 'require'.
    I assume I'm missing something obvious--version mismatch, maybe?

  5. #5
    Sencha User
    Join Date
    Sep 2008
    Posts
    7

    Default

    Easiest way is to put the CSRF token into a hidden field on the form with the correct field name. Please note that your value property on your hidden field has no value!

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •