Permalink
Browse files

add some styles and put api access in begin-rescue block so user goes…

… to login page if token/secret stored in session are no longer good
  • Loading branch information...
1 parent 3a2e87c commit ac13a74e81180184507daaa43aa2d205affb8498 valerie committed May 12, 2010
@@ -8,18 +8,22 @@ def index
session[:access_token_secret])
sc = Soundcloud.register({:access_token => access_token,
:site => "http://api.#{$sc_host}"})
- @me = sc.User.find_me
- @avatar_url = @me.avatar_url
- @public_tracks = []
- @private_tracks = []
- @me.tracks.each do |track|
- if track.sharing == 'private' #todo: helper method
- @private_tracks << track
- else
- @public_tracks << track
+ begin
+ @me = sc.User.find_me
+ @avatar_url = @me.avatar_url
+ @public_tracks = []
+ @private_tracks = []
+ @me.tracks.each do |track|
+ if track.sharing == 'private' #todo: helper method
+ @private_tracks << track
+ else
+ @public_tracks << track
+ end
end
+ rescue
+ # bad access token / secret ? logout and start over
+ redirect_to :action => 'logout'
end
-
else
redirect_to :action => 'login'
end
@@ -25,10 +25,10 @@ def access_token
# auth successful. save info in the session
session[:access_token] = access_token.token
session[:access_token_secret] = access_token.secret
- # redirecting to the sc-connect/close.html invokes the js callback provided
- # when the sc-connect button was wired up. any get params provided in this
- # redirect url will be packaged as a query_obj and passed to the callback
- redirect_to "/sc-connect/close.html?username=#{CGI::escape(me.username)}"
+ # Redirecting to sc-connect-compete.html closes the popup window and
+ # invokes your js callback. Params appended to this url will be passed to
+ # the callback.
+ redirect_to "/sc-connect-complete.html?username=#{CGI::escape(me.username)}"
end
end
@@ -4,3 +4,4 @@ def logout_path
"/home/logout"
end
end
+
@@ -1,5 +1,15 @@
-<img src=<%= @avatar_url %>>
+<img class="profile-pic" src=<%= @avatar_url %>>
+
+<div class="profile-text">
+ <center>You are connected as <b><%= @me.username %></b></center>
+ <%= link_to "logout",
+ {:controller => "home", :action => "logout"},
+ {:id => "sc-disconnect"}
+ %>
+</div>
+
+<div style="clear:both;" />
<div id="public_tracks" class="tracks">
You have <%= @public_tracks.size %> public tracks.
@@ -23,4 +33,3 @@
</ul>
</div>
-
@@ -1,34 +1,24 @@
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
- <script src="/sc-connect/sc-connect.js"></script>
+ <script src="http://connect.soundcloud.com/base.js"></script>
<script>
- // wire up sc-connect button
- $(document).ready(function() {
- var options = {
- 'request_token_endpoint': '/oauth/request_token',
- 'access_token_endpoint': '/oauth/access_token',
- 'callback': function(query_obj) {
- window.location.reload();
- }
- };
- SC.Connect.prepareButton($('#sc-connect')[0], options);
- });
+ SC.Connect.options = {
+ 'request_token_endpoint': '/oauth/request_token',
+ 'access_token_endpoint': '/oauth/access_token',
+ 'callback': function(params) {
+ window.location.reload();
+ }
+ };
</script>
</head>
<body>
<p>
- Connect with Soundcloud.
- <a href="#"
- style="border: 0;
- background: transparent url('/sc-connect/sc-connect.png') top left no-repeat;
- display: block;
- text-indent: -9999px;
- width: 280px; height: 44px;
- margin-bottom: 10px;"
- id="sc-connect">
- Connect with SoundCloud
+ <a id="sc-connect"
+ href="#"
+ onclick="SC.Connect.initiate();">
</a>
</p>
</body>
</html>
+
@@ -5,25 +5,15 @@
<head>
<title>SoundBoard Redux - <%= controller.action_name %></title>
<%= stylesheet_link_tag 'base' %>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<div id="sitewrapper">
- <div id="header">
- <h1>SoundBoard Redux</h1>
- </div>
- <% if @me %>
- <div>
- You are connected as <%= @me.username %>
- <%= link_to "logout", logout_path %>
- </div>
- <% end %>
+ <h1>SoundBoard Redux</h1>
+ <div id="description">
+ Soundboard is a demo app for showing how Connect with SoundCloud works.
+ </div>
<div id="content">
- <% if flash[:notice] -%>
- <div id="notice"><%= flash[:notice] %></div>
- <% end -%>
- <% if flash[:error] -%>
- <div id="error"><%= flash[:error] %></div>
- <% end -%>
<%= yield :layout %>
</div>
<div id="footer">
@@ -32,3 +22,4 @@
</div>
</body>
</html>
+
View
@@ -48,4 +48,5 @@
consumer_secret = '58XuHMx11yomPZnMw6vbseJNGpiRe0KUnFyTCcigY'
$sc_host = 'sandbox-soundcloud.com'
$sc_consumer = Soundcloud.consumer(consumer_token, consumer_secret, "http://api.#{$sc_host}")
+
end
@@ -5,8 +5,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Connect with SoundCloud</title>
- <!--<script src="http://connect.soundcloud.com/base.js"></script>--> <!-- FIXME-->
- <script src="/javascripts/sc-base-deleteme.js"></script>
+ <script src="http://connect.soundcloud.com/base.js"></script>
</head>
<body onload="SC.Connect.onComplete();"></body>
Binary file not shown.
@@ -1,81 +0,0 @@
-h1. Connect with SoundCloud
-
-h2. Introduction
-
-Connect with SoundCloud is our approach to make it as easy as possible for you to integrate SoundCloud via OAuth into your Webapp.
-We provide all the frontend stuff and a simple specification for the backend OAuth endpoints you need to implement.
-
-h2. OAuth
-
-OAuth is an open protocol to allow secure API authorization in a simple and standard method from desktop and web applications.
-For more information check http://www.oauth.org
-
-h2. Workflow
-
-You include a Connect with SoundCloud button somewhere in your webpage.
-Once a user clicks this a popup appears with the SoundCloud login dialog, allowing the user to login or even sign up for a new SoundCloud account on-the-fly and then giving your webapp the permission to access his account information and act on his behalf. Once thats done the popup closes and the user returns to your webapp. Your webapp can then use the OAuth access token to access the SoundCloud API and get for example the users private tracks.
-
-h2. Usecases
-
-h3. Optional SoundCloud account
-
-Your existing users have the option to connect their accounts to SoundCloud to get some additional features of your webapp.
-
-h3. Mandatory SoundCloud account
-
-When users sign up to your webapp they have to connect to SoundCloud to finish the sign up process, so it's almost guaranteed that each of your users has a connected SoundCloud account, but be aware of the fact that users can revoke the access priviledge for your webapp on SoundCloud. In case the user does not have a SoundCloud account, he can easily create one during the OAuth authorization flow.
-
-h3. Loggin into your app with the SoundCloud account
-
-You can also let your users always login with their SoundCloud accounts each time they visit your webapp. By doing this you don't have to take care about user managment (avatar, user meta-data, forgot password, friendships etc.).
-
-h2. Backend
-
-You need to implement 2 endpoints:
-
-h3. Request token endpoint:
-
- * get a request token from SoundCloud
- * store the request token key and secret in a session variable
- * add a "display=popup" request parameter to the SoundCloud authorize URL and redirect to it.
-
-h3. Access token endpoint:
-
- * check if the request token passed in the request parameters matches the one stored in the session variable
- * exchange the request token+secret for an access token+secret
- * store the access_token + secret in your database
- * redirect to /sc-connect/close.html, all query parameters will be passed to the javascript callback as an object.
- For example you could add a username as parameter to display it in the origin page via the javascript callback
- or add a reference id of the stored OAuth token.
-
-h2. Frontend
-
- Include the javascript stuff and the button somewhere in your webapp
- Javascript:
-
-<pre><script src="/sc-connect/sc-connect.js"></script> </pre>
-<pre>var options = {
- 'request_token_endpoint': '/oauth/request_token',
- 'access_token_endpoint': '/oauth/access_token',
- 'callback': function(query_obj){}
- };
- SC.Connect.prepareButton($('#sc-connect')[0],options);</pre>
-
- In the options object you can specify the URL of the backend endpoints you implemented and a callback function which will be executed after the authorization was successful. This callback will receive an object containing the query parameters you passed to /sc-connect/close.html.
- I.E if the access token endpoint redirects to /sc-connect/close.html?username=joe&oauth_token_id=43
- the callback would get the following object:
-<pre>{
- 'username': 'joe',
-'oauth_token_id': '43'
-}</pre>
- Button code:
-<pre><a href="#" style="border: 0; background: transparent url('/sc-connect/sc-connect.png') top left no-repeat;display: block;
- text-indent: -9999px; width: 242px; height: 31px; margin-bottom: 10px;" id="sc-connect">Connect with SoundCloud</a></pre>
-
-h2. Examples
-
- Check out our example webapps if you need some inspiration:
- Ruby on Rails: YYY
- PHP: XXXX
-
-
@@ -1,18 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
- "http://www.w3.org/TR/html4/strict.dtd">
-
-<html lang="en">
-<head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>SoundCloud Connect</title>
- <script src="sc-connect.js"></script>
- <script>
-
- window.addEventListener('load',function(){
-
- window.opener.SC.Connect.callback(SC.QueryToObject(document.URL));
- },true);
- </script>
-</head>
-<body></body>
-</html>
@@ -1,33 +0,0 @@
-var SC = {
- 'Connect': {
- 'prepareButton': function(link,options){
- SC.Connect.wrapped_callback = options.callback;
- var click_callback = function(){
- SC.Connect.popup_window = window.open(options.request_token_endpoint,"sc_connect_popup","location=1, width=456, height=500,toolbar=no,scrollbars=yes");
- return false;
- };
-
-
- if(link.attachEvent){
- link.attachEvent('onclick', click_callback);
- }else{
- link.addEventListener('click', click_callback, false);
- }
- },
- 'callback': function(query_obj){
- SC.Connect.popup_window.close();
- SC.Connect.wrapped_callback(query_obj);
- }
- },
- 'QueryToObject': function(query) {
- var obj = {};
- var splitted_url =document.URL.split("?");
- var query = splitted_url[1] ? splitted_url[1] : "";
- var vars = query.split("&");
- for (var i=0;i<vars.length;i++) {
- var pair = vars[i].split("=");
- obj[pair[0]] = decodeURIComponent(pair[1]);
- }
- return(obj);
- }
-};
Deleted file not rendered
@@ -1,4 +1,30 @@
-
+#description {
+ background-color: #FFFFCC;
+ border: solid thin #FFCC99;
+ margin-bottom: 10px;
+ padding: 10px 5px 10px 20px;
+}
+
+.float-pkg {
+ height: 1%;
+}
+
+#footer {
+ font-size: small;
+}
+
+.profile-pic, .profile-text {
+ display: block;
+ float: left;
+ margin-bottom: 20px;
+ padding: 5px;
+}
+
+.profile-text {
+ padding-top: 20px;
+ width: 250px;
+}
+
#sc-connect, #sc-disconnect {
border: 0;
display: block;
@@ -16,3 +42,13 @@
background: transparent url('http://connect.soundcloud.com/disconnect-button.png') top left no-repeat;
}
+#sitewrapper {
+ margin: auto;
+ padding: 0;
+ width: 800px;
+}
+
+.tracks {
+ padding-top: 20px;
+}
+

0 comments on commit ac13a74

Please sign in to comment.