Problems with implementing oauth

mfvas commented 8 years ago

Hi

I'm completely new to app-development, but started recently to play around with PhoneGap. I'm trying to get authentication to work through Instagram with the oauth PhoneGap plugin, but nothing happens when I press the assigned button - the paragraph changes though. I'm trying it in the PhoneGap Developer emulator. I've also tried in a browser, where I get the following erros:

ReferenceError: module is not defined module.exports = { oauth.js (line 76, col 1)

ReferenceError: OAuth is not defined OAuth.initialize('utIjrESXUntpPfz5t2tg_3pzODM'); app.js (line 26, col 2)

Here is my code:

<!DOCTYPE html> 
<html>
<head>
  <title>X</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
  <link rel="stylesheet" href="lib/jquery.mobile-1.4.5.min.css" />
  <link rel="stylesheet" type="text/css" href="css/index.css" />
</head>

<body>
<div data-role="page" id="pageone" class="pagewrapper">
    <div data-role="panel" id="rightpanel" data-position="right">
        <p>hej</p>
    </div>
    <div data-role="panel" id="leftpanel" data-position="left">
        <p>hej</p>
    </div>
    <div data-role='header' id="header" data-id='pheader' data-position='fixed' data-transition='none'>
            <span id="right-menu-toggle"><a href="#rightpanel"><img src="img/menu-toggle.png" width="25px" height="25px"/></a></span>
            <span id="left-menu-toggle"><a href="#leftpanel"><img src="img/settings-toggle.png" width="25px" height="25px"/></a></span>
    </div>
    <div role="main" class="ui-content">
        <button type="bytton" onclick="oAuthfct()">Instagram!</button>
        <p id="test">hej</p>
    </div>
</div>

<script src="cordova.js"></script>
<script src="../plugins/com.oauthio.plugins.oauthio/www/oauth.js"></script> 
<script src="lib/jquery-2.1.1.min.js"></script>
<script src="js/app.js"></script>
<script src="lib/jquery.mobile-1.4.5.min.js"></script>
</body>
</html>

function oAuthfct() {
    document.getElementById("test").innerHTML = "Paragraph changed!";
    OAuth.initialize('utIjrESXUntpPfz5t2tg_3pzODM');
    OAuth.popup('instagram', function(error, success){
  // See the result below
});
}

angelxmoreno commented 8 years ago

I am getting the issue. Could it be that the plugin no longer works?

angelxmoreno commented 8 years ago

Been playing/debugging this for a few days now. A few things I learned along the way:

you are including the oauth lib in your HTML. You do not need to do this.
the lib is not visible on web or emulators. Only on devices does the lib seem to work
The lib is using a really old version of the oauth js sdk. The user management modules do not exist in this lib.

I created a function that checks if the app is running in a browser or a device. When in a browser, I inject the web version of oauth.io. My current issue is that the web version and phonegap versions are not the same. I will report back once I get this working 100%

mfvas commented 8 years ago

Sounds promising. Good work!

bumpmann commented 8 years ago

I m not sure yet for phonegap (moreover it seems okay on cordova), but I just released the v0.5.0 to match the latest version of oauth js sdk so you can use the user management.

oauth-io / oauth-phonegap

Problems with implementing oauth #64