FusionAuth의 고급 레지스트리를 주제화하는 방법

사용자가 등록할 때, 가장 하고 싶지 않은 일은 그들의 길을 막거나 헷갈리게 하는 것이다.이 강좌에서 테마를 수정하여 고급 등록표의 표시를 개선할 것입니다.
이전에 우리는 부동산 웹 앱을 위해 self service registration form 을 구축하고 FusionAuth를 인증 서버로 사용했다.이것은 그들의 주택 구매 수요에 대한 정보를 얻기 위한 2단계 표이다.그러나 이 표에는 대략적인 요소가 있다.특히 어떤 데이터를 어떤 폼 필드에 입력해야 할지 잘 모르겠다.
이 강좌는 previous one을 바탕으로 주제를 어떻게 변경하는지 소개한다.이 강좌는 이전의 폼을 참고하지만, 당신이 만든 폼에 적용할 수도 있습니다.

FusionAuth 설정

설정으로 이동한 다음 API 키로 이동하여 API 키를 만듭니다.이 키를 사용하여 테마 관리 스크립트를 작성합니다. 이것은 이 단점에 대한 권한이 필요하다는 것을 의미합니다.

/api/theme: 모든 방법

끝점이나 방법을 검사하지 않아도 됩니다.이것은 모든 작업을 수행할 수 있는 슈퍼 사용자 키를 만들 것입니다.음, 모든 FusionAuth API에 액세스할 수 있습니다.이것은 튜토리얼에게는 좋지만 제작에는 방문을 제한하십시오.

단일 세입자 또는 다중 세입자 설정을 위한 사용자 정의 테마 만들기

다음 단계는 새로운 테마를 만드는 것입니다.사용자 환경을 개선하기 위해 메시지를 변경할 것입니다. 기본 테마는 읽기 전용입니다.테마는 세입자에 따라 분배됩니다. 따라서 기본 세입자의 테마 (본 강좌에서 만든 것) 를 변경할 수도 있고, 새 세입자를 만들고 새 테마를 분배할 수도 있습니다.FusionAuth는 상자를 열면 사용할 수 있는 여러 개의 세입자를 지원하기 때문에 어떤 방식으로든 사용할 수 있다.

This is the theme you’ll modify throughout the rest of this blog post.

사용자 정의로 이동하고 테마로 이동합니다.기존 FusionAuth 항목을 복사합니다.주제를'부동산 응용 프로그램'과 같은 의미 있는 내용으로 바꾸다.파란색 아이콘을 클릭하여 저장하기 전에 다음과 같이 해야 합니다.

세입자로 이동한 다음 기본 세입자를 편집합니다.일반 탭으로 이동하여 로그인 테마 설정을 새 테마로 업데이트합니다.화면이 다음과 같이 표시되면 구성을 저장합니다.

주제 맞춤 설정

사용자 정의 테마는 사용자가 보는 내용을 완전히 제어할 수 있습니다.다음은 양식 작성 게시물이 끝날 때 등록 절차의 첫 번째 단계입니다.

우리는 이해할 수 있는 자리 차지 문자와 라벨을 추가할 것이지만, 당신은 더 많은 일을 할 수 있습니다.자세한 내용을 확인하십시오.
먼저 관리 사용자 인터페이스에서 사용자 정의로 이동하고 테마로 이동합니다.위에서 만든 테마를 찾아 id를 복사합니다.저는 de03191a-9369-4732-a9c4-0467d1f26482입니다.

API를 통해 주제 수정

프롬프트를 변경하고 메시지를 확인하려면 메시지가 포함된 파일을 편집해야 합니다.사용자 인터페이스나 API를 관리하여 변경할 수 있는 Java 속성 파일입니다.이 문서에서는 API를 사용하여 변경합니다.이것은 FusionAuth가 사용하는 API-first 방법의 강력한 기능을 보여주고 필요에 따라 파일 버전을 제어할 수 있는 방법을 제공할 것이다.
이 스크립트는 FusionAuth를 실행 중인 경우http://localhost:9011 가정합니다.없으면 그에 상응하는 조정을 진행한다.이 스크립트는also available on GitHub입니다.로컬 설치 jq 와python3를 요구합니다.

