Custom javascript src url and custom javascript code options

[CoreDX9]

I want to add a plugin into swagger UI, but I can not inject script of plugin and configure plugin. The configuration of plugin needs functions as property, simple json can not deserialize to function.

Add properties to option class.

public List<string> JavascriptUrls { get; set; } // inject <script scr=""></script>

public string? CustomJavascriptCode { get; set; } // will run before init swagger application, config object is a parameter.

[ctyar]

Could you please share a small sample (or snippet) of the usage showing how you intend to use these new JavascriptUrls and CustomJavascriptCode options together?

It would help to see an example of a plugin/use-case and what it achieves in Swagger UI.

A minimal repro/use-case example would be perfect.

[CoreDX9]

plugin:

<script src='https://unpkg.com/@mairu/swagger-ui-apikey-auth-form@1.2.1/dist/swagger-ui-apikey-auth-form.js' type='text/javascript'></script>

JavascriptUrls = ["https://unpkg.com/@mairu/swagger-ui-apikey-auth-form@1.2.1/dist/swagger-ui-apikey-auth-form.js"]

CustomJavascriptCode to configure configObject:

            // configObject init in options

            // custom code start, can move to script file in wwwroot, then inject from JavascriptUrls and call function with parameter configObject 
            if (Array.isArray(configObject.plugins)) {
                configObject.plugins = [...configObject.plugins, SwaggerUIApiKeyAuthFormPlugin];
            }
            else {
                configObject.plugins = [SwaggerUIApiKeyAuthFormPlugin];
            }
            
            configObject.configs = {};
            configObject.configs.apiKeyAuthFormPlugin =
            {
                forms: {
                    IdentityBearer: {
                        fields: {
                            userName: {
                                type: 'text',
                                label: 'User name',
                            },
                            password: {
                                type: 'password',
                                label: 'Password',
                            },
                            twoFactorCode: {
                                type: 'text',
                                label: 'Two factor code',
                            },
                            twoFactorRecoveryCode: {
                                type: 'text',
                                label: 'Two factor recovery code',
                            }
                        },
                        authCallback: function (values, callback) {
                            ui.fn.fetch({
                                url: '/api/account/user-name-login',
                                method: 'post',
                                headers: {
                                    Accept: 'application/json',
                                    'Content-Type': 'application/json',
                                },
                                body: JSON.stringify(values),
                            }).then(function (response) {
                                const json = JSON.parse(response.data);
                                if (json.accessToken) {
                                    callback(null, json.accessToken);
                                } else {
                                    callback('error while login');
                                }
                            }).catch(function (err) {
                                console.log(err, Object.entries(err));
                                callback('error while login');
                            });
                        }
                    },
                    IdentityBearerGetQueryString: {
                        fields: {
                            userName: {
                                type: 'text',
                                label: 'User name',
                            },
                            password: {
                                type: 'password',
                                label: 'Password',
                            },
                            twoFactorCode: {
                                type: 'text',
                                label: 'Two factor code',
                            },
                            twoFactorRecoveryCode: {
                                type: 'text',
                                label: 'Two factor recovery code',
                            }
                        },
                        authCallback: function (values, callback) {
                            ui.fn.fetch({
                                url: '/api/account/user-name-login',
                                method: 'post',
                                headers: {
                                    Accept: 'application/json',
                                    'Content-Type': 'application/json',
                                },
                                body: JSON.stringify(values),
                            }).then(function (response) {
                                const json = JSON.parse(response.data);
                                if (json.accessToken) {
                                    callback(null, json.accessToken);
                                } else {
                                    callback('error while login');
                                }
                            }).catch(function (err) {
                                console.log(err, Object.entries(err));
                                callback('error while login');
                            });
                        }
                    }
                },
                localStorage: {
                    IdentityBearer: {},
                    IdentityBearerGetQueryString: {}
                }
            }

            // custom code end

            // Begin Swagger UI call region

            const ui = SwaggerUIBundle(configObject);

            ui.initOAuth(oauthConfigObject);

            // End Swagger UI call region

            window.ui = ui

Now bearer token can use username and password instead raw token value.

[ctyar]

I'm not totally sure what this plugin is meant to accomplish

If your goal is basic auth (username/password), Swagger already supports that out of the box, you wouldn’t need an additional plugin.

If it’s for something else, I’ve added features to the package so you can include a custom JS file and inject custom logic into the configObject. I couldn’t test your changes directly because your code wasn’t working on my end (maybe you’ll have better luck).

Please grab the latest version of the package here:
https://github.com/ctyar/SwaggerUI.OpenApi/pkgs/nuget/SwaggerUi.OpenApi

You can test the updates like this:

builder.Services.AddSwaggerUI(o =>
{
    o.Scripts.Add("https://unpkg.com/@mairu/swagger-ui-apikey-auth-form@1.2.1/dist/swagger-ui-apikey-auth-form.js");
    o.Plugins ??= [];
    o.Plugins.Add("SwaggerUIApiKeyAuthFormPlugin");

    o.Functions ??= [];
    o.Functions.Add("configs", "{};");
    o.Functions.Add("configs.apiKeyAuthFormPlugin",
    """
    {
        forms: {
            IdentityBearer: {
                fields: {
                    userName: {
                        type: 'text',
                        label: 'User name',
                    },
                    password: {
                        type: 'password',
                        label: 'Password',
                    },
                    twoFactorCode: {
                        type: 'text',
                        label: 'Two factor code',
                    },
                    twoFactorRecoveryCode: {
                        type: 'text',
                        label: 'Two factor recovery code',
                    }
                },
                authCallback: function (values, callback) {
                    ui.fn.fetch({
                        url: '/api/account/user-name-login',
                        method: 'post',
                        headers: {
                            Accept: 'application/json',
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify(values),
                    }).then(function (response) {
                        const json = JSON.parse(response.data);
                        if (json.accessToken) {
                            callback(null, json.accessToken);
                        } else {
                            callback('error while login');
                        }
                    }).catch(function (err) {
                        console.log(err, Object.entries(err));
                        callback('error while login');
                    });
                }
            },
            IdentityBearerGetQueryString: {
                fields: {
                    userName: {
                        type: 'text',
                        label: 'User name',
                    },
                    password: {
                        type: 'password',
                        label: 'Password',
                    },
                    twoFactorCode: {
                        type: 'text',
                        label: 'Two factor code',
                    },
                    twoFactorRecoveryCode: {
                        type: 'text',
                        label: 'Two factor recovery code',
                    }
                },
                authCallback: function (values, callback) {
                    ui.fn.fetch({
                        url: '/api/account/user-name-login',
                        method: 'post',
                        headers: {
                            Accept: 'application/json',
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify(values),
                    }).then(function (response) {
                        const json = JSON.parse(response.data);
                        if (json.accessToken) {
                            callback(null, json.accessToken);
                        } else {
                            callback('error while login');
                        }
                    }).catch(function (err) {
                        console.log(err, Object.entries(err));
                        callback('error while login');
                    });
                }
            }
        },
        localStorage: {
            IdentityBearer: {},
            IdentityBearerGetQueryString: {}
        }
    }
    """);
});

Let me know how it goes.

[CoreDX9]

@ctyar Package link returned a 404 response. Package on nuget is not found new version. Should I wait for version updates or build from source code?

[ctyar]

Sorry about that, it should work now

[CoreDX9]

@ctyar Package link works well now. Package version 3.0.0-alpha.3 is not found on nuget.

[CoreDX9]

@ctyar Package version 3.0.0-alpha.3 is still not found on nuget. I can't test in my code.