github.com/qubitproducts/logspray@v0.2.14/server/swagger-ui/README.md (about) 1 # Swagger UI 2 3 [](https://travis-ci.org/swagger-api/swagger-ui) 4 [](http://badge.fury.io/js/swagger-ui) 5 6 [](https://david-dm.org/swagger-api/swagger-ui) 7 [](https://david-dm.org/swagger-api/swagger-ui#info=devDependencies) 8 9 Swagger UI is part of the Swagger project. The Swagger project allows you to produce, visualize and consume your OWN RESTful services. No proxy or 3rd party services required. Do it your own way. 10 11 Swagger UI is a dependency-free collection of HTML, Javascript, and CSS assets that dynamically 12 generate beautiful documentation and sandbox from a Swagger-compliant API. Because Swagger UI has no dependencies, you can host it in any server environment, or on your local machine. 13 14 ## What's Swagger? 15 16 The goal of Swaggerâ„¢ is to define a standard, language-agnostic interface to REST APIs which allows both humans and computers to discover and understand the capabilities of the service without access to source code, documentation, or through network traffic inspection. When properly defined via Swagger, a consumer can understand and interact with the remote service with a minimal amount of implementation logic. Similar to what interfaces have done for lower-level programming, Swagger removes the guesswork in calling the service. 17 18 19 Check out [Swagger-Spec](https://github.com/OAI/OpenAPI-Specification) for additional information about the Swagger project, including additional libraries with support for other languages and more. 20 21 22 ## Compatibility 23 The OpenAPI Specification has undergone 4 revisions since initial creation in 2010. Compatibility between swagger-ui and the OpenAPI Specification is as follows: 24 25 Swagger UI Version | Release Date | OpenAPI Spec compatibility | Notes | Status 26 ------------------ | ------------ | -------------------------- | ----- | ------ 27 2.2.6 | 2016-10-14 | 1.1, 1.2, 2.0 | [tag v2.2.6](https://github.com/swagger-api/swagger-ui/tree/v2.2.6) | 28 2.1.5 | 2016-07-20 | 1.1, 1.2, 2.0 | [tag v2.1.5](https://github.com/swagger-api/swagger-ui/tree/v2.1.5) | 29 2.0.24 | 2014-09-12 | 1.1, 1.2 | [tag v2.0.24](https://github.com/swagger-api/swagger-ui/tree/v2.0.24) | 30 1.0.13 | 2013-03-08 | 1.1, 1.2 | [tag v1.0.13](https://github.com/swagger-api/swagger-ui/tree/v1.0.13) | 31 1.0.1 | 2011-10-11 | 1.0, 1.1 | [tag v1.0.1](https://github.com/swagger-api/swagger-ui/tree/v1.0.1) | 32 33 ## How to Use It 34 35 ### Download 36 You can use the swagger-ui code AS-IS! No need to build or recompile--just clone this repo and use the pre-built files in the `dist` folder. If you like swagger-ui as-is, stop here. 37 38 ##### Browser support 39 Swagger UI works in all evergreen desktop browsers (Chrome, Safari, Firefox). Internet Explorer support is version 8 (IE8) and above. 40 41 ### Build 42 You can rebuild swagger-ui on your own to tweak it or just so you can say you did. To do so, follow these steps: 43 44 ### Windows Users: Please install [Python](https://www.python.org/downloads/windows/) before follow below guidelines for node-gyp rebuild to run. 45 46 1. `npm install` 47 2. `npm run build` 48 3. You should see the distribution under the dist folder. Open [`./dist/index.html`](./dist/index.html) to launch Swagger UI in a browser 49 50 ### Development 51 Use `npm run serve` to make a new build, watch for changes, and serve the result at http://localhost:8080/. 52 53 ### Build using Docker 54 55 To build swagger-ui using a docker container: 56 57 ``` 58 docker build -t swagger-ui-builder . 59 docker run -p 80:8080 swagger-ui-builder 60 ``` 61 62 This will start Swagger UI at `http://localhost`. 63 64 ### Use 65 Once you open the Swagger UI, it will load the [Swagger Petstore](http://petstore.swagger.io/v2/swagger.json) service and show its APIs. You can enter your own server url and click explore to view the API. 66 67 ### Customize 68 You may choose to customize Swagger UI for your organization. Here is an overview of what's in its various directories: 69 70 - dist: Contains a distribution which you can deploy on a server or load from your local machine. 71 - dist/lang: The swagger localization 72 - lib: Contains javascript dependencies which swagger-ui depends on 73 - node_modules: Contains node modules which swagger-ui uses for its development. 74 - src 75 - src/main/templates: [handlebars](http://handlebarsjs.com/) templates used to render swagger-ui 76 - src/main/html: the html files, some images and css 77 - src/main/javascript: main code 78 79 ### SwaggerUi 80 To use swagger-ui you should take a look at the [source of swagger-ui html page](https://github.com/swagger-api/swagger-ui/blob/master/dist/index.html) and customize it. This basically requires you to instantiate a SwaggerUi object and call load() on it as below: 81 82 ```javascript 83 var swaggerUi = new SwaggerUi({ 84 url: 'http://petstore.swagger.io/v2/swagger.json', 85 dom_id: 'swagger-ui-container' 86 }); 87 88 swaggerUi.load(); 89 ``` 90 91 ##### Parameters 92 93 Parameter Name | Description 94 --- | --- 95 url | The url pointing to `swagger.json` (Swagger 2.0) or the resource listing (earlier versions) as per [OpenAPI Spec](https://github.com/OAI/OpenAPI-Specification/). 96 authorizations | An authorization object to be passed to swagger-js. Setting it here will trigger inclusion of any authorization or custom signing logic when fetching the swagger description file. Note the object structure should be `{ key: AuthorizationObject }` 97 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. Works for Swagger 2.0 specs only. 98 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](https://github.com/swagger-api/validator-badge)). Setting it to `null` will disable validation. This parameter is relevant for Swagger 2.0 specs only. 99 dom_id | The id of a dom element inside which SwaggerUi will put the user interface for swagger. 100 booleanValues | SwaggerUI renders boolean data types as a dropdown. By default it provides a 'true' and 'false' string as the possible choices. You can use this parameter to change the values in dropdown to be something else, for example 0 and 1 by setting booleanValues to new Array(0, 1). 101 docExpansion | Controls how the API listing is displayed. It can be set to 'none' (default), 'list' (shows operations for each resource), or 'full' (fully expanded: shows operations and their details). 102 apisSorter | Apply a sort to the API/tags list. It can be 'alpha' (sort by name) or a function (see Array.prototype.sort() to know how sort function works). Default is the order returned by the server unchanged. 103 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. 104 defaultModelRendering | Controls how models are shown when the API is first rendered. (The user can always switch the rendering for a given model by clicking the 'Model' and 'Model Schema' links.) It can be set to 'model' or 'schema', and the default is 'schema'. 105 onComplete | This is a callback function parameter which can be passed to be notified of when SwaggerUI has completed rendering successfully. 106 onFailure | This is a callback function parameter which can be passed to be notified of when SwaggerUI encountered a failure was unable to render. 107 highlightSizeThreshold | Any size response below this threshold will be highlighted syntactically, attempting to highlight large responses can lead to browser hangs, not including a threshold will default to highlight all returned responses. 108 supportedSubmitMethods | An array of of the HTTP operations that will have the 'Try it out!' option. An empty array disables all operations. This does not filter the operations from the display. 109 oauth2RedirectUrl | OAuth redirect URL 110 showRequestHeaders | Whether or not to show the headers that were sent when making a request via the 'Try it out!' option. Defaults to `false`. 111 jsonEditor | Enables a graphical view for editing complex bodies. Defaults to `false`. 112 113 * All other parameters are explained in greater detail below 114 115 116 ### HTTP Methods and API Invocation 117 swagger-ui supports invocation of all HTTP methods APIs including GET, PUT, POST, DELETE, PATCH, OPTIONS. These are handled in the [swagger-js](https://github.com/swagger-api/swagger-js) project, please see there for specifics on their usage. 118 119 120 ### Header Parameters 121 Header params are supported through a pluggable mechanism in [swagger-js](https://github.com/swagger-api/swagger-js). You can see the [index.html](https://github.com/swagger-api/swagger-ui/blob/master/dist/index.html) for a sample of how to dynamically set headers: 122 123 ```js 124 // add a new SwaggerClient.ApiKeyAuthorization when the api-key changes in the ui. 125 $('#input_apiKey').change(function() { 126 var key = $('#input_apiKey')[0].value; 127 if(key && key.trim() != "") { 128 swaggerUi.api.clientAuthorizations.add("auth_name", new SwaggerClient.ApiKeyAuthorization("api_key", key, "header")); 129 } 130 }) 131 ``` 132 133 This will add the header `api_key` with value `key` on calls that have the `auth_name` security scheme as part of their swaggerDefinitions. You can substitute `query` to send the values as a query param. 134 135 ### Custom Header Parameters - (For Basic auth etc) 136 If you have some header parameters which you need to send with every request, use the headers as below: 137 138 ```js 139 swaggerUi.api.clientAuthorizations.add("key", new SwaggerClient.ApiKeyAuthorization("Authorization", "XXXX", "header")); 140 ``` 141 142 Note! You can pass multiple header params on a single request, just use unique names for them (`key` is used in the above example). 143 144 ### Localization and translation 145 The localization files are in the [lang](/lang) directory. Note that language files and translator is not included in SwaggerUI by default. You need to add them manually. 146 147 To enable translation you should append next two lines in your Swagger's index.html (or another entry point you use) 148 ```html 149 <script src='lang/translator.js' type='text/javascript'></script> 150 <script src='lang/en.js' type='text/javascript'></script> 151 ``` 152 The first line script is a translator and the second one is your language lexemes. 153 154 If you wish to append support for new language you just need to create lang/your_lang.js and fill it like it's done in existing files. 155 156 To append new lexemex for translation you should do two things: 157 1. Add lexeme into the language file. 158 Example of new line: "new sentence":"translation of new sentence". 159 2. Mark this lexeme in source html with attribute data-sw-translate. 160 Example of changed source: 161 ```html 162 <anyHtmlTag data-sw-translate>new sentence</anyHtmlTag> 163 or <anyHtmlTag data-sw-translate value='new sentence'/> 164 ``` 165 . 166 167 At this moment only inner html, title-attribute and value-attribute are going to be translated. 168 169 ## CORS Support 170 ### OR: How to deal with "Can't read from server. It may not have the appropriate access-control-origin settings." 171 172 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. 173 174 You can read about CORS here: http://www.w3.org/TR/cors. 175 176 There are two cases where no action is needed for CORS support: 177 178 1. swagger-ui is hosted on the same server as the application itself (same host *and* port). 179 2. The application is located behind a proxy that enables the required CORS headers. This may already be covered within your organization. 180 181 Otherwise, CORS support needs to be enabled for: 182 183 1. Your Swagger docs. For Swagger 2.0 it's the `swagger.json` and any externally `$ref`ed docs, and for prior version it's the `Resource Listing` and `API Declaration` files. 184 2. For the `Try it now` button to work, CORS needs to be enabled on your API endpoints as well. 185 186 ### Testing CORS Support 187 188 You can verify CORS support with one of three techniques: 189 190 - Curl your API and inspect the headers. For instance: 191 192 ```bash 193 $ curl -I "http://petstore.swagger.io/v2/swagger.json" 194 HTTP/1.1 200 OK 195 Date: Sat, 31 Jan 2015 23:05:44 GMT 196 Access-Control-Allow-Origin: * 197 Access-Control-Allow-Methods: GET, POST, DELETE, PUT, PATCH, OPTIONS 198 Access-Control-Allow-Headers: Content-Type, api_key, Authorization 199 Content-Type: application/json 200 Content-Length: 0 201 ``` 202 203 This tells us that the petstore resource listing supports OPTIONS, and the following headers: `Content-Type`, `api_key`, `Authorization`. 204 205 - Try swagger-ui from your file system and look at the debug console. If CORS is not enabled, you'll see something like this: 206 207 ``` 208 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. 209 ``` 210 211 Swagger-UI cannot easily show this error state. 212 213 - 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. 214 215 ### Enabling CORS 216 217 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. 218 219 Other servers/frameworks may provide you information on how to enable it specifically in their use case. 220 221 ### CORS and Header Parameters 222 223 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: 224 225 ``` 226 Access-Control-Allow-Headers: Content-Type, api_key, Authorization 227 ``` 228 229 Only headers with these names will be allowed to be sent by Swagger-UI. 230 231 ## How to Improve It 232 233 Create your own fork of [swagger-api/swagger-ui](https://github.com/swagger-api/swagger-ui) 234 235 To share your changes, [submit a pull request](https://github.com/swagger-api/swagger-ui/pull/new/master). 236 237 ## Change Log 238 Please see [releases](https://github.com/swagger-api/swagger-ui/releases) for change log. 239 240 ## License 241 242 Copyright 2016 SmartBear Software 243 244 Licensed under the Apache License, Version 2.0 (the "License"); 245 you may not use this file except in compliance with the License. 246 You may obtain a copy of the License at [apache.org/licenses/LICENSE-2.0](http://www.apache.org/licenses/LICENSE-2.0) 247 248 Unless required by applicable law or agreed to in writing, software 249 distributed under the License is distributed on an "AS IS" BASIS, 250 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 251 See the License for the specific language governing permissions and 252 limitations under the License. 253 254 --- 255 <img src="http://swagger.io/wp-content/uploads/2016/02/logo.jpg"/>