Django phonegap CORS

[Florian Auer]

Hello

I'm am stuck in a problem dealing with an CORS request from a phonegap app to an django application.

What I have so far is the following:
- a regular django web project
- a phonegap app build on angularJS for some settings.

• The idea is, that users can use the app to store relevant server informations like host, port, etc.
• The app requests a token from the django project that identifies the user and uses it for further page loads.
• Via a link or other redirect the app calls the django site and log in the user

At the moment i can call the django site by using the app but the user has to log in manally.
This has to be automated.

Therefore i added the "REST Framework" and "JWT auth" to the django project.

a curl call to the project results in a correct JWT token.

curl -X POST -d "username=djangoadmin&password=secret" http://192.168.1.183:8080/api-token-auth/

Well the question is now how to implement this call in the app due the CORS situation.

I tried some examples like

• http://www.html5rocks.com/en/tutorials/cors/
• http://jamesbrewer.io/2014/10/31/json-web-token-authentication-part-two/

but all failed :)

another try was:

var params = "username=" + user + "&password=" + passwd;
           
var xhr = Utils.createCORSRequest('GET', '192.168.1.183:8080/api-token-auth/');
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.setRequestHeader("Content-length", params.length);
xhr.onload = function () {
   console.log(this.responseText);
};
xhr.send(params);

So far i would say my knowledge for the CORS situation via JQuery is a bit too low.

Maybe someone has an idea how to request the token inside the app and later on use it to call the django site and make an auto login.

Any help welcome :)

[Filipe Ximenes]

Not 100% sure I understood your question, but it seems that you are trying to overcome the CORS only from the frontend side when you should be treating it from the Django side. 

Could you take a look on this package:

https://github.com/ottoyiu/django-cors-headers

If it suits your needs, a good idea is to have your API endpoints beginning with something like "/api/{whatever you want}" and set:

CORS_ORIGIN_ALLOW_ALL = True

CORS_URLS_REGEX = r'^/api/.*$' 

--

Filipe Ximenes +55 (81) 8245-9204 Vinta Software Studio http://www.vinta.com.br

[Florian Auer]

Thank you for your reply Filipe

The question behind was:
How to implement a cross domain communication between a phonegap App and a django web project

You're right I forgot the django site for the server-side headers in my mind.
I'll give it a try with the plugin and test how far i come with it.

Thanx again.

[Florian Auer]

Thanks to Filipe, the asynchronous request to django is working correctly.
A request to the endpoint url results in a JSON response with the token in it.

But now I have another gap in my "logic".

Inside this angular app the django site is requested via a call like this, to takeover control from the app.

var ref = window.open(url, '_self', 'location=yes');
    ref.addEventListener('exit', function(event) {
    alert(event.type);
});

The question is, how can I make a call the restricted view on the django site with the token included, to log in the user.
Would it be a possibility to add the token as GET argument to the url?

too many trees in this forest :)

[Filipe Ximenes]

You should not be using window.open() to perform requests in Angular. Instead, use Angular $http service for this:

https://docs.angularjs.org/api/ng/service/$http

With $http you'll be able to send requests with parameters, headers and any configuration you need.

--
You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-users...@googlegroups.com.
To post to this group, send email to django...@googlegroups.com.
Visit this group at http://groups.google.com/group/django-users.
To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/00ca9fea-316e-405b-95ba-3bc554a0274d%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Florian Auer]

Hello Filipe

Thank you for the reply.
Well the $http object was till now unknown for me.. there we can see how poor my AngularJS knowledge is till now.

But as far as i understood the documentation i am not able to bring up a browser window by this that takes over the control of the app.


The idea behind all is the following, maybe i did not describe it well.

The App is only thought a a "startUp wrapper" with stored credentials in form of a login token.
That token is claimed in a first asynchronous request with user credentials asked for interactively.
Later on when the token is known, the app only sets the headers an calls the django web page where the user gets logged in due the header automatically.

At the moment I was using the JWT (http://getblimp.github.io/django-rest-framework-jwt/) to claim a token. But i do not know how to use this to let the user been logged in with the call of a browser window.
Maybe I need tho turn over to TokenBasedAuthentification like described in (http://www.django-rest-framework.org/api-guide/authentication/#tokenauthentication)?
But then I will still have the same problem... How to bring the token into the headers and thenn call a page from the server rendered inside the browser in UI mode (not in the app as sub page)

My idea was, that an phonegap app is nothing more than a browser rendered app.
When I can create a request to a server to claim an Auth Token and be able to set this into the headers, the next Ui request to the server (launching another browser window by window.open()) will let me call directly to a restricted view.

[Filipe Ximenes]

Alright, I think I got what you want now.

The first solution that comes to mind is to perform everything in the browser. That way, you will first perform "window.open()" and then show a "login view" from django server.

I don't have any experience with Phonegap, but it seems that this can also help you:

http://docs.phonegap.com/en/edge/cordova_inappbrowser_inappbrowser.md.html#addEventListener

Maybe if you attach a "loadstart" event to the browser and save user credentials to "localStorage" or a cookie, using the method described here:

http://blogs.telerik.com/appbuilder/posts/13-12-23/cross-window-communication-with-cordova's-inappbrowser

Since everything will be working in a common browser application (not a single page application, or phonegap app), I'd suggest you to work with default Django cookie session and not with a token based authentication. This will be simpler since once you set the cookie, the browser will take care off passing it over page requests and you will not need to make customisations to your Django views regarding authentication.

--
You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-users...@googlegroups.com.
To post to this group, send email to django...@googlegroups.com.
Visit this group at http://groups.google.com/group/django-users.

To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/db6f6050-b1b9-4ea4-9729-94a3184c5e82%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Filipe Ximenes]

Hey, I wrote a blog post about CORS and Django with more details about the subject:

http://www.vinta.com.br/blog/2015/django-cors.html

=)

[Florian Auer]

Hello Filipe

The idea with the inAppBrowser was great.
I allready was using this plugin but not that way....

Solution for me looks like the following:
1. I'm still using djangorestframework-jwt in the first to check the user credentials
   - token given from server = credentials OK
   - no token in response = wrong credentials
2. launch the inApp browser in "hidden mode" for the login screen and inject the credentials by script
3. use callbacvk from injection to turn inApp browser in "visible mode"

Many Thanx for our help

[Filipe Ximenes]

Awesome, sounds good!

To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/164005fc-c287-4e8e-bff1-563be5fe0492%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.