* [**Swagger UI**](https://github.com/swagger-api/swagger-ui) 提供互動式探索，讓你可以直接從瀏覽器呼叫並測試你的 API 。

![Swagger UI interaction](https://fastapi.tiangolo.com/img/index/index-03-swagger-02.png)

* 使用 [**ReDoc**](https://github.com/Rebilly/ReDoc) 的替代 API 文件。

![ReDoc](https://fastapi.tiangolo.com/img/index/index-06-redoc-02.png)

### 現代 Python { #just-modern-python }

這一切都基於標準的 **Python 型別**宣告（感謝 Pydantic）。無需學習新的語法，只需使用標準的現代 Python。

你可以在 [http://127.0.0.1:8000/docs](http://127.0.0.1:8000/docs) 查看：

<img src="/img/tutorial/behind-a-proxy/image01.png">

但如果我们在“官方”URL（代理端口为 `9999`）的 `/api/v1/docs` 访问文档界面，它就能正常工作！🎉

你可以在 [http://127.0.0.1:9999/api/v1/docs](http://127.0.0.1:9999/api/v1/docs) 查看：

<img src="/img/tutorial/behind-a-proxy/image02.png">

完全符合我们的预期。✔️

And you will be able to select which scopes you want to give access to: `me` and `items`.

This is the same mechanism used when you give permissions while logging in with Facebook, Google, GitHub, etc:

<img src="/img/tutorial/security/image11.png">

## JWT token with scopes { #jwt-token-with-scopes }

Now, modify the token *path operation* to return the scopes requested.

{* ../../docs_src/security/tutorial006_an_py310.py hl[4,8,12] *}

When you try to open the URL for the first time (or click the "Execute" button in the docs) the browser will ask you for your username and password:

<img src="/img/tutorial/security/image12.png">

## Check the username { #check-the-username }

Here's a more complete example.

Use a dependency to check if the username and password are correct.

    page.get_by_role("button", name="Item", exact=True).click()
    page.set_viewport_size({"width": 960, "height": 700})
    # Manually add the screenshot
    page.screenshot(
        path="docs/en/docs/img/tutorial/separate-openapi-schemas/image05.png"
    )

    # ---------------------
    context.close()
    browser.close()


process = subprocess.Popen(

    page.get_by_role("button", name="Try it out").click()
    page.get_by_role("button", name="Execute").click()
    # Manually add the screenshot
    page.screenshot(
        path="docs/en/docs/img/tutorial/separate-openapi-schemas/image02.png"
    )

    # ---------------------
    context.close()
    browser.close()


process = subprocess.Popen(

    page = context.new_page()
    page.goto("http://localhost:8000/docs")
    page.get_by_label("post /heroes/").click()
    # Manually add the screenshot
    page.screenshot(path="docs/en/docs/img/tutorial/sql-databases/image02.png")

    # ---------------------
    context.close()
    browser.close()


process = subprocess.Popen(
    ["fastapi", "run", "docs_src/sql_databases/tutorial002.py"],
)
try:

    page = context.new_page()
    page.goto("http://localhost:8000/docs")
    page.get_by_role("link", name="/items/").click()
    # Manually add the screenshot
    page.screenshot(path="docs/en/docs/img/tutorial/cookie-param-models/image01.png")

    # ---------------------
    context.close()
    browser.close()


process = subprocess.Popen(
    ["fastapi", "run", "docs_src/cookie_param_models/tutorial001.py"]

[http://127.0.0.1:8000/docs](http://127.0.0.1:8000/docs) を確認してください:

<img src="/img/tutorial/behind-a-proxy/image01.png">

しかし、プロキシ（ポート `9999`）を使った「公式」URL `/api/v1/docs` でドキュメント UI にアクセスすると、正しく動作します！🎉

[http://127.0.0.1:9999/api/v1/docs](http://127.0.0.1:9999/api/v1/docs) を確認してください:

<img src="/img/tutorial/behind-a-proxy/image02.png">

ねらいどおりです。✔️

* [**Swagger UI**](https://github.com/swagger-api/swagger-ui)。インタラクティブに探索しつつ、ブラウザから直接 API を呼び出してテストできます。

![Swagger UI interaction](https://fastapi.tiangolo.com/img/index/index-03-swagger-02.png)

* [**ReDoc**](https://github.com/Rebilly/ReDoc) による代替の API ドキュメント。

![ReDoc](https://fastapi.tiangolo.com/img/index/index-06-redoc-02.png)

### 現代的なPythonのみ { #just-modern-python }