Below you will find pages that utilize the taxonomy term “Frontend”

Vite + Build + Root 

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

Streamlit에 Google login 컴포넌트를 만들어 넣고 있는데, URL로 불러오면 잘 보이는 것이 build해서 File로 serving하면 위와같은 메시지를 뿌린다.

뭘까? 한참을 읽어보고 network tab에서 읽어들이는 위치를 찾아보고 나서 이해가 된다.

http://localhost:9020/component/login_component.login_component/index.html?streamlitUrl=http%3A%2F%2Flocalhost%3A9020%2F

이 녀석이 Vite에서 생성된 index.html을 Streamlit에서 호출하는 녀석인데, Build된 녀석은 나름 저 혼자 돌아가는줄 알고 있을터이니, 빌드한 결과가 “/“로 잡혀있을 것이 분명했다.

read more

Swagger + OAuth2

목표

  • swagger에서
  • google oauth를 swagger authorize ui에 적용
  • 인증된 Token을 각 API에서 Header에 설정 할 수 있도록

custom open api

from fastapi.security.oauth2 import OAuth2AuthorizationCodeBearer
from fastapi.openapi.models import OAuthFlows as OAuthFlowsModel, OAuthFlowAuthorizationCode
from fastapi.openapi.models import SecurityScheme as SecuritySchemeModel
from fastapi.openapi.utils import get_openapi

# --------------------------------------------------------------
# Google oAuth2
CLIENT_ID = "...알아서"
CLIENT_SECRET = "...알아서"
TOKEN_URL = "...알아서"
AUTHORIZATION_URL = "...알아서"

class OAuth2Google(OAuth2AuthorizationCodeBearer):
    def __init__(self):
        super().__init__(authorizationUrl=AUTHORIZATION_URL, tokenUrl=TOKEN_URL)

oauth2_scheme = OAuth2Google()

# --------------------------------------------------------------
# Auth for Swagger
def custom_openapi():
    if app.openapi_schema:
        return app.openapi_schema
    openapi_schema = get_openapi(
        title="FastAPI with Google OAuth2",
        version="1.0.0",
        description="This is a FastAPI application integrating Google OAuth2",
        routes=app.routes,
    )
    openapi_schema["components"]["securitySchemes"] = {
        "OAuth2Google": {
            "type": "oauth2",
            "flows": {
                "authorizationCode": {
                    "authorizationUrl": AUTHORIZATION_URL,
                    "tokenUrl": TOKEN_URL,
                    "scopes": {
                        "openid": "OpenID Connect",
                        "email": "Access to your email address",
                        "profile": "Access to your basic profile info"
                    }
                }
            }
        }
    }
    app.openapi_schema = openapi_schema
    return app.openapi_schema

# open api 변경
app.openapi = custom_openapi

이런 간단한 코드로 아래와 같은 훌륭한 화면을 도출 해 낼 수 있었으나.

read more