Skip to content

Instantly share code, notes, and snippets.

@hannestyden

hannestyden/soundcloud_oauth2_user_agent_authentication_flow_demo.html

Created September 3, 2010 13:45
Download ZIP

Revisions

  1. hannestyden created this gist Sep 3, 2010.
    83 changes: 83 additions & 0 deletions soundcloud_oauth2_user_agent_authentication_flow_demo.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,83 @@
    <!DOCTYPE html>

    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>SoundCloud OAuth 2 User Agent Authentication Flow Demo</title>
    <script type="text/javascript" charset="utf-8" src="javascript/jquery-1.4.2.js"></script>
    <script type="text/javascript" charset="utf-8">
    $(function () {
    var extractToken = function(hash) {
    var match = hash.match(/access_token=(\w+)/);
    return !!match && match[1];
    };

    var setting =
    {
    'host': "soundcloud.com"
    , 'clientId': YOUR_CLIENT_ID
    };

    var authHost = "https://" + setting.host;
    var resourceHost = "https://api." + setting.host;

    var endUserAuthorizationEndpoint = authHost + "/connect";

    var token = extractToken(document.location.hash);
    if (token) {
    $('div.authenticated').show();

    $('span.token').text(token);

    $.ajax({
    url: resourceHost + '/me'
    , beforeSend: function (xhr) {
    xhr.setRequestHeader('Authorization', "OAuth " + token);
    xhr.setRequestHeader('Accept', "application/json");
    }
    , success: function (response) {
    var container = $('span.user');
    if (response) {
    container.text(response.username);
    } else {
    container.text("An error occurred.");
    }
    }
    });
    } else {
    $('div.authenticate').show();

    var authUrl = endUserAuthorizationEndpoint +
    "?response_type=token" +
    "&client_id=" + setting.clientId +
    "&redirect_uri=" + window.location;

    $("a.connect").attr("href", authUrl);
    }
    });
    </script>
    <style>
    .hidden {
    display: none;
    }
    </style>
    </head>

    <body>
    <div class="authenticate hidden">
    <a class="connect" href="">Connect</a>
    </div>

    <div class="authenticated hidden">
    <p>
    You are using token
    <span class="token">[no token]</span>.
    </p>

    <p>
    Your SoundCloud username is
    <span class="user">[no username]</span>.
    </p>
    </div>
    </body>
    </html>