> ## 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.
> 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 ウィジェットの動作、接続の扱い、プロジェクトで必要な追加のサインアップフィールド、言語やテキストの値、widget 上の色や画像など、さまざまな項目を変更できます。探しているものがわかっている場合は以下の目次を確認し、そうでない場合は各オプションを参照して詳細を確認してください。
## UI
| Option | 説明 |
| ---------------------------------------------------------------------- | -------------------------------------------------------------------- |
| [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` プロパティにまとめられています。
| Option | Description |
| --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [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-) | レスポンスを code または token として返します |
| [sso](#sso-boolean-) | Lock でシングルサインオンを有効にするかどうかを指定します |
## Database
| Option | Description |
| --------------------------------------------------------------- | ------------------------------------------------- |
| [additionalSignUpFields](#additionalsignupfields-array-) | サインアップ時に収集する追加フィールド |
| [allowLogin](#allowlogin-boolean-) | ウィジェットでログインを許可するかどうか |
| [allowForgotPassword](#allowforgotpassword-boolean-) | ウィジェットでパスワード再設定を許可するかどうか |
| [allowSignUp](#allowsignup-boolean-) | ウィジェットでサインアップを許可するかどうか |
| [defaultDatabaseConnection](#defaultdatabaseconnection-string-) | デフォルトで表示されるDB接続 |
| [initialScreen](#initialscreen-string-) | ウィジェットを開いたときに表示する画面 |
| [loginAfterSignUp](#loginaftersignup-boolean-) | サインアップ後に自動的にログインするかどうか |
| [forgotPasswordLink](#forgotpasswordlink-string-) | カスタムのパスワード再設定ページへのリンク |
| [showTerms](#showterms-boolean-) | サインアップ時の利用規約を表示するかどうかを指定します |
| [mustAcceptTerms](#mustacceptterms-boolean-) | 利用規約への同意を必須にするかどうか (チェックボックス) |
| [prefill](#prefill-object-) | メール / ユーザー名フィールドの事前入力値 |
| [signUpLink](#signuplink-string-) | 「sign up」をクリックしたときに開くカスタムURLを設定します |
| [usernameStyle](#usernamestyle-string-) | ユーザー名フィールドで受け付ける値を「username」のみ、または「email」のみに制限します |
## Enterprise
| オプション | 説明 |
| ------------------------------------------------------------------- | ----------------- |
| [defaultEnterpriseConnection](#defaultenterpriseconnection-string-) | 複数存在する場合に接続を指定します |
## パスワードレス
| オプション | 説明 |
| ------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [passwordlessMethod](#passwordlessmethod-string-) | メール接続で `Auth0LockPasswordless` を使用する場合、このオプションで、ユーザーの認証用に [コード](/docs/ja-jp/authenticate/passwordless) または [マジックリンク](/docs/ja-jp/authenticate/passwordless) のどちらを送信するかを選択できます |
### その他
| オプション | 説明 |
| ----------------------------------------------------- | ------------------------------------ |
| [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`
`allowShowPassword` を `true` に設定し、パスワードを表示するよう切り替えた Lock:
### allowedConnections {Array}
`signin|signup|reset` アクションで使用する接続の配列です。デフォルトでは、有効な接続がすべて使用されます。
`allowedConnections: ['Username-Password-Authentication']`
`allowedConnections: ['twitter', 'facebook', 'linkedin']`
`allowedConnections: ['qraftlabs.com']`
`allowedConnections` の例:
### autoclose {Boolean}
サインインに成功した後、Lockを自動的に閉じるかどうかを指定します。既定値はfalseです。Lockが`closable`でない場合は、このオプションをtrueに設定していても閉じられません。
`autoclose: true`
### autofocus {Boolean}
true の場合、ウィジェット上の最初の入力欄にフォーカスが設定されます。モバイル端末でレンダリングする場合、または `container` オプションが指定されている場合の既定値は `false`、それ以外の場合は `true` です。
`autofocus: false`
### avatar {オブジェクト}
デフォルトでは、ユーザーのアバターと表示名の取得に Gravatar が使われますが、`avatar` オプションを使えば、それらを任意の取得元から取得できます。
```js lines theme={null}
var options = {
avatar: {
url: function(email, cb) {
// ユーザーが入力したメールアドレスのアバターURLを取得します。Lock
// は画像を表示する前にプリロードします。
// エラーが発生した場合は、最初の引数に`null`の代わりに
// エラーを渡してcbを呼び出してください。
var url = obtainAvatarUrl(email);
cb(null, url);
},
displayName: function(email, cb) {
// ユーザーが入力したメールアドレスの表示名を取得します。
// エラーが発生した場合は、最初の引数に`null`の代わりに
// エラーを渡してcbを呼び出してください。
var displayName = obtainDisplayName(email);
cb(null, displayName);
}
}
};
```
また、アバターをまったく表示したくない場合は、`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}: 表示するテキスト。
```js 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 に表示されるすべてのテキストをカスタマイズできます。デフォルトは {"{}"} です。この object で変更できる `languageDictionary` の値の完全な一覧については、英語版の [Language Dictionary Specification](https://github.com/auth0/lock/blob/master/src/i18n/en.js) を参照してください。
```js 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` に設定されている場合にのみ適用されます。
```js lines theme={null}
var options = {
auth: {
redirect: false
},
popupOptions: { width: 300, height: 400, left: 200, top: 300 }
};
```
### rememberLastLogin {Boolean}
前回使用したアカウントですばやくログインできる画面を表示するかどうかを指定します。
シングルサインオン (SSO) のデータを取得し、**前回のサインインに使用したアカウント** というメッセージを有効にします。デフォルトは `true` です。この情報はユーザーの Auth0 セッションに基づくため、この機能は Auth0 セッションが有効な間利用できます (有効期間は設定可能です) 。
`rememberLastLogin: false`
新しいテナントでは、[Seamless SSO が自動的に有効になります](/docs/ja-jp/get-started/tenant-settings/enable-sso-for-legacy-tenants)。これが有効になっている場合、セッションが存在すると Universal Login ページ自体がまったく表示されないため、`rememberLastLogin` オプションは関係なくなります。Seamless SSO はシームレスな認証体験を提供するため、使用を強く推奨します。ユーザーは一度ログインすれば、作成したアプリケーション間を移動する場合でも、サードパーティ製アプリケーション間を移動する場合でも、再度資格情報を入力する必要がありません。ユーザーがログインしていない場合は、想定どおりログイン画面にリダイレクトされます。さらに、次の状況では **前回のサインインに使用したアカウント** というメッセージは表示されません。
* セッションが [パスワードレス認証](/docs/ja-jp/libraries/lock/lock-configuration#passwordlessmethod-string-) を使って確立された [ホスト型ログインページ](/docs/ja-jp/authenticate/login/auth0-universal-login) で Lock を使用した場合。
* [組み込みログイン](/docs/ja-jp/authenticate/login/universal-vs-embedded-login) で Lock を使用し、`responseType: code` (Regular Web Apps で使用される [認可コードフロー](/docs/ja-jp/get-started/authentication-and-authorization-flow/authorization-code-flow) を示します) を指定した場合。
### scrollGlobalMessagesIntoView {Boolean}
`globalMessage` をユーザーの表示領域内にスクロールして表示するかどうかを指定します。デフォルトは `true` です。
`scrollGlobalMessagesIntoView: false`
## テーマオプション
テーマオプションは、`options` オブジェクトの `theme` プロパティに分類されています。
```js 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}
カスタム OAuth 2.0 接続で使用する Lock のボタンをカスタマイズできます。カスタマイズしたいボタンがある各カスタム接続を名前で列挙し、それぞれに固有のパラメータセットを指定します。カスタマイズ可能なパラメータは以下のとおりです。
* **displayName** \{String}: ボタンのタイトルを作成する際に、接続名の代わりに表示する名前です (たとえば、login では `LOGIN WITH MYCONNECTION`) 。
* **primaryColor** \{String}: ボタンの背景色です。デフォルトは `#eb5424` です。
* **foregroundColor** \{String}: ボタンのテキスト色です。デフォルトは `#FFFFFF` です。
* **icon** \{String}: この接続のアイコンの URL です。例: `http://site.com/logo.png`.
```js 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` に設定すると代わりにアイコンが表示されます。
```js lines theme={null}
var options = {
theme: {
labeledSubmitButton: false
}
};
```
label が true に設定されている場合 (既定値) 、ラベルのテキストは [languageDictionary](#languagedictionary-object-) オプションでカスタマイズできます。
### logo {String}
`logo` の値には、Lock のヘッダーに表示される画像の URL を指定します。既定では Auth0 のロゴが使用されます。使い勝手を高めるため、推奨される最大の高さは `58px` です。
```js lines theme={null}
var options = {
theme: {
logo: 'https://example.com/logo.png'
}
};
```
### primaryColor {String}
`primaryColor` プロパティは、Lock のメインカラーを定義します。ウィジェットで使用されるすべての色は、この色をもとに計算されます。このオプションは、カスタムの `logo` を指定する際に、すべての色が `logo` のカラーパレットと自然に調和するようにするのに役立ちます。デフォルトは `#ea5323` です。
```js lines theme={null}
var options = {
theme: {
logo: 'https://example.com/logo.png',
primaryColor: '#31324F'
}
};
```
## 認証オプション
認証オプションは、`options` オブジェクトの `auth` プロパティにまとめられています。
Lock で使用されるデフォルトのスコープは `openid profile email` です。
```js 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) メソッドを使って手動で認証を再開する必要があります。
```js lines theme={null}
var options = {
auth: {
autoParseHash: false
}
};
```
### connectionScopes {Object}
このオプションでは、認証時に OAuth 2.0／Social 接続へ送信するスコープを設定できます。
```js lines theme={null}
var options = {
auth: {
connectionScopes: {
'facebook': ['scope1', 'scope2']
}
}
};
```
ソーシャル接続で利用できる特定のスコープの一覧は、該当するプロバイダーで確認できます。たとえば、[Facebook for Developers](https://developers.facebook.com/docs/facebook-login/permissions/) のリファレンスには、その接続に対してリクエストできる個別の権限の一覧が掲載されています。
### params {Object}
`login` の開始時に、パラメーターを options オブジェクトに追加して送信できます。以下の例では、値が `foo` の `state` パラメーターを追加し、さらに `scope` パラメーターも追加しています (これには `scope` と、その後に要求する属性が含まれます) 。
```js 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 に設定すると redirect mode が使用され、false に設定すると [popup mode](/docs/ja-jp/libraries/lock/lock-authentication-modes) が使用されます。
```js lines theme={null}
var options = {
auth: {
redirect: false
}
};
```
### redirectUrl {String}
認証後に Auth0 がリダイレクトで戻る先の URL です。デフォルトは空文字列 "" (リダイレクトURL なし) です。
```js lines theme={null}
var options = {
auth: {
redirectUrl: 'http://testurl.com'
}
};
```
`redirectUrl` が指定されている場合 (空白でない値が設定されている場合) 、`responseType` を手動で設定していなければ、デフォルトで `code` になります。
### responseMode {String}
code または token をクエリやフラグメントに含める代わりに、HTTP POST リクエストで `redirectUrl` に送信する場合は、`"form_post"` に設定してください。
それ以外の場合、このオプションは省略してください。デフォルトでも省略されます。
```js lines theme={null}
var options = {
auth: {
responseMode: 'form_post'
}
};
```
### responseType {String}
`responseType` の値は、シングルページアプリケーションの場合は "token"、それ以外の場合は "code" に設定する必要があります。redirectUrl が指定されている場合のデフォルト値は "code"、それ以外の場合は "token" です。
```js 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) が有効になります。
```js lines theme={null}
var options = {
auth: {
sso: false
}
};
```
## Database オプション
### additionalSignUpFields {Array}
`additionalSignUpFields` オプションを使用すると、サインアップ画面に追加の入力フィールドを設定できます。この方法で追加した各オプションは、そのユーザーの `user_metadata` に追加されます。詳しくは、[ユーザープロファイルでメタデータがどのように機能するかを理解する](/docs/ja-jp/manage-users/user-accounts/metadata) を参照してください。すべての入力には `name` と `placeholder` が必要で、`icon` の URL を指定することもできます。また、`prefill` オプションを使って初期値を指定することもでき、値を表す文字列またはその値を取得する関数を設定できます。そのほかのオプションはフィールドの型によって異なります。型は `type` オプションで定義し、デフォルトは "text" です。
`additionalSignUpFields` は、database signup でのみ使用することを想定しています。Social sign up も使用している場合は、ユーザーのサインアップ後に追加情報の入力を求めることができます (詳しくは、[カスタム signup に関するページ](/docs/ja-jp/libraries/custom-signup)を参照してください) 。これらの案内を表示するには、`databaseAlternativeSignupInstructions` i18n キーを使用できます。
新しいフィールドは、通常のサインアップ入力フィールドの下に、指定した順序でレンダリングされます。
#### テキストフィールド
テキストフィールドは、追加のサインアップフィールドのデフォルトの種類です。`validator` 関数も指定できる点に注意してください。
```js lines theme={null}
var options = {
additionalSignUpFields: [{
name: "address",
placeholder: "enter your address",
// 以下のプロパティはオプションです
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" // オプション
};
}
},
{
name: "full_name",
placeholder: "Enter your full name"
}]
}
```
`validator` を指定しない場合、このテキストフィールドは**必須**になります。テキストフィールドを任意にするには、次のように常に `true` を返すバリデーターを使用します。
```js lines theme={null}
var options = {
additionalSignUpFields: [{
name: "favorite_color",
placeholder: "Enter your favorite color (optional)",
validator: function() {
return true;
}
}]
}
```
属性の値をプロファイルのルートに保存する場合は、`storage: 'root'` を使用します。ただし、この方法で保存できる値は一部に限られます。ルートプロファイルに追加できる属性の一覧は[こちら](https://auth0.com/docs/api/management/v2#!/Users/patch_users_by_id)です。デフォルトでは、追加のサインアップフィールドはすべて user\_metadata オブジェクト内に保存されます。
```js lines theme={null}
var options = {
additionalSignUpFields: [{
name: "name",
storage: "root"
}]
};
```
#### 選択フィールド
サインアップフィールドで `type: "select"` を指定すると、ユーザーが値を選択できる select 要素を使用できます。
```js 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"}
],
// 以下のプロパティは省略可能です
icon: "https://example.com/assests/location_icon.png",
prefill: "us"
}]
}
```
`select` フィールドの `options` 配列の項目は、次の形式に従う必要があります。
`{label: “non empty string”, value: “non empty string”}`。また、少なくとも 1 つのオプションを定義する必要があります。
`options` と `prefill` の値は、関数を使って指定できます。
```js lines theme={null}
var options = {
additionalSignUpFields: [{
type: "select",
name: "location",
placeholder: "choose your location",
options: function(cb) {
// オプションを取得します。エラーが発生した場合は、nullの代わりに
// 第1引数にエラーを渡してcbを呼び出してください
cb(null, options);
},
icon: "https://example.com/assests/location_icon.png",
prefill: function(cb) {
// プリフィル値を取得します。エラーが発生した場合は、nullの代わりに
// 第1引数にエラーを渡してcbを呼び出してください
cb(null, prefill);
}
}]
}
```
#### チェックボックスフィールド
3つ目のカスタムサインアップフィールドのタイプは `type: "checkbox"` です。`prefill` の値では、チェックボックスのデフォルト状態 (`true` または `false`) を指定でき、この値は必須です。
```js 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"
}]
}
```
#### 隠しフィールド
新規登録フォームのフィールド `type: "hidden"` を使うと、固定値を持つ隠し入力を利用できます。
```js lines theme={null}
var options = {
additionalSignUpFields: [{
type: "hidden",
name: "signup_code",
value: "abc123"
}]
}
```
一部のユースケースでは、言語設定オプションなどの `additionalSignUpFields` のデータをメールテンプレートで利用できる場合があり、その値を使ってテンプレート化されたメールの言語を設定できます。
### allowLogin {Boolean}
`false` に設定すると、ウィジェットにログイン画面は表示されません。これは、ウィジェットをサインアップ専用で使用したい場合 (サインアップ画面の login タブと signup タブは非表示になります) や、パスワードをリセットしたい場合 (forgot password screen の戻るボタンは非表示になります) に便利です。このような場合は、`initialScreen`、`allowForgotPassword`、`allowSignUp` オプションも指定する必要があることがあります。デフォルトは `true` です。
`allowLogin: false`
### allowForgotPassword {Boolean}
false に設定すると、`allowForgotPassword` によりログイン画面の「パスワードを忘れましたか？」リンクが非表示になり、Forgot Password 画面にアクセスできなくなります。既定値は true です。change password スクリプトのないカスタムデータベースを使用するデータベース接続では、Forgot Password 画面は利用できません。
`allowForgotPassword: false`
### allowSignUp {Boolean}
`false` に設定すると、ログイン画面のログインタブとサインアップタブが非表示になり、サインアップ画面へアクセスできなくなります。デフォルトは `true` です。なお、データベース接続でサインアップが無効になっている場合や、Create スクリプトのない Custom database を使用している場合は、サインアップ画面は利用できません。
また、このオプションで制御できるのはクライアント側の見た目**のみ**であり、その気になれば匿名の訪問者による新規サインアップを完全に防げるわけではない点にも注意してください。新規ユーザーのサインアップを完全に防ぎたい場合は、ダッシュボードの接続設定で **Disable Sign Ups** オプションを使用する必要があります。
`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}
メールアドレスおよび/またはユーザー名の入力欄に初期値を設定できます。省略した場合は、初期値は設定されません。
```js 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/authenticate/passwordless) と [マジックリンク](/docs/ja-jp/authenticate/passwordless) のどちらを送信するかを選択できます。メール接続で使用できる値は `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'}` のようなオブジェクトを渡すことを想定しています。**これはデータベース接続でのみ機能します。** このリゾルバーは Form の `onSubmit` イベントで実行されるため、できるだけシンプルで高速に保ってください。
これはベータ機能です。バグを見つけた場合は、GitHub で [issue](https://github.com/auth0/lock/issues/new) を作成してください。
### leeway {Integer}
`leeway` オプションには整数 (秒単位の値) を設定でき、ID トークン の有効期限におけるクロックスキューを考慮するために使用できます。通常、この値は長くても 1〜2 分程度です。
`leeway: 30`