Install Login With Dropbox On Your Website - OAuth Authentication

A simple and useful plugin uses OAuth in a jquery plugin to authenticate users on your website using their Dropbox account credentials. It pulls the user details from its Dropbox account and displays the same on your webpage and has logout facility as well.

How to use it:

1. Include the latest jQuery library and dropboxAuth.js on your web page

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="dropboxAuth.min.js"></script>

2. Markup HTML Structure

<div id="dropbox-auth-button" class="my-button-style" >&nbsp;&nbsp;&nbsp;&nbsp;loading..</div>

<!-- displaying dropbox user info-->

<div id="auth-info"> <br/>
<br/>
<b>Id: </b>
<input type="text" id="dropbox-uid" disabled/>
<br/>
<b>Email: </b>
<input type="text" id="dropbox-email" disabled/>
<br/>
<b>Name: </b>
<input type="text" id="dropbox-name" disabled/>
<br/>
<b>Country code: </b>
<input type="text" id="dropbox-countryCode" disabled/>
<br/>
<b>Total quota: </b>
<input type="text" id="dropbox-quota" disabled/>
<br/>
<b>Used quota: </b>
<input type="text" id="dropbox-usedQuota" disabled/>
<br/>
<b>Shared quota: </b>
<input type="text" id="dropbox-sharedBytes" disabled/>
<br/>
<br/>
<br/>
</div>

3. The CSS

.my-button-style {
width: 100px;
height: 20px;
margin: 0px auto;
background-image: url('./dropbox_icon.png');
background-repeat: no-repeat;
background-position: left center;
cursor: pointer;
cursor: hand;
border: 1px solid black;
padding: 1px;
line-height: 20px;
}
#auth-info {
width: 250px;
margin: 0px auto;
text-align: right;
}

4. Initialize the plugin

<script type="text/javascript">
var dropboxKey = "lSajT1cgXAA=|gElW6fAtZuQ+uMxiSlE18TjbIbZkiVeWxFhEd7zANQ==";

$(document).ready(function(){
$('#auth-info').hide();
});

function dropboxLoginSuccess(userInfo) {
//implement your custom code after successful login ----------
//displaying user info here ----------------------------------
$('#auth-info').show();
$('#dropbox-uid').val(userInfo.uid);
$('#dropbox-name').val(userInfo.name);
$('#dropbox-email').val(userInfo.email);
$('#dropbox-countryCode').val(userInfo.countryCode);
$('#dropbox-quota').val((userInfo.quota/1024/1024/1024).toFixed(5) + " GB");
$('#dropbox-usedQuota').val((userInfo.usedQuota/1024/1024/1024).toFixed(5) + " GB");
$('#dropbox-sharedBytes').val((userInfo.sharedBytes/1024/1024/1024).toFixed(5) + " GB");
}

function dropboxLogoutSuccess() {
//implement your custom code after successful logout ----------
$('#auth-info').hide();
}
</script>

About Author:

Author: Jake

Website: http://www.codehandling.com/

Project Homepage: http://www.codehandling.com/2013/02/install-login-with-dropbox-on-your.html

---

This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.