OAuth and Oracle JET

By Geertjan-Oracle on Jul 22, 2016

OAuth is an open protocol to allow secure authorization in a simple and standard method from web, mobile, and desktop applications. Oracle JET includes OAuth and there is documentation for the combination in the Oracle JET Developer Guide, in a chapter named Using oj.OAuth in Your Oracle JET Application.

In your "define" block, you need to include "ojs/ojmodel", since that's where the OAuth class is provided. The OAuth class provides the methods you can use to initialize the oj.OAuth object, verify initialization, and calculate the authorization header based on client credentials or access token.

Once you have included "ojs/model", you initialize "oj.OAuth", as described in the chapter, e.g.:self.myOAuth = new oj.OAuth('X-Authorization');

When you use the Oracle JET Common Model, you'll find the "oj.Collection.extend" enables you to reference your "oj.OAuth" object. Also see the related JavaScript documentation:

http://www.oracle.com/webfolder/technetwork/jet/jsdocs/oj.OAuth.html

Here's all the code for a real "define" block that includes OAuth for working with Twitter. Take note of the bits in bold below, which are the statements relating to OAuth:

define(['ojs/ojcore', 
        'knockout', 
        'jquery', 
        'ojs/ojmodel', 
        'ojs/ojtable', 
        'ojs/ojcollectiontabledatasource'],
    function (oj, ko, $) {
        function HeaderViewModel() {
            var self = this;
            self.TweetCol = ko.observable();
            self.datasource = ko.observable();
            self.serviceURL = 'https://api.jublo.net/codebird/1.1/search/tweets.json';
            self.myOAuth = new oj.OAuth('X-Authorization');
            self.parseTweet = function (response) {
                return {
                    id_str: response['id_str'],
                    text: response['text'],
                    userName: response['user']['name']
                };
            };
            var Tweet = oj.Model.extend({
                urlRoot: self.serviceURL,
                parse: self.parseTweet,
                idAttribute: 'id_str'
            });
            var myTweet = new Tweet();
            var TweetCollection = oj.Collection.extend({
                url: self.serviceURL + '?q=NetBeans',
                model: myTweet,
                oauth: self.myOAuth
            });
            self.getData = function () {
                self.datasource(null);
                self.TweetCol(new TweetCollection());
                self.myOAuth.setAccessTokenRequest(
                    JSON.parse(sessionStorage.getItem('credentials'))
                );
                self.TweetCol().fetch({
                    success: function () {
                        self.datasource(
                            new oj.CollectionTableDataSource(self.TweetCol())
                        );
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        console.log('Error in fetch: ' + textStatus);
                    }
                });
            };
        }
        return new HeaderViewModel();
    }
);

In "main.js", the "credentials.js" file is loaded:

var prop;
$.ajax({
    url: 'js/credentials.json',
    dataType: 'json',
    async: false,
    success: function (data) {
        sessionStorage.setItem('credentials', JSON.stringify(data));
    },
    error: function (req, status, err) {
        console.log('something went wrong', status, err);
    }
});

The "credentials.js" file has this content:

{
    "client_id": "blabla",
    "client_secret": "blabla",
    "bearer_url": "https://api.jublo.net/codebird/oauth2/token",
    "access_token": "blabla"
}

Above, Codebird is used. Codebird is a library that is commonly used to manage OAuth2 connections to Twitter. And, instead of setting up your own code, you can use Codebird's proxy service.

In the "define" block above, notice the "self.getData" at the end, which ties everything together, and is called from the view:

That's it. A complete sample scenario that uses OAuth with Oracle JET.