브랜딩 디자이너 및 사용자 지정 관리형 로그인 - Amazon Cognito
빠른 설정세부 설정API 작업

기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.

브랜딩 디자이너 및 사용자 지정 관리형 로그인

브랜딩 디자이너는 관리형 로그인 웹 페이지를 위한 시각적 디자인 및 편집 도구입니다. Amazon Cognito 콘솔에 내장되어 있습니다. 브랜딩 디자이너에서는 로그인 페이지 미리 보기로 시작하여 빠른 설정 옵션 또는 고급 옵션을 사용한 세부 보기로 진행할 수 있습니다. 스타일 파라미터를 수정 및 미리 보거나 사용자 지정 배경 이미지 및 로고를 추가할 수 있습니다. 조명 모드와 어두운 모드를 구성할 수 있습니다.

Amazon Cognito 사용자 풀용 브랜딩 디자이너 시각적 편집기의 미리 보기입니다.

시작하려면 사용자 풀 또는 앱 클라이언트에 적용할 수 있는 스타일을 생성합니다.

브랜딩 디자이너를 시작하려면

  1. 도메인 탭에서 도메인을 생성하거나 기존 도메인을 업데이트합니다. 브랜딩 버전에서 관리형 로그인을 사용하도록 도메인을 설정합니다.

  2. 기존 앱 클라이언트 스타일이 있는 경우 삭제합니다.

    1. 앱 클라이언트 메뉴에서 앱 클라이언트를 선택합니다.

    2. 관리형 로그인 스타일에서 앱 클라이언트에 할당된 syle을 선택합니다.

    3. 스타일 삭제를 선택합니다. 선택 항목을 확인합니다.

  3. 사용자 풀의 관리형 로그인 메뉴로 이동합니다. 아직 선택하지 않았다면 프롬프트에 따라 관리형 로그인이 포함된 기능 계획을 선택합니다. 변경하지 않고 브랜딩 디자이너를 확인하려면 이 기능 미리 보기를 선택할 수도 있습니다.

  4. 스타일에서 스타일 생성을 선택합니다.

  5. 스타일을 할당할 앱 클라이언트를 선택하고 생성을 선택합니다. 새 앱 클라이언트를 생성할 수도 있습니다.

  6. Amazon Cognito 콘솔이 브랜딩 디자이너를 시작합니다.

  7. 편집을 시작할 탭을 선택하거나 편집기 시작을 선택하고 빠른 설정을 입력합니다. 다음 탭을 사용할 수 있습니다.

    미리 보기

    관리형 로그인 페이지에서 현재 선택 항목이 어떻게 표시되는지 확인합니다.

    기본

    전체 테마를 설정하고, 외부 자격 증명 공급자에 대한 링크를 구성하고, 양식 필드를 스타일화합니다.

    Components

    헤더, 바닥글 및 개별 UI 요소에 대한 스타일을 구성합니다.

  8. 초기 설정을 선택하려면 빠른 설정을 입력합니다. 설정 범주 변경을 선택하고 빠른 설정을 선택합니다. 계속을 선택하면 브랜딩 디자이너가 사용자가 구성할 수 있는 기본 옵션 세트와 함께 시작됩니다.

빠른 설정

브랜딩 디자이너 시작 버튼은 다양한 기본 사용자 지정 옵션 중에서 선택할 수 있는 관리형 로그인 구성의 시각적 편집기를 로드합니다. 선택하면 Amazon Cognito가 미리 보기 창에서 관리형 로그인 변경 사항을 렌더링합니다. 세부 설정 메뉴로 돌아가려면 설정 범주 변경 버튼을 선택합니다.

전반적인 모양과 느낌은 어떠해야 하나요?

관리형 로그인에 대한 기본 테마 설정을 구성합니다.

표시 모드

관리형 로그인을 위한 조명 모드, 다크 모드 또는 적응형 환경을 선택합니다. Amazon Cognito가 관리형 로그인을 렌더링할 때 적응형 설정은 사용자의 브라우저 기본 설정에 따라 달라집니다. 브라우저 적응 모드를 선택하면 밝은 모드와 어두운 모드에 대해 다양한 색상과 로고 이미지를 선택할 수 있습니다.

Spacing

페이지의 요소 간에 기본 간격을 설정합니다.

경계 반경

요소의 외부 경계의 반올림 깊이를 설정합니다.

페이지 배경은 어떻게 보여야 하나요?
배경 유형

