Quiero crear una interfaz de administración que se conecte a dos backends diferentes. Uno de los backends proporcionará la funcionalidad general de la interfaz de administración, mientras que el otro solo expondrá una funcionalidad swagger donde mis usuarios pueden descubrir y usar mi API directamente. La pregunta es principalmente sobre el segundo, la funcionalidad mínima del primero es mostrar mi clave api, para la cual tengo una reproducción mínima. Tengo control sobre ambos backends, por lo que CORS presumiblemente no sería un problema. Mi plan es incorporar la documentación de swagger junto con la funcionalidad general. Uso un iframe para incrustar mi documentación de swagger.
Esto parece funcionar, aunque mis usuarios tienen que copiar la clave api, hacer clic en el botón "Autorizar" y pegarla. Esta no es la mejor experiencia de usuario, así que quiero que la pase automáticamente a la documentación de swagger incrustada. Descubrí que la información de autenticación utilizada por Swagger se almacena en el almacenamiento local del navegador. En este escenario específico, estaría en el almacenamiento local perteneciente a "http://localhost:3333".
Probé diferentes métodos, junto con el código que copié, intenté usar la función window.postMessage, pero no puedo reflejar el comportamiento del botón Autorizar mediante programación. Lo más cerca que estuve fue usando el código anterior, esto coloca mi variable "autorizada" codificada (iAmJohn) en el almacenamiento local, pero no en el almacenamiento local correcto. Además, aunque tengo mi clave de API en la variable "apiKey" cuando trato de pasarla a la etiqueta del script <script>localStorage.setItem('authorized', ${apiKey})<\/script> no se guarda nada en el almacenamiento local.
<!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>¿Cómo podría pasar mi información de autenticación a la documentación de Swagger automáticamente, para que los usuarios no tengan que usar el botón Autorizar?
Editar: estoy usando Nest.js