사용자 보안을 위해 사용자 정의 HTML 로그인 양식 작성

온라인에서 편집하기

OAuth에서 ID 추출 스테이지 중에 사용자 보안을 위해 사용자 정의 HTML 양식을 작성할 수 있습니다.

시작하기 전에

암시, 액세스 코드 또는 자원 소유자 비밀번호 권한 부여 유형을 사용할 때 원시 OAuth 제공자 구성이 ID 추출을 포함합니다. 사용자 신임 정보를 추출하기 위한 방법을 선택하는 옵션이 있으며 선택사항 중 하나는 사용자 정의 HTML 양식입니다. 자세한 내용은 ‘ OAuth 네이티브 공급자 구성’을 참조하십시오. 이 주제에서는 ID 추출을 위해 사용자 정의 HTML 양식을 작성하는 방법을 설명합니다.

이 태스크에 대한 정보

세 개의 OAuth 정의(내제 플로우, 자원 소유자 비밀번호 플로우, 액세스(권한 부여) 코드 플로우 중에 API가 제공하는 서비스에 로그인하기 위한 양식이 사용자에게 제공됩니다. 사용자 정의 양식 또는 기본 양식을 제공할 수 있습니다. 사용자 정의 양식은 특정 요구사항을 충족시켜야 합니다.

중요: IBM® API Connect 가 양식에 정보를 삽입하는 데 사용하는 필드의 이름은 대소문자를 구분합니다.

프로시저

원시 OAuth 제공자에 대해 사용자 정의 로그인 양식을 작성하려면 다음 단계를 완료하십시오.
  1. API Connect 구문 분석이 올바른 XHTML 문서를 파싱하여 숨겨진 필드를 삽입합니다.
  2. XHTML 양식의 경우, 메소드를 POST로, 인코딩 유형을 application/x-www-form-urlencoded로, 조치를 authorize로 설정하십시오. 필요한 기타 매개변수를 추가하십시오.
    예를 들면 다음과 같습니다.
    <form method="POST" enctype="application/x-www-form-urlencoded" action="authorize">
  3. 이름이 username 인 텍스트 입력 필드를 작성하고 이름이 password인 비밀번호 입력 필드를 작성하십시오.
  4. 라인을 추가하십시오 <EI-INJECT-HIDDEN-INPUT-FIELDS>. 이 세 번째 요소는 API Connect 가 사용자가 제출한 데이터를 보완하기 위해 입력 필드로 대체하는 플레이스홀더입니다.
  5. 로그인 프로세스를 시작하기 위한 단추를 작성하십시오.
    예를 들면 다음과 같습니다.
    <button id="login_button" type="submit" name="login" value="true">Log in</button>
  6. 선택 사항: 사용자가 로그인 페이지를 처음 방문할 때 표시되는 텍스트를 추가하세요. 표시하려는 텍스트에는 <EI-LOGINFIRSTTIME> 태그를 사용하세요.
  7. 선택 사항: 사용자가 인증에 실패하여 로그인 페이지로 되돌아갈 때 표시될 텍스트를 추가하세요. 표시하려는 텍스트에는 <EI-LOGINFAILED> 태그를 사용하세요.
  8. 선택 사항: 사용자 정의 양식에서 오류가 발생하여 사용자에게 제대로 표시되지 않을 경우 오류 메시지를 표시합니다. <EI-INTERNAL-CUSTOM-FORM-ERROR/> 태그를 사용하십시오. 메시지 텍스트가 자동으로 생성됩니다. 사용자에게 이 오류 메시지가 표시되지 않도록 하려면 테스트 과정에서 이러한 오류를 발견해야 합니다.
  9. 선택 사항: 이미지나 JavaScript 와 같이 외부 소스에서 불러오는 요소를 추가할 수 있습니다.
  10. 필요에 따라 공백 및 기타 기능을 삽입하십시오. 1단계부터 8단계 까지 완료하면 다음과 같은 예시와 유사한 양식이 생성됩니다:
    <html lang="en" xml:lang="en">
  <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/></head>
  <body>
    <form method="POST" enctype="application/x-www-form-urlencoded" action="authorize">
      <h1>Please sign in</h1>
      <p>Username </p>
      <p style="text-indent: 0em;"><input type="text" name="username" required="required" /> </p>
      <p>Password </p>
      <p style="text-indent: 0em;"><input type="password" name="password" required="required" /> </p>
      <EI-INJECT-HIDDEN-INPUT-FIELDS/>
      <p style="text-indent: 2em;"> <button id="login_button" type="submit" name="login" value="true">Log in</button> </p>

      <EI-LOGINFIRSTTIME>
        <p>If you have forgotten your user name or password, contact your system administrator.</p>
      </EI-LOGINFIRSTTIME>

      <EI-LOGINFAILED>
        <p style="color: red">At least one of your entries does not match our records. 
          If you have forgotten your user name or password, contact your system administrator.</p>
      </EI-LOGINFAILED>

      <EI-INTERNAL-CUSTOM-FORM-ERROR/>

    </form>
  </body>
</html>
  11. 사용자가 선택한 URL에서 양식을 사용 가능하게 제공하십시오.
  12. 아직 수행하지 않은 경우 ID 추출을 위해 사용자 정의 HTML 양식을 사용하고 양식이 사용 가능한 URL을 제공하도록 원시 OAuth 제공자를 구성하십시오.