I have a web site implemented with Java, JSF and Tomcat.
When users log in, as long as they maintain the same jsessionid cookie they will keep logged in, using the same java session.
Now, I’d like to build a mobile hybrid app with a login splash screen, a simple side menu and an iframe where I will load my real site URL. So I just started experimenting Ionic.
After the user logs in using Ionic app, I’d like that the user to be logged in inside the iframe as well. So when the user logs in, I go to the server with an $http POST request, validate his username, and send back a
set-cookie header with a cookie.
Debugging in chrome network monitor I can see the
set-cookie in response header all right. But the subsequent iframe requests do not have the cookie in the request headers… I already tried to use
$httpProvider.defaults.withCredentials = true; with no success.
Should I do anything else?
While I’m not familiar with using an iFrame, so I’m not 100% sure if this will work, what I do in one of my apps is this:
First, I setup an auth interceptor factory (‘authInterceptorFactory’). This factory can add any additional data to all requests made from the app. (*Note: If you need some help with this authInterceptorFactory, let me know)
Then in the app config code (app.config), I do
Then my flow looks like this:
- User logs in
- Server logs them in and generates a cookie
- Serer sends back the response with the cookie
- I grab this cookie and save it using ngCookies
- Then in my authInterceptorFactory, what I do is check if there is a token cookie
If there is a token, I attach that to the request headers, so the request is made with the token cookie.
When the user logs out, I also delete the token cookie.
Also, with this approach, the user only needs to login once, since we can save the token and when the app initializes, we can check if there is a token saved to log them in right away.
I hope that helps you solve this problem. If not, please don’t hesitate to ask any questions.
Hello Danny, thanks for the help!
Regarding your step 4, am I getting it right that your server is sending the desired cookie inside the response payload? I was trying to access
Set-Cookie from the response headers but I’m beginning to believe that won’t be possible.
So our servers and apps are going to be structured differently, but in my case, when a user logs in, on my server, I first validate the credentials(correct username + password), then I use JWT (JSON Web Token) to create a signed token, which I send back to my application.
My application then grabs this token via req.data.token, and I save that with ngCookies.
Then, I’m able to pass back this token on future requests using the method I outlined above.
A further benefit of using this JWT approach is I can decide how long this token is valid for. Also, I can save that token and whenever a user launches the app, I’m able to check if a token exists and if so, I can check if its valid. If it’s valid, then I’m able to login the user automatically.
While this may not be the most secure way to go about doing this since technically someone could try to intercept requests from my app, steal a token and then use that token to login as another user, I feel the chances of that happening (especially with such a small user base and no “sensitive” data), it works really well for me.
Let me know if you need any more help.