Swagger UI OAuth2 not working due to missing oauth2-redirect.html

[Devristo]

In the Swagger UI its possible to authorize the client using OAuth2. Currently in the NelmioApiDocBundle this is not working due to two issues:

• Parameter oauth2RedirectUrl can not be configured (this defaults to http://localhost:3000/oauth2-redirect.html).
• The oauth2-redirect.html itself is missing. This file is responsible for retrieving the OAuth token and setting the Bearer token in subsequent requests from the Swagger UI.

As a simple test I copied the https://github.com/swagger-api/swagger-ui/blob/master/dist/oauth2-redirect.html in my web root and exposed it on http://localhost:3000/oauth2-redirect.html and then it seems to be working.

However it would be much easier if NelmioApiDocBundle included this file and set the oauth2RedirectUrl to a absolute URL generated by for example a route to this view.

[aklakl]

how to fix that？

[Matt-PMCT]

I'm having this same problem and am not sure what to do, or why "oauth2-redirect.html" is hardcoded to localhost....

[Matt-PMCT]

I finally figured out the solution to this for me: https://stackoverflow.com/questions/49518868/oauth2-authorization-in-nelmioapidocbundle/49519134#49519134

[dbu]

could we make this configurable? that would mean that we need to make this js file a twig template and render it through a controller...

meanwhile, could you create a PR faq page @Lopton to explain how to configure swagger-ui, with the example of configuring oauth? to make it a complete documentation, it should mention that the js file path is likely a symlink or a copy, and will be overwritten each time assets:install is run. (i think we can't overwrite the file in app/Resources/... - that only works for twig templates, right?)

[chrisguitarguy]

could we make this configurable? that would mean that we need to make this js file a twig template and render it through a controller...

For context, the linked stackoverflow solution is to change the options passed to SwaggerUIBundle to include oauth2RedirectUrl:

const ui = SwaggerUIBundle({
      oauth2RedirectUrl: 'URLhere',
    // ...
});

There's already some configurabily in place now vis userOptions here:

NelmioApiDocBundle/Resources/public/init-swagger-ui.js

Line 8 in 9cd417e

function loadSwaggerUI(userOptions = {}) {

Which are passed in via the twig template:

NelmioApiDocBundle/Resources/views/SwaggerUi/index.html.twig

Lines 79 to 80 in 9cd417e

	var swaggerUI = {{ swagger_ui_config|json_encode(65)|raw }};
	window.onload = loadSwaggerUI(swaggerUI);

NelmioApiDocBundle/Render/Html/HtmlOpenApiRenderer.php

Lines 44 to 58 in 9cd417e

	public function render(OpenApi $spec, array $options = []): string
	{
	$options += [
	'assets_mode' => AssetsMode::CDN,
	'swagger_ui_config' => [],
	];
	return $this->twig->render(
	'@NelmioApiDoc/SwaggerUi/index.html.twig',
	[
	'swagger_data' => ['spec' => json_decode($spec->toJson(), true)],
	'assets_mode' => $options['assets_mode'],
	'swagger_ui_config' => $options['swagger_ui_config'],
	]
	);

I'm 50/50 here, this is probably a good idea to make configurable, but it's also pretty easy to do in twig by overriding the template now:

{# in templates/bundles/NelmioApiDocBundle/SwaggerUi/index.html.twig #}
{% extends '@!NelmioApiDoc/SwaggerUi/index.html.twig' %}

{% block swagger_initialization %}
        <script type="text/javascript">
            (function () {
                var swaggerUI = {{ swagger_ui_config|json_encode(65)|raw }};
                swaggerUI.oauth2RedirectUrl = 'changeme';
                window.onload = loadSwaggerUI(swaggerUI);
            })();
        </script>
{% endblock swagger_initialization %}

Open to feedback. I honeslty do not use the auth bits of swagger UI.

[chrisguitarguy]

Going to close this one in favor of #1330