> ## Documentation Index
> Fetch the complete documentation index at: https://docs-dev-docs-event-stream-action-templates.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Lockの構成オプション
> Lockには、Lockウィジェットの動作、外観、接続性を変更できる多くの設定オプションがあります。このリソースでは、それらのオプションの詳細を提供しています。
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}
;
};
Lockは、コンストラクターに送信される`options`パラメーターで設定できます。これらのオプションでは、Lockウィジェットの動作方法、Lockウィジェットが接続を処理する方法、プロジェクトに必要な追加のサインアップフィールド、ウィジェットの言語とテキストの値、色、画像など、さまざまな変更を行えます。探しているものが明確な場合は、下記のインデックスをご覧ください。詳細については、それぞれのオプションをご覧ください。
## UI
| オプション | 説明 |
| ---------------------------------------------------------------------- | ---------------------------------------------------------------- |
| [allowAutocomplete](#allowautocomplete-boolean-) | メールやユーザー名の入力で自動補完を有効または無効にします |
| [allowPasswordAutocomplete](#allowpasswordautocomplete-boolean-) | パスワードの入力で自動補完を有効または無効にします |
| [allowShowPassword](#allowshowpassword-boolean-) | ユーザーが入力しているパスワードの表示を選択可能にするか指定します |
| [allowedConnections](#allowedconnections-array-) | 認証に利用可能な接続のリストです |
| [autoclose](#autoclose-boolean-) | ログイン後にLockを閉じるか指定します |
| [autofocus](#autofocus-boolean-) | 最初の入力フィールドにフォーカスを設定するか指定します |
| [avatar](#avatar-object-) | メールまたはユーザー名の入力後にLockのヘッダーにアバターまたはユーザー名を表示するかどうか、そして、その取得方法を指定します |
| [closable](#closable-boolean-) | Lockを閉じることができるのかを決定します |
| [container](#container-string-) | Lockがレンダリングされる場所のHTML要素です。Lockがモーダルウィンドウではなく、インラインで表示されるようにします |
| [flashMessage](#flashmessage-object-) | Lockを表示する際に、`error`または`success`のフラッシュメッセージを表示します |
| [language](#language-string-) | ウィジェットの言語を指定します |
| [languageDictionary](#languagedictionary-object-) | ウィジェット要素（ラベルやプレースホルダーなど）に使用されるテキストをカスタマイズします |
| [popupOptions](#popupoptions-object-) | 画面上でポップアップが表示される場所をカスタマイズします |
| [rememberLastLogin](#rememberlastlogin-boolean-) | 前回に使用したアカウントで素早くログインできる画面を表示するか指定します |
| [scrollGlobalMessagesIntoView](#scrollglobalmessagesintoview-boolean-) | globalMessageをユーザーのビューポートにスクロールインさせるかを指定します |
## テーマ
テーマオプションは`options`オブジェクトの`theme`プロパティにグループ化されています。
| オプション | 説明 |
| ---------------------------------------------------- | ------------------- |
| [authButtons](#authbuttons-object-) | 特定の接続ボタンの外観をカスタマイズ |
| [labeledSubmitButton](#labeledsubmitbutton-boolean-) | 送信ボタンにテキストを表示するかどうか |
| [logo](#logo-string-) | 使用するロゴ |
| [primaryColor](#primarycolor-string-) | ウィジェットのプライマリボタンの色 |
## 認証
認証オプションは`options`オブジェクトの`auth`プロパティにグループ化されています。
| オプション | 説明 |
| --------------------------------------------- | ------------------------- |
| [audience](#audience-string-) | ご利用のアクセストークンを使用するAPI |
| [autoParseHash](#autoparsehash-boolean-) | ハッシュ値を自動解析し続行するかどうか |
| [connectionScopes](#connectionscopes-object-) | 接続スコープを指定する |
| [params](#params-object-) | ログイン時にパラメーターを送信するオプション |
| [redirect](#redirect-boolean-) | リダイレクトモードを使用するかどうか |
| [redirectUrl](#redirecturl-string-) | 認証の後にリダイレクトするURL |
| [responseMode](#responsemode-string-) | 応答をPOSTとして送信するオプション |
| [responseType](#responsetype-string-) | コードまたはトークンとしての応答 |
| [sso](#sso-boolean-) | シングルサインオンがロックで有効かどうかを判定する |
## Database（データベース）
| オプション | 説明 |
| --------------------------------------------------------------- | ------------------------------------------------- |
| [additionalSignUpFields](#additionalsignupfields-array-) | サインアップ時に収集される追加フィールド |
| [allowLogin](#allowlogin-boolean-) | ウィジェットでログインを許可するか否か |
| [allowForgotPassword](#allowforgotpassword-boolean-) | ウィジェットでパスワードを忘れた場合を許可するか否か |
| [allowSignUp](#allowsignup-boolean-) | ウィジェットでサインアップを許可するか否か |
| [defaultDatabaseConnection](#defaultdatabaseconnection-string-) | デフォルトで表示されるデータベース接続 |
| [initialScreen](#initialscreen-string-) | ウィジェットが開いたときに表示する画面 |
| [loginAfterSignUp](#loginaftersignup-boolean-) | サインアップ後に自動ログインを許可するか否か |
| [forgotPasswordLink](#forgotpasswordlink-string-) | カスタムのパスワードを忘れた場合ページへのリンク |
| [showTerms](#showterms-boolean-) | サインアップ条件を表示するかどうか指定 |
| [mustAcceptTerms](#mustacceptterms-boolean-) | 条件への同意が必要か否か（チェックボックス） |
| [prefill](#prefill-object-) | メール/ユーザー名のフィールドの事前入力値 |
| [signUpLink](#signuplink-string-) | ［サインアップ］がクリックされた時に起動するカスタムURLを設定 |
| [usernameStyle](#usernamestyle-string-) | "username"値のみ、または"email"値のみを受け入れるようにユーザー名フィールドを制限 |
## Enterprise（企業）
| オプション | 説明 |
| ------------------------------------------------------------------- | ------------------- |
| [defaultEnterpriseConnection](#defaultenterpriseconnection-string-) | 接続が1つ以上ある場合に1つを指定する |
## パスワードレス
| オプション | 説明 |
| ------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [passwordlessMethod](#passwordlessmethod-string-) | メール接続に`Auth0LockPasswordless`を使用している場合、このオプションで、ユーザー認証のために[コード](/docs/ja-jp/connections/passwordless/spa-email-code)を送るか[マジックリンク](/docs/ja-jp/connections/passwordless/spa-email-link)を送るかを選択できます。 |
### その他
| オプション | 説明 |
| ----------------------------------------------------- | --------------------------------- |
| [configurationBaseUrl](#configurationbaseurl-string-) | アプリケーションのベースURLをオーバーライドします |
| [languageBaseUrl](#languagebaseurl-string-) | 言語ファイルベースのURLをオーバーライドします |
| [hashCleanup](#hashcleanup-boolean-) | URLからのハッシュのデフォルト削除をオーバーライドします |
| [connectionResolver](#connectionresolver-function-) | ユーザー名情報に基づいて接続を選択するための任意のコールバック関数 |
***
## UIオプション
### allowAutocomplete \{Boolean}
メールまたはユーザー名フィールドでオートコンプリート（``）を許可するかどうかを決定します。デフォルトはfalseです。
`allowAutocomplete: true`
### allowPasswordAutocomplete \{Boolean}
パスワードフィールドでオートコンプリート（``）を許可するかどうかを決定します。デフォルトはfalseです。
パスワードマネージャーをサポートするため、またその他の好ましくない動作を回避するには、`allowPasswordAutocomplete`を`true`に設定します。
`allowPasswordAutocomplete: true`
### allowShowPassword \{Boolean}
このオプションでは、UIにチェックボックスを追加するかどうかを決定します。チェックボックスを選択すると、ユーザーはパスワードを入力する際にパスワードを表示できるようになります。このオプションのデフォルトは`false`です。
`allowShowPassword: true`
Lockの`allowShowPassword`を`true`に設定すると、次のようにパスワードが表示されるようになります。
### allowedConnections {Array}
`signin|signup|reset`のアクションで使用される接続の配列です。デフォルトは、すべての有効な接続です。
`allowedConnections:['Username-Password-Authentication']`
`allowedConnections:['twitter', 'facebook', 'linkedin']`
`allowedConnections:['qraftlabs.com']`
`allowedConnections`の例：
### autoclose \{Boolean}
サインインが成功した後、Lockが自動的に閉じられるかどうかを決定します。デフォルトはfalseです。Lockが`closable`ではない場合、このオプションがtrueに設定されていてもLockは閉じられません。
`autoclose: true`
### autofocus \{Boolean}
trueの場合、ウィジェットの最初のフィールドにフォーカスが設定されます。モバイルデバイスでレンダリングされる場合、または`container`オプションが指定されている場合のデフォルトは`false`です。それ以外の場合はすべて、デフォルトは`true`です。
`autofocus: false`
### avatar \{Object}
デフォルトでは、ユーザーのプロフィール画像と表示名の取得にはGravatarが使用されますが、`avatar`オプションを使用すると、どこからでも取得できるようになります。
```javascript lines theme={null}
var options = {
avatar: {
url: function(email, cb) {
// Obtain the avatar url for the email input by the user, Lock
// will preload the image before displaying it.
// Note that in case of an error you call cb with the error in
// the first arg instead of `null`.
var url = obtainAvatarUrl(email);
cb(null, url);
},
displayName: function(email, cb) {
// Obtain the display name for the email input by the user.
// Note that in case of an error you call cb with the error in
// the first arg instead of `null`.
var displayName = obtainDisplayName(email);
cb(null, displayName);
}
}
};
```
avatarを一切表示したくない場合は、単に`null`を渡します。
`avatar: null`
Gravatarのデフォルトの動作：
### closable \{Boolean}
Lockを閉じられるかどうかを決定します。`container`オプションが指定されている場合、その値は常に`false`です。それ以外の場合、デフォルトは`true`です。
`closable: false`
### container \{String}
ウィジェットが表示されるhtml要素の`id`です。
これにより、ウィジェットはモーダルポップアウトウィンドウではなく、`div`内にインラインで表示されます。
```html lines theme={null}
```
### flashMessage `{Object}`
Lockが表示されているときに、`error`または`success`のフラッシュメッセージを表示します。このオブジェクトは次のプロパティを含みます：
* type `{String}`：メッセージタイプ。サポートされているタイプは`error`、`info`、`success`です。
* text `{String}`：表示するテキスト。
```javascript lines theme={null}
var options = {
flashMessage: {
type: 'success',
text: 'Welcome!'
}
};
```
### language \{String}
ウィジェットの言語を指定します。デフォルトは「en」です。現在提供されている言語の一覧については、[国際化ディレクトリ](https://github.com/auth0/lock/blob/master/src/i18n/)を参照してください。
`language:'es'`
### languageDictionary \{Object}
Lockで表示されるあらゆるテキストをカスタマイズできます。デフォルトは{}です。このオブジェクトで変更できる`languageDictionary`値の一覧については、英語の[言語辞書仕様](https://github.com/auth0/lock/blob/master/src/i18n/en.js)ページを参照してください。
```javascript lines theme={null}
var options = {
languageDictionary: {
emailInputPlaceholder: "something@youremail.com",
title: "Log me in"
},
};
```
また、`languageDictionary`オプションの詳しい使用方法については、[エラーメッセージのカスタマイズ](/docs/ja-jp/customize/login-pages/classic-login/customize-lock-error-messages)ページまたは[国際化](/docs/ja-jp/customize/internationalization-and-localization/lock-internationalization)ページを確認してください。
### popupOptions \{Object}
画面上のポップアップの位置をカスタマイズできます。window\.openで許可されている位置とサイズの機能はすべて受け入れられます。デフォルトは{}です。
`window.open`機能のオプション。これは、`redirect`が`false`に設定されている場合にのみ適用されます。
```javascript lines theme={null}
var options = {
auth: {
redirect: false
},
popupOptions: { width: 300, height: 400, left: 200, top: 300 }
};
```
### rememberLastLogin \{Boolean}
前回使用したアカウントで素早くログインできる画面を表示するかどうかを決定します。シングルサインオン（SSO）データを要求し、**［Last time you signed in with（前回サインインに使用したとき）］** のメッセージを有効にします。デフォルトは`true`です。この情報はユーザーのAuth0セッションから取得されるため、この機能はユーザーのAuth0セッション（設定可能）が有効である限り有効です。
`rememberLastLogin: false`
新規テナントでは[自動的にシームレスSSOが有効になります](/docs/ja-jp/get-started/tenant-settings/enable-sso-for-legacy-tenants)。これを有効にすると、`rememberLastLogin`オプションは関係なくなります。有効なセッションがある場合は、ユニバーサルログインページは一切表示されないためです。シームレスSSOを使用すると、ユーザーは一度ログインするだけで、構築されたアプリケーションやサードパーティ製アプリを移動する際に認証情報を再入力する必要がなくなります。認証がシームレスに進むので、シームレスSSOの使用を強く推奨します。ユーザーがログインしていない場合は、想定通りログイン画面にリダイレクトされます。さらに、以下の状況では、**［Last time you signed in with（前回サインインに使用したとき）］** のメッセージは利用できなくなります。
* [パスワードレス認証](/docs/ja-jp/connections/passwordless)を使用して確立されたセッションで、[ホストされたログインページ](/docs/ja-jp/authenticate/login/auth0-universal-login)でLockを使用した
* `responseType: code`の[埋め込み型ログインシナリオ](/docs/ja-jp/authenticate/login/universal-vs-embedded-login)でLockを使用した（通常のWebアプリで使用される[認証コードフロー](/docs/ja-jp/get-started/authentication-and-authorization-flow/authorization-code-flow)を示します）
### scrollGlobalMessagesIntoView `{Boolean}`
`globalMessage`をユーザーのビューポートにスクロールインさせるかどうかを決定します。デフォルトは`true`です。
`scrollGlobalMessagesIntoView: false`
## テーマオプション
テーマオプションは`options`オブジェクトの`theme`プロパティにグループ化されています。
```javascript lines theme={null}
var options = {
theme: {
labeledSubmitButton: false,
logo: "https://example.com/assets/logo.png",
primaryColor: "green",
authButtons: {
connectionName: {
displayName: "...",
primaryColor: "...",
foregroundColor: "...",
icon: "https://.../logo.png"
}
}
}
};
```
### authButtons \{Object}
カスタムOAuth2接続を使用してLockのボタンをカスタマイズできます。カスタマイズを希望するカスタムの接続ボタンはそれぞれ、独自のパラメーターセットと一緒に名前で表記する必要があります。カスタマイズ可能なパラメーターは以下です。
* **displayName** `{String}`：ボタンタイトルを作成する際に、接続名の代わりに表示する名前、たとえばログインのための「`LOGIN WITH MYCONNECTION`」など。
* **primaryColor** `{String}`：ボタンの背景色。デフォルトは、`#eb5424`です。
* **foregroundColor** `{String}`:ボタンの文字の色。デフォルトは、`#FFFFFF`です。
* **icon** `{String}`:この接続のためのアイコンのURL。例：`http://site.com/logo.png`。
```javascript lines theme={null}
var options = {
theme: {
authButtons: {
"testConnection": {
displayName: "Test Conn",
primaryColor: "#b7b7b7",
foregroundColor: "#000000",
icon: "http://example.com/icon.png"
},
"testConnection2": {
primaryColor: "#000000",
foregroundColor: "#ffffff",
}
}
}
};
```
### labeledSubmitButton `{Boolean}`
このオプションは、送信ボタンにラベルを付けるかどうかを示し、デフォルトでは`true`です。`false`に設定すると、代わりにアイコンが表示されます。
```javascript lines theme={null}
var options = {
theme: {
labeledSubmitButton: false
}
};
```
ラベルがデフォルトのtrueに設定されている場合、ラベルのテキストは、[languageDictionary](#languagedictionary-object-)オプションでカスタマイズできます。
### logo `{String}`
`logo`の値は、画像のURLであり、Lockのヘッダーに配置され、Auth0のロゴのデフォルトになります。ユーザーエクスペリエンスを向上させるために推奨される最大高さは`58px`です。
```javascript lines theme={null}
var options = {
theme: {
logo: 'https://example.com/logo.png'
}
};
```
### primaryColor \{String}
`primaryColor`プロパティは、Lockのプライマリカラーを定義します。ウィジェットで使用されるカラーはすべて、そこから計算されます。このオプションは、すべてのカラーが`logo`のカラーパレットと合うように、カスタム`logo`を提供する際に、役立ちます。デフォルトは、`#ea5323`です。
```javascript lines theme={null}
var options = {
theme: {
logo: 'https://example.com/logo.png',
primaryColor: '#31324F'
}
};
```
## 認証オプション
認証オプションは`options`オブジェクトの`auth`プロパティにグループ化されています。
Lockによってデフォルトで使用されるスコープは`openid profile email`です。
```javascript lines theme={null}
var options = {
auth: {
params: {
param1: "value1",
scope: "openid profile email"
},
autoParseHash: true,
redirect: true,
redirectUrl: "some url",
responseMode: "form_post",
responseType: "token",
sso: true,
connectionScopes: {
connectionName: [ 'scope1', 'scope2' ]
}
}
};
```
### audience \{String}
`audience`オプションは、認証後に受け取ったアクセストークンを消費するAPIを示します。
export const codeExample = `var options = {
auth: {
audience: 'https://{yourDomain}/userinfo',
}
}`;
### autoParseHash \{Boolean}
`autoParseHash`が`true`に設定されている場合、Lockはインスタンス化された際に`window.location.hash`文字列を解析します。`false`に設定されている場合は、[resumeAuth](/docs/ja-jp/libraries/lock/lock-api-reference)メソッドを使用して認証を手動で再開する必要があります。
```javascript lines theme={null}
var options = {
auth: {
autoParseHash: false
}
};
```
### connectionScopes \{Object}
このオプションでは、認証用にoauth2/ソーシャル接続に送信するスコープを設定できます。
```javascript lines theme={null}
var options = {
auth: {
connectionScopes: {
'facebook': ['scope1', 'scope2']
}
}
};
```
ソーシャル接続の具体的なスコープの一覧は、該当するプロバイダーから取得できます。たとえば、[開発者向けFacebook](https://developers.facebook.com/docs/facebook-login/permissions/)のリファレンスには、接続用に要求できる個別の許可の一覧があります。
### params \{Object}
optionsオブジェクトにパラメーターを追加することで、ログインを開始する際にパラメーターを送信できます。以下の例では、`foo`に等しい値を持つ`state`パラメーターを追加し、さらに`scope`パラメーター（スコープ、さらに要求された属性を含む）を追加します。
```javascript lines theme={null}
var options = {
auth: {
params: {
state: 'foo',
scope: 'openid email user_metadata app_metadata picture'
}
}
};
```
サポートされているパラメーターの詳細については、[Lock認証パラメーター](/docs/ja-jp/libraries/lock/lock-authentication-parameters)を参照してください。
### redirect \{Boolean}
デフォルトはtrueです。trueに設定すると、リダイレクトモードが使用されます。falseに設定すると、[ポップアップモード](/docs/ja-jp/libraries/lock/lock-authentication-modes)が選択されます。
```javascript lines theme={null}
var options = {
auth: {
redirect: false
}
};
```
### redirectUrl `{String}`
URL Auth0が認証後にリダイレクトされます。デフォルトは空の文字列「」（リダイレクトURLなし）です。
```javascript lines theme={null}
var options = {
auth: {
redirectUrl: 'http://testurl.com'
}
};
```
`redirectUrl`が指定されている場合（空の値以外が設定されている場合）の`responseType`オプションは、手動で設定されていない場合はデフォルトで`code`になります。
### responseMode `{String}`
コードまたはトークンを、クエリ部やフラグメント部分に含めるのではなく、HTTP POST要求で`redirectUrl`に送信する場合は、`"form_post"`に設定する必要があります。
それ以外の場合、このオプションは省略しなければならず、デフォルトでは省略されています。
```javascript lines theme={null}
var options = {
auth: {
responseMode: 'form_post'
}
};
```
### responseType \{String}
`responseType`の値は、シングルページアプリケーションの場合は「token」に、それ以外の場合には「code」に設定する必要があります。redirectUrlが指定されている場合のデフォルトは「code」、指定されていない場合のデフォルトは「token」です。
```javascript lines theme={null}
var options = {
auth: {
responseType: 'token'
}
};
```
`responseType`が`code`に設定されている場合、Lockは絶対に\*\*［Last time you logged in with（前回ログインしたとき）］\*\* のメッセージを表示せず、常にユーザーに認証情報の入力を求めます。
## sso \{Boolean}
デフォルトはtrueです。trueに設定すると、Lockで[シングルサインオン](/docs/ja-jp/authenticate/single-sign-on)が有効になります。
```javascript lines theme={null}
var options = {
auth: {
sso: false
}
};
```
## データベースオプション
### additionalSignUpFields \{Array}
`additionalSignUpFields`オプションを使用すると、サインアップ画面に追加の入力フィールドを追加できます。そうすることで追加された各オプションは、そのユーザーの`user_metadata`に追加されます。詳細については、「[ユーザープロファイルでのメタデータの使い方](/docs/ja-jp/manage-users/user-accounts/metadata)」をお読みください。すべての入力に`name`と`placeholder`が必要です。また、`icon` URLを指定することもできます。さらに、初期値は`prefill`オプションで指定でき、値を含む文字列またはそれを取得する関数を使用できます。その他のオプションはフィールドのタイプによって異なります。フィールドのタイプはタイプオプションで定義され、デフォルトは「text」です。
`additionalSignUpFields`オプションは、データベースサインアップのみでの使用を想定しています。ソーシャルサインアップもある場合は、ユーザーのサインアップ後に追加情報を求めることができます（こちらの [カスタムサインアップに関するページ](/docs/ja-jp/libraries/custom-signup)を参照してください）。`databaseAlternativeSignupInstructions`のi18nキーを使うと、これらの手順を表示することができます。
新しいフィールドは、通常のサインアップ入力フィールドの下に、指定された順番で表示されます。
#### textフィールド
textフィールドは追加のサインアップフィールドのデフォルトのタイプです。`validator`関数も指定できることに注意してください。
```javascript lines theme={null}
var options = {
additionalSignUpFields: [{
name: "address",
placeholder: "enter your address",
// The following properties are optional
icon: "https://example.com/assests/address_icon.png",
prefill: "street 123",
validator: function(address) {
return {
valid: address.length >= 10,
hint: "Must have 10 or more chars" // optional
};
}
},
{
name: "full_name",
placeholder: "Enter your full name"
}]
}
```
`validator`を指定しない場合、textフィールドは**必須** になります。textフィールドをオプションにする場合は、常に`true`を返すバリデーターを使用してください。
```javascript lines theme={null}
var options = {
additionalSignUpFields: [{
name: "favorite_color",
placeholder: "Enter your favorite color (optional)",
validator: function() {
return true;
}
}]
}
```
プロフィールのルートに属性の値を保存する場合は、`storage:'root'`を使用します。この方法で保存できるのは、値の一部のみです。ルートプロファイルに追加できる属性の一覧は[こちら](/docs/ja-jp/api/management/v2#!/Users/patch_users_by_id)で確認できます。デフォルトでは、追加のサインアップフィールドはすべてuser\_metadataオブジェクト内に保存されます。
```javascript lines theme={null}
var options = {
additionalSignUpFields: [{
name: "name",
storage: "root"
}]
};
```
#### selectフィールド
サインアップフィールドの`type:"select"`を使用すると、ユーザーが値を選択するためのselect要素を使用できます。
```javascript lines theme={null}
var options = {
additionalSignUpFields: [{
type: "select",
name: "location",
placeholder: "choose your location",
options: [
{value: "us", label: "United States"},
{value: "fr", label: "France"},
{value: "ar", label: "Argentina"}
],
// The following properties are optional
icon: "https://example.com/assests/location_icon.png",
prefill: "us"
}]
}
```
`select`フィールドの`options`配列の項目は、
`{label:“non empty string”, value:“non empty string”}`のフォーマットに従う必要があり、少なくとも1つのオプションを定義する必要があります。
`options`と`prefill`の値は、次のように関数で指定できます。
```javascript lines theme={null}
var options = {
additionalSignUpFields: [{
type: "select",
name: "location",
placeholder: "choose your location",
options: function(cb) {
// obtain options, in case of error you call cb with the error in the
// first arg instead of null
cb(null, options);
},
icon: "https://example.com/assests/location_icon.png",
prefill: function(cb) {
// obtain prefill, in case of error you call cb with the error in the
// first arg instead of null
cb(null, prefill);
}
}]
}
```
#### checkboxフィールド
カスタムサインアップフィールドの3つ目のタイプは`type:"checkbox"`です。`prefill`値でチェックボックスのデフォルトの状態（`true`または`false`）を決定できます。この値は必須です。
```javascript lines theme={null}
var options = {
additionalSignUpFields: [{
type: "checkbox",
name: "newsletter",
prefill: "true",
placeholder: "I hereby agree that I want to receive marketing emails from your company"
}]
}
```
#### hiddenフィールド
サインアップフィールドの`type:"hidden"`を使用すると、固定値を持つ隠し入力を使用できます。
```javascript lines theme={null}
var options = {
additionalSignUpFields: [{
type: "hidden",
name: "signup_code",
value: "abc123"
}]
}
```
一部のユースケースでは、言語設定のオプションなど、メールテンプレート用の`additionalSignUpFields`データを使用できる場合があります。その値を使用して、テンプレート化されたメール通信の言語を設定できます。
### allowLogin \{Boolean}
`false`に設定すると、ウィジェットのログイン画面が表示されなくなります。これは、ウィジェットをサインアップ専用にしたい場合（サインアップ画面のログインタブとサインアップタブは非表示になります）や、パスワードのリセット専用にしたい場合（パスワード再設定画面の戻るボタンは非表示になります）に便利です。そのような場合、`initialScreen`、`allowForgotPassword`、`allowSignUp`のオプションも指定しなければならないことがあります。デフォルトは`true`です。
`allowLogin: false`
### allowForgotPassword \{Boolean}
`allowForgotPassword`をfalseに設定すると、ログイン画面の「パスワードを覚えていない場合」のリンクが非表示になり、「パスワードを忘れた場合」画面にアクセスできなくなります。デフォルトはtrueです。パスワード変更スクリプトを持たないカスタムデータベースとのデータベース接続を使用している場合、「パスワードを忘れた場合」画面は使用できなくなります。
`allowForgotPassword: false`
### allowSignUp \{Boolean}
`false`に設定すると、ログイン画面のログインタブとサインアップのタブが非表示になり、サインアップ画面にアクセスできなくなります。デフォルトは`true`です。データベース接続でサインアップが無効になっている場合、または作成スクリプトのないカスタムデータベースを使用している場合は、サインアップ画面は使用できなくなることに注意してください。
また、このオプションはクライアント側の外観**のみ** を制御するものであり、特定の匿名訪問者からの新規サインアップを完全に阻止するものではないことに注意してください。新規ユーザーのサインアップを完全に防止したい場合は、ダッシュボードの接続設定で**サインアップを無効にする** オプションを使用する必要があります。
`allowSignUp: false`
### defaultDatabaseConnection \{String}
複数のデータベース接続が利用可能な場合に、使用するデータベース接続を指定します。
`defaultDatabaseConnection:'test-database'`
### initialScreen `{String}`
ウィジェットを開いたときに表示される画面の名前です。有効な値は`login`、`signUp`、`forgotPassword`です。このオプションが指定されていない場合、ウィジェットのデフォルト画面は、リストに用意されている最初の画面になります。
`initialScreen:'forgotPassword'`
### loginAfterSignUp \{Boolean}
ユーザーがサインアップに成功した後、自動的にサインインされるかどうかを決定します。デフォルトは`true`です。
`loginAfterSignUp: false`
### forgotPasswordLink `{String}`
ユーザーがパスワードをリセットできるページのURLを設定します。空でない文字列に設定すると、ログイン画面で「パスワードを覚えていない場合」のリンクをクリックしたユーザーは、指定したURLにリダイレクトされます。
`forgotPasswordLink:'https://yoursite.com/reset-password'`
### showTerms \{Boolean}
`true`に設定すると、`languageDictionary.signUpTerms`文字列が表示されます。デフォルトは`true`です。
`showTerms: false`
### mustAcceptTerms \{Boolean}
`true`に設定すると、サインアップ前に確認する必要がある利用規約の横にチェックボックス入力が表示されます。利用規約は`languageDictionary`オプションから指定できます。このオプションは、データベース接続でサインアップするユーザーにのみ有効です。デフォルトはfalseです。
`mustAcceptTerms: true`
### prefill \{Object}
メールおよび/またはユーザー名の入力に対する初期値を設定できます。省略すると初期値は指定されません。
```javascript lines theme={null}
var options = {
prefill: {
email: "someone@auth0.com",
username: "someone",
phoneNumber: "+1234567890"
}
};
```
### signUpLink `{String}`
サインアップボタンをクリックした際に要求されるURLを設定します。空でない文字列に設定すると、このオプションは`allowSignUp`を強制的に`true`にします。
`signUpLink:'https://yoursite.com/signup'`
### usernameStyle \{String}
`requires_username`フラグが設定されているデータベース接続で、ユーザーを識別するために使用される情報を決定します（フラグが設定されていない場合、`usernameStyle`オプションは無視されます）。可能な値は`"username"`と`"email"`です。デフォルトでは、`username`と`email`の両方が許可されています。このオプションを設定すると、ログインはどちらか一方のみに制限されます。
`usernameStyle:'username'`
## エンタープライズオプション
### defaultEnterpriseConnection \{String}
複数のエンタープライズ接続がある場合や、データベース接続がある場合に、ユーザー名とパスワードを使用してログインできるエンタープライズ接続を指定します。`defaultDatabaseConnection`が指定されている場合はデータベース接続が使用され、このオプションは無視されます。
`defaultEnterpriseConnection:'test-database'`
### defaultADUsernameFromEmailPrefix \{Boolean}
メールのプレフィックスからADプレースホルダーのユーザー名を解決します。デフォルトは`true`です。
`defaultADUsernameFromEmailPrefix: false`
## パスワードレスオプション
### passwordlessMethod \{String}
`Auth0LockPasswordless`をメール接続で使用する場合、このオプションを使用して、ユーザー認証用の[コード](/docs/ja-jp/connections/passwordless/spa-email-code)または[マジックリンク](/docs/ja-jp/connections/passwordless/spa-email-link)の送信を選択できます。メール接続で利用可能な値は`code`と`link`です。デフォルトは`code`です。SMSパスワードレス接続では、常に`code`が使用されます。
`passwordlessMethod: code`
## その他のオプション
### configurationBaseUrl \{String}
アプリケーション設定のベースURLを上書きします。デフォルトでは、指定されたドメインを使用します。このオプションは、お客様の特定のユースケースにおいて、アプリケーションがデフォルトの動作を使用しないよう指定する場合にのみ必要となります。
`configurationBaseUrl:"https://www.example.com"`
### languageBaseUrl \{String}
Auth0が提供する翻訳の言語ソースURLを上書きします。デフォルトでは、このオプションはAuth0のCDN URL `https://cdn.auth0.com`を使用します。これは、提供されているすべての翻訳がここに保存されているためです。別の値を指定することで、必要に応じて言語翻訳に別のソースを使用できます。
`languageBaseUrl:"https://www.example.com"`
### hashCleanup \{Boolean}
`hashCleanup`オプションを有効にすると、ユーザー認証後にコールバックURLのハッシュ部分が削除されます。デフォルトはtrueです。
`hashCleanup: false`
### connectionResolver \{Function}
使用時に、ユーザー名情報に基づいて使用する接続を選択できるようにする拡張ポイントを指定します。
パラメーターには`username`、`context`、`callback`があります。コールバックは、`{type:'database', name:'connection name'}`のようなオブジェクトを期待します。**これはデータベース接続にのみ有効です。** このリゾルバーはフォームの`onSubmit`イベントで実行されるため、シンプルかつ高速に保つように注意してください。
これはベータ機能です。バグを見つけた場合は、GitHubの[issue](https://github.com/auth0/lock/issues/new)を作成してください。
### leeway \{Integer}
`leeway`オプションは整数（秒単位の値）に設定でき、これを使用してIDトークンの有効期限のクロックスキューを考慮できます。通常、この値は1～2分を超えることはありません。
`leeway:30`