oAuth in JS
Daniel Kopka @danielkopka
We talk about JavaScript. Each month in Warsaw, Poland.
Daniel Kopka @danielkopka
OAuth is an open protocol to allow secure authorization in a simple and standard method from web, mobile, and desktop applications.
request token.request token, associating it with their account.request token for an access token.access token allows the client to access a protected resource at the provider, on behalf of the user.access_token.access token.access token allows the client to access a protected resource at the provider.
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/pl_PL/sdk.js#xfbml=1&
appId=1234567&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
}
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
window.fbAsyncInit = function() {
FB.init({
appId : '{your-app-id}',
cookie : true,
xfbml : true,
version : 'v2.1'
});
FB.getLoginStatus(statusChangeCallback);
};
<fb:login-button
scope="public_profile,email"
onlogin="checkLoginState();">
</fb:login-button>
<script src="./dist/hello.all.js">
hello.init({
facebook : FACEBOOK_CLIENT_ID,
windows : WINDOWS_CLIENT_ID,
google : GOOGLE_CLIENT_ID
},{redirect_uri:'redirect.html'});
hello.on('auth.login', function(auth){
hello( auth.network ).api( '/me' ).then( function(r){
label.innerHTML = 'Hey ' + r.name;
});
});
<button
onclick="hello( 'facebook' ).login()">
Facebook
</button>
<script src="path/to/oauth.js"></script>
<script>
OAuth.initialize('your_app_key');
</script>
OAuth.popup('provider')
.done(function (result) {
// Perform API calls
})
.fail(function (error) {
// Handle errors
});