이미지 표시 확인란은 배경 이미지를 설정할지 아니면 단색 배경 색상을 설정할지를 나타냅니다.

  1. 이미지를 사용하려면 이미지 표시를 선택하고 밝은 모드와 어두운 모드의 배경 이미지를 선택합니다. 이미지에서 다루지 않는 배경 영역에 대해 다크 모드 및 라이트 모드 페이지 배경 색상을 설정할 수도 있습니다.

  2. 배경에 색상만 사용하려면 이미지 표시를 선택 취소하고 라이트 모드 및 다크 모드 페이지 배경 색상을 선택합니다.

양식은 어떻게 보여야 하나요?

관리형 로그인의 양식 요소에 대한 설정을 구성합니다. 양식 항목의 예로는 로그인 및 코드 프롬프트가 있습니다.

수평 정렬

양식 필드의 수평 정렬을 설정합니다.

양식 로고

로고 이미지의 위치를 설정합니다.

로고 이미지

밝은 모드와 어두운 모드의 양식 요소에 포함할 로고 이미지 파일을 선택합니다. 이미지를 업로드하려면 로고 이미지 드롭다운을 선택하고 새 자산 추가를 선택한 다음 로고 파일을 추가합니다.

기본 브랜딩 색상

밝은 모드와 어두운 모드의 테마 색상을 설정합니다. 이 색상은 기본으로 분류된 모든 요소에 배경 색상으로 적용됩니다.

헤더는 어떻게 보여야 하나요?

관리형 로그인 페이지에 헤더를 포함할지 여부를 선택합니다. 헤더에는 로고 이미지가 포함될 수 있습니다.

헤더 로고

헤더에서 로고 이미지의 위치를 설정합니다.

로고 이미지

헤더에 포함할 로고 위치와 로고 이미지 파일을 선택합니다. 이미지를 업로드하려면 로고 이미지 드롭다운을 선택하고 새 자산 추가를 선택한 다음 로고 파일을 추가합니다.

헤더 배경색

헤더의 배경에 대한 밝고 어두운 모드 색상을 설정합니다.

세부 설정

세부 설정 보기에서 파운데이션 및 구성 요소의 개별 구성 요소를 수정할 수 있습니다. 미리 보기 탭에는 사용자 지정과 함께 현재 컨텍스트의 관리형 로그인 미리 보기가 표시됩니다.

관리형 로그인 구성 요소의 세부 구성 AWS Management Console 스크린샷입니다.

구성 요소의 시각적 편집기를 입력하려면 구성 요소의 타일에서 편집 아이콘을 선택합니다. 테마 스튜디오 편집기에서 설정 범주 변경 버튼을 사용하여 구성 요소 간에 전환할 수 있습니다.

기본

앱 스타일

관리형 로그인 구성의 기본 사항을 구성합니다. 이 범주에는 전체 테마, 텍스트 간격, 페이지 헤더 및 바닥글에 대한 설정이 있습니다.

표시 모드

관리형 로그인 페이지에 대한 라이트 모드, 다크 모드 또는 적응형 환경을 선택합니다. 브라우저 적응 모드를 선택하면 밝은 모드와 어두운 모드에 대해 다양한 색상과 로고 이미지를 선택할 수 있습니다.

Spacing

페이지의 요소 간에 기본 간격을 설정합니다.

인증 동작

