Add swagger-ui auth hooks

Save authorization to local storage, refetch spec on auth, etc.

.idea/drf-yasg.iml

@@ -27,12 +27,14 @@
     </content>
     <orderEntry type="jdk" jdkName="Python 3 (drf-yasg)" jdkType="Python SDK" />
     <orderEntry type="sourceFolder" forTests="false" />
+    <orderEntry type="library" name="immutable" level="application" />
   </component>
   <component name="TemplatesService">
     <option name="TEMPLATE_CONFIGURATION" value="Django" />
     <option name="TEMPLATE_FOLDERS">
       <list>
         <option value="$MODULE_DIR$/src/drf_yasg/templates" />
+        <option value="$MODULE_DIR$/testproj/testproj/templates" />
       </list>
     </option>
   </component>

.idea/jsLibraryMappings.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptLibraryMappings">
+    <file url="file://$PROJECT_DIR$" libraries="{immutable}" />
+  </component>
+</project>

src/drf_yasg/app_settings.py

@@ -33,7 +33,7 @@ SWAGGER_DEFAULTS = {
 
     'USE_SESSION_AUTH': True,
     'SECURITY_DEFINITIONS': {
-        'basic': {
+        'Basic': {
             'type': 'basic'
         }
     },

src/drf_yasg/static/drf-yasg/swagger-ui-init.js

@@ -1,27 +1,60 @@
 "use strict";
 var currentPath = window.location.protocol + "//" + window.location.host + window.location.pathname;
-var specURL = currentPath + '?format=openapi';
+var defaultSpecUrl = currentPath + '?format=openapi';
+var savedAuth = Immutable.fromJS({});
+try {
+    savedAuth = Immutable.fromJS(JSON.parse(localStorage.getItem("drf-yasg-auth")) || {});
+} catch (e) {
+    localStorage.removeItem("drf-yasg-auth");
+}
+var swaggerUiConfig = {
+    url: defaultSpecUrl,
+    dom_id: '#swagger-ui',
+    displayRequestDuration: true,
+    presets: [
+        SwaggerUIBundle.presets.apis,
+        SwaggerUIStandalonePreset
+    ],
+    plugins: [
+        SwaggerUIBundle.plugins.DownloadUrl
+    ],
+    layout: "StandaloneLayout",
+    filter: true,
+    requestInterceptor: function (request) {
+        var headers = request.headers || {};
+        var csrftoken = document.querySelector("[name=csrfmiddlewaretoken]");
+        if (csrftoken) {
+            headers["X-CSRFToken"] = csrftoken.value;
+        }
+
+        if (request.loadSpec) {
+            applyAuth(savedAuth, headers);
+        }
+        return request;
+    },
+    onComplete: function () {
+        preauthorizeAny(savedAuth, window.ui);
+        hookAuthActions(window.ui);
+    },
+};
 
 function patchSwaggerUi() {
+    if (document.querySelector('.auth-wrapper #django-session-auth')) {
+        return;
+    }
+
     var authWrapper = document.querySelector('.auth-wrapper');
     var authorizeButton = document.querySelector('.auth-wrapper .authorize');
     var djangoSessionAuth = document.querySelector('#django-session-auth');
+
     if (!djangoSessionAuth) {
         console.log("WARNING: session auth disabled");
         return;
     }
 
-    if (document.querySelector('.auth-wrapper #django-session-auth')) {
+    djangoSessionAuth = djangoSessionAuth.cloneNode(true);
-        console.log("WARNING: session auth already patched; skipping patchSwaggerUi()");
-        return;
-    }
-
     authWrapper.insertBefore(djangoSessionAuth, authorizeButton);
     djangoSessionAuth.classList.remove("hidden");
-
-    var divider = document.createElement("div");
-    divider.classList.add("divider");
-    authWrapper.insertBefore(divider, authorizeButton);
 }
 
 function initSwaggerUi() {
@@ -29,28 +62,6 @@ function initSwaggerUi() {
         console.log("WARNING: skipping initSwaggerUi() because window.ui is already defined");
         return;
     }
-    var swaggerConfig = {
-        url: specURL,
-        dom_id: '#swagger-ui',
-        displayRequestDuration: true,
-        presets: [
-            SwaggerUIBundle.presets.apis,
-            SwaggerUIStandalonePreset
-        ],
-        plugins: [
-            SwaggerUIBundle.plugins.DownloadUrl
-        ],
-        layout: "StandaloneLayout",
-        filter: true,
-        requestInterceptor: function (request) {
-            var headers = request.headers || {};
-            var csrftoken = document.querySelector("[name=csrfmiddlewaretoken]");
-            if (csrftoken) {
-                headers["X-CSRFToken"] = csrftoken.value;
-            }
-            return request;
-        }
-    };
 
     var swaggerSettings = JSON.parse(document.getElementById('swagger-settings').innerHTML);
     if (!('oauth2RedirectUrl' in swaggerSettings)) {
@@ -64,23 +75,82 @@ function initSwaggerUi() {
     console.log('swaggerSettings', swaggerSettings);
     for (var p in swaggerSettings) {
         if (swaggerSettings.hasOwnProperty(p)) {
-            swaggerConfig[p] = swaggerSettings[p];
+            swaggerUiConfig[p] = swaggerSettings[p];
         }
     }
-    window.ui = SwaggerUIBundle(swaggerConfig);
 
     var oauth2Config = JSON.parse(document.getElementById('oauth2-config').innerHTML);
     console.log('oauth2Config', oauth2Config);
+    window.ui = SwaggerUIBundle(swaggerUiConfig);
     window.ui.initOAuth(oauth2Config);
 }
 
-window.onload = function () {
+function preauthorizeAny(savedAuth, sui) {
-    initSwaggerUi();
+    var schemeName = savedAuth.get("name"), schemeType = savedAuth.getIn(["schema", "type"]);
-};
+    if (schemeType === "basic" && schemeName) {
+        var username = savedAuth.getIn(["value", "username"]);
+        var password = savedAuth.getIn(["value", "password"]);
+        if (username && password) {
+            sui.preauthorizeBasic(schemeName, username, password);
+        }
+    } else if (schemeType === "apiKey" && schemeName) {
+        var key = savedAuth.get("value");
+        if (key) {
+            sui.preauthorizeApiKey(schemeName, key);
+        }
+    }
+}
 
-if (document.querySelector('.auth-wrapper .authorize')) {
+function applyAuth(savedAuth, requestHeaders) {
-    patchSwaggerUi();
+    var schemeName = savedAuth.get("name"), schemeType = savedAuth.getIn(["schema", "type"]);
+    if (schemeType === "basic" && schemeName) {
+        var username = savedAuth.getIn(["value", "username"]);
+        var password = savedAuth.getIn(["value", "password"]);
+        if (username && password) {
+            requestHeaders["Authorization"] = "Basic " + btoa(username + ":" + password);
+        }
+    } else if (schemeType === "apiKey" && schemeName) {
+        var key = savedAuth.get("value"), _in = savedAuth.getIn(["schema", "in"]);
+        var paramName = savedAuth.getIn(["schema", "name"]);
+        if (key && paramName && _in === "header") {
+            requestHeaders[paramName] = key;
+        }
+        if (_in === "query") {
+            console.warn("WARNING: cannot apply apiKey query parameter via interceptor");
+        }
+    }
 }
-else {
+
-    insertionQ('.auth-wrapper .authorize').every(patchSwaggerUi);
+function hookAuthActions(sui) {
+    var originalAuthorize = sui.authActions.authorize;
+    sui.authActions.authorize = function (authorization) {
+        originalAuthorize(authorization);
+        // authorization is map of scheme name to scheme object
+        // need to use ImmutableJS because schema is already an ImmutableJS object
+        var schemes = Immutable.fromJS(authorization);
+        var auth = schemes.valueSeq().first();
+        localStorage.setItem("drf-yasg-auth", JSON.stringify(auth.toJSON()));
+        savedAuth = auth;
+        sui.specActions.download();
+    };
+
+    var originalLogout = sui.authActions.logout;
+    sui.authActions.logout = function (authorization) {
+        if (savedAuth.get("name") === authorization[0]) {
+            localStorage.removeItem("drf-yasg-auth");
+            savedAuth = Immutable.fromJS({});
+        }
+        originalLogout(authorization);
+    };
 }
+
+window.addEventListener('load', function () {
+    initSwaggerUi();
+
+    if (document.querySelector('.auth-wrapper .authorize')) {
+        patchSwaggerUi();
+    }
+    else {
+        insertionQ('.auth-wrapper .authorize').every(patchSwaggerUi);
+    }
+});

src/drf_yasg/templates/drf-yasg/swagger-ui.html

@@ -26,6 +26,7 @@
 <script src="{% static 'drf-yasg/swagger-ui-dist/swagger-ui-bundle.js' %}"></script>
 <script src="{% static 'drf-yasg/swagger-ui-dist/swagger-ui-standalone-preset.js' %}"></script>
 <script src="{% static 'drf-yasg/insQ.min.js' %}"></script>
+<script src="{% static 'drf-yasg/immutable.js' %}"></script>
 <script src="{% static 'drf-yasg/swagger-ui-init.js' %}"></script>
 {% block extra_scripts %}
     {# -- Add any additional scripts here -- #}

testproj/testproj/settings/base.py

@@ -49,7 +49,7 @@ ROOT_URLCONF = 'testproj.urls'
 TEMPLATES = [
     {
         'BACKEND': 'django.template.backends.django.DjangoTemplates',
-        'DIRS': [],
+        'DIRS': [os.path.join(BASE_DIR, 'testproj', 'templates')],
         'APP_DIRS': True,
         'OPTIONS': {
             'context_processors': [
@@ -132,6 +132,9 @@ USE_TZ = True
 
 STATIC_URL = '/static/'
 STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
+STATICFILES_DIRS = [
+    os.path.join(BASE_DIR, 'testproj', 'static'),
+]
 
 # Testing
 

update-ui.sh

@@ -7,6 +7,7 @@ wget https://rebilly.github.io/ReDoc/releases/v1.x.x/redoc.min.js -O src/drf_yas
 
 cp -r node_modules/swagger-ui-dist src/drf_yasg/static/drf-yasg/
 pushd src/drf_yasg/static/drf-yasg/swagger-ui-dist/ >/dev/null
+rm -f swagger-ui.js
 rm -f package.json .npmignore README.md
 rm -f index.html *.map
 popd >/dev/null