머메이드로 다이어그램 만들기

dev.to doesn't support Mermaid, so if you want to see how this article is supposed to look, you'll need to visit my personal dev blog.

저는 Markdown에서 문서 작성으로 전환했습니다. 이 웹 사이트의 대부분은 이를 사용하여 작성되었습니다(Hugo로 표시됨). 그러나 문서에 차트나 다이어그램을 포함해야 하는 경우가 있습니다.

예전에는 Microsoft에서 내보낸 이미지 파일 형식이었을 것입니다Visio. 차트를 업데이트해야 할 때까지는 괜찮습니다. 어느 시점에서 소스 파일을 찾아 열고 편집하고 업데이트된 이미지를 내보내고 웹 사이트에 업로드해야 했습니다.

더 좋은 방법이 있는데 Mermaid 입니다. Markdown에서 영감을 받은syntax 을 사용하여 차트 및 다이어그램을 만들기 위한 JavaScript 기반 도구입니다. 이 게시물의 끝 부분에 PKCE(Proof Key for Code Exchange)의 개요와 같은 컨텍스트의 예가 포함되어 있습니다. 이미지를 생성하는 코드는 다음과 같습니다.

    sequenceDiagram
    participant User
    participant Mobile App
    participant STS
    participant API
    User->>Mobile App: 1. Click login link.

    loop challenge
    Mobile App->Mobile App: 2. Generate code verifier and code challenge.
    end

    Mobile App->>STS: 3. Authorization code request and code challenge to authorize.
    STS->>User: 4. Redirect to login/authorization prompt.
    User->>STS: 5. Authenticate and consent
    STS->>Mobile App: 6. Authorize code.
    Mobile App->>STS: 7. Authorization code and code verified to OAuth token.

    loop validate
    STS->STS: 8. Validate code verifier and challenge.
    end

    STS->>User: 9. ID token and access token.
    User->>API: 10. Request user data with access token.
    API->>User: 11. Response.

그러나 Mermaid를 사용하기 전에 웹사이트에 추가해야 합니다. beginner's guide 이 있지만 이 웹사이트에 Hugo 정적 사이트 생성기를 사용하고 있으므로 Hugo에 인어를 추가한 방법을 설명하겠습니다. 정말 쉽습니다.

먼저 latest version을 잡고 파일을 Git 저장소의 /static/mermaid/ 경로에 넣습니다.

둘째, 다음을 포함하는 경로/layouts/shortcodes/mermaid.html를 사용하여 Git 리포지토리에 파일을 생성합니다.

    <link href="{{"mermaid/mermaid.css" | relURL}}" type="text/css" rel="stylesheet"/>
    <script defer src="{{"mermaid/mermaid.js" | relURL}}">mermaid.initialize({startOnLoad:true});</script>
    <div class="mermaid" align="{{ if .Get "align" }}{{ .Get "align" }}{{ else }}center{{ end }}" >{{ safeHTML .Inner  }}</div>

이렇게 하면 모든 페이지에서 머메이드를 사용할 수 있는 Hugo 단축 코드가 생성됩니다. 그리고 그게 다야. 이제 마크다운에 머메이드를 포함할 수 있습니다. Mermaid를 표시하는 VSCode용 플러그인이 있지만 헤드리스 CMS를 사용하는 경우 차트를 만드는 가장 쉬운 방법은 live editor 입니다.




코드 교환을 위한 증명 키

인증 코드 흐름을 사용하는 OAuth 2.0 공개 클라이언트는 다음과 같습니다.
인증 코드 가로채기 공격에 취약합니다. 코드 교환용 증명 키(OAuth 2.0 RFC 7636에 정의된 PKCE)를 사용하여 이를 완화할 수 있습니다.

PKCE를 사용하면 잠재적으로 응용 프로그램이 인증 서버에서 인증 코드를 받을 수 있도록 허용할 수 있는 리디렉션(예: MyApp:// )을 캡처하기 위해 사용자 지정 URL 체계를 악의적으로 사용하는 것을 방지할 수 있습니다.

PKCE 인증 코드 흐름은 인증 서버에서 확인된 클라이언트 애플리케이션에서 생성된 비밀(SHA-256을 사용하여 생성된 code_verifier)을 추가합니다. 클라이언트 애플리케이션은 인증 코드를 검색하기 위해 HTTPS를 사용하여 전송되는 code_verifier라는 code_challenge의 변환 값(해시 문자열)을 생성합니다. 악의적인 공격자는 이 코드를 가로챌 수 있지만 code_verifier 없이 토큰으로 교환할 수는 없습니다.


PKCE 인증 코드 흐름

PKCE 인증 코드 흐름은 표준 인증 코드 흐름과 유사합니다. 보안 토큰 서비스(STS)를 사용합니다.

sequenceDiagram
participant User
participant Mobile App
participant STS
participant API
User->>Mobile App: 1. Click login link.

loop challenge
Mobile App->Mobile App: 2. Generate code verifier and code challenge.
end

Mobile App->>STS: 3. Authorization code request and code challenge to authorize.
STS->>User: 4. Redirect to login/authorization prompt.
User->>STS: 5. Authenticate and consent
STS->>Mobile App: 6. Authorize code.
Mobile App->>STS: 7. Authorization code and code verified to OAuth token.

loop validate
STS->STS: 8. Validate code verifier and challenge.
end

STS->>User: 9. ID token and access token.
User->>API: 10. Request user data with access token.
API->>User: 11. Response.

클라이언트 응용 프로그램 내에서 사용자 로그인.

클라이언트는 암호화된 무작위code_verifier를 생성하고 이를 사용하여 code_challenge를 생성합니다.

클라이언트가 code_challenge를 사용하여 사용자를 STS로 리디렉션합니다.

STS가 사용자를 로그인 프롬프트로 리디렉션합니다.

사용자가 인증합니다.

STS는 code_challenge를 저장하고 권한이 있는 클라이언트로 사용자를 리디렉션합니다code.

클라이언트는 code 및 code_verifier를 STS로 전송합니다.

STS는 code_challenge 및 code_verifier를 확인합니다.

STS는 ID 토큰, 액세스 토큰 및 선택적으로 새로 고침 토큰으로 응답합니다.

Cleint는 액세스 토큰을 사용하여 API를 호출하여 사용자 정보에 액세스합니다.

API가 요청된 데이터로 응답합니다.