-
Notifications
You must be signed in to change notification settings - Fork 232
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
ng-token-auth with Ionic Framework/Cordova #90
Comments
@Liampronan - this could be an issue with Cordova and There is an undocumented config option called Exampleangular.module('myApp', ['ng-token-auth'])
.config(function($authProvider) {
$authProvider.configure({
apiUrl: 'http://api.example.com',
forceHardRedirect: true
});
}); |
@Liampronan I have the same issue. And the solution suggested by @lynndylanhurley is not helping - in the mobile app we are not allowed to make redirections. @Liampronan is probably right abut the InAppBrowser Cordova plugin. I have found another repo that enables facebook registration also for Cordova apps: https://github.com/ccoenraets/OpenFB
|
@rajaaa92 Agreed. I actually was able to get a quick, working solution using the IAB plugin and some slight workarounds. The login flow is:
This will pass the auth info to ng-token-auth and allows it to work with devise-token-auth to make authenticated requests. However, this just handles the initial login, so I will probably have to update it for re-authentication.. Any thoughts on this approach? @lynndylanhurley thank you for the suggestion! that did not work, but it's really more of an issue with cordova than this library. ng-token-auth and devise-token-auth are extremely useful and awesome! |
@Liampronan - thank you for posting this. I'm obviously not very familiar with Cordova. In your experience, is there anything that this module can do to provide better support? |
@Liampronan - I'm also working on a Cordova app (using the Ionic framework) and was hoping to use ng-token-auth (client side) and devise-token-auth (server side) but realized that i'd hit the same issues you are describing when trying to get through an oauth flow like the one required for facebook login. The approach you described sounded promising - did you end up getting it all to work? |
@RobGoretsky yes, it did! it's a bit of a non-perfect workaround, but definitely works.. https://gist.github.com/Liampronan/9ca625d33e987f0be0f8 -> link to gist to give you a better idea of the implementation. I'd really love to fork ng-token-auth with a more robust fix for cordova, but am a bit busy atm. definitely reach out with any questions -- I'm happy to help |
@Liampronan - if you send me a PR for this (with tests!) I'll merge ASAP. |
@Liampronan - Thanks for passing along this Gist, it's incredibly helpful! You mentioned that in addition to this code on the client side, you also configured the 'rails omniauth success callback to send the auth info inside the success template'. I'm guessing you mean that you overrode, within devise token auth on the server side, either app/views/devise_token_auth/omniauth_success.html.erb and/or app/views/layouts/omniauth_response.html.erb .. How did you manage to get those overridden templates to be applied without rewriting much of the controller code? Can you share a sample from that end as well? Thanks again! |
@RobGoretsky Yup, I overrode the omniauth_response.html.erb view. I just put the following code in the view in a p tag: the instance var, @auth_origin_url, is built in the devise token auth omniauth_callbacks_controller and is a url containing the token, client id, uuid, and token expiry for the user -- no controller code needs to be re-written, hooray!! (unless you want to send extra info) you can then just regex the params from that url that is included in the response. if you're feeling extra nifty, you can even hide the @auth_origin_url with css, so the user doesn't see it in the response. @lynndylanhurley added to my todo list! |
+1 |
@Liampronan - really appreciate you sharing your approach. I'm trying to do the same thing and having trouble. Was wondering if you'd be willing to help me see if I'm missing something. The following things seem to be working:
However, the window doesn't close and the signin information doesn't get passed. Some simple logging indicates that the eventListener is never firing (I have a I added the following in
I used the gist you provided with small modifications (not sure if I did the stubUrl correctly):
Really appreciate any advice you can give! @RobGoretsky - did you end up getting it to work too? |
@davidtlee - I did end up getting this to work! I was stuck around the same spot as you (seemed that the eventListener was not firing) but then I realized that the In App Browser plugin only fires that even when running within the emulator (not within the web browser on desktop).. Have you tried running this within the iOS emulator? |
Hey @RobGoretsky, thanks for the help! I gradually realized the same thing as you and did end up running it on the iOS emulator, but have been getting another strange problem. It sometimes launches the inappbrowser, but sometimes doesn't. I tried tracking it down, but sometimes it's working and then stops working after just commenting out a console.log statement.... When it's working, this is what I see in the console.log file:
When it's not working, this is what I see:
Did you ever have similar problems? When looking on stackoverflow, it seemed like there might be a problem related to XCode 6? |
I'm also having same issue. Have anyone figured out the solution? |
I was able to solve this using the InAppBrowser's executeScript. Then I handle the return from the executeScript to store the user into $auth and I then emit a successful login. The way I set it up allows my web app and my mobile app to both talk to the same OAuth endpoint. login_controller.js
login_service.js
index.html.erb
|
If you are using my fix with Ionic you can also get Ionic Serve to play nicely by only using our new service if we are on iOS
|
@krk324, I ended up not using
I haven't tried @davidpatrick's solution, so it's possible that would be a cleaner solution. |
+1 |
I'm still having problem logging in. The inapp browsers opens and the redirecting and authtoken shows up on the webpage, but the IAB doesn't close. I'm testing it on ios simulator. On the server side login success. When I close the IAB manually by clicking done button I get following error in console.log. IAB.close() called but it was already closed. |
@krk324 have you tried implementing the conditional (simulator vs. device) function shared by @davidpatrick ? If not, as an FYI, the IAB plugin doesn't work in the simulator |
Hey guys, The code that I have is very different from what you guys are doing.
The output look like this after authentication:
What should I do next? So I can tell the ng-token-auth plugin that the user is authenticated. PS: 1) facebook connection is working if I use the ng-token-auth plugin in the browser (without ngCordova).
and ngCordova says: "Facebook or Google, it is very important to use http://localhost/callback as the callback / redirect uri." |
@casertap you are on the right track if you're getting an access_token returned. The reference to using a local host callback is how ngCordova's plugin hears back from Facebook. If you're getting the FB access token, it's set up correctly. However the flow from here for a Cordova app needs a different path than is offered by ng-token currently. I'm working on a fork which will take an OAuth token (ie a Facebook access_token) and send it to the server for checking. I'll put a link here when I'm done. This would need a server-side verification however, which would also need to be added. |
@heysailor Thanks you, I follow also the other discussion where you proposed a solution to this problem. (Actually, that's me that started the discussion :-) ) I hope you will be able to PR the ng-token-auth lib soon. Thanks again. Keep up the good work. |
@casertap The ng-cordova-oauth plugin "magic", uses the same magic here, the InAppBrowser. Except the cordova plugin has wrapped specific api endpoints, and has us returning the oAuth token to a fake endpoint that the InAppBrowser intercepts. What I demonstrated here is how to build our own service and have it return the token to our server instead of a fake endpoint. |
Cross-posted from #141: @Liampronan / @davidpatrick / anyone-who-is-willing: I'd love to get Cordova OAuth support baked into this module and reduce the number of custom forks that people are requiring. Can you you provide a formal PR for me to take a look at? If so, it'll get top-priority. Same applies for devise_token_auth. FWIW, seems like most people are landing on ng-cordova-oauth as the module of choice. That seems like a reasonable optional dependency for this implementation. |
@nbrustein and I are working on a refactoring of the omniauth controller logic in order to support |
The PRs are in for ng-token-auth #188 and devise-token-auth (lynndylanhurley/devise_token_auth#323). Please try these branches out and let us know if there are any issues in implementation. Will merge soon if no major issues are found! |
I'm using this new version and all goes fine, but I'm not able to get the user details by listening to the 'auth:login-success' event on my controller in my ionic app. This is what I have in my controller: $rootScope.$on('auth:login-success', function(ev, user) { Any thoughts? |
I used it, it works, but not persist the session in the ionic application (InAppBrowser). Can you create a one app exemple to test? The log error
|
@dtelaroli did you get it to work in ionic? I have a similar issue where I see the ionic app gets the data from the InAppBrowser, but subsequent request to my api don't contain the required headers like client and access-token. I created issue #208 for it. |
@Liampronan you rock! 👍 |
For me it's working fine now.
|
@dtelaroli |
@angelxmoreno You can use like that:
|
Hey everybody, I had this figured out a few months ago and I hadn't touched my project in a while. Now I'm coming back to it and I'm getting this problem again. I have the $scope.authenticate running, and Google or Facebook approving the authentication. When the inappbrowser disappears, the app gets stuck in the same spot, with the ionicLoading animation going on. I got rid of the ionicLoading animation, and the state still remains unchanged. I'm trying to read logs from $rootScope.$on('$stateChangeError', etc...) and I'm not even getting there. I think the stateChange is frozen after the inappbrowser disappears. Here's some code that I have:
The app initiates the switch to $state.go('app.viewer.list'). I can read a console output from $rootScope.onStateChangeStart. But nothing else happens - I can't read logs from $rootScope.onStateChangeError, or $rootScope.onStateChangeSuccess, or anything from the controllers. Any ideas? or is anybody else getting this error after updating stuff again? |
Hello!
I'm using ng-token-auth + devise-token-auth for an app I'm working on, and it's working great for the browser version of my site. My auth flow uses twitter oauth. I'm attempting to use the same auth code for Ionic/Cordova on mobile, but am running into issues with the log-in flow: after hitting the omniauth callback, my app stays on the 'redirecting...' screen.
I believe the issue is with the Cordova app window and the new window that is opened by ng-token-auth. I'm thinking that a solution would be to implement ng-token-auth with the InAppBrowser Cordova plugin, but wanted to check to see if anyone has run into something similar and/or has any ideas.
Any help would be greatly appreciated!
The text was updated successfully, but these errors were encountered: