Oauth.io plugin

Hi guys,

Has anyone had any luck getting the oauth.io plugin working with an Ionic project? I do a straight cordova plugin add https://github.com/oauth-io/oauth-phonegap

When I build and deploy to device I get a class not found. It seems to work under ripple. Looks to me like a plugin definition error. I tried adding that plugin manually, but not much luck. Any pointers?

Minimum steps to recreate:
ionic start oauthtest
cd oauthtest
ionic platform add android
cordova plugin add https://github.com/oauth-io/oauth-phonegap

ionic run android --device

Tabs app starts up, instant Class not found. I’m digging around the xml files looking for a clue, a missing definition or something of that nature.

Were you able to get this working? I didn’t get a class not found error, however I could not get the popup method to display a login screen if I used it as a normal Angular service.

I didn’t get it working. I think there is a structural difference between using the Ionic tools and the cordova ones. The example Cordova app works with oauth.io, but the Ionic version does not. It would be great to get it working but I punted it after tearing my hair out a while. :smile:

There is and I am not real clear on what it is but I just started digging into the code this morning, what are you using for auth instead?

Hi, any luck with this one ?

And as battlecow asked, what did you use instead?

They recently updated the oauth.io plugin for cordova and I was able to get that working properly now.

Hi, so there is hope :smile:

How did you go about? Is there anything you need to configure to get it to work or is it just to follow the steps?
I’ve tried a couple of times now but getting stuck on OAuth being undefined in my controller.

Any tips would be much appreciated !

As with most things Angular, I broke it out into separate services etc… so my security service deals with the user auth in this gist: https://gist.github.com/battlecow/8ccdd4501932b2b723ac while I dynamically create and return the OAuth library based on whether the device is a phone or regular web browser in this gist: https://gist.github.com/battlecow/8e54e8985d214eaa7a3f
Then just install the plugin as you install any plugin and you should be able to get the /me to return your user info. If you need any other help let me know.

EDIT my original second gist link broke, I corrected it with a new one.

1 Like

Hi there,

I just tried for several hours to get the OAuth plugin working in my Ionic app. I am using cordova version 3.5.0 and installed the plugin via plugin install ... etc.
I googled for several hours and could not find the root of my problem.
Even if try to bypass angular by just inserting this code into one of my js files, included after the cordova.js of course, it still says
Uncaught ReferenceError: OAuth is not defined.
I also removed and added my android platform several times now.

My simplest Code until now:

document.addEventListener( "deviceready", onDeviceReady );
function onDeviceReady( event ) {
  console.log("DEVICEREADY");

  console.log("plugin:");
  console.log(OAuth);
    OAuth.initialize("XXXXXXXXXXXXXXXXXXXXX");

}

can anyone point me into the right direction? Should I try someting else to see if the plugin works with ionic / cordova?
Any help is appreciated. I would be pulling my hair out, if I had some left…

Have a look at my second gist, I just corrected it to be a valid gist. I was having an issue on the timing of loading the oauth lib so I am using $q.when and also referencing the global window object (I need to change that to $window actually) to ensure it is loaded by making it a promise. Let me know if that helps out or if you have any other questions.

@battlecow how i can use you two gist, you can post any example?

Thanks

@Norwill Here’s a quick plunker of my code, you will have to put in your public key for oauth service. It isn’t quite working right now either, the popup shows up but the result never comes through so I would take the plunkr example and run it on your dev box. – http://plnkr.co/edit/HV8vex4dyAWLJBwfI5xh?p=preview

Thanks @battlecow i go to test this one.

i’m trying and dont works.

This code never execute.

        var initializeScript = function () {
        
        if (window.OAuth) {
            return $q.when(window.OAuth);
        };
        var script = 'oauth.min.js';
        if (isMobile()) {
            script = 'oauth.js';
        };
        var d = $q.defer();

        function onScriptLoad() {
            $rootScope.$apply(function () {
                window.OAuth.initialize(_pubKey);
                d.resolve(window.OAuth);
            });
        };

        var scriptTag = $document[0].createElement('script');
        scriptTag.type = 'text/javascript';
        scriptTag.async = true;
        scriptTag.src = script;
        scriptTag.onreadystatechange = function () {
            if (this.readyState == 'complete')
                onScriptLoad();
        };

        scriptTag.onload = onScriptLoad;

        var s = $document[0].getElementsByTagName('body')[0];
        s.appendChild(scriptTag);
        return d.promise;
    };

Any idea?

@battlecow Your code looks very similar to all of the ng-cordova wrappers. https://github.com/driftyco/ng-cordova/tree/master/src/plugins I wonder if that’s the way to go for integrating this plugin.

@fantapop I think wrapping most of these external things is the Angular way to go, this way you can test and inject them as needed.

@Norwill Not sure why you’re code isnt executing? I just updated my plnkr to use a real oauth.io key and a facebook app. The app apparently isn’t setup correctly for logins on the facebook side of things, and it’s getting late here, but you can see that it loads a popup window as it should. Make sure you are allowing your domains on the plnkr side and oauth.io on the facebook side.

@battlecow The application on facebook and Oauth is configured OK, and when i test the code of aouth in the browser works perfectly but your code doesn’t work on the browser or device (iPhone 4S).

I test your code on another app scratch and show a message like this:
Cannot find hostname in http:/// static
code InvalidHeader
message Cannot find hostname in http:/// static.

@Norwill Yea that would be the issue where your phone app is pulling in the web version of the js sdk for oauth. In my example on line 7 of the oauth.js file, I comment out my check for mobile vs desktop and just return false. Try uncommenting that section and removing the return false line.

The app on browser work pretty good.

But on device throw a error here _oauth.popup on security.js line 26

Here the oauthio testing repo to dowloand and configure the ionic app, if you want i can send to you the xCode project to test.

Here the log