로컬 편집을 위해 테마 파일 읽어들이기

먼저 메시지를 검색합니다.편집하기 쉽도록 텍스트 파일에 저장하려고 합니다.다음은 JSON을 줄 바꿈표로 구분된 파일로 변환하는 셸 스크립트입니다.

API_KEY=<your api key>
THEME_ID=<your theme id>

curl -H "Authorization: $API_KEY" 'http://localhost:9011/api/theme/'$THEME_ID|jq '.theme.defaultMessages' |sed 's/^"//' |sed 's/"$//' |python3 convert.py > defaultmessages.txt

convert.py 스크립트는 포함된 줄 바꿈 문자를 실제 줄 바꿈으로 변환합니다.

import sys

OUTPUT = sys.stdin.read()
formatted_output = OUTPUT.replace('\\n', '\n')
print(formatted_output)

이 스크립트는 메시지 파일에만 적용되지만 주제의 다른 부분, 예를 들어 HTML 템플릿 파일을 처리하도록 조정할 수 있습니다.이것은 독자에게 남겨진 연습이다.요청을 환영합니다.

메시지 파일 수정

API 키와 테마 ID를 추가한 다음 스크립트를 실행합니다.현재 디렉토리에 있는 파일defaultmessages.txt을 찾습니다.

#
# Copyright (c) 2019-2020, FusionAuth, All Rights Reserved
#
# Licensed under the Apache License, Version 2.0 (the \"License\");
# you may not use this file except in compliance with the License.
# You may obtain a copy of the License at
#
# http://www.apache.org/licenses/LICENSE-2.0

# ...

# Webhook transaction failure
[WebhookTransactionException]=One or more webhooks returned an invalid response or were unreachable. Based on your transaction configuration, your action cannot be completed.

약 200줄;이상은 발췌문입니다.가장 좋아하는 텍스트 편집기에서 엽니다.

If you are interested in localized messages, check out the fusionauth-localization project.

등록표를 개선하려면'사용자 정의 등록표'부분에 값을 추가하십시오.이 속성 파일의 섹션 .ini 을 강제로 유지하지 않지만, 필요한 부분만 변경하는 것이 좋습니다.FusionAuth로 업그레이드하면 속성 파일이 변경될 수 있습니다. 이 변경 사항을 통합해야 하기 때문에 간단할수록 좋습니다.행을 추가할 섹션은 다음과 같습니다.

# ...
#
# Custom Registration forms. These must match the domain names.
#
user.email=Email
user.password=Password
user.birthDate=Birthdate

#
# Custom Registration form validation errors.
#
[confirm]user.password=Confirm password
# ...

메시지 파일의 키는 등록표의 필드 키와 일치합니다.다음은 부동산 등록 신청서에 자리 표시자를 설정할 때 추가해야 할 내용입니다.

user.firstName=Your first name
user.mobilePhone=Your mobile phone num
registration.data.minprice=Minimum home price
registration.data.maxprice=Maximum home price
registration.data.geographicarea=Where are you looking?

자리 표시자에 국한되지 않습니다.다음 섹션에 인증 메시지를 추가할 수 있습니다.# Custom Registration form validation errors.Default validation errors 부분에서 사용할 수 있는 모든 오류의 예시를 볼 수 있습니다.
특정 폼 필드의 특정 오류를 제공하기 위해 추가 키를 누르십시오.예를 들어 가격 범위 정보를 무시할 때 사용자에게 우호적인 오류 메시지를 표시하려면 다음 속성을 추가하십시오.

[invalid]registration.data.minprice=Minimum home price required
[invalid]registration.data.maxprice=Maximum home price required

defaultmessages.txt에 추가된 값에 큰 따옴표가 있는 경우 \" 로 변경합니다.이것은 이 파일을 JSON으로 변환할 때 문제가 발생하는 것을 방지할 수 있으며, 이러한 문제는 변경이 FusionAuth에 반영되기 전에 발생해야 한다.

