Аутентифікація користувачів у FastAPI за допомогою JavaScript

6 Березня 2024 в 02:05 146

Аутентифікація користувачів є одним із найважливіших аспектів веб-розробки, особливо коли мова йде про захищеність даних та обмеження доступу до певних ресурсів. У цій статті ми розглянемо, як реалізувати аутентифікацію користувачів у FastAPI за допомогою JavaScript на клієнтській стороні.

FastAPI – це сучасний фреймворк для створення API на мові програмування Python, який надає швидкий і ефективний спосіб побудувати веб-додатки та сервіси. Однією з його особливостей є легкість використання та підтримка аутентифікації користувачів.

У нашому прикладі ми маємо дві точки доступу: /login і /index. /login відповідає за аутентифікацію та отримання токену доступу, тоді як /index є захищеною точкою доступу, до якої користувач повинен увійти перед отриманням доступу.

Перш ніж перейти до реалізації на клієнтській стороні, давайте розглянемо код на сервері. У FastAPI ми можемо використовувати пакет OAuth2PasswordBearer для реалізації аутентифікації користувачів.


oauth2_scheme = OAuth2PasswordBearer(tokenUrl="login")
@app.get("/index")
async def root(
    request: Request,
    current_user: Annotated[User, Depends(oauth2_scheme)]
):
    return templates.TemplateResponse("index.html", {"request": request})
@app.post("/login")
async def login(
    request: Request,
    data: Annotated[OAuth2PasswordRequestForm, Depends()],
):
    user = authenticate_user(data.username, data.password)
    if not user:
        raise HTTPException(...)
    access_token = create_access_token(...)
    response.set_cookie(key="access_token", value=access_token, httponly=True)
    return Token(access_token=access_token, token_type="bearer")

oauth2_scheme = OAuth2PasswordBearer(tokenUrl="login")

@app.get("/index")

async def root(

request: Request,

current_user: Annotated[User, Depends(oauth2_scheme)]

return templates.TemplateResponse("index.html", {"request": request})

@app.post("/login")

async def login(

request: Request,

data: Annotated[OAuth2PasswordRequestForm, Depends()],

user = authenticate_user(data.username, data.password)

if not user:

raise HTTPException(...)

access_token = create_access_token(...)

response.set_cookie(key="access_token", value=access_token, httponly=True)

return Token(access_token=access_token, token_type="bearer")

Тепер перейдемо до клієнтської сторони. Ми маємо HTML-форму для входу користувача, яка відправляє дані на /login при натисканні кнопки “Submit”. Після успішної аутентифікації, сервер відправляє токен доступу, який ми зберігаємо в куцому файлі.

Проте, наш код не працює, оскільки він не передає заголовок аутентифікації. У відповіді ми отримуємо помилку: {“detail”:”Not authenticated”}. У /docs тест працює, оскільки він надсилає токен доступу у заголовку Authorization.

Ми можемо вирішити цю проблему додавши заголовок Authorization до нашого запиту на клієнтській стороні. Ось приклад коду на JavaScript:


document.getElementById("loginForm").addEventListener("submit", function (event) {
    event.preventDefault();
    fetch("/login", {
        method: "POST",
        body: new FormData(event.target),
        headers: {
            "Authorization": "Bearer YOUR_TOKEN"
        }
    })
        .then(response => {
            if (response.ok) {
                return response.json();
            } else {
                throw new Error('Failed to authenticate');
            }
        })
        .then(data => {
            window.location.href = '/index';
        })
        .catch(error => console.error("Error:", error));
});

document.getElementById("loginForm").addEventListener("submit", function (event) {

event.preventDefault();

fetch("/login", {

method: "POST",

body: new FormData(event.target),

headers: {

"Authorization": "Bearer YOUR_TOKEN"

}

})

.then(response => {

if (response.ok) {

return response.json();

} else {

throw new Error('Failed to authenticate');

}

})

.then(data => {

window.location.href = '/index';

})

.catch(error => console.error("Error:", error));

});

Таким чином, ми здійснюємо аутентифікацію користувача за допомогою JavaScript на клієнтській стороні у співпраці з FastAPI на сервері. Цей підхід дозволяє нам забезпечити захищений доступ до ресурсів і зручну роботу з API.