Skip to content

API Authorization for PUT, POST, and PATCH requests #40

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
erinspace wants to merge 3 commits into
base: master
Choose a base branch
from
Open

API Authorization for PUT, POST, and PATCH requests #40

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
700d5c8
Revert "Temporarily disable try-it-out for non-GET endpoints. (#29)"
erinspace Feb 22, 2017
4cedbd2
Merge things
erinspace Feb 22, 2017
56adf64
Add API token header auth for interactive use of the API!
erinspace Feb 23, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 42 additions & 0 deletions src/main/html/css/api-explorer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2474,3 +2474,45 @@ body {
padding-top: 10px;
color: lightblue;
}

.auth-container {
margin: 20px 20px 20px;
}

.auth_input {
margin-top: 6px;
padding-top: 6px;
padding-bottom: 7px;
padding-left: 12px;
font-family: inherit;

}

.token-indicator {
font-size: smaller;
margin-top: 5px;
font-style: italic;
font-family: inherit;
}

.osf-token-info {
font-size: smaller;
margin-top: 5px;
font-style: italic;
font-family: inherit;
}

.try-hide {
font-family: inherit;
font-size: inherit;
font-color: inherit;
}

.put-post-patch-info {
background-color: #d9edf7;
}

#clear-token-link {
padding-left: 57px;
cursor: pointer;
}
18 changes: 0 additions & 18 deletions src/main/html/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,31 +108,13 @@
});
}

// addApiKeyAuthorization();
},
onFailure: function (data) {
log("Unable to Load SwaggerUI");
},
docExpansion: "none",
sorter: "alpha"
});

// function addApiKeyAuthorization() {
// var key = encodeURIComponent($('#input_apiKey')[0].value);
// if (key && key.trim() != "") {
// var apiKeyAuth = new SwaggerClient.ApiKeyAuthorization("Authorization", "Bearer " + key, "header");
// window.swaggerUi.api.clientAuthorizations.add("key", apiKeyAuth);
// log("added key " + key);
// }
// }

// $('#input_apiKey').change(addApiKeyAuthorization);
// if you have an apiKey you would like to pre-populate on the page for demonstration purposes...
/*
var apiKey = "myApiKeyXXXX123456789";
$('#input_apiKey').val(apiKey);
*/

window.swaggerUi.load();

function log() {
Expand Down
10 changes: 9 additions & 1 deletion src/main/javascript/helpers/handlebars.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,12 @@ Handlebars.registerHelper('sanitize', function(html) {
// Strip the script tags from the html, and return it as a Handlebars.SafeString
html = html.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');
return new Handlebars.SafeString(html);
});
});

