0
267
VistasHow can I pass authentication to embedded swagger documentation?
I want to create an admin interface that will connect to two different backends. One of the backends will provide the general functionality of the admin interface, while the other one will only expose a swagger functionality where my users can discover and use my API directly. The question is mainly about the second one, the minimal functionality of the first one is displaying my api key, for which I have a minimal reproduction. I have control over both backends, so CORS presumably would not be a problem. My plan is to embed the swagger documentation alongside the general functionality. I use an iframe to embed my swagger documentation.
This seems to work, although my users have to copy the api key, click the "Authorize" button and paste it in. This is not the best user experience, so what I want it to automatically pass it to the embedded swagger documentation. I discovered that the auth info used by swagger is stored in the local storage of the browser. In this specific scenario, it would be in the local storage belonging to "http://localhost:3333".
I have tried different methods, alongside the code that I copied I tried using the window.postMessage function, but I can't mirror the behaviour of the Authorize button programatically. The closest I got was by using the code above, this does put my hardcoded "authorized" variable (iAmJohn) into local storage, but not into the right local storage. Also, even though I have my api key in the "apiKey" variable when I try to pass it to the script tag <script>localStorage.setItem('authorized', ${apiKey})<\/script> nothing gets in saved in the local storage.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h1>Api key</h1>
<p id="my-api-key">1abcde-321e-1234-abc1-c1234abcd123</p>
<iframe id="swagger-iframe" title="Swagger" width="800" height="300" src="http://localhost:3333/swagger/#/"></iframe>
<script>
const apiKey = document.getElementById("my-api-key").innerHTML;
const scriptTag = "<script>localStorage.setItem('authorized', 'iAmJohn')<\/script>"
$("#swagger-iframe").contents().find("body").append(scriptTag);
</script>
</body>
</html>
How could I pass my auth info to the swagger documentation automatically, so the users wont have to use the Authorize button?
Edit: I am using Nest.js