> ## Documentation Index
> Fetch the complete documentation index at: https://docs-staging-docs-5625.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# ユニバーサルログインのページテンプレートをカスタマイズする
> ユニバーサルログインエクスペリエンスのためにログインページのテンプレートを作成する方法を説明します。
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テンプレート言語](https://shopify.github.io/liquid/basics/introduction/)で作成したページテンプレートを提供することで、ユニバーサルログインページをカスタマイズできます。ページテンプレートを使用して、ログインボックスやMFAチャレンジなどの、ユニバーサルログインプロンプトに関して表示するコンテンツを定義できます。同じページテンプレートがすべてのログインフローページに使用されるため、このカスタマイズ手法は、ユーザーに対して一貫性のあるブランドエクスペリエンスの実装を簡単にします。
カスタマイズされたページテンプレートを使用するには、テナントに対して[カスタムドメイン](/docs/ja-jp/customize/custom-domains)を構成する必要があります。さらに、[Management API](/docs/ja-jp/api/management/v2)を使用してのみ、ユニバーサルログインのページテンプレートを更新できます。
`prompt`（プロンプト）という用語は、サインアップページやMFAチャレンジなどのログインフローに含まれる特定のステップを指します。このページにある変数やサンプルコードでは、`prompt`（プロンプト）または `widget`（ウィジェット）という用語が使われています。これらの用語は、ユニバーサルログインに関しては同義ですが、コードの中では置き換えて使用できるものでは**ありません** 。カスタマイズに問題が生じないように、コードに追加する要素には適切な用語を使用してください。
## ページテンプレートの要件
ユニバーサルログインのページテンプレートを作成する際は、以下のタグを含ませる必要があります。
| タグ | 説明 |
| - | - |
| `auth0:widget` | ログインフローの各ページ（ログインページやパスワードリセットページなど）に表示されるプロンプトのHTMLが含まれます。 |
| `auth0:head` | プロンプトの表示に必要なタグが含まれます。 |
プロンプトをページの中央に配置するには、``要素に`class="_widget-auto-layout"`を追加します。この属性を省略して、必要に応じてプロンプトを手動で配置できます。
**ページテンプレートの制限：**
* CSSクラス名は、Auth0がプロジェクトをビルドするたびに変わります。これらのクラスに適用するカスタムCSSは、新しいビルドごとに破棄されます。
* ユニバーサルログインページのHTML構造は変更される場合があります。中断を防ぐため、HTML構造に依存するカスタマイズは避けてください。
詳細については、「[CSSのカスタマイズ](#css-customization)」を参照してください。
##### テンプレート例：
以下の例は、必要なタグを使用して作成できる最もシンプルなユニバーサルログインのページテンプレートを示しています。
```html lines theme={null}
{% assign resolved_dir = dir | default: "auto" %}
{%- auth0:head -%}
{%- auth0:widget -%}
```
Storybookを使用してテンプレートを表示する場合、`