Added support for '{realm}' placeholder in authorizationUrl and tokenUrl

README.md

@@ -113,7 +113,7 @@ Config Name | Description
 --- | ---
 client_id | Default clientId. MUST be a string
 client_secret | Default clientSecret. MUST be a string
-realm | realm query parameter (for oauth1) added to `authorizationUrl` and `tokenUrl` . MUST be a string
+realm | The OAuth realm parameter for `authorizationUrl` and `tokenUrl`. Optional. If specified it MUST be a string. If a `{realm}` placeholder is present in the URL path, it will be replaced with this value. If no such placeholder is present, the value will be added as the value for querystring parameter 'realm'.
 appName | application name, displayed in authorization popup. MUST be a string
 scopeSeparator | scope separator for passing scopes, encoded before calling, default value is a space (encoded value `%20`). MUST be a string
 additionalQueryStringParams | Additional query parameters added to `authorizationUrl` and `tokenUrl`. MUST be an object
@@ -126,7 +126,7 @@ const ui = SwaggerUIBundle({...})
 ui.initOAuth({
     clientId: "your-client-id",
     clientSecret: "your-client-secret-if-required",
-    realm: "your-realms",
+    realm: "your-realm",
     appName: "your-app-name",
     scopeSeparator: " ",
     additionalQueryStringParams: {test: "hello"}

dev-helpers/index.html

@@ -91,7 +91,7 @@
     ui.initOAuth({
       clientId: "your-client-id",
       clientSecret: "your-client-secret-if-required",
-      realm: "your-realms",
+      realm: "your-realm",
       appName: "your-app-name",
       scopeSeparator: " ",
       additionalQueryStringParams: {}

src/core/components/auth/auths.jsx

@@ -109,15 +109,14 @@ export default class Auths extends React.Component {
             <p>API requires the following scopes. Select which ones you want to grant to Swagger UI.</p>
           </div>
             {
-              definitions.filter( schema => schema.get("type") === "oauth2")
-                .map( (schema, name) =>{
+              oauthDefinitions.map( (schema, name) =>{
                   return (<div key={ name }>
                     <Oauth2 authorized={ authorized }
                             schema={ schema }
                             name={ name } />
                   </div>)
                 }
-                ).toArray()
+              ).toArray()
             }
           </div> : null
         }

src/core/components/auth/oauth2.jsx

@@ -1,6 +1,6 @@
 import React from "react"
 import PropTypes from "prop-types"
-import oauth2Authorize from "core/oauth2-authorize"
+import oauth2Authorize, { processUrl } from "core/oauth2-authorize"
 
 const IMPLICIT = "implicit"
 const ACCESS_CODE = "accessCode"
@@ -27,6 +27,7 @@ export default class Oauth2 extends React.Component {
     let authConfigs = authSelectors.getConfigs() || {}
     let username = auth && auth.get("username") || ""
     let clientId = auth && auth.get("clientId") || authConfigs.clientId || ""
+    let realm = auth && auth.get("realm") || authConfigs.realm || ""
     let clientSecret = auth && auth.get("clientSecret") || authConfigs.clientSecret || ""
     let passwordType = auth && auth.get("passwordType") || "request-body"
 
@@ -39,7 +40,8 @@ export default class Oauth2 extends React.Component {
       clientSecret: clientSecret,
       username: username,
       password: "",
-      passwordType: passwordType
+      passwordType: passwordType,
+      realm: realm
     }
   }
 
@@ -108,8 +110,8 @@ export default class Oauth2 extends React.Component {
 
         { isAuthorized && <h6>Authorized</h6> }
 
-        { ( flow === IMPLICIT || flow === ACCESS_CODE ) && <p>Authorization URL: <code>{ schema.get("authorizationUrl") }</code></p> }
-        { ( flow === PASSWORD || flow === ACCESS_CODE || flow === APPLICATION ) && <p>Token URL:<code> { schema.get("tokenUrl") }</code></p> }
+        { ( flow === IMPLICIT || flow === ACCESS_CODE ) && <p>Authorization URL: <code>{ processUrl(schema.get("authorizationUrl"), this.state) }</code></p> }
+        { ( flow === PASSWORD || flow === ACCESS_CODE || flow === APPLICATION ) && <p>Token URL:<code> { processUrl(schema.get("tokenUrl"), this.state) }</code></p> }
         <p className="flow">Flow: <code>{ schema.get("flow") }</code></p>
 
         {

src/core/oauth2-authorize.js

@@ -52,19 +52,7 @@ export default function authorize ( { auth, authActions, errActions, configs, au
 
   query.push("state=" + encodeURIComponent(state))
 
-  if (typeof authConfigs.realm !== "undefined") {
-    query.push("realm=" + encodeURIComponent(authConfigs.realm))
-  }
-
-  let { additionalQueryStringParams } = authConfigs
-
-  for (let key in additionalQueryStringParams) {
-    if (typeof additionalQueryStringParams[key] !== "undefined") {
-      query.push([key, additionalQueryStringParams[key]].map(encodeURIComponent).join("="))
-    }
-  }
-
-  let url = [schema.get("authorizationUrl"), query.join("&")].join("?")
+  const url = processUrl(schema.get("authorizationUrl"), authConfigs, query)
 
   // pass action authorizeOauth2 and authentication data through window
   // to authorize with oauth2
@@ -88,3 +76,30 @@ export default function authorize ( { auth, authActions, errActions, configs, au
 
   win.open(url)
 }
+
+function processUrl(url, authConfigs, query=[]) {
+  let result = url || ""
+  if (authConfigs) {
+    if (authConfigs.realm) {
+      const placeholder = "{realm}"
+      const idx = url ? url.indexOf(placeholder) : -1
+      if (idx !== -1) {
+        result = url.substring(0, idx) + encodeURIComponent(authConfigs.realm) + url.substring(idx + placeholder.length)
+      } else {
+        query.push("realm=" + encodeURIComponent(authConfigs.realm))
+      }
+    }
+    const params = authConfigs.additionalQueryStringParams || {}
+    for (let key in params) {
+      if (params[key] !== undefined) {
+        query.push([key, params[key]].map(encodeURIComponent).join("="))
+      }
+    }
+    if (query.length) {
+      result += (result.indexOf("?") === -1 ? "?" : "&") + query.join("&")
+    }
+  }
+  return result
+}
+
+export { processUrl }

src/core/plugins/auth/actions.js

@@ -1,5 +1,6 @@
 import win from "core/window"
 import { btoa, buildFormData } from "core/utils"
+import { processUrl } from "core/oauth2-authorize"
 
 export const SHOW_AUTH_POPUP = "show_popup"
 export const AUTHORIZE = "authorize"
@@ -141,12 +142,8 @@ export const authorizeAccessCodeWithBasicAuthentication = ( { auth, redirectUrl
 
 export const authorizeRequest = ( data ) => ( { fn, authActions, errActions, authSelectors } ) => {
   let { body, query={}, headers={}, name, url, auth } = data
-  let { additionalQueryStringParams } = authSelectors.getConfigs() || {}
-  let fetchUrl = url
-
-  for (let key in additionalQueryStringParams) {
-    url += "&" + key + "=" + encodeURIComponent(additionalQueryStringParams[key])
-  }
+  let authConfigs = authSelectors.getConfigs() || {}
+  let fetchUrl = processUrl(url, authConfigs)
 
   let _headers = Object.assign({
     "Accept":"application/json, text/plain, */*",