Dropbox authorization in a Windows Store app

Posted by Steve Marx on April 11, 2014

Last week, I showed how to perform Dropbox authorization in a Windows Forms app. This time, we'll do the same thing but in a Windows Store app, where we get to take advantage of the WebAuthenticationBroker.

I've written a simple function in both JavaScript and C# that performs Dropbox authorization and returns the user's access token.

JavaScript code

app.authorizeWithDropbox = function () {
    // Be sure to replace this with your app key from dropbox.com/developers/apps.
    var appKey = "<YOUR APP KEY>";

    var vault = new Windows.Security.Credentials.PasswordVault();

    // Check for previously saved credentials.
    var creds = vault.retrieveAll();
    if (creds.length > 0) {
        var cred = creds[0];
        cred.retrievePassword();
        var accessToken = cred.password;
        return WinJS.Promise.as(accessToken);
    }

    // The redirect URI you use doesn't really matter, so feel free to use something else,
    // but this is one we've set up specifically for client-side apps to use.
    var redirectUri = "https://www.dropbox.com/1/oauth2/redirect_receiver";

    return Windows.Security.Authentication.Web.WebAuthenticationBroker.authenticateAsync(
        Windows.Security.Authentication.Web.WebAuthenticationOptions.none,
        Windows.Foundation.Uri(
            "https://www.dropbox.com/1/oauth2/authorize?response_type=token&redirect_uri="
            + redirectUri + "&client_id=" + appKey),
        Windows.Foundation.Uri(redirectUri))
    .then(function (result) {
        // Parse the URL to find the user ID and access token.
        var url = new Windows.Foundation.Uri(result.responseData);
        var decoder = new Windows.Foundation.WwwFormUrlDecoder(url.fragment.substring(1));
        var uid = decoder.getFirstValueByName("uid");
        var accessToken = decoder.getFirstValueByName("access_token");

        // Save the access token so the user doesn't have to log in next time.
        vault.add(new Windows.Security.Credentials.PasswordCredential(
            "Dropbox auth sample app",
            uid,
            accessToken
        ));

        return accessToken;
    });
};

C# code

private async Task AuthorizeWithDropbox()
{
    // Be sure to replace this with your app key from dropbox.com/developers/apps.
    var appKey = "<YOUR APP KEY>";

    // Check for previously saved credentials.
    var vault = new PasswordVault();
    var existing = vault.RetrieveAll().FirstOrDefault();
    if (existing != null)
    {
        existing.RetrievePassword();
        var accessToken = existing.Password;
        return accessToken;
    }

    // The redirect URI you use doesn't really matter, so feel free to use something else,
    // but this is one we've set up specifically for client-side apps to use.
    var redirectUri = new Uri("https://www.dropbox.com/1/oauth2/redirect_receiver");

    var uri = new Uri(
        string.Format(
            @"https://www.dropbox.com/1/oauth2/authorize?response_type=token&redirect_uri={0}&client_id={1}",
            redirectUri, appKey));
    var result = await WebAuthenticationBroker.AuthenticateAsync(WebAuthenticationOptions.None, uri, redirectUri);

    // Parse the URL to find the user ID and access token.    
    var url = result.ResponseData.ToString();
    var decoder = new WwwFormUrlDecoder(new Uri(url).Fragment.Substring(1));
    var uid = decoder.GetFirstValueByName("uid");
    var accessToken = decoder.GetFirstValueByName("access_token");

    // Save the access token so the user doesn't have to log in next time.
    vault.Add(new PasswordCredential("Dropbox auth demo app", uid, accessToken));

    return accessToken;
}

I hope this helps those of you who are building Windows apps that integrate with Dropbox! If you have questions, please let us know on the developer forum.