Is there a Oauth Autentication with jQuery example?

Shopify Partner
91 0 2

I want to make an app with jQuery, javascript and html, and I wonder if there is an example of how to get the app authenticated with lets say just a read scope off read the shop name? 
Thanks a lot.
  

0 Likes
Highlighted
Shopify Staff
Shopify Staff
582 0 45

You can't make admin API requests via client side JavaScript. That will violate the cross-domain policy and can also result in private data leakage.

If you want to work with customer facing aspects you can use the AJAX API which has support for JSONP so you can make cross-domain requests.

0 Likes
Shopify Partner
91 0 2

Hi Chris, Thanks.
Ok, then ajax it is, is there any ajax examples out there?
Anybody who have build an app with ajax that would be kind to share to a beginner?

I just want an example where I get the promision to read for example the shop name and to modify -insert some script tags in the theme.liquid file and to be able to add a .js file to the assets off the shop.

Since the autentication is the first thing you need to do to get going with your app building I don´t understand why there isn´t any simple examples of how it is done? So that beginner like me could understand how it all works in an easy way. I can´t be the first - or last who have some difficulties on how to get started with apps!?

Thanks a lot.

0 Likes
Shopify Expert
3939 16 328

If you want to make an App using Javascript, you have choices. A small list to start with would be:

  • Node.JS offers plenty of options to make an App
  • Batman.JS from Shopify offers a nice CoffeeScript option for making an App
  • Ember, Sencha, Backbone etc. all offer enough very complete App environments

As a beginner you have your work cut out for you learning that list!

Note that jQuery is pretty much useless for making an App by itself as it is nothing more than convenience methods wrapping the ugly old DOM in prettier dresses. 

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
0 Likes
Shopify Partner
91 0 2

Hi HunkyBill and thanks.
I want to build an app where I insert some script tags in the theme.liquid file, add a javascript file to the assets folder and then the shop owner has to upload 5 images to their assets folder, that´s it. Simple but very useful for most shop owners.
Couldn´t I use the ajax api for that?

I guess I have to look into Node.js, Batman.js to see what I can do.

Thanks.

 

0 Likes
Shopify Expert
9780 86 1531

Couldn´t I use the ajax api for that?

Don't confuse the Shopify API for the Ajax API.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Shopify Expert
3939 16 328

@Claes. Simple is the way to go. Luckily for you there are tens of thousands of programmers who have already done what you're trying to do, namely use oAuth and an API to get work done. Try Github for inspiration and you'll likely be able to copy and paste a nearly working App pattern that'll work for Shopify too. All the best!

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
0 Likes
Shopify Partner
91 0 2

HunkyBill
Ok, thanks.
Just some more questions so I understand how it works.
I´m suppose to have all the app pages on my server, right? Not as part of my shop?
I create the page with the authentication on my server.
In the app settings, I see the callback URL to set, but where do I link to my authentication page, my "start" page?
Do I have one page with the authentication and then one where the actual code is, or do I have it all in one page?
All in one I guess.
And the preferences page what is that, in my app they don´t have to set any preferences.
Thanks.

0 Likes
Shopify Partner
91 0 2

HunkyBill
I have set the app link to my server and at that address I have created a page with this code trying to authenticate.
 

<!DOCTYPE html>
<head>
<script type='text/javascript' src='http://www.manmade.se/shopify/addtohomescreen/jquery.1.7.2.min.js'></script>;
<script type="text/javascript">

$(document).ready(function() {                         
var url = 'https://manmade-shop.myshopify.com/admin/oauth/access_token';;    
var data = JSON.stringify({ client_id: 'xxxxx', client_secret: 'xxxxxx', scope: 'read_products' });

$.ajax({
    type: 'GET',
    url: url,
    data: data,
    success: function(data) {
        alert("ok");
        //debugger;
    },
    error: function(data) {
        alert("not ok");
       // debugger;
    }
});
});
</script>
</head>
<body>
Hello World!
</body>
</html>

And I get the error alert to display, but I cant see what´s wrong? 
If I go to https://manmade-shop.myshopify.com/admin/oauth/access_token in the browser I get "The page you're looking for can't be found."?
This is really frustrating, I managed to build a Facebook app with that api, but this is getting me confused!
Thanks a lot!

0 Likes
Shopify Partner
91 0 2

HunkyBill
You seams like a real Guru with all your posts here at the forum.
Could I maybe hire you for some email help?
With some help from you I would be up and running in no time :-)
Thanks.

0 Likes