This is a guide to get started using JSO.
Please report to the issue tracker if you discover errors in the documentation or the software.
If you want to use JSO together with Phonegap to support OAuth 2.0 in a hybrid web application, you may want to read the
Preferrably you may obtain JSO using bower.io.
bower install jso --save
Alternatively, you may obtain the source from github by downloading or cloning the source.
Currently, JSO is not available through any CDN.
Once you got JSO locally, you'll need to load the library in your web application.
<script type="text/javascript" src="bower_components/jso/build/jso.js"></script>
If you use requirejs, you may load the library like this:
define(function(require, exports, module) {
var JSO = require("bower/jso/build/jso");
...
});
If you would like to fork the library, modify or contribute to development, you must use should use AMD loading, and refer to the src/jso
version, like this:
var JSO = require("bower/jso/src/jso");
To start using JSO, you need to initialize a new JSO object with configuration for an OAuth 2.0 Provider:
var jso = new JSO({
providerID: "google",
client_id: "541950296471.apps.googleusercontent.com",
redirect_uri: "http://bridge.uninett.no/jso/index.html",
authorization: "https://accounts.google.com/o/oauth2/auth",
scopes: { request: ["https://www.googleapis.com/auth/userinfo.profile"]}
});
Here are more options to JSO:
providerID
: OPTIONAL This is just a name tag that is used to prefix data stored in the browser. It can be anything you'd like :)client_id
: The client idenfier of your client that is trusted by the provider. As JSO uses the implicit grant flow, there is now use for a client secret.redirect_uri
: OPTIONAL (may be needed by the provider). The URI that the user will be redirected back to when completed. This should be the same URL that the page is presented on.presenttoken
: OPTIONAL How to present the token with the protected calls. Values can beqs
(in query string) orheader
(default; in authorization header).default_lifetime
: OPTIONAL Seconds with default lifetime of an access token. If set tofalse
, it means permanent.permanent_scope
: A scope that indicates that the lifetime of the access token is infinite. (not yet tested.)isDefault
: Some OAuth providers does not support thestate
parameter. When this parameter is missing, the consumer does not which provider that is sending the access_token. If you only provide one provider config, or set isDefault totrue
for one of them, the consumer will assume this is the provider that sent the token.scope
: For providers that does not supportstate
: If state was not provided, and default provider contains a scope parameter we assume this is the one requested... Set this as the same list of scopes that you provide toensure_tokens
.scopes.request
: Control what scopes are requested in the authorization request.debug
: If debug is set to true, verbose logging will make it easier to debug problems with JSO.
On the page (usually the same) that the user is sent back to after authorization, typically the redirect_uri
endpoint, you would need to call the callback
-function on JSO to tell it to check for response parameters:
jso.callback();
Be aware to run the callback()
function early, and before you router and before you start using the jso object to fetch data.
The simplest way to get data, is to use the .ajax()
function that wraps the jQuery .ajax()
familiar to many.
In order to use this wrapper, you need to point JSO to your jQuery object:
JSO.enablejQuery($);
Note that you need to call this on the JSO
object, and not on your jso
instance.
Now, you may start fetching data:
jso.ajax({
url: "https://www.googleapis.com/oauth2/v1/userinfo",
oauth: {
scopes: {
request: ["https://www.googleapis.com/auth/userinfo.email"],
require: ["https://www.googleapis.com/auth/userinfo.email"]
}
},
dataType: 'json',
success: function(data) {
console.log("Response (google):");
console.log(data);
$(".loader-hideOnLoad").hide();
}
});
The oauth
option property merges (and overrides) with the configuration of the jso
object.
You may avoid using jQuery, and handle the access token all by your self. To get an token, use the getToken
function:
jso.getToken(function(token) {
console.log("I got the token: ", token);
}, opts);
You may also ensure that a token is available early in your application, to force all user interaction and redirection to happen before your application is fully loaded. To do that make a call to getToken, and wait for the callback before you continue.
You may wipe all stored tokens, in order to simulate a logout experience:
jso.wipeTokens();