> ## Documentation Index
> Fetch the complete documentation index at: https://auth0-feat-sdk-reference-docs.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
> Universal Login エクスペリエンス向けのログインページテンプレートを作成する方法を説明します。
# Universal Login Page Templates をカスタマイズ
export const AuthCodeGroup = ({children, dropdown}) => {
const [processedChildren, setProcessedChildren] = useState(children);
useEffect(() => {
let unsubscribe = null;
function init() {
unsubscribe = window.autorun(() => {
const processChildren = node => {
if (typeof node === "string") {
let processedNode = node;
for (const [key, value] of window.rootStore.variableStore.values.entries()) {
const escapedKey = key.replaceAll(/[.*+?^${}()|[\]\\]/g, (String.raw)`\$&`);
processedNode = processedNode.replaceAll(new RegExp(escapedKey, "g"), value);
}
return processedNode;
} else if (Array.isArray(node)) {
return node.map(processChildren);
} else if (node && node.props && node.props.children) {
return {
...node,
props: {
...node.props,
children: processChildren(node.props.children)
}
};
}
return node;
};
setProcessedChildren(processChildren(children));
});
}
if (window.rootStore) {
init();
} else {
window.addEventListener("adu:storeReady", init);
}
return () => {
window.removeEventListener("adu:storeReady", init);
unsubscribe?.();
};
}, [children]);
return {processedChildren};
};
export const AuthCodeBlock = ({filename, icon, language, highlight, children}) => {
const [displayText, setDisplayText] = useState(children);
const [copyText, setCopyText] = useState(children);
const wrapperRef = React.useRef(null);
useEffect(() => {
let unsubscribe = null;
function init() {
if (!window.autorun || !window.rootStore) {
return;
}
unsubscribe = window.autorun(() => {
let processedChildrenForDisplay = children;
let processedChildrenForCopy = children;
for (const [key, value] of window.rootStore.variableStore.values.entries()) {
const escapedKey = key.replaceAll(/[.*+?^${}()|[\]\\]/g, (String.raw)`\$&`);
let displayValue = value;
if (key === "{yourClientSecret}" && value !== "{yourClientSecret}") {
displayValue = value.substring(0, 3) + "*****MASKED*****";
}
processedChildrenForDisplay = processedChildrenForDisplay.replaceAll(new RegExp(escapedKey, "g"), displayValue);
processedChildrenForCopy = processedChildrenForCopy.replaceAll(new RegExp(escapedKey, "g"), value);
}
setDisplayText(processedChildrenForDisplay);
setCopyText(processedChildrenForCopy);
});
}
if (window.rootStore) {
init();
} else {
window.addEventListener("adu:storeReady", init);
}
return () => {
window.removeEventListener("adu:storeReady", init);
unsubscribe?.();
};
}, [children]);
useEffect(() => {
if (!wrapperRef.current) return;
const originalWriteText = navigator.clipboard.writeText.bind(navigator.clipboard);
let isOverriding = false;
const handleClick = e => {
const button = e.target.closest('[data-testid="copy-code-button"]');
if (!button || !wrapperRef.current.contains(button)) return;
isOverriding = true;
navigator.clipboard.writeText = text => {
if (isOverriding) {
isOverriding = false;
navigator.clipboard.writeText = originalWriteText;
return originalWriteText(copyText);
}
return originalWriteText(text);
};
setTimeout(() => {
if (isOverriding) {
isOverriding = false;
navigator.clipboard.writeText = originalWriteText;
}
}, 100);
};
const wrapper = wrapperRef.current;
wrapper.addEventListener('click', handleClick, true);
return () => {
wrapper.removeEventListener('click', handleClick, true);
if (navigator.clipboard.writeText !== originalWriteText) {
navigator.clipboard.writeText = originalWriteText;
}
};
}, [copyText]);
return
{displayText}
;
};
[Liquid template language](https://shopify.github.io/liquid/basics/introduction/) で作成したページテンプレートを使用すると、Universal Login ページをカスタマイズできます。ページテンプレートでは、ログインボックスや MFA チャレンジなど、Universal Login のプロンプトの周囲に表示するコンテンツを定義できます。同じページテンプレートがすべてのログインフローページで使用されるため、このカスタマイズ方法を使えば、統一されたブランド体験をユーザーに簡単に提供できます。
カスタマイズしたページテンプレートを使用するには、テナントに [カスタムドメイン](/docs/ja-jp/customize/custom-domains) を設定する必要があります。さらに、Universal Login のページテンプレートを更新できるのは [Management API](https://auth0.com/docs/api/management/v2) のみです。
`prompt` という用語は、サインアップページや MFA チャレンジなど、ログインフロー内の特定のステップを指します。このページの変数やコードサンプルでは、`prompt` または `widget` という用語が使われている場合があります。これらの用語は Universal Login の文脈では同義ですが、コード内では**互換的に使用できません**。正しくカスタマイズするため、コードに追加する要素には、記載されている適切な用語を使用していることを確認してください。
ページテンプレートの要件
Universal Login のページテンプレートを作成する際は、次のタグを含める必要があります。
| タグ | 説明 |
| - | - |
| `auth0:widget` | ログインページやパスワードのリセットページなど、ログインフローのすべてのページに表示される プロンプト の HTML が含まれます |
| `auth0:head` | プロンプト をレンダリングするために必要なタグが含まれます |
ページ上で プロンプト を中央に配置するには、`` 要素に `class="_widget-auto-layout"` を追加します。必要に応じて プロンプト を手動で配置する場合は、この属性を省略できます。
**ページテンプレートの制限事項:**
* Auth0 がプロジェクトをビルドするたびに、CSS クラス名は変更されます。これらのクラスを対象とするカスタム CSS は、新しいビルドのたびに機能しなくなります。
* Universal Login ページの HTML 構造は変更される可能性があります。中断を防ぐため、HTML 構造に依存するカスタマイズは避けてください。
詳細については、[CSS のカスタマイズ](#css-customization)を参照してください。
テンプレートの例:
次の例は、必要なタグを含む、作成可能な最もシンプルなUniversal Loginのページテンプレートです。
```liquid lines theme={null}
{% assign resolved_dir = dir | default: "auto" %}
{%- auth0:head -%}
{%- auth0:widget -%}
```
Storybook を使ってテンプレートを表示する場合、`