Webshell







Thibaud Arnault
Co-founder & CEO




We started at school a social network

Using more than 15 APIs

The story: humankindwall




The iNtegration


Horrible





The maintenance



Painfull



Webshell.io

Our first attempt to simplify the API integration and maintenance

A platform & an API

A shell ... for the web



We PivoteD fastly to javascript



Not "another new language"

50x faster

100x less bugs

Example



apis.facebook.auth().success(function() {
    apis.facebook.me()
})

apis.google.maps()

apis.youtube.search('bob marley')

apis.gravatar('team@webshell.io')

An API explorer

cloud IDE





Demo Time

OAUTH


OAUth



Authorization


More than 500 oauth provider

listed on programmable web


They are all different
multiple standard version, multiple implementation

To start with oauth


Create a Facebook application on developers.facebook.com
to get your client_id and client_secret

OAuth 2 protocol 


OAuth 2 protocol

2- Redirection
www.facebook.com/dialog/oauth/authorize

client_id=...
response_type=code
scope=email,read_friendlists...
state=...
redirect_uri=http://myapp.com/





3 - Authorize callback

http://myapp.com/?code=...&state=...


4 - Retrieve the access token

POST graph.facebook.com/oauth/access_token

code=...
client_id=...
client_secret=...
grant_type=authorization_code


Once you have the access token


you have to pass the access_token in each API request 


i.e.
https://graph.facebook.com/me?access_token=...

OAuth 2 flow



OAuth 1.a flow


Deezer OAuth2

1 - redirection 

client_id -> app_id=...
response_type=code [inutile]
scope -> perms=email,read_friendlists...
state=...  [non documenté]
Standard not respected


OAUTH 2 FLAWS


api.provider.com/path/action?access_token=TOKEN

api.provider.com/path/action?oauth_token=TOKEN

api.provider.com/path/action?token=TOKEN

Authorization: Bearer TOKEN

Authorization: OAuth TOKEN

OAUTH 2 flaws


scope=email%20publish
scope=email,publish
scope=email;publish
scope=email:publish
scope=email|publish

scope=read_only   or   scope=read_write

oauth 2 flaws

In the results of /access_token:

extra data (facultatif)
"user": {
                 id: "..."
                          name: "..."
           // ...
}                

extra data (requis)
"instance_url": "https://eu2.salesforce.com"

oauth 2 flaws


MailChimp

One added step:  /oauth2/metadata 

{
    "dc":"us1",
    "login_url":"https://login.mailchimp.com",
    "api_endpoint":"https://us1.api.mailchimp.com"
}

oauth 2 flaws


Custom signature

mail.ru, odnoklassniki.ru,  renren...  

sig = md5(uid + params + private_key)

oauth 2 flaws
Custom constant

Tencent weibo:

oauth_version=2.a

OAUTH 2 FLAWS


The "state" param

  • inexistent (dailymotion, eventbrite...)
  • undocumented (wordpress, deezer...)
  • impossible (angellist)

Multi providers oauth



Oauth.io


OAuth.io


 OAuth.popup('facebook', function(err, res) {
    if (err) {
        // do something with error
    }    // the access token is res.access_token !})

OAuth.io


 OAuth.popup('facebook', function(err, res) {
    if (err) {
        // do something with error
    }    res.get('/me')
       .done(function(data) {
        alert('Hello ' + data.name)
    })
})

OAuth.io


 OAuth.popup('twitter', function(err, res) {
    if (err) {
        // do something with error
    }    res.get('/1.1/account/verify_credentials.json')
       .done(function(data) {
        alert('Hello ' + data.name)
    })
})


OAUTH.IO


Android, iOS, Flex et Phonegap

Example timeline twitter




http://jsfiddle.net/thyb/kZExJ/5

Example google+




http://jsfiddle.net/thyb/JMTVz/5

OAuthd


Why ?


  • Trust
  • Contributions
  • Improve security
  • Improve bugs discovery
  • Get more providers
  • Company with strong security policy

Thanks




Question ?





thyb@oauth.io | @thibaud_arnault