Monday, 25 February 2013

Install login with Dropbox on your Website - OAuth Authentication - jQuery plugin


This script
- uses OAuth in a jquery plugin to authenticate users on your website using their Dropbox account credentials.
- pulls the user details from its Dropbox account and displays the same on your webpage.
- has logout facility.






How to use:

The download pack contains the plugin file dropboxAuth.min.js and the HTML file dropbox.html that I have deployed in my live demo.

1. Create your Dropbox application

Click here to navigate to the dropbox app creation page.



After you click "Create", fill up your App name and description in the popup.



Click "Create" and you will provided with an "App key" and an "App secret".



Now since its not a great idea to put these keys in your javascript directly, so we will encode them and then place it in your javacsript. Click here to navigate to the dropbox key encoder application. Copy your App key and App secret there and then get the single encoded key by clicking on the "Generate .. " button.



2. Javascript

Paste your encoded key in your javascript as shown below -


Implement the function "dropboxLoginSuccess()" in your javascript as shown -
A "userInfo" object is available as a parameter to this function that has the details of the logged in user.

userInfo.uid - Dropbox Id of the user
userInfo.name - Full name of the user
userInfo.email - Email of the user
userInfo.countryCode - Country code of the user
userInfo.quota - Total Bytes of space available to the user
userInfo.usedQuota - Total Bytes of space used by the user
userInfo.sharedBytes - Total Bytes of space shared by the user

This function is called when a user successfully logs in using his dropbox credentials!
In my sample code I have displayed all these user details in a table. You may write your own code instead.


Implement the function "dropboxLogoutSuccess()" in your javascript as shown -
This function is called when a user successfully logs out.
In my sample code I am hiding the user information table that I creaqted earlier. You may write your own code instead.


3. Include the plugin - HTML

Before your body tag ends in your HTML, include the plugin as shown -


Thats it .. Dropbox authentication installed on your website.
Thanks!

5 comments:

  1. Hi Jake, good work, once you authenticate, I tried to get the token and login ... with;

    storing the token object ...

    accesstoken = client.credentials();
    client.setCredentials(accesstoken);

    then ... unlink token (sign out) and try to represent the saved token ...

    client.reset();
    client = new Dropbox.Client(accesstoken);

    but get ... "error": "Access token is disabled.

    ;-(( I am clearly doing something wrong, any ideas ?

    ReplyDelete
  2. Fixed it ... D'oh!, I was trying to do something which is contra to the way its supposed to work ... unlink token destroys the token which is why it is disabled ... thanks again for a good work ...

    ReplyDelete
    Replies
    1. I was wondering y were you trying to reauthenticate in your code when the functionality is already there in the plugin ..

      Anyway, glad you found your prob!

      Delete
  3. In the following paragraphs we're going to speak about creating an engaging and interactive facebook page

    ReplyDelete
  4. How to Change Default Texts and logo in Allow User Authentication Popup ? If anyone tried to change the texts ? Please let me know

    ReplyDelete