사용자를 외부 ID 제공업체(IdPs에 연결하는 버튼의 스타일을 구성합니다. 이 섹션에는 관리형 로그인 프롬프트 사용자에게 이메일 주소를 제공하고 이를 SAML 자격 증명 공급자 식별자와 일치시키는 도메인 검색 입력 옵션이 포함되어 있습니다.

양식 동작

입력 양식의 스타일 구성: 입력 위치 지정, 색상 및 요소 정렬.

Components

버튼

Amazon Cognito가 관리형 로그인 페이지에서 렌더링하는 버튼의 스타일입니다.

디바이더

입력 양식과 외부 공급자 로그인 선택기와 같은 관리형 로그인 요소 간의 분할선 및 경계에 대한 스타일입니다.

Dropdown

드롭다운 메뉴의 스타일입니다.

파비콘

Amazon Cognito가 탭 및 북마크 아이콘에 제공하는 이미지의 스타일입니다.

포커스 링

현재 선택된 입력을 나타내는 하이라이트의 스타일입니다.

양식 컨테이너

양식을 바인딩한 요소의 스타일입니다.

글로벌 바닥글

Amazon Cognito가 관리형 로그인 페이지 하단에 표시하는 바닥글의 스타일입니다.

글로벌 헤더

Amazon Cognito가 관리형 로그인 페이지 상단에 표시하는 헤더의 스타일입니다.

표시

오류 및 성공 메시지의 스타일입니다.

옵션 제어

확인란, 다중 선택 및 기타 입력 프롬프트의 스타일입니다.

페이지 배경

관리형 로그인의 전체 배경에 대한 스타일입니다.

입력

양식 필드 입력 프롬프트의 스타일입니다.

링크

관리형 로그인 페이지의 하이퍼링크 스타일입니다.

페이지 텍스트

페이지 내 텍스트의 스타일입니다.

필드 텍스트

양식 입력 주변의 텍스트 스타일입니다.

관리형 로그인 브랜딩을 위한 API 및 SDK 작업

API 작업 CreateManagedLoginBranding 및 UpdateManagedLoginBranding. 이러한 작업은 다른 앱 클라이언트 또는 사용자 풀에 대해 동일하거나 약간 수정된 브랜딩 스타일 버전을 생성하는 데 적합합니다. API 작업 DescribeManagedLoginBranding을 사용하여 기존 스타일의 관리형 로그인 브랜딩을 쿼리한 다음 필요에 따라 출력을 수정하고 다른 리소스에 적용합니다.

UpdateManagedLoginBranding 작업은 스타일이 적용되는 앱 클라이언트를 변경하지 않습니다. 앱 클라이언트에 할당된 기존 스타일만 업데이트합니다. 앱 클라이언트의 스타일을 완전히 바꾸려면 DeleteManagedLoginBranding으로 기존 스타일을 삭제하고 로 새 스타일을 할당합니다CreateManagedLoginBranding. Amazon Cognito 콘솔에서도 기존 스타일을 삭제하고 새 스타일을 생성해야 한다는 점이 동일합니다.

API 또는 SDK 요청에서 관리형 로그인 브랜딩을 설정하려면 설정을 Document 데이터 유형으로 변환되는 JSON 파일에 포함시켜야 합니다. 다음은 추가할 수 있는 이미지와 브랜딩 스타일을 구성하기 위한 프로그래밍 방식 요청을 생성하는 방법에 대한 지침입니다.

이미지 자산

CreateManagedLoginBranding 및 UpdateManagedLoginBranding에는 Assets 파라미터가 포함됩니다. 이 파라미터는 base64 인코딩 바이너리 형식의 이미지 파일 배열입니다.

참고

브랜딩 스타일을 생성하거나 업데이트하는 프로그래밍 방식의 요청은 요청 크기가 2MB 이하여야 합니다. 요청의 자산으로 인해이 제한을 초과할 수 있습니다. 이 경우 요청을 최대 UpdateManagedLoginBranding 요청 크기를 초과하지 않는 파라미터 그룹에 대한 여러 요청으로 나눕니다. 이러한 요청으로 인해 지정되지 않은 파라미터가 기본값으로 설정되지 않으므로 기존 설정에 영향을 주지 않고 부분 요청을 보낼 수 있습니다.

일부 자산에는 제출할 수 있는 파일 유형에 대한 제한이 있습니다.

자산 허용되는 파일 확장명
FAVICON_ICO ico
FAVICON_SVG 서비스
EMAIL_GRAPHIC png, svg, jpeg
SMS_GRAPHIC png, svg, jpeg
AUTH_APP_GRAPHIC png, svg, jpeg
PASSWORD_GRAPHIC png, svg, jpeg
PASSKEY_GRAPHIC png, svg, jpeg
PAGE_HEADER_LOGO png, svg, jpeg
PAGE_HEADER_BACKGROUND png, svg, jpeg
PAGE_FOOTER_LOGO png, svg, jpeg
PAGE_FOOTER_BACKGROUND png, svg, jpeg
PAGE_BACKGROUND png, svg, jpeg
FORM_BACKGROUND png, svg, jpeg
FORM_LOGO png, svg, jpeg
IDP_BUTTON_ICON ico, svg

SVG 유형의 파일은 다음 속성 및 요소를 지원합니다.

Attributes
accent-height, accumulate, additivive, alignment-baseline, ascent, attributename, attributetype, azimuth, basefrequency, baseline-shift, begin, bias, by, class, clip, clip-path, clip-rule, color, color-interpolation, color-interpolation-filters, color-profile, color-rendering, cx, cy, d, dx, dy, diffuseconstant, direction, display, divisor, dur, edgemode, elevation, end, fill, fill-opacity, fill-rule, filter, filterunits, flood-color, flood-opacity, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight, fx, fy, g1, g2, glyph-name, glyphref, gradientunits, gradienttransform, height, href, id, image-rendering, in, in2, k, k1, k2, k3, k4, kerning, keypoints, keysplines, keytimes, lang, lengthadjust, letter-spacing, kernelmatrix, kernelunitlength, lighting-color, local, marker-end, marker-mid, marker-start, markerheight, markerunits, markerwidth, maskcontentunits, maskunits, max, mask, media, method, mode, min, name, numoctaves, offset, operator, opacity, order, orient, orientation, origin, overflow, paint-order, path, pathlength, patterncontentunits, patterntransform, patternunits, points, preservealpha, preserveaspectratio, r, rx, ry, radius, refx, refy, repeatcount, repeatdur, restart, result, rotate, scale, seed, shape-rendering, specularconstant, specularexponent, spreadmethod, stddeviation, stitchtiles, stop-color, stop-opacity, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke, stroke-width, style, surfacescale, tabindex, targetx, targety, transform, text-anchor, text-decoration, text-rendering, textlength, type, u1, u2, unicode, values, viewbox, visibility, vert-adv-y, vert-origin-x, vert-origin-y, width, word-spacing, wrap, writing-mode, xchannelselector, ychannelselector, x, x1, x2, xmlns, y, y1, y2, z, zoomandpan
Elements
svg, a, altglyph, altglyphdef, altglyphitem, animatecolor, animatemotion, animatetransform, audio, canvas, circle, clippath, defs, desc, ellipse, filter, font, g, glyph, glyphref, hkern, image, line, lineargradient, marker, mask, metadata, mpath, path, pattern, polygon, polyline, radialgradient, rect, stop, style, switch, symbol, text, textpath, title, tref, tspan, video, view, vkern, feBlend, feColorMatrix, feComponentTransfer, feComposite, feConvolveMatrix, feDiffuseLighting, feDisplacementMap, feDistantLight, feFlood, feFuncA, feFuncB, feFuncG, feFuncR, feGaussianBlur, feMerge, feMergeNode, feMorphology, feOffset, fePointLight, feSpecularLighting, feSpotLight, feTile, feTurbulence

관리형 로그인 브랜딩 작업을 위한 도구

Amazon Cognito는 관리형 로그인 브랜딩 설정 객체에 대해 JSON-Schema 형식으로 파일을 관리합니다. 다음은 프로그래밍 방식으로 브랜딩 스타일을 업데이트하는 방법입니다.

사용자 풀 API에서 브랜딩을 업데이트하려면

  1. Amazon Cognito 콘솔에서 사용자 풀의 관리형 로그인 메뉴에서 기본 관리형 로그인 브랜딩 스타일을 생성합니다. 앱 클라이언트에 할당합니다.

  2. 예를 들어 스타일을 생성한 앱 클라이언트의 ID를 기록합니다1example23456789.

  3. 가 로 ReturnMergedResources 설정된 DescribeManagedLoginBrandingByClient API 요청을 사용하여 브랜딩 스타일의 설정을 검색합니다true. 다음은 요청 본문의 예입니다.

    {
   "ClientId": "1example23456789",
   "ReturnMergedResources": true,
   "UserPoolId": "us-east-1_EXAMPLE"
}

  4. 사용자 지정을 DescribeManagedLoginBrandingByClient 사용하여의 출력을 수정합니다.

    1. 응답 본문은 생성 및 업데이트 작업을 위한 구문의 일부가 아닌 ManagedLoginBranding 요소로 래핑됩니다. JSON 객체의이 최상위 수준을 제거합니다.

    2. 이미지를 바꾸려면 Bytes 값을 각 이미지 파일의 Base64-encoded 바이너리 데이터로 바꿉니다.

    3. 설정을 업데이트하려면 Settings 객체의 출력을 수정하고 다음 요청에 포함시킵니다. Amazon Cognito는 API 응답에서 수신하는 스키마에 없는 Settings 객체의 값을 무시합니다.

  5. CreateManagedLoginBranding 또는 UpdateManagedLoginBranding 요청에서 업데이트된 응답 본문을 사용합니다. 이 요청의 크기가 2MB를 초과하는 경우 여러 요청으로 구분합니다. 이러한 작업은 달리 지정하지 않는 한 원래 설정이 변경되지 않은 상태로 유지되는 PATCH 모델에서 작동합니다.