> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
> Universal Login のログインページテンプレートを作成する方法を説明します。
# Universal Login ページテンプレートをカスタマイズ
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) + "*****マスク済み*****";
}
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 テンプレート言語](https://shopify.github.io/liquid/basics/introduction/) で作成したページテンプレートを指定することで、Universal Login ページをカスタマイズできます。ページテンプレートを使用すると、ログインボックスや MFA チャレンジなど、Universal Login のプロンプトの前後に表示されるコンテンツを定義できます。同じページテンプレートがログインフローのすべてのページで使用されるため、このカスタマイズ方法を使えば、ユーザーに対して一貫性のあるブランド体験を簡単に実装できます。
カスタマイズしたページテンプレートを使用するには、テナント用に [カスタムドメイン](/ja/docs/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 を使用する場合、`