Example of setting index.html to handle basic authentication?

[Bill Kellett]

Newbie question... Using Swagger 2.0.  I have my swagger yaml working fine in editor.swagger.io.  I enable CORS on my browser, enter login and password in the editor's authentication dialog, and my REST calls run successfully.

However, when I try to run from my own web site, using the html and javascript provided in the Swagger download, I am not authenticating successfully, even though CORS is enabled in my browser.  On my web page, each call has a red exclamation icon...

... that leads to a login dialog...

... but the login does not seem to function, and my calls fail:

There is also an "api_key" field at the top of the page...

... but I don't know what the contents/format ought to be, nor how to tie it together with my REST calls.  Can anyone provide some guidance or an example I can follow?

Many thanks,

Bill.

[Bill Kellett]

I figured this out, and just wanted to close the loop...

I created two fields on my html page: input_bk_username and input_bk_password. 

In swagger-ui.js, look for // initiate request, which begins with "xhr.open(this.method, this.url, true);"

Right before the "this.emit('request', this);" I added the following:

var basicAuth = "Basic " + btoa(input_bk_username.value + ":" + input_bk_password.value);

xhr.setRequestHeader("Authorization", basicAuth);

The btoa() converts the string to BASE64.