Sunday, 29 June 2014

Eventbrite Login and Queries using JS and OAuth

Hey guys, this is my first ever blog post and it's a short tutorial on how to connect your website to Eventbrite and it makes use of the OAuth2 protocol.

I assume that you have a basic idea about web development and I hope that this does not sound too technical to the new developers (if any)!

First, include jquery and the eventbrite js code, eventbrite code can be found at https://raw.github.com/ryanjarvinen/Eventbrite.jquery.js/master/Eventbrite.jquery.js .

Next, using the correct app_key, the key listed in your http://www.eventbrite.com/myaccount/apps/ use this code to login.
<script type="text/javascript">
  $('document').ready(function(){
    // Your API_Key's redirect_uri must be configured correctly at: http://eventbrite.com/api/key
    // Set your API_Key on the line below:
    Eventbrite.prototype.widget.login({'app_key': 'YOUR_API_KEY'}, function(widget_html){
      // Place the resulting Eventbrite login widget code somewhere on your page.
      // This example places the content into an element marked with class="eb_login_box"
      $('.eb_login_box').html(widget_html);
    });
  });
</script>

This code fills the element with class eb_login_box with an eventbrite button to connect to eventbrite.

Make sure that you have the right redirect uri else, it won't work and the callback will not happen properly.

You can look at a working example at http://amoghbl1.kd.io/eventbrite.html

Now, once you've got the access_token after authentication, you can initialize the client using
Eventbrite({'access_token': "USER_ACCESS_TOKEN"}, function(eb_client)
{ //eb_client interaction goes here...
});

After that, you can get the users events by using -
eb_client.user_list_events ( {}, function( response ){
    $( '#target' ).html( eb_client.utils.eventList( response, eb_client.utils.eventListRow ));
});

USEFUL LINKS:
https://github.com/ryanjarvinen/Eventbrite.jquery.js/blob/master/OAUTH2-README.md
https://github.com/ryanjarvinen/Eventbrite.jquery.js (Look at the readme to find all the required api calls and stuff like that!)

Hope this helps!

1 comment:

  1. Such long long posts. Your englees is stupendus sir

    ReplyDelete