Handlebars.registerHelper('notequal', function(value1, value2, options) {
if (value1 == value2) {
return options.inverse(this);
} else {
return options.fn(this);
}
});
38 changes: 27 additions & 11 deletions src/main/javascript/view/ApiKeyButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@ SwaggerUi.Views.ApiKeyButton = Backbone.View.extend({ // TODO: append this to gl

events:{
'click #apikey_button' : 'toggleApiKeyContainer',
'click #apply_api_key' : 'applyApiKey'
'click #apply_api_key' : 'applyApiKey',
'click #clear-token-link': 'removeApiKey'
},

initialize: function(opts){
Expand All @@ -15,30 +16,36 @@ SwaggerUi.Views.ApiKeyButton = Backbone.View.extend({ // TODO: append this to gl
render: function(){
var template = this.template();
$(this.el).html(template(this.model));

return this;
},


applyApiKey: function(){
var keyAuth = new SwaggerClient.ApiKeyAuthorization(
this.model.name,
$('#input_apiKey_entry').val(),
this.model.in
);
this.router.api.clientAuthorizations.add(this.model.name, keyAuth);
this.router.load();
var key = encodeURIComponent($('#input_apiKey_entry')[0].value);
if (key && key.trim() != "") {
var apiKeyAuth = new SwaggerClient.ApiKeyAuthorization("Authorization", "Bearer " + key, "header");
this.router.api.clientAuthorizations.add("key", apiKeyAuth);
$('.token-indicator').removeClass("hidden");
$('.osf-token-info').addClass("hidden");
$('.put-post-patch-try').removeClass("hidden");
$('.put-post-patch-info').addClass("hidden");
} else {
this.removeApiKey();
}
$('#apikey_container').show();
},

toggleApiKeyContainer: function(){
if ($('#apikey_container').length) {

var elem = $('#apikey_container').first();
var button = $('#apikey_menu_icon');

if (elem.is(':visible')){
elem.hide();
button.removeClass("glyphicon-menu-down").addClass("glyphicon glyphicon-menu-right");

} else {
button.removeClass("glyphicon-menu-right").addClass("glyphicon-menu-down");

// hide others
$('.auth_container').hide();
Expand All @@ -49,6 +56,15 @@ SwaggerUi.Views.ApiKeyButton = Backbone.View.extend({ // TODO: append this to gl

template: function(){
return Handlebars.templates.apikey_button_view;
},

removeApiKey: function() {
this.router.api.clientAuthorizations.remove("key");
$('#input_apiKey_entry')[0].value = '';
$('.token-indicator').addClass("hidden");
$('.osf-token-info').removeClass("hidden");
$('.put-post-patch-try').addClass("hidden");
$('.put-post-patch-info').removeClass("hidden");
}

});
});
143 changes: 72 additions & 71 deletions src/main/javascript/view/MainView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,23 +100,6 @@ SwaggerUi.Views.MainView = Backbone.View.extend({
},

render: function () {
if (this.model.securityDefinitions) {
for (var name in this.model.securityDefinitions) {
var auth = this.model.securityDefinitions[name];
var button;

if (auth.type === 'apiKey' && $('#apikey_button').length === 0) {
button = new SwaggerUi.Views.ApiKeyButton({model: auth, router: this.router}).render().el;
$('.auth_main_container').append(button);
}

if (auth.type === 'basicAuth' && $('#basic_auth_button').length === 0) {
button = new SwaggerUi.Views.BasicAuthButton({model: auth, router: this.router}).render().el;
$('.auth_main_container').append(button);
}
}
}

// Render the outer container for resources
$(this.el).html(Handlebars.templates.main(this.model));

Expand All @@ -137,6 +120,7 @@ SwaggerUi.Views.MainView = Backbone.View.extend({

this.addResource(resource, this.model.auths);
this.addSidebarHeader(resource, i);
this.addSidebarToken(resource, i);
}

$('.propWrap').hover(function onHover() {
Expand All @@ -151,6 +135,23 @@ SwaggerUi.Views.MainView = Backbone.View.extend({
$(window).scrollTop(0)
}

if (this.model.securityDefinitions) {
for (var name in this.model.securityDefinitions) {
var auth = this.model.securityDefinitions[name];
var button;

if (auth.type === 'apiKey' && $('#apikey_button').length === 0) {
button = new SwaggerUi.Views.ApiKeyButton({model: auth, router: this.router}).render().el;
$('.auth_main_container').append(button);
}

if (auth.type === 'basicAuth' && $('#basic_auth_button').length === 0) {
button = new SwaggerUi.Views.BasicAuthButton({model: auth, router: this.router}).render().el;
$('.auth_main_container').append(button);
}
}
}

return this;
},

Expand All @@ -173,23 +174,23 @@ SwaggerUi.Views.MainView = Backbone.View.extend({
$('#resources').append(resourceView.render().el);
},

// addSidebarToken: function (resource, i) {
// resource.id = resource.id.replace(/\s/g, '_');
// var sidebarView = new SwaggerUi.Views.SidebarHeaderView({
// model: resource,
// tagName: 'div',
// className: function () {
// return i == 0 ? 'active' : ''
// },
// attributes: {
// "data-resource": 'resource_' + resource.name,
// "label": resource.name
// },
// router: this.router,
// swaggerOptions: this.options.swaggerOptions
// });
// $('#token-generator', $(this.el)).append(sidebarView.render().el);
// },
addSidebarToken: function (resource, i) {
resource.id = resource.id.replace(/\s/g, '_');
var sidebarView = new SwaggerUi.Views.SidebarHeaderView({
model: resource,
tagName: 'div',
className: function () {
return i == 0 ? 'active' : ''
},
attributes: {
"data-resource": 'resource_' + resource.name,
"label": resource.name
},
router: this.router,
swaggerOptions: this.options.swaggerOptions
});
$('#token-generator', $(this.el)).append(sidebarView.render().el);
},


addSidebarHeader: function (resource, i) {
Expand Down Expand Up @@ -240,42 +241,42 @@ SwaggerUi.Views.MainView = Backbone.View.extend({
}
});

}
},

toggleToken: function (e) {
var t = $(".token-generator"),
tg = $("[data-tg-switch]");

// toggleToken: function (e) {
// var t = $(".token-generator"),
// tg = $("[data-tg-switch]");

// t.toggleClass("hide");
// t.hasClass("hide") ? tg.removeClass("active") : tg.addClass("active");
// t.parents(".sticky-nav").trigger("mobile_nav:update")
// },

// closeToken: function (e) {
// var t = $(".token-generator"),
// tg = $("[data-tg-switch]");

// t.addClass("hide");
// tg.removeClass("active");
// t.parents(".sticky-nav").trigger("mobile_nav:update")
// },

// openToken: function (e) {
// var t = $(".token-generator"),
// tg = $("[data-tg-switch]");

// t.removeClass("hide");
// tg.removeClass("active");
// t.parents(".sticky-nav").trigger("mobile_nav:update")
// },

// showCustom: function(e){
// if (e) {
// e.preventDefault();
// }
// this.trigger('update-swagger-ui', {
// url: $('#input_baseUrl').val(),
// apiKey: $('#input_apiKey').val()
// });
// }
t.toggleClass("hide");
t.hasClass("hide") ? tg.removeClass("active") : tg.addClass("active");
t.parents(".sticky-nav").trigger("mobile_nav:update")
},

closeToken: function (e) {
var t = $(".token-generator"),
tg = $("[data-tg-switch]");

t.addClass("hide");
tg.removeClass("active");
t.parents(".sticky-nav").trigger("mobile_nav:update")
},

openToken: function (e) {
var t = $(".token-generator"),
tg = $("[data-tg-switch]");

t.removeClass("hide");
tg.removeClass("active");
t.parents(".sticky-nav").trigger("mobile_nav:update")
},

showCustom: function(e){
if (e) {
e.preventDefault();
}
this.trigger('update-swagger-ui', {
url: $('#input_baseUrl').val(),
apiKey: $('#input_apiKey').val()
});
}
});
1 change: 0 additions & 1 deletion src/main/javascript/view/OperationView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ SwaggerUi.Views.OperationView = Backbone.View.extend({
this.nickname = this.model.nickname;
this.model.encodedParentId = encodeURIComponent(this.parentId);
this.model.endpoint = api_topics.indexOf(this.model.summary) == -1 ? true : false;
this.model.read = this.model.method == 'get';
this.schemaName = this.model.operation['x-response-schema'];
return this;
},
Expand Down
8 changes: 4 additions & 4 deletions src/main/template/apikey_button_view.handlebars
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<div class='auth_button' id='apikey_button'>
<!--img class='auth_icon' alt='apply api key' src='images/apikey.jpeg'-->
<span id="apikey_menu_icon" class="glyphicon glyphicon-menu-down"></span>API Authorization
</div>
<div class='auth_container' id='apikey_container'>
<div class='key_input_container'>
<div class='auth_label'>{{keyName}}</div>
<input placeholder="api_key" class="auth_input" id="input_apiKey_entry" name="apiKey" type="text"/>
<div class='auth_submit'><a class='auth_submit_button' id="apply_api_key" href="#">apply</a></div>
<input placeholder="enter api token" class="auth_input" id="input_apiKey_entry" name="apiKey" type="password"/>
<button class='btn btn-default' id="apply_api_key"><span class="glyphicon glyphicon-arrow-right"></span></button>
</div>
<div class="token-indicator hidden">Token updated<a id="clear-token-link">clear</a></div>
</div>

7 changes: 7 additions & 0 deletions src/main/template/main.handlebars
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,13 @@
<a href="https://api.osf.io"><img src="images/osf-logo.png" width="27"/> OSF API</a>
</div>

<div class="auth-container">
<div class="auth_main_container">
</div>
<div>
<a class="osf-token-info" href="{{info.x-token-settings}}">Get an API Token</a>
</div>
</div>
<div class="mobile-nav">
<span class="select-label">API Reference: </span><span data-selected-value></span>
</div>
Expand Down
Loading