Skip to content

Commit 2ba1c10

Browse files
webronwebron
authored
Merge pull request #2397 from MugeSo/implement-oauth2-password-flow
Implement OAuth2 password flow
2 parents 0b7c6f0 + 3494d44 commit 2ba1c10

File tree

5 files changed

+152
-15
lines changed

5 files changed

+152
-15
lines changed

‎src/main/javascript/view/AuthView.js

Lines changed: 37 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,13 @@ SwaggerUi.Views.AuthView = Backbone.View.extend({
119119
else if(auth.get('type') === 'oauth2' && flow && (flow === 'application')) {
120120
dets = auth.attributes;
121121
container.tokenName = dets.tokenName || 'access_token';
122-
this.clientCredentialsFlow(scopes, dets.tokenUrl, container.OAuthSchemeKey);
122+
this.clientCredentialsFlow(scopes, dets, container.OAuthSchemeKey);
123+
return;
124+
}
125+
else if(auth.get('type') === 'oauth2' && flow && (flow === 'password')) {
126+
dets = auth.attributes;
127+
container.tokenName = dets.tokenName || 'access_token';
128+
this.passwordFlow(scopes, dets, container.OAuthSchemeKey);
123129
return;
124130
}
125131
else if(auth.get('grantTypes')) {
@@ -156,17 +162,40 @@ SwaggerUi.Views.AuthView = Backbone.View.extend({
156162
},
157163

158164
// taken from lib/swagger-oauth.js
159-
clientCredentialsFlow: function (scopes, tokenUrl, OAuthSchemeKey) {
160-
var params = {
161-
'client_id': clientId,
162-
'client_secret': clientSecret,
165+
clientCredentialsFlow: function (scopes, oauth, OAuthSchemeKey) {
166+
this.accessTokenRequest(scopes, oauth, OAuthSchemeKey, 'client_credentials');
167+
},
168+
169+
passwordFlow: function (scopes, oauth, OAuthSchemeKey) {
170+
this.accessTokenRequest(scopes, oauth, OAuthSchemeKey, 'password', {
171+
'username': oauth.username,
172+
'password': oauth.password
173+
});
174+
},
175+
176+
accessTokenRequest: function (scopes, oauth, OAuthSchemeKey, grantType, params) {
177+
params = $.extend({}, {
163178
'scope': scopes.join(' '),
164-
'grant_type': 'client_credentials'
165-
};
179+
'grant_type': grantType
180+
}, params);
181+
182+
var headers= {};
183+
184+
switch (oauth.clientAuthenticationType) {
185+
case 'basic':
186+
headers.Authorization = 'Basic ' + btoa(oauth.clientId + ':' + oauth.clientSecret);
187+
break;
188+
case 'request-body':
189+
params.client_id = oauth.clientId;
190+
params.client_secret = oauth.clientSecret;
191+
break;
192+
}
193+
166194
$.ajax({
167-
url : tokenUrl,
195+
url : oauth.tokenUrl,
168196
type: 'POST',
169197
data: params,
198+
headers: headers,
170199
success: function (data)
171200
{
172201
onOAuthComplete(data, OAuthSchemeKey);
@@ -177,5 +206,4 @@ SwaggerUi.Views.AuthView = Backbone.View.extend({
177206
}
178207
});
179208
}
180-
181209
});

‎src/main/javascript/view/Oauth2Model.js

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@
22

33
SwaggerUi.Models.Oauth2Model = Backbone.Model.extend({
44
defaults: {
5-
scopes: {}
5+
scopes: {},
6+
isPasswordFlow: false,
7+
clientAuthenticationType: 'none'
68
},
79

810
initialize: function () {
@@ -19,6 +21,13 @@ SwaggerUi.Models.Oauth2Model = Backbone.Model.extend({
1921
attributes.scopes = scopes;
2022
this.attributes = attributes;
2123
}
24+
25+
if (this.attributes && this.attributes.flow) {
26+
var flow = this.attributes.flow;
27+
this.set('isPasswordFlow', flow === 'password');
28+
this.set('requireClientAuthentication', flow === 'application');
29+
this.set('clientAuthentication', flow === 'password' || flow === 'application');
30+
}
2231
this.on('change', this.validate);
2332
},
2433

@@ -35,6 +44,16 @@ SwaggerUi.Models.Oauth2Model = Backbone.Model.extend({
3544

3645
validate: function () {
3746
var valid = false;
47+
if (this.get('isPasswordFlow') &&
48+
(!this.get('username'))) {
49+
return false;
50+
}
51+
52+
if (this.get('clientAuthenticationType') in ['basic', 'request-body'] &&
53+
(!this.get('clientId'))) {
54+
return false;
55+
}
56+
3857
var scp = this.get('scopes');
3958
var idx = _.findIndex(scp, function (o) {
4059
return o.checked === true;

‎src/main/javascript/view/Oauth2View.js

Lines changed: 62 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,20 @@
22

33
SwaggerUi.Views.Oauth2View = Backbone.View.extend({
44
events: {
5-
'change .oauth-scope': 'scopeChange'
5+
'change .oauth-scope': 'scopeChange',
6+
'change .oauth-username': 'setUsername',
7+
'change .oauth-password': 'setPassword',
8+
'change .oauth-client-authentication-type': 'setClientAuthenticationType',
9+
'change .oauth-client-id': 'setClientId',
10+
'change .oauth-client-secret': 'setClientSecret'
611
},
712

813
template: Handlebars.templates.oauth2,
914

15+
cls: {
16+
error: 'error'
17+
},
18+
1019
render: function () {
1120
this.$el.html(this.template(this.model.toJSON()));
1221

@@ -18,5 +27,57 @@ SwaggerUi.Views.Oauth2View = Backbone.View.extend({
1827
var scope = $(e.target).data('scope');
1928

2029
this.model.setScopes(scope, val);
30+
},
31+
32+
setUsername: function (e) {
33+
var val= $(e.target).val();
34+
this.model.set('username', val);
35+
if (val) {
36+
$(e.target).removeClass(this.cls.error);
37+
}
38+
},
39+
40+
setPassword: function (e) {
41+
this.model.set('password', $(e.target).val());
42+
},
43+
44+
setClientAuthenticationType: function (e) {
45+
var type = $(e.target).val();
46+
var $el = this.$el;
47+
this.model.set('clientAuthenticationType', type);
48+
49+
switch(type) {
50+
case 'none':
51+
$el.find('.oauth-client-authentication').hide();
52+
break;
53+
case 'basic':
54+
case 'request-body':
55+
$el.find('.oauth-client-id').removeClass(this.cls.error);
56+
$el.find('.oauth-client-authentication').show();
57+
break;
58+
}
59+
},
60+
61+
setClientId: function (e) {
62+
var val = $(e.target).val();
63+
this.model.set('clientId', val);
64+
if (val) {
65+
$(e.target).removeClass(this.cls.error);
66+
}
67+
},
68+
69+
setClientSecret: function (e) {
70+
this.model.set('clientSecret', $(e.target).val());
71+
$(e.target).removeClass('error');
72+
},
73+
74+
highlightInvalid: function () {
75+
if (!this.model.get('username')) {
76+
this.$el.find('.oauth-username').addClass(this.cls.error);
77+
}
78+
79+
if (!this.model.get('clientId')) {
80+
this.$el.find('.oauth-client-id').addClass(this.cls.error);
81+
}
2182
}
2283
});

‎src/main/less/auth.less

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -201,4 +201,9 @@
201201
}
202202

203203
.api-popup-actions { padding-top: 10px; }
204+
205+
fieldset {
206+
padding-bottom: 10px;
207+
padding-left: 20px;
208+
}
204209
}

‎src/main/template/oauth2.handlebars

Lines changed: 28 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,36 @@
11
<div>
2-
<h3 class="auth__title">Select OAuth2.0 Scopes</h3>
2+
<h3 class="auth__title">OAuth2.0</h3>
33
<p>{{{sanitize description}}}</p>
4+
{{#if authorizationUrl}}<p>Authorization URL: {{{sanitize authorizationUrl}}}</p>{{/if}}
5+
{{#if tokenUrl}}<p>Token URL: {{{sanitize tokenUrl}}}</p>{{/if}}
6+
<p>flow: {{{escape flow}}}</p>
7+
{{#if isPasswordFlow}}
8+
<p>Please input username and password for password flow authorization</p>
9+
<fieldset>
10+
<div><label>Username: <input class="oauth-username" type="text" name="username"></label></div>
11+
<div><label>Password: <input class="oauth-password" type="password" name="password"></label></div>
12+
</fieldset>
13+
{{/if}}
14+
{{#if clientAuthentication}}
15+
<p>Setup client authentication.{{#if requireClientAuthenticaiton}}(Required){{/if}}</p>
16+
<fieldset>
17+
<div><label>Type:
18+
<select class="oauth-client-authentication-type" name="client-authentication-type">
19+
<option value="none" selected>None or other</option>
20+
<option value="basic">Basic auth</option>
21+
<option value="request-body">Request body</option>
22+
</select>
23+
</label></div>
24+
<div class="oauth-client-authentication" hidden>
25+
<div><label>ClientId: <input class="oauth-client-id" type="text" name="client-id"></label></div>
26+
<div><label>Secret: <input class="oauth-client-secret" type="text" name="client-secret"></label></div>
27+
</div>
28+
</fieldset>
29+
{{/if}}
30+
<p><strong> {{{escape appName}}} </strong> API requires the following scopes. Select which ones you want to grant to Swagger UI.</p>
431
<p>Scopes are used to grant an application different levels of access to data on behalf of the end user. Each API may declare one or more scopes.
532
<a href="#">Learn how to use</a>
633
</p>
7-
<p><strong> {{{escape appName}}} </strong> API requires the following scopes. Select which ones you want to grant to Swagger UI.</p>
8-
<p>Authorization URL: {{{sanitize authorizationUrl}}}</p>
9-
<p>flow: {{{escape flow}}}</p>
1034
<ul class="api-popup-scopes">
1135
{{#each scopes}}
1236
<li>

0 commit comments

Comments
 (0)