beta.blog

Swagger UI is an open-source project that transforms a Swagger specification into an interactive documentation interface, allowing developers and non-developers alike to understand and interact with an API’s resources without having to implement the API first. Built on top of the Swagger specification, which is now part of the OpenAPI Specification (OAS), Swagger UI provides the following benefits:

• Interactive Documentation: Users can directly call the API from within the documentation, making it easier to understand the API’s workings.
• Visual Representation: The user-friendly interface presents methods, parameters, and responses in a clear, structured format.
• Real-time Feedback: As the API evolves, the documentation updates in real-time, reflecting the most current state of the API.
• Customizability: Developers can theme and customize the Swagger UI to align with their brand or preferred aesthetics.
• Integration: Swagger UI can be hosted independently, embedded within other applications, or integrated with other developer tools.
• Support for OAuth2: It facilitates authentication processes, enabling secure testing of endpoints that require authorization.

In essence, Swagger UI simplifies API exploration, making it easier for developers to understand, test, and integrate with the API. It is an indispensable tool in modern API-driven development, bridging the communication gap between API producers and consumers.

Since my password manager unfortunately did not save the passwords from Swagger UI, I wrote a Greasemonkey / Tampermonkey extension that allows this. The source code is:

// ==UserScript==
// @name     AutoFill Swagger UI Credentials
// @version  1.0
// @grant    none
// @include  http://localhost:8080/*/swagger-ui/**
// @include  http://localhost:18080/*/swagger-ui/**
// ==/UserScript==

function changeText(querySelector, newVal) {
  var els = document.querySelectorAll(querySelector);
  els.forEach(function(el){
    el.value = newVal;
    el.dispatchEvent(new Event('input', {
      'bubbles': true,
      'cancelable': true
    }));
  });
  return els.length;
}

var interval = setInterval(function() {
    var success = 0;
    success += changeText("#oauth_username", "test@test.com");
    success += changeText("#oauth_password", "secret123");
    success += changeText("#client_id", "my-frontend");
  
    if(success >= 3) {
        clearInterval(interval);
    }
}, 500);

Make sure to adjust the hostname (@include) and the OAUTH credentials and client ID to your own project.