Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    oe-swagger-uipublic

    oeCloud Swagger UI

    This is a fork of swagger-ui with custom layouts which are specific to the functioning of oeCloud.io api explorer. Plus some performance improvements.

    If you'd like to make modifications to the codebase, run the dev server with: npm run dev. A development server will open on 3200.

    If you'd like to rebuild the /dist folder with your codebase changes, run npm run build.

    Browser support

    Swagger UI works in the latest versions of Chrome, Safari, Firefox, Edge and IE11.

    Known Issues

    To help with the migration, here are the currently known issues with 3.X. This list will update regularly, and will not include features that were not implemented in previous versions.

    • Only part of the parameters previously supported are available.
    • The JSON Form Editor is not implemented.
    • Shebang URL support for operations is missing.
    • Support for collectionFormat is partial.
    • l10n (translations) is not implemented.
    • Relative path support for external files is not implemented.

    SwaggerUIBundle

    To use swagger-ui's bundles, you should take a look at the source of swagger-ui html page and customize it. This basically requires you to instantiate a SwaggerUi object as below:

      const ui = SwaggerUIBundle({
        url: "http://petstore.swagger.io/v2/swagger.json",
        dom_id: '#swagger-ui',
        presets: [
          SwaggerUIBundle.presets.apis,
          SwaggerUIStandalonePreset
        ],
        plugins: [
          SwaggerUIBundle.plugins.DownloadUrl
        ],
        layout: "StandaloneLayout"
      })

    OAuth2 configuration

    You can configure OAuth2 authorization by calling initOAuth method with passed configs under the instance of SwaggerUIBundle default client_id and client_secret, realm, an application name appName, scopeSeparator, additionalQueryStringParams.

    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
    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
    const ui = SwaggerUIBundle({...})
    
    // Method can be called in any place after calling constructor SwaggerUIBundle
    ui.initOAuth({
        clientId: "your-client-id",
        clientSecret: "your-client-secret-if-required",
        realm: "your-realms",
        appName: "your-app-name",
        scopeSeparator: " ",
        additionalQueryStringParams: {test: "hello"}
      })
    

    If you'd like to use the bundle files via npm, check out the swagger-ui-dist package.

    Parameters

    Parameter Name Description
    url The url pointing to API definition (normally swagger.json or swagger.yaml).
    spec A JSON object describing the OpenAPI Specification. When used, the url parameter will not be parsed. This is useful for testing manually-generated specifications without hosting them.
    validatorUrl By default, Swagger-UI attempts to validate specs against swagger.io's online validator. You can use this parameter to set a different validator URL, for example for locally deployed validators (Validator Badge). Setting it to null will disable validation.
    dom_id The id of a dom element inside which SwaggerUi will put the user interface for swagger.
    oauth2RedirectUrl OAuth redirect URL
    operationsSorter Apply a sort to the operation list of each API. It can be 'alpha' (sort by paths alphanumerically), 'method' (sort by HTTP method) or a function (see Array.prototype.sort() to know how sort function works). Default is the order returned by the server unchanged.
    configUrl Configs URL
    parameterMacro MUST be a function. Function to set default value to parameters. Accepts two arguments parameterMacro(operation, parameter). Operation and parameter are objects passed for context, both remain immutable
    modelPropertyMacro MUST be a function. Function to set default values to each property in model. Accepts one argument modelPropertyMacro(property), property is immutable
    docExpansion Controls the default expansion setting for the operations and tags. It can be 'list' (expands only the tags), 'full' (expands the tags and operations) or 'none' (expands nothing). The default is 'list'.

    Plugins

    Topbar plugin

    Topbar plugin enables top bar with input for spec path and explore button. By default the plugin is enabled, and to disable it you need to remove Topbar plugin from presets in src/standalone/index.js:

    let preset = [
      // TopbarPlugin,
      ConfigsPlugin,
      () => {
        return {
          components: { StandaloneLayout }
        }
      }
    ]
    

    Configs plugin

    Configs plugin allows to fetch external configs instead of passing them to SwaggerUIBundle. Fetched configs support two formats: JSON or yaml. The plugin is enabled by default. There are three options of passing config:

    These options can be used altogether, the order of inheritance is following (from the lowest priority to the highest): swagger-config.yaml -> config passed to SwaggerUIBundle -> config fetched from configUrl passed to SwaggerUIBundle -> config fetched from URL passed as a query parameter config

    CORS Support

    CORS is a technique to prevent websites from doing bad things with your personal data. Most browsers + JavaScript toolkits not only support CORS but enforce it, which has implications for your API server which supports Swagger.

    You can read about CORS here: http://www.w3.org/TR/cors.

    There are two cases where no action is needed for CORS support:

    1. swagger-ui is hosted on the same server as the application itself (same host and port).
    2. The application is located behind a proxy that enables the required CORS headers. This may already be covered within your organization.

    Otherwise, CORS support needs to be enabled for:

    1. Your Swagger docs. For Swagger 2.0 it's the swagger.json/swagger.yaml and any externally $refed docs.
    2. For the Try it now button to work, CORS needs to be enabled on your API endpoints as well.

    Testing CORS Support

    You can verify CORS support with one of three techniques:

    • Curl your API and inspect the headers. For instance:
    $ curl -I "http://petstore.swagger.io/v2/swagger.json"
    HTTP/1.1 200 OK
    Date: Sat, 31 Jan 2015 23:05:44 GMT
    Access-Control-Allow-Origin: *
    Access-Control-Allow-Methods: GET, POST, DELETE, PUT, PATCH, OPTIONS
    Access-Control-Allow-Headers: Content-Type, api_key, Authorization
    Content-Type: application/json
    Content-Length: 0

    This tells us that the petstore resource listing supports OPTIONS, and the following headers: Content-Type, api_key, Authorization.

    • Try swagger-ui from your file system and look at the debug console. If CORS is not enabled, you'll see something like this:
    XMLHttpRequest cannot load http://sad.server.com/v2/api-docs. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
    

    Swagger-UI cannot easily show this error state.

    • Using the http://www.test-cors.org website. Keep in mind this will show a successful result even if Access-Control-Allow-Headers is not available, which is still required for Swagger-UI to function properly.

    Enabling CORS

    The method of enabling CORS depends on the server and/or framework you use to host your application. http://enable-cors.org provides information on how to enable CORS in some common web servers.

    Other servers/frameworks may provide you information on how to enable it specifically in their use case.

    CORS and Header Parameters

    Swagger lets you easily send headers as parameters to requests. The name of these headers MUST be supported in your CORS configuration as well. From our example above:

    Access-Control-Allow-Headers: Content-Type, api_key, Authorization
    

    Only headers with these names will be allowed to be sent by Swagger-UI.

    License

    Copyright 2017 SmartBear Software

    Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

    Keywords

    none

    install

    npm i oe-swagger-ui

    Downloadslast 7 days

    4

    version

    1.2.0

    license

    Apache-2.0

    repository

    github.com

    last publish

    collaborators

    • avatar
    • avatar
    • avatar