> ## 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) + "*****マスク済み*****";
}
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 ウィジェットの動作、接続の扱い、プロジェクトで必要な追加のサインアップフィールド、言語やテキスト、ウィジェットの色や画像など、さまざまな項目を変更できます。探している項目が明確な場合は以下のインデックスを参照し、より詳しく確認したい場合は各オプションを参照してください。
## UI
| Option | Description |
| ---------------------------------------------------------------------- | -------------------------------------------------------------------------------- |
| [allowAutocomplete](#allowautocomplete-boolean-) | メールアドレスまたは username の入力欄でオートコンプリートを有効または無効にします |
| [allowPasswordAutocomplete](#allowpasswordautocomplete-boolean-) | パスワード入力欄でオートコンプリートを有効または無効にします |
| [allowShowPassword](#allowshowpassword-boolean-) | ユーザーが入力中にパスワードを表示できるかどうかを指定します |
| [allowedConnections](#allowedconnections-array-) | 認証に使用できる接続の一覧 |
| [autoclose](#autoclose-boolean-) | ログイン後に Lock を閉じるかどうかを指定します |
| [autofocus](#autofocus-boolean-) | 最初の入力フィールドにフォーカスを設定するかどうかを指定します |
| [avatar](#avatar-object-) | メールアドレスまたは username を入力した後に、アバターと username を 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-) | code または token として返すレスポンス |
| [sso](#sso-boolean-) | Lock で SSO を有効にするかどうかを指定します |
## データベース
| オプション | 説明 |
| --------------------------------------------------------------- | ------------------------------------------------------ |
| [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-) | メールアドレス/username フィールドの事前入力値 |
| [signUpLink](#signuplink-string-) | 「sign up」をクリックしたときに開くカスタム URL を設定 |
| [usernameStyle](#usernamestyle-string-) | username フィールドで受け付ける値を "username" のみ、または "email" のみに制限 |
## Enterprise
| オプション | 説明 |
| ------------------------------------------------------------------- | ------------------------ |
| [defaultEnterpriseConnection](#defaultenterpriseconnection-string-) | 複数の接続がある場合に、使用する接続を指定します |
## パスワードレス
| オプション | 説明 |
| ------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [passwordlessMethod](#passwordlessmethod-string-) | メールアドレス接続で `Auth0LockPasswordless` を使用する場合、このオプションで、ユーザーを認証するために [code](/ja/docs/authenticate/passwordless) と [magic link](/ja/docs/authenticate/passwordless) のどちらを送信するかを選択できます |
### その他
| オプション | 説明 |
| ----------------------------------------------------- | ----------------------------------------- |
| [configurationBaseUrl](#configurationbaseurl-string-) | アプリケーションのベース URL をオーバーライドします |
| [languageBaseUrl](#languagebaseurl-string-) | 言語ファイルのベース URL をオーバーライドします |
| [hashCleanup](#hashcleanup-boolean-) | URL からハッシュを削除する既定の動作をオーバーライドします |
| [connectionResolver](#connectionresolver-function-) | username の情報に基づいて接続を選択するためのオプションのコールバック関数 |
***
## UI オプション
### allowAutocomplete {Boolean}
メールアドレスまたはusernameフィールドでオートコンプリートを有効にするかどうかを指定します (``) 。デフォルトは`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 {Object}
デフォルトでは、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 に表示されるすべてのテキストをカスタマイズできます。デフォルトは {"{}"} です。このオブジェクトで変更できる `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` オプションの使用方法の詳細については、[エラーメッセージのカスタマイズ](/ja/docs/customize/login-pages/classic-login/customize-lock-error-messages)ページまたは[国際化](/ja/docs/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 が自動的に有効になります](/ja/docs/get-started/tenant-settings/enable-sso-for-legacy-tenants)。これが有効になっている場合、セッションが存在すれば Universal Login ページ自体が表示されないため、`rememberLastLogin` オプションは意味を持ちません。Seamless SSO はシームレスな認証体験を提供するため、使用を強く推奨します。ユーザーは一度ログインすれば、自社で構築したアプリケーション間を移動する場合でも、サードパーティアプリを利用する場合でも、認証情報を再入力する必要がありません。ユーザーがログインしていない場合は、想定どおりログイン画面にリダイレクトされます。また、次の状況では **前回は次の方法でサインインしました** メッセージは表示されません。
* [Hosted Login Page](/ja/docs/authenticate/login/auth0-universal-login) で Lock を使用し、[パスワードレス認証](/ja/docs/libraries/lock/lock-configuration#passwordlessmethod-string-) でセッションを確立した場合。
* `responseType: code` を指定した [埋め込みログインのシナリオ](/ja/docs/authenticate/login/universal-vs-embedded-login) で Lock を使用した場合 (これは [認可コードフロー](/ja/docs/get-started/authentication-and-authorization-flow/authorization-code-flow) を示し、Regular Web Apps で使用されます) 。
### 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}
カスタム OAuth2 接続を使用する Lock のボタンをカスタマイズできます。ボタンをカスタマイズする各カスタム接続は、名前ごとにそれぞれのパラメーターセットを指定します。カスタマイズできるパラメーターは次のとおりです。
* **displayName** \{String}: ボタンのタイトルを生成するときに、接続名の代わりに表示する名前です (ログイン時の `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
}
};
```
ラベルが `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](/ja/docs/libraries/lock/lock-api-reference) メソッドを使用して、認証処理を手動で再開する必要があります。
```js lines theme={null}
var options = {
auth: {
autoParseHash: false
}
};
```
### connectionScopes {Object}
このオプションを使用すると、認証時に oauth2/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}
ログインの開始時に、options オブジェクトにパラメーターを追加して送信できます。以下の例では、値が `foo` の `state` パラメーターを追加し、さらに `scope` パラメーターも追加しています (これにはスコープと要求された属性が含まれます) 。
```js lines theme={null}
var options = {
auth: {
params: {
state: 'foo',
scope: 'openid email user_metadata app_metadata picture'
}
}
};
```
サポートされているパラメーターの詳細については、[Lock 認証パラメーター](/ja/docs/libraries/lock/lock-authentication-parameters) を参照してください。
### redirect {Boolean}
デフォルトは true です。true に設定すると、リダイレクトモードが使用されます。false に設定すると、[ポップアップモード](/ja/docs/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 またはトークンを `redirectUrl` のクエリ部分やフラグメント部分に含めず、HTTP POST リクエストで送信する場合は、`"form_post"` に設定する必要があります。
それ以外の場合、このオプションは指定しません。デフォルトでも指定されません。
```js lines theme={null}
var options = {
auth: {
responseMode: 'form_post'
}
};
```
### responseType {String}
`responseType` の値は、Single-Page Applications では "token"、それ以外では "code" に設定する必要があります。デフォルト値は、redirectUrl が指定されている場合は "code"、それ以外の場合は "token" です。
```js lines theme={null}
var options = {
auth: {
responseType: 'token'
}
};
```
`responseType` が `code` に設定されている場合、Lock では **前回ログインに使用した方法** メッセージは表示されず、ユーザーには常に認証情報の入力が求められます。
## sso {Boolean}
デフォルトは true です。true に設定すると、Lock で[シングルサインオン (SSO) ](/ja/docs/authenticate/single-sign-on)が有効になります。
```js lines theme={null}
var options = {
auth: {
sso: false
}
};
```
## データベースオプション
### additionalSignUpFields {Array}
`additionalSignUpFields` オプションを使用すると、サインアップ画面に追加の入力フィールドを設定できます。この方法で追加した各オプションは、そのユーザーの `user_metadata` に追加されます。詳しくは、[Understand How Metadata Works in User Profiles](/ja/docs/manage-users/user-accounts/metadata) を参照してください。各入力には `name` と `placeholder` が必要で、`icon` URL を指定することもできます。また、`prefill` オプションで初期値を指定することもでき、値を表す文字列、またはその値を取得する関数を指定できます。その他のオプションはフィールドの種類によって異なり、その種類は `type` オプションで定義します。既定値は "text" です。
`additionalSignUpFields` は、データベースサインアップ専用です。ソーシャルサインアップも使用している場合は、ユーザーがサインアップした後で追加情報を求めることができます (詳しくは、[custom signup に関するこのページ](/ja/docs/libraries/custom-signup) を参照してください) 。これらの案内は、i18n キー `databaseAlternativeSignupInstructions` を使用して表示できます。
新しいフィールドは、通常のサインアップ入力フィールドの下に、指定した順序で表示されます。
#### テキストフィールド
テキストフィールドは、追加のサインアップフィールドのデフォルトの種類です。`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"` を使用すると、ユーザーが値を選択できる選択要素を使用できます。
```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` に設定すると、ウィジェットにはログイン画面が表示されなくなります。これは、ウィジェットをサインアップ専用で使用する場合 (サインアップ画面のログインタブとサインアップタブが非表示になります) や、パスワードをリセットする場合 (パスワードを忘れた場合の画面の戻るボタンが非表示になります) に便利です。このような場合は、`initialScreen`、`allowForgotPassword`、`allowSignUp` オプションも指定する必要があることがあります。デフォルトは `true` です。
`allowLogin: false`
### allowForgotPassword {Boolean}
`allowForgotPassword` を false に設定すると、ログイン画面の「パスワードをお忘れですか？」リンクが非表示になり、パスワード再設定画面にアクセスできなくなります。デフォルトは true です。パスワード変更スクリプトを持たないカスタムデータベースを使用するデータベース接続を使用している場合、パスワード再設定画面は利用できません。
`allowForgotPassword: false`
### allowSignUp {Boolean}
`false` に設定すると、ログイン画面のログインタブとサインアップタブが非表示になり、サインアップ画面に移動できなくなります。デフォルトは `true` です。データベース接続でサインアップが無効になっている場合や、create スクリプトのないカスタムデータベースを使用している場合は、サインアップ画面は利用できない点にも注意してください。
また、このオプションが制御するのは**あくまで**クライアント側の表示だけであり、執拗に試みる匿名の訪問者による新規サインアップを完全に防ぐものではない点にも注意してください。新規ユーザーのサインアップを完全に防ぎたい場合は、ダッシュボードの接続設定にある **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}
Signup ボタンをクリックしたときにリクエストする URL を設定します。空でない文字列を設定すると、このオプションにより `allowSignUp` は `true` に設定されます。
`signUpLink: 'https://yoursite.com/signup'`
### usernameStyle {String}
`requires_username` フラグが設定されている Database 接続で、ユーザーの識別子として何を使用するかを指定します (このフラグが設定されていない場合、`usernameStyle` オプションは無視されます) 。指定できる値は `"username"` と `"email"` です。デフォルトでは `username` と `email` の両方を使用できますが、このオプションを設定すると、ログイン時にどちらか一方のみを使用するよう制限されます。
`usernameStyle: 'username'`
## エンタープライズ向けオプション
### defaultEnterpriseConnection {String}
利用可能な接続が複数ある場合、またはデータベース接続がある場合に、username とパスワードを使用してログインできるエンタープライズ接続を指定します。`defaultDatabaseConnection` が指定されている場合は、データベース接続が使用され、このオプションは無視されます。
`defaultEnterpriseConnection: 'test-database'`
### defaultADUsernameFromEmailPrefix {Boolean}
メールアドレスのプレフィックスから AD のプレースホルダー username を決定します。デフォルトは `true` です。
`defaultADUsernameFromEmailPrefix: false`
## パスワードレスのオプション
### passwordlessMethod {String}
`Auth0LockPasswordless` をメール接続で使用する場合、このオプションで、ユーザーの認証に [code](/ja/docs/authenticate/passwordless) と [マジックリンク](/ja/docs/authenticate/passwordless) のどちらを送信するかを選択できます。メール接続で使用できる値は `code` と `link` です。デフォルトは `code` です。SMS パスワードレス 接続では、常に `code` が使用されます。
`passwordlessMethod: code`
## その他のオプション
### configurationBaseUrl {String}
アプリケーション設定のベース URL を上書きします。デフォルトでは、指定されたドメインを使用します。このオプションが必要なのは、特定のユースケースでアプリケーションがデフォルトの動作を使用しない場合に限られます。
`configurationBaseUrl: "https://www.example.com"`
### languageBaseUrl {String}
Auth0 が提供する翻訳の取得元 URL を上書きします。デフォルトでは、このオプションは Auth0 提供の翻訳がすべて保存されている Auth0 の CDN URL `https://cdn.auth0.com` を使用します。別の値を指定すると、必要に応じて翻訳の取得元として別のソースを使用できます。
`languageBaseUrl: "https://www.example.com"`
### hashCleanup {Boolean}
`hashCleanup` オプションを有効にすると、ユーザーの認証後にコールバック URL のハッシュ部分が削除されます。デフォルトは true です。
`hashCleanup: false`
### connectionResolver {Function}
使用すると、username 情報に基づいて使用する接続を選択できる拡張ポイントが提供されます。
パラメーターは `username`、`context`、`callback` です。callback には、`{type: 'database', name: 'connection name'}` のようなオブジェクトを渡す必要があります。**これはデータベース接続でのみ機能します。** このリゾルバーはフォームの `onSubmit` イベントで実行されるため、できるだけシンプルかつ高速にしてください。
これはベータ機能です。バグを見つけた場合は、GitHub で [issue](https://github.com/auth0/lock/issues/new) を作成してください。
### leeway {Integer}
`leeway` オプションには整数 (秒単位の値) を設定できます。この値は、IDトークン の有効期限におけるクロックスキュー (時刻のずれ) を考慮するために使用します。通常、この値は長くても 1〜2 分程度です。
`leeway: 30`