IBM Security Verify API의 주제 기능을 사용하여 화면 맞춤형~실습 편~

개시하다


준비편은 주제의 다운로드, 업로드, 응용 방법과 리셋 순서를 소개했다.
실천 편에서는 로고를 교체하고 스타일시트를 덮어쓰며 Email/SMS OPP 정보를 변경하는 방법을 소개합니다.

1. 로고 이미지 바꾸기


로고 이미지를 png 파일로 바꿉니다.
templates\common\logo\default\logo.png을 교체합니다.
또한, templates\common\pagecomponents\default\page_header.파일 수정)을 참조하십시오.
  • 기본값
  • <div class='heading'>
          <img src="template/v1.0/static/logo.svg?themeId=@THEME_ID@">  
    </div>
    
  • 변경 후
  • <div class='heading'>
          <img src="template/v1.0/static/logo.png?themeId=@THEME_ID@">  
    </div>
    

    2. 스타일시트 덮어쓰기


    기본 스타일시트는 다음과 같습니다.
    http://<임차인명>.verify.ibm.com/usc/css/stateless.css

    CSS 스타일 및 덮어쓰기 색상 모드를 templates\common\page로 설정components\default\page_style.css 파일에 기록됩니다.
  • 기본값
  • /* css for customization
       Add styling here to override classes from <tenant>/usc/css/stateless.css 
    */
    
  • 변경 후
  • 배경색 변경(#f2f4f8에서 #fffb5), 배경 이미지 삭제(background-image:none),
  • 다중 요소 인증 선택 화면 색상 변경/전환 작업 시 색상 변경
  • /* css for customization
       Add styling here to override classes from <tenant>/usc/css/stateless.css 
    */
    body,
    body.tile-background {
     background:#fffbb5;
     background-repeat:no-repeat;
     background-position:15% 50%;
     background-size:30%;
     background-image:none;
    }
    body[cs-otp-delivery-selection] .method-action {
     /*! font-size:16px; *//*! line-height:24px; */width:25%;
     /*! text-align:centerright; *//*! display: inline-block; *//*! border-radius: 20%; *//*! font-size: 10; *//*! text-align: center; *//*! cursor: pointer; *//*! padding: 12px 12px; *//*! background: #6666ff; *//*! color: #ffffff; *//*! line-height: 1em; *//*! transition: .3s; *//*! box-shadow: 6px 6px 3px #666666; *//*! border: 2px solid #6666ff; */display: inline-block;
     border-radius: 5%;
     /*! font-size: 18pt; */text-align: center;
     cursor: pointer;
     padding: 6px 6px;
     background: #6666ff;
     color: #ffffff;
     line-height: 1em;
     transition: .3s;
     box-shadow: 6px 6px 3px #666666;
     border: 2px solid #6666ff;
    }
    body[cs-otp-delivery-selection] .method-action:hover {
      box-shadow    : none;
      color         : #6666ff;
      background    : #ffffff;
    }
    

    3. 라벨 변경


    브라우저 언어 설정에서 자동으로 전환되는 탭 부분은 언어마다 속성 파일을 제공합니다.
    변경할 언어의templatelabels.properties 파일을 편집합니다.
    templates\common\labels\ja\template-labels.properties
  • 기본값
  • ~~~割愛~~~
    #  Log in Page 
    #  These macros are used for templates that are related to log in, such as, combined login selection, login from Cloud Directory and passthrough login
    
    # Title of the page
    $LOGIN_TITLE$=サインイン - IBM Security Verify
    
    # A label for the username input
    $LOGIN_USER_NAME$=ユーザー名
    
    # A label for the password input
    $LOGIN_PASSWORD$=パスワード
    
    # Text for the sign-in button
    $LOGIN_BUTTON$=サインイン
    ~~~割愛~~~
    
  • 변경 후
  • \$LOGIN_BUTTON\$의 값을 로그인으로 변경합니다.
  • ~~~割愛~~~
    #  Log in Page 
    #  These macros are used for templates that are related to log in, such as, combined login selection, login from Cloud Directory and passthrough login
    
    # Title of the page
    $LOGIN_TITLE$=サインイン - IBM Security Verify
    
    # A label for the username input
    $LOGIN_USER_NAME$=ユーザー名
    
    # A label for the password input
    $LOGIN_PASSWORD$=パスワード
    
    # Text for the sign-in button
    $LOGIN_BUTTON$=ログイン
    ~~~割愛~~~
    

    4. 메일/일시 비밀번호 수정 정보


    언어 설정에서 자동으로 전환되는 탭 부분은 언어마다 속성 파일을 제공합니다.
    변경하고 싶은 언어의otpdelivery_email.xml 파일을 편집합니다.
    templates\authentication\mfa\email\ja\otp_delivery_email.xml
  • 기본값
  • <?xml version="1.0" encoding="UTF-8"?>
    <root>
    <Subject>
      <Value>
        ワンタイム・パスワード
      </Value>
    </Subject>
    
    <Message>
      <Value>
        <![CDATA[<html>
            <body style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #121212; padding: 12px;">
                <h1 style="color: #4178BE;">ワンタイム・パスワード (OTP): </h1>
                <h2 style="color: #666666;">@CORRELATION@-@OTP@</h2>
                <p>要求を完了するには、この OTP を使用します。これは、@OTP_LIFETIME@ 分後に有効期限が切れます。</p>
                <p>この E メールには応答しないでください。</p>
            </body>
        </html>]]>
      </Value>
    </Message>
    </root>
    
    
  • 변경 후
  • <?xml version="1.0" encoding="UTF-8"?>
    <root>
    <Subject>
      <Value>
        ワンタイム・パスワード
      </Value>
    </Subject>
    
    <Message>
      <Value>
        <![CDATA[<html>
            <body style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #121212; padding: 12px;">
                <h1 style="color: #4178BE;">ワンタイム・パスワード (OTP): </h1>
                <h2 style="color: #666666;">@CORRELATION@-@OTP@</h2>
                <p>ワンタイム・パスワード(OTP)としてこの値を入力ください。これは、@OTP_LIFETIME@ 分後に有効期限が切れます。</p>
                <p>当メールの送信アドレスは送信専用となっております。このメールへの返信はできませんのでご了承ください。</p>
            </body>
        </html>]]>
      </Value>
    </Message>
    </root>
    
    

    5. SMS·단시간 비밀번호의 메시지 변경


    언어 설정에서 자동으로 전환되는 탭 부분은 언어마다 속성 파일을 제공합니다.
    변경하고 싶은 언어의otpdelivery_sms.xml 파일을 편집합니다.
    templates\authentication\mfa\sms\ja\otp_delivery_sms.xml
  • 기본값
  • <?xml version="1.0" encoding="UTF-8"?>
    <!-- Message value should be less than 70 characters -->
    <root>
    <Message>
      <Value>
        ご使用のパスコードは @CORRELATION@-@OTP@ です。これは、@OTP_LIFETIME@ 分で有効期限が切れます。
      </Value>
    </Message>
    </root>
    
  • 변경 후
  • <?xml version="1.0" encoding="UTF-8"?>
    <!-- Message value should be less than 70 characters -->
    <root>
    <Message>
      <Value>
        ワンタイム・パスワード (OTP)は @CORRELATION@-@OTP@ です。これは、@OTP_LIFETIME@ 分で有効期限が切れます。
      </Value>
    </Message>
    </root>
    

    6. 사용자 정의 화면의 예

  • 로그인 화면(기본값)
  • 로그인 화면(사용자 지정 후)
  • 로고 교체
  • 배경색 변경
  • 배경 이미지 제거
  • 로그인→명칭 변경
  • 다중 요소 인증 선택 화면(기본값)
  • 다중 요소 인증 선택 화면(사용자 지정 후)
  • 메일/일회용 비밀번호(기본값)
  • 메일/일회용 비밀번호(사용자 지정 후)
  • SMS 단일 비밀번호(기본값)
  • SMS·1시간 암호(사용자 지정 후)
  • 최후


    실천편으로 화면 맞춤형 방법을 소개했다.
    소개된 항목 이외에도 맞춤형 제작이 가능합니다.자세한 내용은 매뉴얼을 참조하시오.
  • 관리 주제
  • https://www.ibm.com/docs/ja/security-verify?topic=branding-managing-themes#t_customizing_themes
  • 좋은 웹페이지 즐겨찾기