Making my own service...?

edited March 2012 in Enyo 2
I am making a twitter app, and therefore need to access OAuth. When I try and make my own enyo.Service, Chrome has a fit.. I have tried including it in many places, but can't figure out where to put it. Is enyo.Service still supported? Chrome keeps saying "no constructor found for kind "Oauth" I can paste the code as-needed (as this is a simple question of how to create services, I didn't think I needed to post the code.)
Thanks guys

Comments

  • enyo.Service is a webOS-only feature in enyo 1.0. You shouild be able to do oAuth without that kind though. Try using Ajax.
  • edited March 2012
    Hmm.. Ok.. Here is my Ajax request that I'm using... I'm still kinda new to Ajax/HTTP requests, so it might not be formatted properly :) And I can't figure out how to set the source of the iFrame to point to the url..
    enyo.kind({
    	name: "App",
    	classes: "onyx",
    	components: [
    	 	/*{ name: "OAuth1", kind: "OAuth" },
            { name: "webService1", kind: enyo.Ajax,
                onSuccess: "webService1AccessSuccess",
                onFailure: "webService1Failure",
                components: [
                    {
                        method: "GET",
                        handleAs: "json",
                        contentType: "application/x-www-form-urlencoded"
                    }
                ]
            },*/
    
    		{kind: "onyx.Toolbar", content: "Welcome to My App!", classes: "toolbar-top text"},
    		{kind: "onyx.Popup", classes: "iframe-popup login", centered: true, name: "loginPopup", modal: true, floating: true, style: "height: 75%; width: 75%", components: [
                {tag: "iframe", name: "oAuth_webView", src: "", classes: "enyo-fill", style: "height: 100%; width: 100%;"}
            ]},
    		{kind: "onyx.Toolbar", classes: "toolbar-bottom", components: [
    			{kind: "onyx.Button", classes: "toolbar-bottom button", content: "Login", onclick: "login"},
    			],
    		},	
    	],
    login: function() {
    		var url = "http://palm.com/";
    		this.$.oAuth_webView.setSrc(url);
            this.$.loginPopup.show();
            enyo.log(url)
        },	
    /*webService1AccessSuccess: function(inSender, inResponse, inRequest)
        {
            enyo.log(inResponse);
            
          var token = this.$.OAuth1.decodeForm(inResponse);
          var oauth_token = token[0][1];
          var oauth_token_secret = token[1][1];
          this.accessor = { oauthToken: oauth_token, consumerSecret: this.access.consumerSecret, tokenSecret: oauth_token_secret};
    
          enyo.log(this.accessor);
          enyo.setCookie("AuthTokens", enyo.json.stringify(this.accessor));
        },
    
    webService1PostSuccess: function(inSender, inResponse, inRequest)
        {
            enyo.log(inResponse);
        },
    
    webService1Failure: function(inSender, inResponse, inRequest)
        {
            enyo.log(inResponse);
            enyo.log(inRequest);
            enyo.log(inRequest.xhr.status);
        },
    
    loginToTwitter: function(username, password){
            this.access = {};
            this.access = {
                consumerKey: ,
                consumerSecret: ,
                requestTokenURL: "https://api.twitter.com/oauth/access_token"
            };
            
            this.accessor = {consumerSecret: this.access.consumerSecret, tokenSecret: ""};
            
            this.par = {};
            this.par = {
    
                oauth_signature: "",
                oauth_nonce: "",
                oauth_signature_method: "HMAC-SHA1",
                oauth_consumer_key: this.access.consumerKey,
                oauth_timestamp: "",
                oauth_version: "1.0",
                x_auth_mode: "client_auth",
                x_auth_password: password,
                x_auth_username: username
            };
            this.message = {action: this.access.requestTokenURL, method: "POST", parameters: [] };
            this.message.parameters = this.par;
    
            this.message = this.$.OAuth1.setTimestampAndNonce(this.message);
            this.message = this.$.OAuth1.sign(this.message, this.accessor);
            this.message.action = this.$.OAuth1.addToURL(this.message.action, this.message.parameters);
            
            this.$.webService1.setUrl(this.message.action);
            this.$.webService1.setMethod(this.message.method);
            this.$.webService1.setHeaders({Authorization: "OAuth"});
            this.$.webService1.call();
            var oAuthUrl = this.message.action;
            this.$.oAuth_webView.setSrc(oAuthUrl);
        },
    
    post2: function(username, password){
            this.access = {};
            this.access = {
                  consumerKey: ,
                consumerSecret: ,
                requestTokenURL: "http://api.twitter.com/1/statuses/update.json"
            };
    
            var cookieContents = enyo.getCookie("AuthTokens");
            this.accessor = enyo.json.parse(cookieContents);
    
            this.par = {};
            this.par = {
                oauth_signature: "",
                oauth_nonce: "",
                oauth_signature_method: "HMAC-SHA1",
                oauth_consumer_key: this.access.consumerKey,
                oauth_token: this.accessor.oauthToken,
                oauth_timestamp: "",
                oauth_version: "1.0",
                status: "TestStatus"
            };
            this.message = {action: this.access.requestTokenURL, method: "POST", parameters: [] };
            this.message.parameters = this.par;
    
            this.message = this.$.OAuth1.setTimestampAndNonce(this.message);
            this.message = this.$.OAuth1.sign(this.message, this.accessor);
            this.message.action = this.$.OAuth1.addToURL(this.message.action, this.message.parameters);
            
            this.$.webService1.setUrl(this.message.action);
            this.$.webService1.setMethod(this.message.method);
            this.$.webService1.setHeaders({Authorization: "OAuth"});
            this.$.webService1.call({},{onSuccess: "webService1PostSuccess"});
        } */
    });
    
    EDIT: I found out that http://google.com does not like to be put into an iFrame.. But now it says Uncaught TypeError: Cannot call method 'setSrc' of undefined on the line that I call setSrc
  • enyo.AJax isn't a component, it's just an object. You'd create it when needed instead of adding it to your components list.
  • edited March 2012
    You're treating the iframe as if it is a webOS webview. Unless you want to wrap it with similar functionality in another kind, you'll have to manipulate the iframe object directly. Try:

    var n = this.$.oAuth_webView.hasNode(); if(n) { n.src = myUrl }

    (not tested - may need some tweaking).
  • edited March 2012
    var n = this.$.oAuth_webView.hasNode(); if(n) { n.src = myUrl }
    That worked perfectly! Now.. It's complaining about some oAuth specific stuff.. this.message = this.$.OAuth1.setTimestampAndNonce(this.message); to be exact.. I have done some minor googling, but this seems like it would need some kind of oAuth kind that it could pull the setTimestampAndNonce from.. Or is that just a regular thing in Javascript?

    EDIT: I still need to make my own services somehow, as the oAuth Service that I had initially and tried to make has the setTimestampAndNonce see line 250 http://pastebin.com/mwq60axL (it is 809 lines, thought I would save some space on the forum :) )
  • That oAuth kind isn't dependent on webOS Services so why can't you use it?
  • edited March 2012
    I keep getting errors saying that "Cannot find blah in Constructor.js" and stuff like that. I ended up including the service inside of the app.js file itself. Trying to get it to work. I found the service kind on the forums over at developer.palm.com, but there were quite a few mistakes in them that I saw. Trying to fix them

    EDIT: It looks like I have it mostly done. The only thing is, the iFrame complanes that the link isn't meant to be put in an iFrame. I get the error Refused to display document because display forbidden by X-Frame-Options.
  • If you're not putting together your own library, and this one doesn't work, you should think about trying a different library. A non-enyo library that works will be better than an enyo one that doesn't.

    The iframe error is probably because you're running it in Chrome (I think?) and it is violating the same-origin policy somehow.
  • I was running it in Chrome. I think I'm gonna look for another Library for oAuth and JS to use for this. One that has a tutorial attached preferably :)
    Thanks for the help guys.
  • edited March 2012
    The enyo 1.0 OAuth kind (in the palm developer forums) should work if you change it from a Service kind to a Control kind. This should allow you to use the code above.

    Also the code below is based on Palm foundations code but it should be very similar to new Ajax object now:
    var libraries = MojoLoader.require({ name: "foundations", version: "1.0" });
    var Future = libraries["foundations"].Control.Future;
    var AjaxCall = libraries["foundations"].Comms.AjaxCall;
    
    var options = { "customRequest":"DELETE", "headers" : "{Authorization : 'OAuth'}" };
    var body = JSON.stringify(message.parameters);
    var future1 = AjaxCall.post(message.action, body, options);
    console.log(message.action, options);
    future1.then(function(future)
    {
      if (future.result.status == 200) // 200 = Success 
          { Mojo.Log.info('Ajax get success ' + JSON.stringify(future.result));
          }
      else  {Mojo.Log.info('Ajax get fail' + JSON.stringify(future.result));}
    });
    
    try {
            var req = new XMLHttpRequest();
            //The connection parameters, including PUT method
            message.action = OAuth.addToURL(message.action, message.parameters);  // for enyo this.$.OAuth1....
            req.open("DELETE", message.action, true);   
            req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            req.setRequestHeader('Authorization', PTheader);
            req.send();
            req.onreadystatechange = function() {
    	 console.log(req.responseText);
    	     };
            //Mojo.Log.error('response:' + req.status);
            //req = null;
        } 
        catch (e) {
            Mojo.Log.error('error:' + e);
        }
    
  • i just made an app that need OAuth, and i used this :
    https://github.com/bytespider/jsOAuth/

    Works great for me, just had to drop it in.
  • i just made an app that need OAuth, and i used this :
    https://github.com/bytespider/jsOAuth/

    Works great for me, just had to drop it in.
    Thanks. I'll look into it. Was your app Enyo/Enyo2.0/Mojo?
  • enyo 1, made the app for the touchpad (just submitted it tonight)
  • edited March 2012
    For instance the Ajax call would probably look like this:
    return new enyo.Ajax({url: this.message.action, headers: {'Authorization': 'OAuth'}, contentType:  'application/x-www-form-urlencoded',  method: "GET" )
    			.response(this, "processResponse")
    			.go(this.message.parameters);  // or maybe enyo.json.stringify(this.message.parameters)
    
  • Thanks guys. I'm gonna look into it all.. @chrisvanhooser whats the app do?
  • @PatrickC The app is a popup app that displays your tumblr.com dashboard.
    Tumblr API OAuth login is the same as twitter's (tumblr's help page even directs you to twitters), so i do know that library will work. You may have to tweak it here and there but it should pretty much work out of the box.
Sign In or Register to comment.