[Log] undefined (console-via-logger.js, line 173)
[Error] Error: ‘undefined’ is not an object (evaluating ‘result.get’)
file:///Users/norwillgutierrez/Library/Application%20Support/iPhone%20Simulator/7.1/Applications/837752DD-E341-463F-B29A-2F3EC4A1B072/TestOauth.app/www/js/security.js:35:25
popup@file:///Users/norwillgutierrez/Library/Application%20Support/iPhone%20Simulator/7.1/Applications/837752DD-E341-463F-B29A-2F3EC4A1B072/TestOauth.app/www/plugins/com.phonegap.plugins.oauthio/www/dist/oauth.js:184:30
file:///Users/norwillgutierrez/Library/Application%20Support/iPhone%20Simulator/7.1/Applications/837752DD-E341-463F-B29A-2F3EC4A1B072/TestOauth.app/www/js/security.js:26:29
wrappedCallback@file:///Users/norwillgutierrez/Library/Application%20Support/iPhone%20Simulator/7.1/Applications/837752DD-E341-463F-B29A-2F3EC4A1B072/TestOauth.app/www/lib/ionic/js/ionic.bundle.js:20439:81
wrappedCallback@file:///Users/norwillgutierrez/Library/Application%20Support/iPhone%20Simulator/7.1/Applications/837752DD-E341-463F-B29A-2F3EC4A1B072/TestOauth.app/www/lib/ionic/js/ionic.bundle.js:20439:81
file:///Users/norwillgutierrez/Library/Application%20Support/iPhone%20Simulator/7.1/Applications/837752DD-E341-463F-B29A-2F3EC4A1B072/TestOauth.app/www/lib/ionic/js/ionic.bundle.js:20525:34
$eval@file:///Users/norwillgutierrez/Library/Application%20Support/iPhone%20Simulator/7.1/Applications/837752DD-E341-463F-B29A-2F3EC4A1B072/TestOauth.app/www/lib/ionic/js/ionic.bundle.js:21549:28
$digest@file:///Users/norwillgutierrez/Library/Application%20Support/iPhone%20Simulator/7.1/Applications/837752DD-E341-463F-B29A-2F3EC4A1B072/TestOauth.app/www/lib/ionic/js/ionic.bundle.js:21361:36
$apply@file:///Users/norwillgutierrez/Library/Application%20Support/iPhone%20Simulator/7.1/Applications/837752DD-E341-463F-B29A-2F3EC4A1B072/TestOauth.app/www/lib/ionic/js/ionic.bundle.js:21653:31
file:///Users/norwillgutierrez/Library/Application%20Support/iPhone%20Simulator/7.1/Applications/837752DD-E341-463F-B29A-2F3EC4A1B072/TestOauth.app/www/lib/ionic/js/ionic.bundle.js:42908:19
file:///Users/norwillgutierrez/Library/Application%20Support/iPhone%20Simulator/7.1/Applications/837752DD-E341-463F-B29A-2F3EC4A1B072/TestOauth.app/www/lib/ionic/js/ionic.bundle.js:11841:14
forEach@[native code]
forEach@file:///Users/norwillgutierrez/Library/Application%20Support/iPhone%20Simulator/7.1/Applications/837752DD-E341-463F-B29A-2F3EC4A1B072/TestOauth.app/www/lib/ionic/js/ionic.bundle.js:9351:18
eventHandler@file:///Users/norwillgutierrez/Library/Application%20Support/iPhone%20Simulator/7.1/Applications/837752DD-E341-463F-B29A-2F3EC4A1B072/TestOauth.app/www/lib/ionic/js/ionic.bundle.js:11840:12
dispatchEvent@[native code]
triggerMouseEvent@file:///Users/norwillgutierrez/Library/Application%20Support/iPhone%20Simulator/7.1/Applications/837752DD-E341-463F-B29A-2F3EC4A1B072/TestOauth.app/www/lib/ionic/js/ionic.bundle.js:2740:20
tapClick@file:///Users/norwillgutierrez/Library/Application%20Support/iPhone%20Simulator/7.1/Applications/837752DD-E341-463F-B29A-2F3EC4A1B072/TestOauth.app/www/lib/ionic/js/ionic.bundle.js:2729:20
tapTouchEnd@file:///Users/norwillgutierrez/Library/Application%20Support/iPhone%20Simulator/7.1/Applications/837752DD-E341-463F-B29A-2F3EC4A1B072/TestOauth.app/www/lib/ionic/js/ionic.bundle.js:2847:13
(anonymous function) (ionic.bundle.js, line 18930)
(anonymous function) (ionic.bundle.js, line 16277)
wrappedCallback (ionic.bundle.js, line 20442)
wrappedCallback (ionic.bundle.js, line 20439)
(anonymous function) (ionic.bundle.js, line 20525)
$eval (ionic.bundle.js, line 21549)
$digest (ionic.bundle.js, line 21361)
$apply (ionic.bundle.js, line 21653)
(anonymous function) (ionic.bundle.js, line 42908)
(anonymous function) (ionic.bundle.js, line 11841)
forEach
forEach (ionic.bundle.js, line 9351)
eventHandler (ionic.bundle.js, line 11840)
dispatchEvent
triggerMouseEvent (ionic.bundle.js, line 2740)
tapClick (ionic.bundle.js, line 2729)
tapTouchEnd (ionic.bundle.js, line 2847)
[Log] undefined (console-via-logger.js, line 173)
[Error] Error: ‘undefined’ is not an object (evaluating ‘result.get’)
file:///Users/norwillgutierrez/Library/Application%20Support/iPhone%20Simulator/7.1/Applications/837752DD-E341-463F-B29A-2F3EC4A1B072/TestOauth.app/www/js/security.js:35:25
popup@file:///Users/norwillgutierrez/Library/Application%20Support/iPhone%20Simulator/7.1/Applications/837752DD-E341-463F-B29A-2F3EC4A1B072/TestOauth.app/www/plugins/com.phonegap.plugins.oauthio/www/dist/oauth.js:184:30
file:///Users/norwillgutierrez/Library/Application%20Support/iPhone%20Simulator/7.1/Applications/837752DD-E341-463F-B29A-2F3EC4A1B072/TestOauth.app/www/js/security.js:26:29
wrappedCallback@file:///Users/norwillgutierrez/Library/Application%20Support/iPhone%20Simulator/7.1/Applications/837752DD-E341-463F-B29A-2F3EC4A1B072/TestOauth.app/www/lib/ionic/js/ionic.bundle.js:20439:81
wrappedCallback@file:///Users/norwillgutierrez/Library/Application%20Support/iPhone%20Simulator/7.1/Applications/837752DD-E341-463F-B29A-2F3EC4A1B072/TestOauth.app/www/lib/ionic/js/ionic.bundle.js:20439:81
file:///Users/norwillgutierrez/Library/Application%20Support/iPhone%20Simulator/7.1/Applications/837752DD-E341-463F-B29A-2F3EC4A1B072/TestOauth.app/www/lib/ionic/js/ionic.bundle.js:20525:34
$eval@file:///Users/norwillgutierrez/Library/Application%20Support/iPhone%20Simulator/7.1/Applications/837752DD-E341-463F-B29A-2F3EC4A1B072/TestOauth.app/www/lib/ionic/js/ionic.bundle.js:21549:28
$digest@file:///Users/norwillgutierrez/Library/Application%20Support/iPhone%20Simulator/7.1/Applications/837752DD-E341-463F-B29A-2F3EC4A1B072/TestOauth.app/www/lib/ionic/js/ionic.bundle.js:21361:36
$apply@file:///Users/norwillgutierrez/Library/Application%20Support/iPhone%20Simulator/7.1/Applications/837752DD-E341-463F-B29A-2F3EC4A1B072/TestOauth.app/www/lib/ionic/js/ionic.bundle.js:21653:31
file:///Users/norwillgutierrez/Library/Application%20Support/iPhone%20Simulator/7.1/Applications/837752DD-E341-463F-B29A-2F3EC4A1B072/TestOauth.app/www/lib/ionic/js/ionic.bundle.js:42908:19
file:///Users/norwillgutierrez/Library/Application%20Support/iPhone%20Simulator/7.1/Applications/837752DD-E341-463F-B29A-2F3EC4A1B072/TestOauth.app/www/lib/ionic/js/ionic.bundle.js:11841:14
forEach@[native code]
forEach@file:///Users/norwillgutierrez/Library/Application%20Support/iPhone%20Simulator/7.1/Applications/837752DD-E341-463F-B29A-2F3EC4A1B072/TestOauth.app/www/lib/ionic/js/ionic.bundle.js:9351:18
eventHandler@file:///Users/norwillgutierrez/Library/Application%20Support/iPhone%20Simulator/7.1/Applications/837752DD-E341-463F-B29A-2F3EC4A1B072/TestOauth.app/www/lib/ionic/js/ionic.bundle.js:11840:12
dispatchEvent@[native code]
triggerMouseEvent@file:///Users/norwillgutierrez/Library/Application%20Support/iPhone%20Simulator/7.1/Applications/837752DD-E341-463F-B29A-2F3EC4A1B072/TestOauth.app/www/lib/ionic/js/ionic.bundle.js:2740:20
tapClick@file:///Users/norwillgutierrez/Library/Application%20Support/iPhone%20Simulator/7.1/Applications/837752DD-E341-463F-B29A-2F3EC4A1B072/TestOauth.app/www/lib/ionic/js/ionic.bundle.js:2729:20
tapTouchEnd@file:///Users/norwillgutierrez/Library/Application%20Support/iPhone%20Simulator/7.1/Applications/837752DD-E341-463F-B29A-2F3EC4A1B072/TestOauth.app/www/lib/ionic/js/ionic.bundle.js:2847:13
(anonymous function) (ionic.bundle.js, line 18930)
(anonymous function) (ionic.bundle.js, line 16277)
wrappedCallback (ionic.bundle.js, line 20442)
wrappedCallback (ionic.bundle.js, line 20439)
(anonymous function) (ionic.bundle.js, line 20525)
$eval (ionic.bundle.js, line 21549)
$digest (ionic.bundle.js, line 21361)
$apply (ionic.bundle.js, line 21653)
(anonymous function) (ionic.bundle.js, line 42908)
(anonymous function) (ionic.bundle.js, line 11841)
forEach
forEach (ionic.bundle.js, line 9351)
eventHandler (ionic.bundle.js, line 11840)
dispatchEvent
triggerMouseEvent (ionic.bundle.js, line 2740)
tapClick (ionic.bundle.js, line 2729)
tapTouchEnd (ionic.bundle.js, line 2847)

@Norwill Add console.log(error); to line 34 in the security.js file. So the entire named function should read as follows:

var startFBLogin = function() {
          var deferred = $q.defer();
          OAuth.service().then(function(_oauth) {
            _oauth.popup('facebook',
                    {
                      cache: false
                    },
            function(error, result) {
              if (error) {
                deferred.reject(error);
              }
              console.log(error);
              result.get("/me").done(function(res) {
                deferred.resolve(res);
              });
            });
          });
          return deferred.promise;
        }

I have a feeling that you will get an error output at that point and that should give you the answer.