为 Swagger-UI 添加基本授权
Posted
技术标签:
【中文标题】为 Swagger-UI 添加基本授权【英文标题】：Adding Basic Authorization for Swagger-UI 【发布时间】：2015-09-12 11:20:57 【问题描述】：我目前已经部署了一个 swagger 项目，但我无法为其添加一些基本授权。当前，当您单击“试试看！”按钮 您需要登录帐户才能访问结果。我有一个帐户，每次有人尝试访问 api 时我都希望自动使用该帐户。 Bellow 是我的项目 index.html：
<!DOCTYPE html>
<html>
<head>
<title>Swagger UI</title>
<link href='css/screen.css' media='screen' rel='stylesheet' type='text/css'/>
<link href='css/screen.css' media='print' rel='stylesheet' type='text/css'/>
<script src='lib/jquery-1.8.3.js' type='text/javascript'></script>
<script src='lib/jquery.slideto.min.js' type='text/javascript'></script>
<script src='lib/jquery.wiggle.min.js' type='text/javascript'></script>
<script src='lib/jquery.ba-bbq.min.js' type='text/javascript'></script>
<script src='lib/handlebars-1.0.rc.1.js' type='text/javascript'></script>
<script src='lib/underscore-min.js' type='text/javascript'></script>
<script src='lib/backbone-min.js' type='text/javascript'></script>
<script src='lib/swagger.js' type='text/javascript'></script>
<script src='lib/swagger-ui.js' type='text/javascript'></script>
<script src='lib/highlight.7.3.pack.js' type='text/javascript'></script>
<script type="text/javascript">
$(function ()
window.swaggerUi = new SwaggerUi(
discoveryUrl:"https://localhost:8080/AssistAPI/api-docs.json",
apiKey:"",
dom_id:"swagger-ui-container",
supportHeaderParams: true,
supportedSubmitMethods: ['get', 'post', 'put'],
onComplete: function(swaggerApi, swaggerUi)
if(console)
console.log("Loaded SwaggerUI")
console.log(swaggerApi);
console.log(swaggerUi);
$('pre code').each(function(i, e) hljs.highlightBlock(e));
,
onFailure: function(data)
if(console)
console.log("Unable to Load SwaggerUI");
console.log(data);
,
docExpansion: "none"
);
window.authorizations.add("key", new ApiKeyAuthorization("Authorization", "XXXX"header"));
//window.authorizations.add("key", new ApiKeyAuthorization("username", "rmanda", "header"));
window.swaggerUi.load();
);
</script>
</head>
<body class="swagger-section">
<div id='header'>
<div class="swagger-ui-wrap">
<a id="logo" href="http://swagger.io">swagger</a>
<form id='api_selector'>
<div class='input'><input placeholder="http://example.com/api" id="input_baseUrl" name="baseUrl" type="text"/></div>
<div class='input'><input placeholder="api_key" id="input_apiKey" name="apiKey" type="text"/></div>
<div class='input'><a id="explore" href="#">Explore</a></div>
</form>
</div>
</div>
<div id="message-bar" class="swagger-ui-wrap"> </div>
<div id="swagger-ui-container" class="swagger-ui-wrap"></div>
</body>
</html>
我正在尝试确定信息应该去哪里以允许基本授权。我知道它涉及以下代码行，但有人可以更详细地向我解释一下事情到底在哪里。我已经意识到 GitHub 上 swagger 的文档不是很清楚或没有帮助
window.authorizations.add("key", new ApiKeyAuthorization("Authorization", "XXXX"header"));
window.authorizations.add("key", new ApiKeyAuthorization("username", "password", "header"));
【问题讨论】：
【参考方案1】：Swagger UI 3.x
在 Swagger UI 3.13.0+ 中，您可以使用 preauthorizeBasic 方法为“试用”调用预先填写基本身份验证用户名和密码。
假设您的 API 定义包含基本身份验证的安全方案：
swagger: '2.0'
...
securityDefinitions:
basicAuth:
type: basic
security:
- basicAuth: []
您可以像这样为基本身份验证指定默认用户名和密码：
// index.html
const ui = SwaggerUIBundle(
url: "https://my.api.com/swagger.yaml",
...
onComplete: function()
// "basicAuth" is the key name of the security scheme in securityDefinitions
ui.preauthorizeBasic("basicAuth", "username", "password");
)
“Try it out”将使用指定的用户名和密码，如果您在 Swagger UI 中单击“授权”按钮，您会看到用户名和掩码密码已预先填写在 UI 中。
This answer 还包含针对 Swagger UI 3.1.6-3.12.1 的解决方案，它没有 preauthorizeBasic 功能。
【讨论】：
简单并完成工作。这次真是万分感谢！让我头疼不已。希望这是公认的答案，但我意识到这个问题来自 4 年前。这适用于我的 API 密钥身份验证的 Swagger UI 3+【参考方案2】：Basic authentication Header的正确设置是：
Authorization: Basic username:password
字符串 username:password 需要使用 RFC2045-MIME（Base64 的变体）进行编码。 在此处查看更多详细信息：https://en.wikipedia.org/wiki/Basic_access_authentication#Client_side
然后，要配置此标头，您应该这样做：
考虑到 username:password 的 Base64 编码是 dXNlcm5hbWU6cGFzc3dvcmQ=
swaggerUi.api.clientAuthorizations.add("key", new SwaggerClient.ApiKeyAuthorization("Authorization", "Basic dXNlcm5hbWU6cGFzc3dvcmQ=", "header"));
在此处阅读有关此内容的更多信息： https://github.com/swagger-api/swagger-ui
【讨论】：
确保在swaggerUi.load()这一行之后添加这一行【参考方案3】：
我遇到了类似的问题，建议的答案在我的情况下是正确的，我最终在 index.html 中添加了一些内容，例如：
var myAuth = "Basic " + btoa("user:password");
window.authorizations.add("key", neSwaggerClient.ApiKeyAuthorization("Authorization", myAuth, "header"));
我在标记的方法addApiKeyAuthorization 上添加了这个，或者您可以创建另一个方法但在window.swaggerUi.load(); 之后调用它
但是，如果您的 swagger-ui 使用 gulp 或 grunt 之类的“独立”运行，您可能需要配置服务以接受所有 OPTIONS 请求。
我对此有点挣扎，我希望它对某人有所帮助。
问候
【讨论】：
【参考方案4】：您可以在 dist/index.html 文件中添加/更改此功能
function addApiKeyAuthorization()
var key = encodeURIComponent($('#input_apiKey')[0].value);
if(key && key.trim() != "")
key = 'Basic '+key;
var apiKeyAuth = new SwaggerClient.ApiKeyAuthorization("Authorization", key, "header");
window.swaggerUi.api.clientAuthorizations.add("Authorization", apiKeyAuth);
log("added key " + key);
或者您可以继续使用新版本的 Swagger 2.0，这个已知问题已修复。
【讨论】：
以上是关于为 Swagger-UI 添加基本授权的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 openapi-ui 和承载令牌（jwt）在 swagger-ui 中激活授权按钮？
spring boot 用swagger-ui.html打开后怎么授权