Swagger Oauth redirect not working

[ttekampe]

Describe the bug
I am trying to set up swagger with oauth2 flow. I set the the authorizationUrl in the SecurityScheme that I pass to the SpecTree constructor. On the swagger page that is created by spectree I can click the Authorize button, which redirects me to my identity provider's login page. If I login, I am redirected back to the swagger with some query parameters that include the JWT. However, the URL that I am redirected to does not exist in the app.

I am new to setting up swagger, is this URL endpoint created automatically by spectree on my falcon app, or is some work needed from my end?

Expected behavior
I should end up on the swagger page again with the Authorization header prepopulated such that I can send requests to the endpoints documented in the OpenAPI specs that already include the JWT.

Desktop (please complete the following information):

• docker image python:3.10-slim-buster

Python Information (please complete the following information):

• Python Version: 3.10
• Library Version
  • spectree=0.7.1
• Other dependencies:
  • falcon==3.0.1
  • uvicorn==0.17.0

Additional context
Maybe I am just missing some required steps to set this up. If that is the case, would it be possible for you to add documentation around this topic?

[kemingy]

Thanks for your feedback. I didn't test this feature before.

So I just follow the Swagger OAuth2 + Google OAuth2 documents.

The SecurityScheme I use is

SecurityScheme(
      name="auth_oauth2",
      data={
          "type": "oauth2",
          "flows": {
              "authorizationCode": {
                  "authorizationUrl": "https://accounts.google.com/o/oauth2/v2/auth",
                  "tokenUrl": "https://sts.googleapis.com",
                  "scopes": {
                      "https://www.googleapis.com/auth/tasks.readonly": "View your tasks",
                  },
              },
          },
      },
  )

I found that the redirect URL is incorrect. Here is a good answer: https://stackoverflow.com/a/54251778

After I change this in the spectree/page.py, it works.

window.onload = function() {{
        var full = location.protocol + '//' + location.hostname + (location.port ? ':' + location.port : '');
        // Begin Swagger UI call region
        const ui = SwaggerUIBundle({{
            url: "{spec_url}",
            dom_id: '#swagger-ui',
            deepLinking: true,
            presets: [
            SwaggerUIBundle.presets.apis,
            SwaggerUIStandalonePreset
            ],
            plugins: [
            SwaggerUIBundle.plugins.DownloadUrl
            ],
            oauth2RedirectUrl: full + "/apidoc/swagger",
            layout: "StandaloneLayout"
        }})
        // End Swagger UI call region

        window.ui = ui
        }}

I'll create a PR.

[kemingy]

Hi @ttekampe you can try the following PR to see if it works for you.

• Fix swagger oauth2 redirect #196

[ttekampe]

@kemingy I just tested, the redirect is working. Thanks a lot!

I have one remaining question about the client_id. When you hit the Authorize button, you are asked for it (see screenshot). I saw other swaggers that have the field pre-populated and was wondering how to achieve this with spectree.

[kemingy]

I found a document about this:

• https://swagger.io/docs/open-source-tools/swagger-ui/usage/oauth2/

Will add this feature.

[kemingy]

Hi @ttekampe, you can install the following PR and try to add the client_id when you init SpecTree.

spectree/examples/security_demo.py

Lines 45 to 50 in b574d1d

	api = SpecTree(
	"flask",
	security_schemes=security_schemes,
	SECURITY={"test_secure": []},
	client_id="client_id",
	)

• Fix swagger oauth2 redirect #196

[ttekampe]

Hi @kemingy,

thanks a lot for your help! The client_id is now prepopulated and also the redirect back to the swagger from the authorization server is working.
However, the swagger does not pick up the JWT. So it is not added to the request headers such that my APIs return unauthorized.

The URL I am redirected to from the auth endpoint looks like this:

http://localhost:7001/apidoc/swagger#/state=<SOME_STATE>&access_token=<MY_JWT>&token_type=Bearer&expires_in=3600

(is there a ? missing between URL and query string?)

Also, looking at other swaggers, their redirect url goes to swagger/oauth2-redirect.html

It should be this file here

I tried working with a local copy of spectree making the following change in page.py

oauth2RedirectUrl: full + "/{spec_path}/swagger/oauth2-redirect.html",

but this only results in a 404 after the redirect.

[kemingy]

Hi @ttekampe, thanks for your feedback. I added this swagger/oauth2-redirect.html page to the SpecTree. You can try it with the latest update in the following PR:

• Fix swagger oauth2 redirect #196

I encountered a "TypeError: NetworkError when attempting to fetch resource." error. I think it's related to the CORS.

• https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowOrigin
• https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
• swagger version 3 error NetworkError when attempting to fetch resource. swagger-api/swagger-ui#4586

Let me know if you have any other questions.

[ttekampe]

Hi @kemingy ,

I just tested your latest changes and it works now.

Thank you very much!