FusionAuth의 주제 업데이트

defaultmessages.txt를 모두 변경한 후에는 API가 원하는 JSON 형식으로 변환해야 합니다.이전에 제거한 키와 따옴표를 추가해야 합니다.마지막으로 FusionAuth에 업데이트 요청을 해야 합니다.업데이트의 경우 제공된 객체의 요소만 업데이트하려면 PATCH 메서드를 사용합니다.
이 스크립트는 defaultmessages.txt 파일에 대해 위의 모든 작업을 수행합니다.

API_KEY=<your api key>
THEME_ID=<your theme id>

FILE_NAME=out.json$$

awk '{printf "%s", $0"\\n"}' defaultmessages.txt |sed 's/^/{ "theme": { "defaultMessages": "/' | sed 's/$/"}}/' > $FILE_NAME

STATUS_CODE=`curl -XPATCH -H 'Content-type: application/json' -H "Authorization: $API_KEY" 'http://localhost:9011/api/theme/'$THEME_ID -d @$FILE_NAME -o /dev/null -w '%{http_code}' -s`

if [$STATUS_CODE -ne 200]; then
  echo "Error with patch, exited with status code: "$STATUS_CODE
  exit 1
fi

rm $FILE_NAME

수정된 defaultMessages.txt 파일을 사용하여 이 스크립트를 실행합니다.그러면 변경 내용이 주제에 적용됩니다.
변경 내용을 보려면 FusionAuth 관리 사용자 인터페이스의 응용 프로그램 탭으로 이동하여 등록 URL을 찾습니다.응용 프로그램을 보고 등록 URL을 복사하려면 다음과 같이 하십시오.

익명 창을 열고 이 URL에 액세스합니다.첫 페이지에서 새 자리 표시자를 볼 수 있습니다.

첫 번째 단계를 입력하면 두 번째 페이지에도 다음과 같은 메시지가 표시됩니다.

검증 및 주제

두 번째 화면에서 레지스트리를 제출했지만 가격 범위를 제공하지 않으면 에 추가된 오류 메시지가 표시됩니다.

양식 레이블 추가

매크로 수정customField을 통해 필드 표시를 더욱 광범위하게 사용자 정의할 수 있습니다.이것은 주제의 조수 부분에 있다.API를 사용하여 작업을 완료하는 대신 관리 사용자 인터페이스에서 직접 편집합니다.
테마로 이동하여 테마를 편집합니다.Helpers를 클릭하고 끝까지 스크롤합니다.매크로customField를 수정합니다.다음은 이 기본 구현 FreeMarker macro 입니다.

