from fastapi.security import OAuth2AuthorizationCodeBearer
from fastapi.testclient import TestClient
from inline_snapshot import snapshot

app = FastAPI()

oauth2_scheme = OAuth2AuthorizationCodeBearer(
    authorizationUrl="authorize",
    tokenUrl="token",
    description="OAuth2 Code Bearer",
    auto_error=True,
)


@app.get("/items/")
async def read_items(token: str | None = Security(oauth2_scheme)):
    return {"token": token}

from fastapi.security import OAuth2AuthorizationCodeBearer
from fastapi.testclient import TestClient
from inline_snapshot import snapshot

app = FastAPI()

oauth2_scheme = OAuth2AuthorizationCodeBearer(
    authorizationUrl="authorize", tokenUrl="token", auto_error=True
)


@app.get("/items/")
async def read_items(token: str | None = Security(oauth2_scheme)):
    return {"token": token}


client = TestClient(app)

from fastapi.security import OAuth2AuthorizationCodeBearer
from fastapi.testclient import TestClient
from inline_snapshot import snapshot

oauth2_scheme = OAuth2AuthorizationCodeBearer(
    authorizationUrl="api/oauth/authorize",
    tokenUrl="/api/oauth/token",
    scopes={"read": "Read access", "write": "Write access"},
)


async def get_token(token: Annotated[str, Depends(oauth2_scheme)]) -> str:
    return token

from fastapi.security import OAuth2AuthorizationCodeBearer
from fastapi.testclient import TestClient
from inline_snapshot import snapshot

oauth2_scheme = OAuth2AuthorizationCodeBearer(
    authorizationUrl="authorize",
    tokenUrl="token",
    auto_error=True,
    scopes={"read": "Read access", "write": "Write access"},
)


async def get_token(token: Annotated[str, Depends(oauth2_scheme)]) -> str:
    return token

Go to the interactive docs at: [http://127.0.0.1:8000/docs](http://127.0.0.1:8000/docs).

You will see something like this:

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

/// check | Authorize button!

You already have a shiny new "Authorize" button.

And your *path operation* has a little lock in the top-right corner that you can click.

///

</div>

## 확인하기 { #check-it }

대화형 문서로 이동하세요: [http://127.0.0.1:8000/docs](http://127.0.0.1:8000/docs).

다음과 비슷한 화면이 보일 것입니다:

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

/// check | Authorize 버튼!

반짝이는 새 "Authorize" 버튼이 이미 있습니다.

그리고 *경로 처리*에는 오른쪽 상단에 클릭할 수 있는 작은 자물쇠가 있습니다.

///

그리고 이를 클릭하면 `username`과 `password`(그리고 다른 선택적 필드들)를 입력할 수 있는 작은 인증 폼이 나타납니다:

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

```

</div>

## 檢查 { #check-it }

開啟互動式文件：[http://127.0.0.1:8000/docs](http://127.0.0.1:8000/docs)。

你會看到類似這樣：

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

/// check | Authorize 按鈕！

你會看到一個新的「Authorize」按鈕。

而你的「路徑操作」右上角也會出現一個小鎖頭可以點擊。

///

點擊後會跳出一個小視窗，讓你輸入 `username` 與 `password`（以及其他可選欄位）：

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

/// note | 注意

```

</div>

## 查看 { #check-it }

打开交互式文档：[http://127.0.0.1:8000/docs](http://127.0.0.1:8000/docs)。

你会看到类似这样的界面：

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

/// check | Authorize 按钮！

页面右上角已经有一个崭新的“Authorize”按钮。

你的*路径操作*右上角还有一个可点击的小锁图标。

///

点击它，会弹出一个授权表单，可输入 `username` 和 `password`（以及其它可选字段）：

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

/// note | 注意

## Check it { #check-it }

Run the server and go to the docs: [http://127.0.0.1:8000/docs](http://127.0.0.1:8000/docs).

You'll see the user interface like:

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

Authorize the application the same way as before.

Using the credentials:

Username: `johndoe`
Password: `secret`

/// check

{* ../../docs_src/security/tutorial005_an_py310.py hl[63:66] *}

Because we are now declaring those scopes, they will show up in the API docs when you log-in/authorize.

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: