hello.js

A client-side Javascript SDK
for authenticating with OAuth

Project by Andrew Dodson / @setData

Presentation by Freddy Harris / @harrisfreddy

provider sdk

Facebook

FB.getLoginStatus(function(response) {
  if (response.status === 'connected') {
    console.log('Logged in.');
  }
  else {
    FB.login();
  }
});
          

Soundcloud

SC.connect(function(){
  SC.put("/me/followings/3207", function(user, error){
    if(error){
      alert("Error: " + error.message);
    }else{
      alert("You are now following " + user.username);
    }
  });
});
          

no sdk…

hand made

buttonEl.addEventListener('click', function(e) {
  var urlGoogleAuth = 'https://accounts.google.com/o/oauth2/auth?client_id=xxxxxxxxxxxxxxxxx.apps.googleusercontent.com&redirect_uri=http://localhost:8081/heart/oauthcallback&response_type=code token id_token gsession&scope=https://www.googleapis.com/auth/plus.login&state=hello'
  window.location = urlGoogleAuth
})
          

var oauthcallback = function(){
  if(location.hash){
    var params = {},
        queryString = location.hash.substring(1),
        regex = /([^&=]+)=([^&]*)/g,
        m
    while (m = regex.exec(queryString)) {
      params[decodeURIComponent(m[1])] = decodeURIComponent(m[2])
    }

    google_auth = params
  }
}
          

var req = new XMLHttpRequest()
req.open('GET', 'https://www.googleapis.com/plus/v1/people/me/people/visible', true)
req.setRequestHeader('Authorization', 'Bearer ' + google_auth.access_token)
req.send(null)
          

oauth 2

explicit grant

Flow for a website. The access token is kept private on the backend.

implicit grant

Special flow for clients that can't keep secrets.

hello.js

modular

<script src="src/hello.js"></script>

<script src="src/modules/google.js"></script>
          

init

hello.init({
  facebook : FACEBOOK_CLIENT_ID,
  google   : GOOGLE_CLIENT_ID
},{
  redirect_uri : '/redirect'
})
          

login

buttonEl.addEventListener('click', function(e) {
  hello('facebook').login()
})
          

login options

hello('facebook').login({
  // default is 'popup'
  display: 'page',

  // default is null
  scope: 'email,publish,photos',

  // default is init value or window.location.href
  redirect_uri: '/redirect-facebook',

  // for explicit grant, default is 'token' for implicit grant 
  response_type: 'code',
  
  // default is true for initiate auth flow, despite current valid token
  force: false
})
          

on auth.login

hello.on('auth.login', function(auth){

  // call user information, for the given network
  hello( auth.network ).api( '/me' ).then( function(r){

    labelEl.innerHTML = '<img src="'+ r.thumbnail +'" /> Hey ' + r.name

  })
})
          

getAuthResponse

Get the current status of the session.

This is a synchronous request and does not validate any session cookies which may have expired.

var fbSession = hello('facebook').getAuthResponse()

var fbAccessToken = fbSession.access_token

var fbExpires = fbSession.expires
          

api

Make calls to the API for getting and posting data.

hello('facebook').api('me').then(function(json){

  alert('Your name is '+ json.name)

}, function(e){

  alert('Whoops! ' + e.error.message )

})
          

oauth proxy

adodson.com/hello.js