为 Swagger-UI 添加基本授权 [英] Adding Basic Authorization for Swagger-UI
问题描述
我目前已经部署了一个 swagger 项目，但我无法为其添加一些基本授权.当前，当您单击试试看！"按钮 您需要登录帐户才能访问结果.我有一个帐户，每次有人尝试访问 api 时我都希望自动使用该帐户.Bellow 是我的项目 index.html:
I have currently deployed a swagger project but I am having trouble adding some basic authorization to it. Currenty when you click on the "Try it out!" button you are required to log in to an account to access the results. I have an account that I want to automatically be used everytime someone tries to access the api. Bellow is my index.html for the project:
<!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 的文档不是很清楚或没有帮助
I am trying to determine where the information is supposed to go to allow Basic Authorization. I know it involved the following lines of code, but can someone please explain to me in a little more detail where things go exactly. I have come to the realization that the documentation for swagger on GitHub is not very clear or helpful
window.authorizations.add("key", new ApiKeyAuthorization("Authorization", "XXXX"header"));
window.authorizations.add("key", new ApiKeyAuthorization("username", "password", "header"));
推荐答案
Swagger UI 3.x
在 Swagger UI 3.13.0+ 中，您可以使用 preauthorizeBasic 方法为试用"调用预先填写基本身份验证用户名和密码.
Swagger UI 3.x
In Swagger UI 3.13.0+, you can use the preauthorizeBasic method to pre-fill the Basic auth username and password for "try it out" calls.
假设您的 API 定义包含基本身份验证的安全方案:
Assuming your API definition includes a security scheme for Basic auth:
swagger: '2.0'
...
securityDefinitions:
basicAuth:
type: basic
security:
- basicAuth: []
您可以像这样指定基本身份验证的默认用户名和密码:
you can specify the default username and password for Basic auth like so:
// 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 中.
"Try it out" will use the specified username and password, and if you click the "Authorize" button in Swagger UI, you will see that the username and masked password are pre-filled in the UI.
这个答案还包含一个针对 Swagger UI 3.1.6-3.12.1 的解决方案，它没有 preauthorizeBasic 功能.
This answer also contains a solution for Swagger UI 3.1.6—3.12.1, which do not have the preauthorizeBasic feature.
这篇关于为 Swagger-UI 添加基本授权的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