[#macro customField field key autofocus=false placeholder=""]
  [#assign fieldId = field.key?replace(".", "_") /]
  [#local leftAddon = field.data.leftAddon!'info' /]
  [#if field.control == "checkbox"]
    [#if field.options?has_content]
      [@checkbox_list field=field id="${fieldId}" name="${key}" required=field.required autofocus=autofocus options=field.options /]
    [#else]
      [@checkbox field=field id="${fieldId}" name="${key}" required=field.required autofocus=autofocus /]
    [/#if]
  [#elseif field.control == "number"]
    [@input id="${fieldId}" type="number" name="${key}" leftAddon="${leftAddon}" required=field.required autofocus=autofocus placeholder=theme.optionalMessage(placeholder) /]
  [#elseif field.control == "password"]
    [@input id="${fieldId}" type="password" name="${key}" leftAddon="lock" autocomplete="new-password" autofocus=autofocus placeholder=theme.optionalMessage(placeholder)/]
  [#elseif field.control == "radio"]
    [@radio_list field=field id="${fieldId}" name="${key}" required=field.required autofocus=autofocus options=field.options /]
  [#elseif field.control == "select"]
    [@select id="${fieldId}" name="${key}" required=field.required autofocus=autofocus options=field.options /]
  [#elseif field.control == "textarea"]
    [@textarea id="${fieldId}" name="${key}" required=field.required autofocus=autofocus placeholder=theme.optionalMessage(placeholder) /]
  [#elseif field.control == "text"]
    [#if field.type == "date"]
      [@input id="${fieldId}" type="text" name="${key}" leftAddon="${leftAddon}" required=field.required autofocus=autofocus placeholder=theme.optionalMessage(placeholder) class="date-picker" dateTimeFormat="yyyy-MM-dd" /]
    [#else]
      [@input id="${fieldId}" type="text" name="${key}" leftAddon="${leftAddon}" required=field.required autofocus=autofocus placeholder=theme.optionalMessage(placeholder) /]
    [/#if]
  [/#if]
[/#macro]

만약 당신이 익숙하지 않다면, 그것은 약간 불안정해 보이지만, 이것은 일련의if/then 문장으로 사용자 인터페이스를 생성할 때 모든 사용자 정의 필드에 실행됩니다.매크로는 각 필드의 정의를 보고 올바른 HTML 요소를 생성합니다.기술적으로 말하자면, 그것은 다른 宏, 예를 들면 input 또는 select 을 호출하지만, 너는 나의 뜻을 이해했다.예를 들어, password 필드는 password 유형의 HTML 입력 필드로 표시됩니다.
각 필드에 레이블을 추가합니다.[#assign fieldId = field.key?replace(".", "_") /] 다음에 다음을 추가합니다.

<label for="${fieldId}">${theme.optionalMessage(field.key)}:</label>

익명 창을 열고 등록 절차를 다시 찾습니다.이 두 단계의 라벨을 보셔야 합니다.이 탭 값은 메시지 패키지에서 추출되기 때문에 다른 메시지와 마찬가지로 로컬화할 수 있습니다.또한 label HTML 요소가 사용되었기 때문에 텍스트 탭을 클릭하고 브라우저에서 텍스트 입력 필드에 커서를 놓을 수 있습니다.사용자 체험 승리!

첫 번째 단계를 완료하면 두 번째 단계에서도 레이블이 표시됩니다.

테마 미리 보기

일반적으로 익명 창에서 주제를 보는 것은 좋은 생각이다. 왜냐하면 이것은 사용자가 등록 체험을 할 수 있기 때문이다.그러나, 때로는 전체 등록 과정을 거치지 않고 보고 싶은 테마를 변경해야 할 수도 있습니다.미리 보기 테마를 통해 쉽게 할 수 있습니다.
사용자 정의로 이동한 다음 테마로 이동합니다.테마를 선택하고 미리 보기 링크(녹색 돋보기)를 클릭합니다.

이렇게 하면 새 탭이 열립니다.왼쪽 탐색에서 "OAuth register"를 누르면 테마를 볼 수 있습니다.단계 사이를 전환할 수도 있습니다.다음은 두 번째 미리보기입니다.

결론

이 글은 FusionAuth 주제의 모든 유연성을 엿볼 수 있습니다.Apache FreeMarker, ResourceBundles, CSS, JavaScript의 강력한 기능을 사용하여 이 페이지를 맞춤형으로 설정하고 로컬화할 수 있습니다.앞에서 말한 바와 같이 볼 만하다theme documentation.
FusionAuth 레지스트리를 사용하는 경우 사용자 환경을 개선하기 위해 기본 템플릿을 사용자 정의해야 합니다.FusionAuth 주제는 관리 사용자 인터페이스와 API 호출에서 사용할 수 있습니다.
근데 등록하면요?이 정보는 FusionAuth API를 통해 user.data 및 registration.data 필드에서 확인할 수 있습니다.관리 사용자 인터페이스에서도 볼 수 있지만 편집할 수는 없습니다.
사용자가 데이터를 볼 수 있도록 작은 포털 페이지를 구축합시다.사용자 데이터를 검색하고 수정할 수 있습니다APIs. 미래의 블로그 글에서 우리는 이 점을 어떻게 하는지 상세하게 이해할 것입니다.