diff --git a/main/config/redirects.json b/main/config/redirects.json index 3a7e82a139..6bbcf3fb59 100644 --- a/main/config/redirects.json +++ b/main/config/redirects.json @@ -22510,5 +22510,17 @@ { "source": "/docs/ja-jp/api/authentication/user-profile-legacy/get-token-info-legacy", "destination": "/docs/ja-jp/api/authentication/user-profile-legacy/get-token-info" + }, + { + "source": "/docs/libraries/lock/:path*", + "destination": "/docs/authenticate/login/auth0-universal-login" + }, + { + "source": "/docs/fr-ca/libraries/lock/:path*", + "destination": "/docs/fr-ca/authenticate/login/auth0-universal-login" + }, + { + "source": "/docs/ja-jp/libraries/lock/:path*", + "destination": "/docs/ja-jp/authenticate/login/auth0-universal-login" } ] diff --git a/main/docs/api.mdx b/main/docs/api.mdx index d059cd1dba..eb42ba8804 100644 --- a/main/docs/api.mdx +++ b/main/docs/api.mdx @@ -16,7 +16,7 @@ description: Auth0 exposes the following APIs for developers to consume in their The Authentication API exposes identity functionality for Auth0 and supported identity protocols (including OpenID Connect, OAuth, and SAML). - Typically, you should consume this API through one of the Auth0 SDKs, such as [Auth0.js](/docs/libraries/auth0js), or a library like [Lock](/docs/libraries/lock). However, if you are building your authentication UI manually, you will need to call the Authentication API directly. + Typically, you should consume this API through one of the Auth0 SDKs, such as [Auth0.js](/docs/libraries/auth0js). However, if you are building your authentication UI manually, you will need to call the Authentication API directly. diff --git a/main/docs/authenticate/identity-providers/enterprise-identity-providers/adfs.mdx b/main/docs/authenticate/identity-providers/enterprise-identity-providers/adfs.mdx index 014c1b1657..de1125feaf 100644 --- a/main/docs/authenticate/identity-providers/enterprise-identity-providers/adfs.mdx +++ b/main/docs/authenticate/identity-providers/enterprise-identity-providers/adfs.mdx @@ -130,6 +130,4 @@ The mappings in the previous steps are the most commonly used, but if you need a Now that you have a working connection, the next step is to configure your application to use it. You can follow our step-by-step quickstarts or use our libraries and API. * [Get started with our Quickstarts](/docs/quickstarts) -* [Configure your application using our Lock login form](/docs/libraries/lock) -* [Configure your application using our Auth0.js library and your own UI](/docs/libraries/auth0js) * [Use our Authentication API to authenticate](https://auth0.com/docs/api/authentication) diff --git a/main/docs/authenticate/identity-providers/social-identity-providers/reprompt-permissions.mdx b/main/docs/authenticate/identity-providers/social-identity-providers/reprompt-permissions.mdx index 8521ee0091..d14aa4a8ab 100644 --- a/main/docs/authenticate/identity-providers/social-identity-providers/reprompt-permissions.mdx +++ b/main/docs/authenticate/identity-providers/social-identity-providers/reprompt-permissions.mdx @@ -12,7 +12,7 @@ In such instances, your user will need to be re-prompted to grant permission to By setting the **prompt=consent** parameter when calling the [/authorize](https://auth0.com/docs/api/authentication/reference#social) endpoint of the [Authorization API](https://auth0.com/docs/api/authentication), your user will be prompted again to grant permissions for your application. -This parameter can also be set using Lock as an [Authentication Parameter](/docs/libraries/lock/lock-authentication-parameters) with **prompt: 'consent'**. +This parameter can also be set using Lock with **prompt: 'consent'**. Alternatively, you can set this with [Auth0.js](https://github.com/auth0/auth0.js) using **prompt: 'consent'**. diff --git a/main/docs/authenticate/login/auth0-universal-login/passwordless-login/email-or-sms.mdx b/main/docs/authenticate/login/auth0-universal-login/passwordless-login/email-or-sms.mdx index 50b2a57145..ffb4b1beaa 100644 --- a/main/docs/authenticate/login/auth0-universal-login/passwordless-login/email-or-sms.mdx +++ b/main/docs/authenticate/login/auth0-universal-login/passwordless-login/email-or-sms.mdx @@ -14,13 +14,13 @@ This method uses the Universal Login Experience, which natively supports Passwor ## Universal Login + Lock (passwordless) -This method uses a custom login page with the **Lock (passwordless)** template, and authenticates user with the [Lock for Web SDK](/docs/libraries/lock): +This method uses a custom login page with the **Lock (passwordless)** template: 1. Go to [Dashboard > Branding > Universal Login](https://manage.auth0.com/#/login_settings) and click the **Login** tab. 2. Enable the **Custom Login Page** toggle, and select the **Lock (passwordless)** template. The HTML template will update with code using the Lock widget with Passwordless customization options. 3. Customize the template, and click **Save Changes**. -You can use HTML and CSS to customize the login form, and preview the changes within the Dashboard. To learn more about how to customize the **Lock (passwordless)** template, read the Passwordless section in [Lock for Web SDK](/docs/libraries/lock). +You can use HTML and CSS to customize the login form, and preview the changes within the Dashboard. ## Universal Login + Custom UI + Auth0.js diff --git a/main/docs/authenticate/login/auth0-universal-login/universal-login-vs-classic-login.mdx b/main/docs/authenticate/login/auth0-universal-login/universal-login-vs-classic-login.mdx index b832fbd378..4c0d1447f0 100644 --- a/main/docs/authenticate/login/auth0-universal-login/universal-login-vs-classic-login.mdx +++ b/main/docs/authenticate/login/auth0-universal-login/universal-login-vs-classic-login.mdx @@ -27,8 +27,8 @@ To help you choose the best solution for your needs, the table below compares th | **WebAuthn and device biometrics** | [Yes](/docs/secure/multi-factor-authentication/fido-authentication-with-webauthn) | No | | **Web Content Accessibility Guidelines (WCAG) Compliance** | Yes | No | | **Organizations support** | [Yes](/docs/manage-users/organizations) | No | -| **Terms of service acceptance on signup** | Yes | [Yes](/docs/libraries/lock/lock-configuration#showterms-boolean-) | -| **Custom fields on signup** | Yes | [Yes](/docs/libraries/lock/lock-configuration#additionalsignupfields-array-) | +| **Terms of service acceptance on signup** | Yes | Yes | +| **Custom fields on signup** | Yes | Yes | | **Full localization** | Yes, in [these](/docs/customize/internationalization-and-localization/universal-login-internationalization) languages | Only for the login page | | **Customizable localized text on all pages** | [Yes](/docs/customize/login-pages/universal-login/customize-text-elements) | No | | **Email MFA** | [Yes](/docs/secure/multi-factor-authentication/multi-factor-authentication-factors/configure-email-notifications-for-mfa) | No | @@ -36,7 +36,7 @@ To help you choose the best solution for your needs, the table below compares th | **Duo MFA** | Yes, but Duo must be the only MFA factor enabled | Yes | | **MFA customization with Actions** | [Yes](/docs/secure/multi-factor-authentication/customize-mfa/customize-mfa-selection-universal-login) | No | | **Buttons for enterprise connections** | [Yes](/docs/authenticate/login/auth0-universal-login/identifier-first#define-home-realm-discovery-identity-providers) | No | -| **Ability to disable self-service password recovery** | Yes | [Yes](/docs/libraries/lock/lock-configuration#allowforgotpassword-boolean) | -| **Custom URLs for password reset and user signup** | Yes, using page templates **and** a custom-built password reset or signup page | [Yes](/docs/libraries/lock/lock-configuration#forgotpasswordlink-string-) | +| **Ability to disable self-service password recovery** | Yes | Yes | +| **Custom URLs for password reset and user signup** | Yes, using page templates **and** a custom-built password reset or signup page | Yes | | **Kerberos support for AD/LDAP connections** | No | [Yes](/docs/authenticate/identity-providers/enterprise-identity-providers/active-directory-ldap/ad-ldap-connector/configure-ad-ldap-connector-with-kerberos#auto-login-with-lock) | | **Requires exposing identity provider domains in a public endpoint** | No | [Yes](/docs/get-started/tenant-settings#advanced) | diff --git a/main/docs/authenticate/login/auth0-universal-login/universal-login-vs-classic-login/classic-experience.mdx b/main/docs/authenticate/login/auth0-universal-login/universal-login-vs-classic-login/classic-experience.mdx index bd72137167..16452f0d09 100644 --- a/main/docs/authenticate/login/auth0-universal-login/universal-login-vs-classic-login/classic-experience.mdx +++ b/main/docs/authenticate/login/auth0-universal-login/universal-login-vs-classic-login/classic-experience.mdx @@ -4,7 +4,7 @@ title: Classic Login Experience --- Classic Login is an Auth0-hosted login experience that relies on JavaScript for customization. Implementing Classic Login is less complex than embedding the authentication process directly in your app, and it can help prevent the dangers of cross-origin authentication. -Classic Login is built on top of Auth0's JavaScript libraries ([Lock.js](/docs/libraries/lock), [auth0.js](/docs/libraries/auth0js), MFA Widget, and Password Reset). When customizing Classic Login pages in the Auth0 Dashboard, the default templates use the same JavaScript libraries to create a more natural transition between the default user interface and a custom one. +Classic Login is built on top of Auth0's JavaScript libraries (Lock.js, [auth0.js](/docs/libraries/auth0js), MFA Widget, and Password Reset). When customizing Classic Login pages in the Auth0 Dashboard, the default templates use the same JavaScript libraries to create a more natural transition between the default user interface and a custom one. After choosing a default template for your Classic Login pages, you can modify it to meet your needs. You can also customize a variety of behavioral and appearance elements of the Lock widget. The Auth0.js templates offer additional flexibility as you can create a custom user interface and modify it to match your application's style. diff --git a/main/docs/authenticate/login/embedded-login.mdx b/main/docs/authenticate/login/embedded-login.mdx index 953fd8df96..f756d5558a 100644 --- a/main/docs/authenticate/login/embedded-login.mdx +++ b/main/docs/authenticate/login/embedded-login.mdx @@ -4,7 +4,7 @@ title: Embedded Login --- Embedded Login allows your users to log directly into your application and transmit their credentials to the Auth0 server for authentication. We do not recommend using Embedded Login. To learn more, read [Centralized Universal Login vs. Embedded Login](/docs/authenticate/login/universal-vs-embedded-login). -If you decide to use Embedded Login, you must [configure your application for Cross-Origin Resource Sharing](/docs/get-started/applications/set-up-cors) and should [configure a custom domain](/docs/customize/custom-domains). You can then implement the [Lock SDK](/docs/libraries/lock) or [Auth0.js SDK](/docs/libraries/auth0js) within your application, or call the [Auth0 Authentication API](https://auth0.com/docs/api/authentication) directly. +If you decide to use Embedded Login, you must [configure your application for Cross-Origin Resource Sharing](/docs/get-started/applications/set-up-cors) and should [configure a custom domain](/docs/customize/custom-domains). You can then implement the [Auth0.js SDK](/docs/libraries/auth0js) within your application, or call the [Auth0 Authentication API](https://auth0.com/docs/api/authentication) directly. Auth0 supports Embedded Login with Passwordless connections for multiple application types: @@ -14,6 +14,5 @@ Auth0 supports Embedded Login with ID token when `prompt=login` or `max_age=0` parameters are given in the authentication request. -You need to pass the `max_age` parameter to the Authorization API [`/authorize` endpoint](https://auth0.com/docs/api/authentication). If you use [Auth0.js](/docs/libraries/auth0js) or [Lock](/docs/libraries/lock/lock-authentication-parameters), you can set the parameter in the appropriate options of the library. +You need to pass the `max_age` parameter to the Authorization API [`/authorize` endpoint](https://auth0.com/docs/api/authentication). If you use [Auth0.js](/docs/libraries/auth0js), you can set the parameter in the appropriate options of the library. How you implement re-authentication depends on your specific use-case. Make a distinction between simple re-authentication for sensitive operations vs. [step-up](/docs/secure/multi-factor-authentication/step-up-authentication) (i.e. multi-factor authentication) for sensitive operations. Both are valid security measures. The former requires the end user to re-enter their password, whereas the latter requires them to use a pre-configured means of multifactor authentication as well. diff --git a/main/docs/authenticate/login/universal-vs-embedded-login.mdx b/main/docs/authenticate/login/universal-vs-embedded-login.mdx index 6a0c994de4..14e9ea3991 100644 --- a/main/docs/authenticate/login/universal-vs-embedded-login.mdx +++ b/main/docs/authenticate/login/universal-vs-embedded-login.mdx @@ -31,7 +31,7 @@ For web applications, embedded login uses [cross-origin authentication](/docs/au | Feature | Hosted | Embedded | | --- | --- | --- | -| **[Single Sign-on](/docs/authenticate/single-sign-on)** | Full support with Universal Login through the use of [session cookies](/docs/manage-users/sessions) on the Auth0 Authorization Server (your Auth0 tenant). | Limited support. Web applications that use the [Lock](/docs/libraries/lock/lock-api-reference#checksession-) or [Auth0.js](/docs/libraries/auth0js#using-checksession-to-acquire-new-tokens) libraries can share sessions. Native applications can share sessions with web applications through [Native to Web SSO](/docs/authenticate/single-sign-on/native-to-web). | +| **[Single Sign-on](/docs/authenticate/single-sign-on)** | Full support with Universal Login through the use of [session cookies](/docs/manage-users/sessions) on the Auth0 Authorization Server (your Auth0 tenant). | Limited support. Web applications that use the [Auth0.js](/docs/libraries/auth0js#using-checksession-to-acquire-new-tokens) library can share sessions. Native applications can share sessions with web applications through [Native to Web SSO](/docs/authenticate/single-sign-on/native-to-web). | | **[Customization](/docs/customize)** | Universal Login allows you to easily customize many parts of the experience (including theming, page templates, text elements, and prompts).

Full customization is supported through [Advanced Customizations for Universal Login.](/docs/customize/login-pages/advanced-customizations) | Highest degree of customization, since you fully control the UI/UX of your application. | | **Feature management** | Features can be centrally managed within the Auth0 Dashboard or through the Auth0 Management API.

For example, when you enable/disable MFA in your Dashboard, it will be immediately reflected in subsequent user logins. | Features must be managed for each application individually.

For example, if you wanted to implement MFA for your web application and for your native application, you’d have to update and release new versions for both. | | **User experience** | Users are redirected between your application and the Auth0 Authorization Server during authentication.

For native applications, this requires implementation of universal/deep links. | Users remain in your application during authentication. | diff --git a/main/docs/authenticate/passwordless/implement-login/embedded-login/spa.mdx b/main/docs/authenticate/passwordless/implement-login/embedded-login/spa.mdx index d080e0f4ff..fb92bc3035 100644 --- a/main/docs/authenticate/passwordless/implement-login/embedded-login/spa.mdx +++ b/main/docs/authenticate/passwordless/implement-login/embedded-login/spa.mdx @@ -8,14 +8,7 @@ import { ReleaseStageNotice } from "/snippets/ReleaseStageNotice.jsx" Embedded login for web applications uses [cross-origin authentication](/docs/authenticate/login/cross-origin-authentication) unless you [configure a custom domain](/docs/customize/custom-domains) for your tenant. Cross-origin authentication uses third-party cookies to allow for secure authentication transactions across different origins. -## Using Auth0's SDKs to implement Embedded Login - -You can implement Passwordless Login using Auth0's Lock widget, or if you need complete control of the user experience, you can implement it using Auth0.js: - -* [Lock for Web](/docs/libraries/lock) -* [Auth0.js v9 Reference](/docs/libraries/auth0js) - -### Configure Cross-Origin Resource Sharing (CORS) +## Configure Cross-Origin Resource Sharing (CORS) For security purposes, your app's origin URL must be listed as an approved URL. If you have not already added it to the **Allowed Callback URLS** for your application, you will need to add it to the list of **Allowed Origins (CORS)**. @@ -33,7 +26,7 @@ For security purposes, your app's origin URL must be listed as an approved URL. Customize MFA with embedded flows. Use the MFA API to allow users to enroll and challenge with factors of their choice that are supported by your application. -When using [Lock for Web](/docs/libraries/lock#2-authenticating-and-getting-user-info), the `oauth/token` endpoint returns the `mfa_required` error and includes the `mfa_token` you need to use the MFA API and `mfa_requirements` parameter with a list of authenticators your application currently supports: +When your application calls the `oauth/token` endpoint and MFA is required, the endpoint returns the `mfa_required` error and includes the `mfa_token` you need to use the MFA API and `mfa_requirements` parameter with a list of authenticators your application currently supports: ```json lines { diff --git a/main/docs/authenticate/passwordless/implement-login/embedded-login/webapps.mdx b/main/docs/authenticate/passwordless/implement-login/embedded-login/webapps.mdx index 38ed3a586d..0ae1af2c9f 100644 --- a/main/docs/authenticate/passwordless/implement-login/embedded-login/webapps.mdx +++ b/main/docs/authenticate/passwordless/implement-login/embedded-login/webapps.mdx @@ -734,7 +734,7 @@ The `/passwordless/start` endpoint has a [rate limit](/docs/troubleshoot/custome Customize MFA with embedded flows. Use the MFA API to allow users to enroll and challenge with factors of their choice that are supported by your application. -When using [Lock for Web](/docs/libraries/lock#2-authenticating-and-getting-user-info), the `oauth/token` endpoint returns the `mfa_required` error and includes the `mfa_token` you need to use the MFA API and `mfa_requirements` parameter with a list of authenticators your application currently supports: +The `oauth/token` endpoint returns the `mfa_required` error and includes the `mfa_token` you need to use the MFA API and `mfa_requirements` parameter with a list of authenticators your application currently supports: ```json lines { diff --git a/main/docs/authenticate/protocols/saml/saml-configuration.mdx b/main/docs/authenticate/protocols/saml/saml-configuration.mdx index dd00d4f559..31b29116ad 100644 --- a/main/docs/authenticate/protocols/saml/saml-configuration.mdx +++ b/main/docs/authenticate/protocols/saml/saml-configuration.mdx @@ -43,7 +43,7 @@ You can also view step-by-step instructions on how to [configure many SAML ident ## Auth0 as service provider -If Auth0 serves as the service provider in a SAML federation, Auth0 can route authentication requests to an identity provider without already having an account pre-created for a specific user. Using the assertion returned by the identity provider, Auth0 can capture information needed to create a user profile for the user (this process is sometimes called just-in-time provisioning). To learn more, read [Select from Multiple Connection Options](/docs/libraries/lock/selecting-from-multiple-connection-options). +If Auth0 serves as the service provider in a SAML federation, Auth0 can route authentication requests to an identity provider without already having an account pre-created for a specific user. Using the assertion returned by the identity provider, Auth0 can capture information needed to create a user profile for the user (this process is sometimes called just-in-time provisioning). Even though Auth0 doesn't require pre-created user accounts prior to the authentication process, the application integrated with Auth0 might. If this is the case, you have several options when it comes to handling this: diff --git a/main/docs/authenticate/single-sign-on.mdx b/main/docs/authenticate/single-sign-on.mdx index d499d502bc..5cf7425fa4 100644 --- a/main/docs/authenticate/single-sign-on.mdx +++ b/main/docs/authenticate/single-sign-on.mdx @@ -29,7 +29,6 @@ The easiest and most secure way to implement Single Sign-on (SSO) with Auth0 is If you cannot use Universal Login with your application, review the following for additional info on embedded authentication: -* [Lock](/docs/libraries/lock/lock-api-reference) * [Auth0.js](/docs/libraries/auth0js) diff --git a/main/docs/customize/custom-domains/configure-features-to-use-custom-domains.mdx b/main/docs/customize/custom-domains/configure-features-to-use-custom-domains.mdx index 4e1c2f1b2f..75f94f6cb8 100644 --- a/main/docs/customize/custom-domains/configure-features-to-use-custom-domains.mdx +++ b/main/docs/customize/custom-domains/configure-features-to-use-custom-domains.mdx @@ -17,7 +17,6 @@ You should have already configured and verified your custom domain. | Feature | Section to read | | --- | --- | | [Universal Login](/docs/glossary?term=Universal+Login) with a customized login page | [Universal Login](#universal-login) | -| Lock embedded in your application | [Embedded Lock](#embedded-lock) | | Auth0 SPA SDK, Auth0.js, or other Auth0 SDKs | [Auth0 SPA SDK, Auth0.js, and other SDKs](#auth0-spa-sdk-auth0-js-and-other-sdks) | | Custom domain with Auth0 emails and phone notifications | [Use custom domains in emails and phone notifications](#use-custom-domains-in-emails-and-phone) | | Social identity providers | [Configure social identity providers](#configure-social-identity-providers) | @@ -34,26 +33,10 @@ You should have already configured and verified your custom domain. If you use [Auth0 Universal Login](/docs/authenticate/login/auth0-universal-login) and you have customized the login page, you must update the code to use your custom domain. If you use the **default** login page without customization, you do not need to make any changes. To learn more, read Auth0 Universal Login. -If you use [Lock for Web](/docs/libraries/lock), you must set the `configurationBaseUrl` and `overrides` options as seen in the following sample script: - -```javascript lines -var lock = new Auth0Lock(config.clientID, config.auth0Domain, { - //code omitted for brevity - configurationBaseUrl: config.clientConfigurationBaseUrl, - overrides: { - __tenant: config.auth0Tenant, - __token_issuer: config.authorizationServer.issuer - }, - //code omitted for brevity -}); -``` - - - -If you use [Auth0.js](/docs/libraries/auth0js) on the Universal Login page, you must set the `overrides` option. +If you use Auth0.js on the Universal Login page, you must set the `overrides` option. ```javascript lines var webAuth = new auth0.WebAuth({ @@ -73,35 +56,7 @@ var webAuth = new auth0.WebAuth({ -For most, the Auth0.js and Lock libraries retrieve the tenant name (required for `/usernamepassword/login`) and the issuer (required for `id_token` validation) from the domain. However, if you're a Private Cloud customer who uses a proxy or a custom domain name where the domain name is different from the tenant/issuer, you can use `__tenant` and `__token_issuer` to provide your unique values. - -## Embedded Lock - -If you use [Lock for Web](/docs/libraries/lock) embedded in your application, you must update the code to use your custom domain when initializing Lock. You will also need to set the `configurationBaseUrl` to the appropriate CDN URL. - -{/* codeblockOld.header.login.logInButton codeblockOld.header.login.configureSnippet */} - - -export const codeExample1 = `var lock = new Auth0Lock('{yourClientId}', '{yourCustomDomain}', { - //code omitted for brevity - configurationBaseUrl: 'https://cdn.us.auth0.com' - //code omitted for brevity -});`; - - - - - - - - -The CDN URL varies by region. Use `https://cdn.[us|eu|au|jp].auth0.com` (`us` for US, `eu` for Europe, `au` for Australia, or `jp` for Japan). - - - -The CDN URL varies by region. Tenants created before 11 June 2020 should use `https://cdn.auth0.com` if the region is the United States, or add `eu`, `au`, `jp` for Europe, Australia, or Japan. If your tenant was created after 11 June 2020, use `https://cdn.us.auth0.com` if the region is the United States. - - +For most, the Auth0.js library retrieves the tenant name (required for `/usernamepassword/login`) and the issuer (required for `id_token` validation) from the domain. However, if you're a Private Cloud customer who uses a proxy or a custom domain name where the domain name is different from the tenant/issuer, you can use `__tenant` and `__token_issuer` to provide your unique values. ## Auth0 SPA SDK, Auth0.js, and other SDKs diff --git a/main/docs/customize/integrations/cms/wordpress-plugin/configure-login-by-auth0.mdx b/main/docs/customize/integrations/cms/wordpress-plugin/configure-login-by-auth0.mdx index 89f0497cbc..bf974f44da 100644 --- a/main/docs/customize/integrations/cms/wordpress-plugin/configure-login-by-auth0.mdx +++ b/main/docs/customize/integrations/cms/wordpress-plugin/configure-login-by-auth0.mdx @@ -130,11 +130,11 @@ Options here do not affect the Universal Login Page (To learn about customizatio * **Form Title:** Sets the title of the embedded Auth0 login form. Option name is `form_title`. * **Enable Gravatar Integration:** When user enters their email, their associated Gravatar picture is displayed in the embedded Auth0 login form. Option name is `gravatar`. * **Login Name Style:** Selecting **Email** will require users to enter their email address to login. Set this to **Username** if you do not want to force a username to be a valid email address. Option name is `username_style`. Option name is `client_secret_b64_encoded`. -* **Primary Color:** To learn more about this setting, read [Lock Configuration Options](/docs/libraries/lock/lock-configuration). Option name is `primary_color`. +* **Primary Color:** To learn more about this setting, read the Lock Configuration Options documentation. Option name is `primary_color`. * **Extra Settings:** A valid JSON object that includes options to call Lock with. This overrides all other options set above. For a list of available options, see the Lock: User configurable options (e.g.: `{"disableResetAction": true }`). Option name is `extra_conf`. * **Use Custom Lock JS URL:** When turned off, WordPress will use the latest tested version of Lock (Auth0 embedded login form) automatically. When turned on, administrators can provide a custom Lock URL to use. Option name is `custom_cdn_url`. * **Custom Lock JS URL:** A valid URL pointing to a version of Lock. This field will be automatically hidden when **Use Custom Lock JS URL** is turned off. Option name is `cdn_url`. -* **Connections to Show:** List here each of the identity providers you want to allow users to login with. If left blank, all enabled providers will be allowed. (To learn more, read [Lock UI Customization](/docs/libraries/lock/lock-ui-customization).) Option name is `lock_connections`. +* **Connections to Show:** List here each of the identity providers you want to allow users to login with. If left blank, all enabled providers will be allowed. Option name is `lock_connections`. diff --git a/main/docs/customize/integrations/cms/wordpress-plugin/troubleshoot-login-by-auth0.mdx b/main/docs/customize/integrations/cms/wordpress-plugin/troubleshoot-login-by-auth0.mdx index f28736fb5f..a238c8135d 100644 --- a/main/docs/customize/integrations/cms/wordpress-plugin/troubleshoot-login-by-auth0.mdx +++ b/main/docs/customize/integrations/cms/wordpress-plugin/troubleshoot-login-by-auth0.mdx @@ -172,7 +172,7 @@ To change the form_title in this case, you need to add the following attribute t There are many options on the **Appearance** tab of the plugin settings page that can change the look and feel of the login form that is embedded on your site (`wp-login/php` page, shortcodes, or widgets). To learn more about these options, read [Configure Login by Auth0](/docs/customize/integrations/cms/wordpress-plugin/configure-login-by-auth0). This will not affect the the login form on the Auth0-hosted Universal Login Page. -There is also a field called "Extra Settings" on the **Advanced** tab that accepts a valid JSON object with all the settings you want to configure. This will override any changes made on the **Appearance** tab. To see all possible configuration options, read [Lock Configuration Options](/docs/libraries/lock/lock-configuration). +There is also a field called "Extra Settings" on the **Advanced** tab that accepts a valid JSON object with all the settings you want to configure. This will override any changes made on the **Appearance** tab. To see all possible configuration options, read the Lock Configuration Options documentation. External style sheets and JS files should be loaded in your theme using the `wp_enqueue_scripts` hook for shortcodes/widgets and the `login_enqueue_scripts` hook for `wp-login.php`. To learn more, read [`do_action( 'wp_enqueue_scripts' )` on wordpress.org](https://developer.wordpress.org/reference/hooks/wp_enqueue_scripts/) and [`do_action( 'login_enqueue_scripts' )` on wordpress.org](https://developer.wordpress.org/reference/hooks/login_enqueue_scripts/). diff --git a/main/docs/customize/login-pages/classic-login/customization-classic.mdx b/main/docs/customize/login-pages/classic-login/customization-classic.mdx index c06fd2d2cc..146b9a1ff5 100644 --- a/main/docs/customize/login-pages/classic-login/customization-classic.mdx +++ b/main/docs/customize/login-pages/classic-login/customization-classic.mdx @@ -68,8 +68,8 @@ To customize the login page template, you must first choose a base template to w The available templates use the following libraries: -* [Lock](/docs/libraries/lock) -* [Lock (Passwordless Mode)](/docs/libraries/lock) +* Lock +* Lock (Passwordless Mode) * [Auth0.js](/docs/libraries/auth0js) * [Authentication API](https://auth0.com/docs/api/authentication) @@ -85,7 +85,7 @@ For example, you can configure the Lock widget to: * Customize the login page with different colors, text, or default languages * Present users with only one or more specific login methods -To learn more about customizing the Lock widget, review the [Lock Configuration Options](/docs/libraries/lock/lock-configuration). +To learn more about customizing the Lock widget, review the Lock Configuration Options documentation. #### Custom Login Form template diff --git a/main/docs/customize/login-pages/classic-login/customize-lock-error-messages.mdx b/main/docs/customize/login-pages/classic-login/customize-lock-error-messages.mdx index 235f96dc2d..960bf27582 100644 --- a/main/docs/customize/login-pages/classic-login/customize-lock-error-messages.mdx +++ b/main/docs/customize/login-pages/classic-login/customize-lock-error-messages.mdx @@ -50,8 +50,5 @@ var lock = new Auth0Lock( If you are returning custom error codes from a [rule](/docs/customize/rules) or a custom database script, you can handle custom errors: * In your application's redirect URL by reading the `error` and `error_mesage` query string parameters. -* By redirecting the user back to your hosted pages with a custom error message and displaying the message with a [flash message](/docs/libraries/lock/lock-api-reference). +* By redirecting the user back to your hosted pages with a custom error message and displaying the message with a flash message. -## Learn more - -* [Lock for Web](/docs/libraries/lock) diff --git a/main/docs/customize/login-pages/classic-login/customize-with-lock-sdk.mdx b/main/docs/customize/login-pages/classic-login/customize-with-lock-sdk.mdx index a4b83a7ac9..0034b480fa 100644 --- a/main/docs/customize/login-pages/classic-login/customize-with-lock-sdk.mdx +++ b/main/docs/customize/login-pages/classic-login/customize-with-lock-sdk.mdx @@ -31,7 +31,7 @@ The template you use to customize your login page will depend on the unique need ## Using the Lock widget -[Lock](/docs/libraries/lock) is a login form that makes it easy for your users to authenticate using a selected connection. Lock automatically handles most of the details involved in creating and authenticating users. +Lock is a login form that makes it easy for your users to authenticate using a selected connection. Lock automatically handles most of the details involved in creating and authenticating users. With Lock, you will be implementing a UI that: diff --git a/main/docs/fr-ca/libraries/lock.mdx b/main/docs/fr-ca/libraries/lock.mdx deleted file mode 100644 index b23951d3c7..0000000000 --- a/main/docs/fr-ca/libraries/lock.mdx +++ /dev/null @@ -1,245 +0,0 @@ ---- -title: "Lock pour le Web" -'description': "Un gadget logiciel offrant une expérience de connexion et d’inscription sans friction pour vos applications Web." ---- -import {AuthCodeBlock} from "/snippets/AuthCodeBlock.jsx"; - - -Lock est un type de connexion intégrable qui peut être [configuré selon vos besoins](/docs/fr-ca/libraries/lock/v11/configuration) et est recommandé pour une utilisation avec des applications monopages, de préférence conjointement avec la [Connexion universelle](/docs/fr-ca/universal-login), qu’il est conseillé d’utiliser en priorité. Lock vous permet d’ajouter facilement des fournisseurs d’identité sociale, de sorte que vos utilisateurs puissent se connecter de manière transparente en utilisant n’importe quel fournisseur souhaité. - - - -La connexion intégrée pour le web utilise la Cross Origin Authentication (Authentification d’origine croisée). Dans certains navigateurs [cela peut s’avérer peu fiable](/docs/fr-ca/authenticate/login/cross-origin-authentication) si vous ne configurez pas un [domaine personnalisé](/docs/fr-ca/customize/custom-domains)**et n’hébergez pas votre application dans le même domaine.** Si vous ne pouvez pas utiliser des domaines personnalisés, envisagez de migrer vers la Universal Login (Connexion universelle). - - - -## Installation de Lock - -Vous pouvez installer Lock de différentes façons. Sélectionnez l’une des sources d’installation suivantes convenant le mieux à votre environnement et à votre application. - -### Sources d’installation - -Installer via [npm](https://npmjs.org) : -`npm install auth0-lock` - -Installer via [bower](http://bower.io) : - -`bower install auth0-lock` - -Inclure via notre CDN (remplacez `.x` et `.y` par les numéros de version mineure et de correctif les plus récents à partir du [référentiel Lock Github](https://github.com/auth0/lock/releases) : - -Version mineure la plus récente :``Dernière version de correctif : -`` - -Il est recommandé que les applications de production utilisent une version spécifique de correctif, ou au moins une version mineure spécifique. Quelle que soit la méthode d’inclusion de Lock, il est recommandé de verrouiller la version et de la mettre à jour manuellement uniquement, afin de garantir que ces mises à jour n’affectent pas négativement votre implémentation. Consultez le [référentiel GitHub](https://github.com/auth0/lock/releases) pour une liste à jour des versions. - -### Mobile - -Si vous visez des audiences mobiles, Auth0 conseille d’ajouter la balise meta suivante à le `head` de votre application : - -`` - -### Regroupement des dépendances - -Si vous utilisez browserify ou webpack pour créer votre projet et regrouper ses dépendances, après avoir installé le module `auth0-lock`, vous devrez le regrouper avec toutes ses dépendances. Des exemples sont disponibles pour [Browserify](https://github.com/auth0/lock/tree/master/examples/bundling/browserify) et [webpack](https://github.com/auth0/lock/tree/master/examples/bundling/webpack). - -### Authentification inter-origine - - - -La connexion intégrée pour le web utilise la Cross Origin Authentication (Authentification d’origine croisée). Dans certains navigateurs [cela peut s’avérer peu fiable](/docs/fr-ca/authenticate/login/cross-origin-authentication) si vous ne configurez pas un [domaine personnalisé](/docs/fr-ca/customize/custom-domains)**et n’hébergez pas votre application dans le même domaine.** Si vous ne pouvez pas utiliser des domaines personnalisés, envisagez de migrer vers la Universal Login (Connexion universelle). - - - -Incorporer Lock dans votre application nécessite une [authentification cross-origin](/docs/fr-ca/authenticate/login/cross-origin-authentication) pour une configuration appropriée. Vous devez notamment définir la propriété **Origines Web autorisées** sur le domaine effectuant la requête. Vous pouvez trouver ce champ dans les [Application Settings (Paramètres d’application)](https://manage.auth0.com/#/applications/{yourClientId}/settings). - -Assurez-vous de lire concernant les limites de l’authentification inter-origine avant de mettre en place une connexion intégrée avec Lock. - -## Utilisation - -### 1. Initialiser Lock - -Vous devrez d’abord initialiser un nouvel objet `Auth0Lock` et lui donner votre ID client Auth0 (l’ID client unique pour chaque application Auth0, que vous pouvez obtenir du [Management Dashboard](https://manage.auth0.com/#)) et votre domaine Auth0 (par exemple, `yourname.auth0.com`). - - - -export const codeExample1 = `// Initializing our Auth0Lock -var lock = new Auth0Lock( - '{yourClientId}', - '{yourDomain}' -);`; - - - -### 2. Authentification et obtention des informations utilisateur - -Ensuite, écoutez en utilisant la méthode `on` pour l’événement `authentifié`. Lorsque l’événement survient, utilisez le `accessToken` reçu pour appeler la méthode `getUserInfo` et acquérir les informations du profil de l’utilisateur (selon les besoins). - - - -export const codeExample2 = `var Auth = (function() { - - var wm = new WeakMap(); - var privateStore = {}; - var lock; - - function Auth() { - this.lock = new Auth0Lock( - '<{yourClientId}>', - '<{yourDomain}>' - ); - wm.set(privateStore, { - appName: "example" - }); - } - - Auth.prototype.getProfile = function() { - return wm.get(privateStore).profile; - }; - - Auth.prototype.authn = function() { - // Listening for the authenticated event - this.lock.on("authenticated", function(authResult) { - // Use the token in authResult to getUserInfo() and save it if necessary - this.getUserInfo(authResult.accessToken, function(error, profile) { - if (error) { - // Handle error - return; - } - - //we recommend not storing Access Tokens unless absolutely necessary - wm.set(privateStore, { - accessToken: authResult.accessToken - }); - - wm.set(privateStore, { - profile: profile - }); - - }); - }); - }; - return Auth; -}());`; - - - -Vous pouvez ensuite manipuler le contenu de la page et afficher les informations de profil pour l’utilisateur (par exemple, afficher son nom dans un message de bienvenue). - -`

Bienvenue

` - -Notez que si vous stockez le profil utilisateur, vous voudrez appliquer `JSON.stringify` à l’objet du profil, puis, lors d’une utilisation ultérieure, lui appliquer un `JSON.parse`, car il devra être stocké en `localStorage` en tant que chaîne plutôt que d’objet JSON. - -### 3. Affichage de Lock - -Vous affichez ici le gadget logiciel Lock après que l’utilisateur ait cliqué sur un bouton de connexion. Vous pouvez tout aussi bien afficher Lock automatiquement lors de l’arrivée sur une page en utilisant simplement `lock.show();`. - -Cela affichera le gadget logiciel Lock, et associé à ce qui précède, vous êtes désormais prêt à gérer les connexions. - -```javascript lines -document.getElementById('btn-login').addEventListener('click', function() { - lock.show(); -}); -``` - -## Sans mot de passe - -Le mode sans mot de passe de Lock est disponible uniquement dans Lock v11.2.0 et versions ultérieures. Nous vous conseillons d’utiliser la [dernière version de Lock](https://github.com/auth0/lock/releases) pour cette fonctionnalité! - -Vous pouvez utiliser le mode sans mot de passe de Lock pour permettre aux utilisateurs de s’authentifier en utilisant uniquement un courriel ou un numéro de téléphone cellulaire. Ils recevront le code et ensuite le saisiront, ou cliqueront sur le lien, et ils pourront être authentifiés sans avoir à se souvenir d’un mot de passe. - -Pour mettre en œuvre le mode sans mot de passe dans Lock, initialisez Lock d’une manière légèrement différente avec `Auth0LockPasswordless` plutôt que `Auth0Lock` : - - - -export const codeExample3 = `var lockPasswordless = new Auth0LockPasswordless( - '{yourClientId}', - '{yourDomain}' -);`; - - - -### Options Sans mot de passe - -De plus, le mode sans mot de passe de Lock dispose de quelques options de configuration qui lui sont propres. - -Pour indiquer le type de connexion que vous souhaitez, vous initialisez Lock avec l’option `allowedConnections`, avec `email` ou `sms` comme valeur : - -```javascript lines -var passwordlessOptions = { - allowedConnections: ['sms'] -} -``` - -N’oubliez pas d’activer la connexion sans mot de passe de votre choix dans [Dashboard](https://manage.auth0.com/#), sous **Connexions > Sans mot de passe**, puis de l’activer pour votre application; ainsi, lorsque Lock essaye de l’utiliser, elle est déjà configurée et associée à l’application. - -Si vous décidez d’utiliser `email`, vous devez sélectionner une autre option si vous souhaitez que vos utilisateurs reçoivent un code à saisir ou un «  lien magique » à utiliser. Il s’agit de l’option `passwordlessMethod`, qui prend les valeurs de `code` ou `link`. - -```javascript lines -var passwordlessOptions = { - allowedConnections: ['email'], - passwordlessMethod: 'code' -} -``` - -### Exemple de connexion sans mot de passe - - - -export const codeExample4 = `var passwordlessOptions = { - allowedConnections: ['email'], - passwordlessMethod: 'code', - auth: { - redirectUrl: 'http://localhost:3000/callback', - responseType: 'token id_token', - params: { - scope: 'openid email' - } - } -} - -var lockPasswordless = new Auth0LockPasswordless( - '{yourClientId}', - '{yourDomain}', - passwordlessOptions -);`; - - - -### Authentification unique avec authentification intégrée - -Les applications avec connexion intégrée doivent remplir deux critères afin de bénéficier de l’Authentification unique (SSO). - -1. Les deux applications tentant d’utiliser la SSO doivent être des applications de première partie. La SSO avec des applications tierces ne fonctionnera pas. -2. Elles doivent utiliser des domaines personnalisés et avoir à la fois les applications qui souhaitent bénéficier de la SSO et le locataire Auth0 sur le même domaine. Traditionnellement, les domaines Auth0 sont au format `foo.auth0.com`, mais les domaines personnalisés vous permettent d’utiliser le même domaine pour chacune des applications en question, ainsi que pour votre client Auth0, ce qui évite le risque d’attaques CSRF (Cross-Site Request Forgery). - -Nous recommandons d’utiliser une connexion universelle au lieu de configurer la SSO dans des scénarios de connexion intégrée. La connexion universelle est la manière la plus fiable et stable de mettre en place la SSO, et c’est la seule option si vous devez utiliser plusieurs domaines pour vos applications, ou si vous utilisez des [applications tiers](/docs/fr-ca/get-started/applications/third-party-applications/configure-third-party-applications). - -## Codes d’erreur et descriptions - -Lorsque Lock est utilisé pour une connexion intégrée, il utilise le point de terminaison `/co/authenticate`, qui comporte les erreurs suivantes. - -La description de l’erreur est lisible par un humain. Elle **ne doit pas être analysée par un code** et peut changer à tout moment. - -| Statut | Code | Description | -| --- | --- | --- | -| 400 | invalid_request | Corps de la requête non valide. Tous et seulement client_id, credential_type, username, otp, realm sont requis. | -| 401 | unauthorized_client | La connexion interorigine n’est pas autorisée. | -| 400 | unsupported_credential_type | Paramètre de type d’identifiant inconnu. | -| 400 | invalid_request | Domaine inconnu, connexion inexistante. | -| 403 | access_denied | Courriel ou mot de passe erroné. | -| 403 | access_denied | Erreur d’authentification | -| 403 | blocked_user | Utilisateur bloqué | -| 401 | password_leaked | Cette tentative de connexion a été bloquée parce que le mot de passe que vous utilisez a déjà été divulgué dans le cadre d’une violation de données (pas dans cette application). | -| 429 | too_many_attempts | Votre compte a été bloqué après plusieurs tentatives de connexion consécutives. Nous vous avons envoyé une notification via votre méthode de contact préférée avec des instructions sur la façon de le débloquer. | -| 429 | too_many_attempts | Nous avons détecté un comportement de connexion suspect et les tentatives suivantes seront bloquées. Veuillez contacter l’administrateur. | - -## Compatibilité des navigateurs - -La compatibilité des navigateurs est assurée pour **Chrome**, **Safari**, **Firefox** et **IE >= 10**. Auth0 utilise actuellement [zuul](https://github.com/defunctzombie/zuul) et [Saucelabs](https://saucelabs.com) pour exécuter des tests d’intégration à chaque sortie. - -## En savoir plus - -* [Référence de l’API Lock](/docs/fr-ca/libraries/lock/lock-api-reference) -* [Options de configuration de Lock](/docs/fr-ca/libraries/lock/lock-configuration) \ No newline at end of file diff --git a/main/docs/fr-ca/libraries/lock/lock-api-reference.mdx b/main/docs/fr-ca/libraries/lock/lock-api-reference.mdx deleted file mode 100644 index c40ea3a1db..0000000000 --- a/main/docs/fr-ca/libraries/lock/lock-api-reference.mdx +++ /dev/null @@ -1,277 +0,0 @@ ---- -title: "Référence de l’API Lock" -'description': "Détails sur l’API Lock v11." ---- -import {AuthCodeBlock} from "/snippets/AuthCodeBlock.jsx"; - - -Lock has many methods, features, and configurable options. This reference is designed to direct you to the ones that you need, and discuss how to use them. Click below to go straight the method you’re looking for, or just browse! If you’re looking for information about events emitted by Lock, they’re listed under the [on()](#on-) method section! - -* [new Auth0Lock](#auth0lock) - Instanciation du Lock -* [getUserInfo()](#getuserinfo-) - Obtention du profil d’un utilisateur connecté -* [show()](#show-) - Affichage du gadget logiciel Lock -* [on()](#on-) - Écoute des événements -* [resumeAuth()](#resumeauth-) - À utiliser pour compléter le flux d’authentification lorsque `autoParseHash` est false -* [checkSession()](#checksession-) - Obtenir un nouveau jeton depuis Auth0 pour un utilisateur authentifié -* [logout()](#logout-) - Déconnexion de l’utilisateur - -## Auth0Lock - -`new Auth0Lock(clientID, domain, options)` - -Initialise une nouvelle instance de `Auth0Lock` configurée avec le `clientID` de votre application et le `domain` de votre compte à partir de votre [Auth0](https://manage.auth0.com/#/) Dashboard. Le troisième paramètre, facultatif, est un objet `options` utilisé pour configurer Lock en fonction des besoins de votre application. Vous trouverez ces informations dans vos [paramètres d’application](https://manage.auth0.com/#/applications). - -* **clientId `{String}`**: Required parameter. Your application’s clientId in Auth0. -* **domain `{String}`**: paramètre obligatoire. Votre domaine Auth0. En général, il s’agit de your-account.auth0.com. -* **options `{Object}`**: Optional parameter. Allows for the configuration of Lock’s appearance and behavior. See [the configuration options page](/docs/fr-ca/libraries/lock/lock-configuration) for details. - - - -export const codeExample1 = `var Auth = (function() { - - var privateStore = {}; - - function Auth() { - // Instantiate Lock - without custom options - this.lock = new Auth0Lock( - '<{yourClientId}>', - '<{yourDomain}>' - ); - } - - Auth.prototype.getProfile = function() { - return privateStore.profile; - }; - - Auth.prototype.authn = function() { - // Listening for the authenticated event and get profile - this.lock.on("authenticated", function(authResult) { - // Use the token in authResult to getUserInfo() and save it if necessary - this.getUserInfo(authResult.accessToken, function(error, profile) { - if (error) { - // Handle error - return; - } - - //save Access Token only if necessary - privateStore.accessToken = accessToken; - privateStore.profile = profile; - - // Update DOM - }); - }); - }; - return Auth; -}());`; - - - -## getUserInfo() - -`getUserInfo(accessToken, callback)` - -Once the user has logged in and you are in possession of a token, you can use that token to obtain the user’s profile with `getUserInfo`. This method replaces the deprecated `getProfile()`. - -* **accessToken `{String}`**: jeton utilisateur. -* **callback {Function}**: sera invoqué après récupération du profil utilisateur. - -```javascript lines -lock.getUserInfo(accessToken, function(error, profile) { - if (!error) { - alert("hello " + profile.name); - } -}); -``` - -## show() - -`show(options)` - -The `show` method displays the widget. Beginning with Lock version 10.2.0, the `show` method can now accept an `options` object as a parameter. Note that this parameter is meant to be used as a way to override your Lock’s `options` for this particular displaying of the widget - options should be set when instantiating Lock, and overridden, only if needed for your specific use case, here. - -Le sous-ensemble suivant d’`options` doit être remplacé par les valeurs qui leur ont été attribuées (ou leurs valeurs par défaut) lors de l’instanciation de Lock. - -* allowedConnections -* auth.params -* allowLogin -* allowSignUp -* allowForgotPassword -* initialScreen -* rememberLastLogin - -Pour plus de détails sur la liste complète des options configurables qui peuvent être choisies lors de l’instanciation de Lock, par opposition au sous-ensemble limité ci-dessus qui peut être remplacé dans la méthode `show`, veuillez consulter [la page des options configurables de l’utilisateur](/docs/fr-ca/libraries/lock/lock-configuration). - -Exemples de remplacement des options : - -```javascript lines -// Show the Lock widget, without overriding any options -lock.show(); - -// Show the Lock widget, overriding some options -lock.show({ - allowedConnections: ["twitter", "facebook"], - allowSignUp: false -}); -``` - -Les options doivent être définies lors de la première instanciation de Lock `var lock = new Auth0Lock(clientId, domain, options);`. Les options ne doivent être transmises à `show` que pour remplacer les options précédemment définies lors de l’affichage du gadget logiciel à ce moment et à cet endroit précis. - -Il existe une option supplémentaire qui peut être définie dans la méthode `show` appelée `flashMessage`. - -### flashMessage - -L’objet n’est disponible comme option que pour la méthode `show`; il n’est pas disponible avec l’objet `options` normal lors de l’instanciation de Lock. L’objet `flashMessage` affiche un message flash d’erreur ou de réussite lors de l’affichage du Lock. Il possède les paramètres suivants : - -* **type** `{String}`: le type de message, qui doit être soit `error`, soit `success`. -* **text** `{String}`: Le texte à afficher. - -```javascript lines -lock.show({ - flashMessage:{ - type: 'success', - text: 'Amazing Success!!' - } -}); -``` - -Une application pratique de l’option `flashMessage` consiste à gérer les erreurs d’autorisation. L’option `flashMessage` peut être remplie avec le texte de description de l’erreur. - -```javascript lines -lock.on('authorization_error', function(error) { - lock.show({ - flashMessage: { - type: 'error', - text: error.errorDescription - } - }); -}); -``` - -Ainsi, si `tester@example.com` essayait maintenant de se connecter, en tant qu’utilisateur bloqué, l’utilisateur verrait s’afficher à nouveau Lock, avec une barre supérieure affichant le message d’erreur, plutôt que de simplement échouer à se connecter et de fermer Lock. - -## hide() - -`hide()` - -La méthode `hide` ferme le gadget logiciel s’il est actuellement ouvert. Le gadget logiciel se ferme de lui-même dans la plupart des cas, de sorte que cette méthode ne devrait être invoquée que dans des cas d’utilisation précis. Par exemple, on peut souhaiter écouter l’événement `unrecoverable_error`, puis `hide` le Lock et rediriger vers sa propre page d’erreur personnalisée. Un autre exemple concerne les utilisateurs qui mettent en œuvre le [mode popup](/docs/fr-ca/libraries/lock/lock-authentication-modes) et qui pourraient avoir besoin de `hide` manuellement le gadget logiciel après que l’événement `authenticated` s’est déclenché. - -Exemple d’utilisation pour cacher (fermer) le gadget logiciel Lock en mode popup : - -```javascript lines -// Listen for authenticated event and hide Lock -lock.on("authenticated", function() { - lock.hide(); - - // Whatever else you'd like to do on authenticated event - -}); -``` - -## on() - -Lock émet des événements au cours de son cycle de vie. La méthode `on` peut être utilisée pour écouter des événements particuliers et y réagir. - -* `show`: émis lorsque Lock est affiché. N’a pas d’arguments. -* `hide`: émis lorsque le lock est caché. N’a pas d’arguments. -* `unrecoverable_error`: émis en cas d’erreur irrécupérable, par exemple lorsqu’aucune connexion n’est disponible. L’erreur est le seul argument. -* `authenticated`: emitted after a successful authentication. Has the authentication result as the only argument. The authentication result contains the token which can be used to get the user’s profile or stored to log them in on subsequent checks. -* `authorization_error`: émis lorsque l’autorisation échoue. L’erreur est le seul argument. -* `hash_parsed`: every time a new Auth0Lock object is initialized in redirect mode (the default), it will attempt to parse the hash part of the url looking for the result of a login attempt. This is a low level event for advanced use cases and `authenticated` and `authorization_error` should be preferred when possible. After that this event will be emitted with `null` if it couldn’t find anything in the hash. It will be emitted with the same argument as the `authenticated` event after a successful login or with the same argument as `authorization_error` if something went wrong. This event won’t be emitted in [popup mode](/docs/fr-ca/libraries/lock/lock-authentication-modes) because there is no need to parse the url’s hash part. -* `forgot_password ready`: émis lorsque l’écran « Mot de passe oublié » est affiché. (Uniquement dans la version > `10.18`) -* `forgot_password submit`: emitted when the user clicks on the submit button of the "Forgot password" screen. (Only in Version >`10.14`) -* `signin ready`: émis lorsque l’écran « Inscription » s’affiche. -* `signup ready`: émis lorsque l’écran « Inscription » s’affiche. -* `signin submit`: émis lorsque l’utilisateur clique sur le bouton d’envoi de l’écran « Connexion ». (Uniquement dans la version > `10.18`) -* `signup submit`: émis lorsque l’utilisateur clique sur le bouton de soumission de l’écran « Inscription ». (Uniquement dans la version > `10.18`) -* `federated login`: émis lorsque l’utilisateur clique sur un bouton de connexion par réseau social. A pour arguments le nom de la connexion et la stratégie. (Uniquement dans la version > `10.18`) -* `socialOrPhoneNumber ready`: émis lorsque l’écran Passwordless avec Social + Phone Number est affiché. -* `socialOrPhoneNumber submit`: émis lorsque l’écran Passwordless avec Social + Phone Number est soumis. -* `socialOrEmail ready`: émis lorsque l’écran Passwordless avec Social + Email est affiché. -* `socialOrEmail submit`: émis lorsque l’écran Passwordless avec Social + Email est soumis -* `vcode ready`: émis lorsque l’écran Passwordless avec mot de passe à usage unique est affiché -* `vcode submit`: émis lorsque l’écran Passwordless avec mot de passe à usage unique est soumis - -L’écouteur d’événements `authenticated` a un seul argument, un objet `authResult`. Cet objet contient les propriétés suivantes : `accessToken`, `idToken`, `state`, `refreshToken` et `idTokenPayload`. - -Exemple d’utilisation de l’événement `authenticated`. - - - -export const codeExample2 = `var Auth = (function() { - - var privateStore = {}; - - function Auth() { - this.lock = new Auth0Lock( - '<{yourClientId}>', - '<{yourDomain}>' - ); - } - - Auth.prototype.getProfile = function() { - return privateStore.profile; - }; - - Auth.prototype.authn = function() { - // Listening for the authenticated event - this.lock.on("authenticated", function(authResult) { - // Use the token in authResult to getUserInfo() and save it if necessary - this.getUserInfo(authResult.accessToken, function(error, profile) { - if (error) { - // Handle error - return; - } - - privateStore.profile = profile; - - }); - }); - }; - return Auth; -}());`; - - - -## resumeAuth() - -This method can only be used when you set the [auth.autoParseHash](/docs/fr-ca/libraries/lock/lock-configuration) option to `false`. You’ll need to call `resumeAuth` to complete the authentication flow. This method is useful when you’re using a client-side router that uses a `#` to handle urls (angular2 with `useHash`, or react-router with `hashHistory`). - -* **hash** `{String}`: le fragment de hachage reçu de la redirection. -* **callback** {Function}: sera invoqué une fois l’analyse terminée. Le premier argument est une erreur (le cas échéant) et le second est le résultat de l’authentification. S’il n’y a pas de hash disponible, les deux arguments seront `null`. - -```javascript lines -lock.resumeAuth(hash, function(error, authResult) { - if (error) { - alert("Could not parse hash"); - } - //This is just an example; you should not log Access Tokens in production. - console.log(authResult.accessToken); -}); -``` - -## checkSession() - -La méthode `checkSession` vous permet d’acquérir un nouveau jeton auprès d’Auth0 pour un utilisateur qui est déjà authentifié auprès d’Auth0 pour votre domaine. Elle prend les paramètres suivants : - -* **options** `{Object}`: Optional. Accepts any valid OAuth2 parameters that would normally be sent to `/authorize`. Si vous les oubliez, les paramètres utilisés seront ceux fournis au moment de l’initialisation d’Auth0. -* **callback** {Function}: sera invoqué avec le résultat du renouvellement du jeton. Le premier argument est une erreur (le cas échéant) et le second est le résultat de l’authentification. - -```javascript lines -lock.checkSession({}, function(err, authResult) { - // handle error or new tokens -}); -``` - -## logout() - -Déconnecte l’utilisateur. - -* **options** `{Object}`: facultatif, suit les mêmes règles que auth0.js logout(). - -```javascript lines -lock.logout({ - returnTo: 'https://myapp.com/bye-bye' -}); -``` - diff --git a/main/docs/fr-ca/libraries/lock/lock-authentication-modes.mdx b/main/docs/fr-ca/libraries/lock/lock-authentication-modes.mdx deleted file mode 100644 index 788d3cfb84..0000000000 --- a/main/docs/fr-ca/libraries/lock/lock-authentication-modes.mdx +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: "Modes d’authentification Lock" -'description': "Détails sur les modes d’authentification Lock" ---- -import {AuthCodeBlock} from "/snippets/AuthCodeBlock.jsx"; - - -Lock peut fonctionner selon deux modes différents. Le mode par défaut est le **mode de redirection**. Dans ce mode, votre utilisateur est redirigé pour être authentifié, puis il est renvoyé vers l’application. Dans le second mode, le **mode contextuel**, une fenêtre contextuelle permet à l’utilisateur de s’authentifier auprès du fournisseur d’identité sans quitter l’application. - -## Mode de redirection - -Lorsque vous cliquez sur le bouton IdP (par exemple, Facebook) en mode redirection, vous êtes momentanément redirigé vers Facebook. Le mode de redirection est le mode par défaut avec Lock, et c’est le mode recommandé pour presque tous les cas d’utilisation. Une fois que vous vous êtes connecté avec succès (à Facebook, dans cet exemple), Facebook vous redirigera vers votre application (via Auth0). La majorité des exemples de la documentation de référence utilisent le mode de redirection. - -## Mode contextuel - -Si, après avoir cliqué sur le bouton IdP (Facebook par exemple), une fenêtre contextuelle (nouvel onglet ou nouvelle fenêtre) s’ouvre, cela signifie que vous utilisez le mode contextuel. Dans cette fenêtre, vous verrez que la page Facebook est affichée. Une fois que vous aurez réussi à vous connecter à Facebook, la fenêtre contextuelle sera fermée et votre application Web reconnaîtra que l’utilisateur a été authentifié. L’application Web n’a **jamais été redirigée vers une autre page**. - -La mise en œuvre de Lock avec le mode contextuel est à nouveau une simple modification de l’option de `redirect` par rapport à sa valeur par défaut. - - - -export const codeExample = `var lock = new Auth0Lock( - '{yourClientId}', - '{yourDomain}', - { - auth: { - redirect: false - } - } -);`; - - - -L’authentification multifacteur (MFA) n’est pas prise en charge lorsque Lock est en mode contextuel et intégré à votre application. En outre, le mode contextuel ne fonctionne pas avec la connexion universelle. - -Certaines fonctionnalités d’Auth0, telles que l’[authentification unique (SSO)](/docs/fr-ca/authenticate/single-sign-on) entre plusieurs applications, dépendent du fait que les utilisateurs soient redirigés vers Auth0 pour définir un témoin sur `'{yourDomain}'`. - -Lorsque vous utilisez le mode contextuel, une fenêtre contextuelle s’affiche afin de définir ce témoin. Si les invites ne sont pas nécessaires, cette fenêtre contextuelle sera vide et se trouvera dans un iframe dissimulé pour minimiser les perturbations. La raison en est que les demandes interorigines envoyées par votre application à Auth0 ne sont pas en mesure de définir des témoins. - -Si vous ne souhaitez pas afficher de fenêtre contextuelle et que vous n’avez pas besoin de la SSO entre plusieurs applications, vous pouvez définir `sso: false` lorsque vous utilisez Lock ou auth0.js. - -```javascript lines -var options = { - auth: { - sso: false - } -} -``` - diff --git a/main/docs/fr-ca/libraries/lock/lock-authentication-parameters.mdx b/main/docs/fr-ca/libraries/lock/lock-authentication-parameters.mdx deleted file mode 100644 index 2e7f2c30c4..0000000000 --- a/main/docs/fr-ca/libraries/lock/lock-authentication-parameters.mdx +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: "Paramètres d’authentification Lock" -'description': "La documentation de Lock sur la définition des paramètres d’authentification." ---- - -Vous pouvez envoyer des paramètres lors du démarrage d’une connexion en les ajoutant à l’objet options. L’exemple ci-dessous ajoute un paramètre `state` dont la valeur est égale à `'foo'`. - -```javascript lines -var options = { - auth: { - params: {state: 'foo'}, - } -}; -``` - -L’exemple ci-dessus serait analogue au déclenchement de la connexion avec `https://{yourDomain}/authorize?state=foo&...`. - -Les paramètres suivants sont pris en charge : `scope`, `device`, `nonce` et `state`. - -## Paramètres pris en charge - -### scope {string} - -```javascript lines -var options = { - auth: { - params: {scope: 'openid email user_metadata app_metadata picture'}, - } -}; -``` - -Différentes valeurs sont prises en charge pour le paramètre scope. Gardez à l’esprit que les JWT sont envoyés sur chaque demande d’API, il est donc souhaitable de les garder aussi petits que possible. - -Dans Lock, la valeur par défaut du paramètre `scope` est `openid profile email`. Cette valeur minimale du paramètre scope est requise pour que la fonctionnalité **La dernière fois que vous vous êtes connecté avec** fonctionne correctement. - - - -Si vous ne spécifiez pas au moins la permission par défaut du `openid profile email` lorsque vous initialisez Lock, et que vous exécutez votre site Web à partir de `http://localhost` ou `http://127.0.0.1`, vous recevrez l’erreur suivante dans la console de votre navigateur : - -`Consent required. Lorsque vous utilisez la méthode getSSOData, l’utilisateur doit être authentifié avec la permission suivante : openid profile email` - -Cela ne se produira **pas** si vous exécutez votre application en production ou si vous spécifiez la permission `openid profile email`. Vous pouvez en lire davantage à ce sujet dans le document [Consentement de l’utilisateur et applications tierces](/docs/fr-ca/get-started/applications/third-party-applications/user-consent-and-third-party-applications). - - - -Pour plus d’informations sur les permissions, voir la [page de documentation des permissions](/docs/fr-ca/get-started/apis/scopes). - -#### Exemple : récupérer un jeton - -Dans Lock, si vous souhaitez recevoir un jeton avec la possibilité de récupérer les données de profil de l’utilisateur, vous devez ajouter le paramètre `scope`. - -```javascript lines -var options = { - auth: { - params: { - scope: 'openid profile' - } - } -}; -``` - -Il existe également une option de configuration `connectionScopes` pour Lock qui vous permet de spécifier des permissions sur n’importe quelle connexion spécifique. Cela sera utile si vous souhaitez commencer par un ensemble de permissions (définies sur le tableau de bord), et demander plus tard des autorisations ou des attributs supplémentaires à partir d’une connexion spécifique. Pour en savoir plus à ce sujet, consultez la page [Options de configuration de Lock](/docs/fr-ca/libraries/lock/lock-configuration). - -### state {string} - -Le paramètre `state` est une valeur d’état arbitraire qui sera maintenue à travers les redirections. Ce paramètre est utile pour atténuer les [attaques XSRF](https://en.wikipedia.org/wiki/Cross-site_request_forgery) et pour toute information contextuelle, [par exemple, une URL de retour](/docs/fr-ca/authenticate/login/logout/redirect-users-after-logout) dont vous pourriez avoir besoin après le processus d’authentification. Si un paramètre state personnalisé n’est pas fourni, Lock en générera automatiquement un. Pour plus d’informations, consultez la section [Paramètre state](/docs/fr-ca/secure/attack-protection/state-parameters). - -### nombre aléatoire {string} - -Le paramètre `nonce` est utilisé pour aider à prévenir les attaques par réinsertion et sera automatiquement généré par Lock si une valeur personnalisée n’est pas fournie. - -### device {string} - -Le paramètre `device` définit le nom de l’appareil ou du navigateur demandant l’authentification. \ No newline at end of file diff --git a/main/docs/fr-ca/libraries/lock/lock-configuration.mdx b/main/docs/fr-ca/libraries/lock/lock-configuration.mdx deleted file mode 100644 index b1993abdfe..0000000000 --- a/main/docs/fr-ca/libraries/lock/lock-configuration.mdx +++ /dev/null @@ -1,825 +0,0 @@ ---- -title: "Options de configuration de Lock" -'description': "Lock propose de nombreuses options configurables qui vous permettent de modifier le comportement, l’apparence et la connectivité du gadget logiciel Lock. Cette ressource fournit pour vous les détails de ces options." ---- -import {AuthCodeBlock} from "/snippets/AuthCodeBlock.jsx"; - - -Lock peut être configuré par le paramètre `options` envoyé au constructeur. Ces options peuvent modifier le comportement du gadget logiciel Lock, la façon dont il gère les connexions, les champs d’inscription supplémentaires dont vous avez besoin pour votre projet, les valeurs de langue et de texte, les couleurs et les images du gadget logiciel, et bien plus encore. Consultez l’index ci-dessous si vous savez ce que vous recherchez, ou parcourez les options pour plus de détails. - -## UI - -| Option | Description | -| --- | --- | -| [allowAutocomplete](#allowautocomplete-boolean-) | Activer ou désactiver la saisie automatique de l’adresse courriel ou du nom d’utilisateur | -| [allowPasswordAutocomplete](#allowpasswordautocomplete-boolean-) | Activer ou désactiver la saisie automatique du mot de passe | -| [allowShowPassword](#allowshowpassword-boolean-) | Précise si l’utilisateur peut choisir d’afficher le mot de passe lors de la saisie | -| [allowedConnections](#allowedconnections-array-) | Liste des connexions qui seront offertes pour effectuer l’authentification | -| [autoclose](#autoclose-boolean-) | Précise si Lock se ferme après une connexion | -| [autofocus](#autofocus-boolean-) | Précise si le premier champ de saisie est mis en évidence | -| [avatar](#avatar-object-) | Précise si un avatar et un nom d’utilisateur doivent être affichés dans l’en-tête de Lock une fois qu’une adresse courriel ou un nom d’utilisateur a été saisi(e), et comment l’obtenir | -| [closable](#closable-boolean-) | Détermine si Lock peut être fermé | -| [container](#container-string-) | L’élément HTML où Lock sera inclus. Lock sera incorporé à l’écran plutôt que dans une fenêtre modale | -| [flashMessage](#flashmessage-object-) | Affiche un message temporaire `error` ou `success` lorsque Lock est affiché | -| [language](#language-string-) | Précise la langue du gadget logiciel | -| [languageDictionary](#languagedictionary-object-) | Texte personnalisé utilisé pour les éléments du gadget logiciel (comme les étiquettes et les paramètres fictifs) | -| [popupOptions](#popupoptions-object-) | Personnalisez l’emplacement de la fenêtre contextuelle à l’écran | -| [rememberLastLogin](#rememberlastlogin-boolean-) | Afficher ou masquer un écran pour vous permettre de vous connecter rapidement avec le compte que vous avez utilisé la dernière fois | -| [scrollGlobalMessagesIntoView](#scrollglobalmessagesintoview-boolean-) | Précise si un globalMessage doit défiler dans la fenêtre de l’utilisateur | - -## Thème - -Ces options sont groupées dans la propriété `theme` de l’objet `options`. - -| Option | Description | -| --- | --- | -| [authButtons](#authbuttons-object-) | Personnaliser l’apparence de certaines touches de connexion | -| [labeledSubmitButton](#labeledsubmitbutton-boolean-) | que la touche de soumission comporte ou non du texte | -| [logo](#logo-string-) | Quel logo utiliser? | -| [primaryColor](#primarycolor-string-) | Couleur de la touche principale du gadget logiciel | - -## Authentification - -Les options d’authentification sont groupées dans la propriété `auth` de l’objet `options`. - -| Option | Description | -| --- | --- | -| [public] (#audience-string-) | L’API qui consommera votre Jeton d’accès | -| [autoParseHash](#autoparsehash-boolean-) | S’il faut ou non analyser automatiquement le hachage et continuer | -| [connectionScopes] (#connectionscopes-object-) | Spécifier les permissions de connexion | -| [params] (#params-object-) | Option pour envoyer des paramètres à la connexion | -| [redirect] (#redirect-boolean-) | Utiliser ou non le mode de redirection | -| [redirect URL](#redirecturl-string-) | L’URL pour rediriger vers après l’authentification | -| [responseMode] (#responsemode-string-) | Option pour envoyer une réponse en POST | -| [responseType] (#responsetype-string-) | Réponse sous forme de code ou de jeton | -| [ssso] (#sso-boolean-) | Détermine si l’authentification unique (SSO) est activée ou non dans Lock | - -## Base de données - -| Option | Description | -| --- | --- | -| [additionalSignUpFields](#additionalsignupfields-array-) | Champs supplémentaires collectés lors de l’inscription. | -| [allowLogin](#allowlogin-boolean-) | Permettre ou ne pas permettre la connexion au gadget logiciel. | -| [allowForgotPassword](#allowforgotpassword-boolean-) | Permettre ou ne pas permettre la réinitialisation du mot de passe du gadget logiciel. | -| [allowSignUp](#allowsignup-boolean-) | Permettre ou ne pas permettre l’inscription au gadget logiciel. | -| [defaultDatabaseConnection](#defaultdatabaseconnection-string-) | Connexion à la DB montrée par défaut. | -| [initialScreen](#initialscreen-string-) | Choix de l’écran affiché à l’ouverture du widget. | -| [loginAfterSignUp](#loginaftersignup-boolean-) | Permettre ou ne pas permettre la connexion automatique suite à l’inscription. | -| [forgotPasswordLink](#forgotpasswordlink-string-) | Lien menant vers une page de réinitialisation du mot de passe. | -| [showTerms](#showterms-boolean-) | Spécifie si les conditions devraient être affichées lors de l’inscription. | -| [mustAcceptTerms](#mustacceptterms-boolean-) | Spécifie si les conditions doivent être acceptées (case à cocher). | -| [prefill](#prefill-object-) | Pré-remplissage des champs courriel et nom d’utilisateur. | -| [signUpLink](#signuplink-string-) | Définir une URL à déclencher lorsque l’utilisateur clique sur « sign up » (Inscription) | -| [usernameStyle](#usernamestyle-string-) | Limiter les valeurs acceptées par le champ username (nom d’utilisateur) à « username » (nom d’utilisateur) ou à « email » (courriel). | - -## Entreprise - -| Option | Description | -| --- | --- | -| [defaultEnterpriseConnection](#defaultenterpriseconnection-string-) | Spécifie une connexion si plus d’une est présente | - -## Sans mot de passe - -| Option | Description | -| --- | --- | -| [passwordlessMethod](#passwordlessmethod-string-) | Lorsque vous utilisez `Auth0LockPasswordless` avec une connexion courriel, vous pouvez utiliser cette option pour choisir entre l’envoi d’un [code](/docs/fr-ca/connections/passwordless/spa-email-code) ou un [magic link](/docs/fr-ca/connections/passwordless/spa-email-link) pour authentifier l’utilisateur | - -### Autres - -| Option | Description | -| --- | --- | -| [configurationBaseUrl](#configurationbaseurl-string-) | Remplacer l’URL de base de votre application | -| [languageBaseUrl](#languagebaseurl-string-) | Remplacer l’URL de base de votre fichier de langue | -| [hashCleanup](#hashcleanup-boolean-) | Remplacer la suppression par défaut du hachage de l’URL | -| [connectionResolver](#connectionresolver-function-) | Fonction de rappel facultative pour choisir une connexion sur la base des informations relatives au nom d’utilisateur | - ---- - -## Options UI - -### allowAutocomplete `{Boolean}` - -Détermine si les champs du courriel ou du nom d’utilisateur autoriseront ou non la saisie semi-automatique (``). La valeur par défaut est false. - -`allowAutocomplete: true` - -### allowPasswordAutocomplete `{Boolean}` - -Détermine si le champ du mot de passe autorisera ou non la saisie semi-automatique (``). La valeur par défaut est `false`. - -Réglez `allowPasswordAutocomplete` à `true` pour la prise en charge du gestionnaire de mots de passe et pour éviter d’autres cas de comportement indésirable. - -`allowPasswordAutocomplete: true` - -### allowShowPassword `{Boolean}` - -Cette option détermine s’il faut ou non ajouter une case à cocher à l’interface utilisateur qui, lorsqu’elle est sélectionnée, permettra à l’utilisateur d’afficher son mot de passe lors de sa saisie. L’option par défaut est `false`. - -`allowShowPassword: true` - -Lock avec le réglage `allowShowPassword` ](/docs/images/ et basculez pour afficher le mot de passe : - -![Lock Option: Allow Show Password](/docs/images/fr-ca/cdy7uua7fh8z/6G8LJaNjaMl5zUrwGi5UJQ/44dc951b70077b0ec6bc04d2f0413b12/lock-allowshowpassword.png) - -### allowedConnections {Array} - -Tableau de connexions qui seront utilisées pour les actions de `signin|signup|reset`. Par défaut pour toutes les connexions activées. - -`allowedConnections: ['Username-Password-Authentication']` - -`allowedConnections: ['twitter', 'facebook', 'linkedin']` - -`allowedConnections: ['qraftlabs.com']` - -Exemples de `allowedConnections`: - -![Lock Option: Allowed Connections - Database](/docs/images/fr-ca/cdy7uua7fh8z/1mllPDLFCCETwQ9MeGEf3W/763728971302656618ef3bd131ab83b1/lock-allowedconnections-database.png) - -![Lock Option: Allowed Connections - Social](/docs/images/fr-ca/cdy7uua7fh8z/7uYN4ebrLLM8bjx1fee8j0/1e716cca3e1bae990063e9226dfe9ac2/lock-allowedconnections-social.png) - -### autoclose `{Boolean}` - -Détermine si Lock sera fermé automatiquement après une connexion réussie. La valeur par défaut est false. Si Lock n'est pas `closable`, il ne sera pas fermé, même si cette option est définie sur true. - -`autoclose: true` - -### autofocus `{Boolean}` - -Si c’est true, le focus est défini sur le premier champ du gadget logiciel. Par défaut sur `false` lorsqu’il est rendu sur un appareil mobile, ou si une option `container` est fournie; par défaut sur `true` dans tous les autres cas. - -`autofocus: false` - -### avatar `{Object}` - -Par défaut, Gravatar est utilisé pour récupérer l’avatar et le nom d’affichage de l’utilisateur, mais vous pouvez les obtenir de n’importe où avec l’option `avatar`. - -```javascript lines -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); - } - } -}; -``` - -Ou, si vous ne souhaitez afficher aucun avatar, passez tout simplement la valeur `null`. - -`avatar: null` - -Comportement par défaut avec](/docs/images/: - -![Lock Option: Avatar](/docs/images/fr-ca/cdy7uua7fh8z/69Nz0QoQifPWpfBZwX15J0/204aad93cde406f0ed3771ce38766f56/lock-avatar.png) - -### closable `{Boolean}` - -Détermine si le verrou peut être fermé ou non. Lorsqu’une option de `container` est fournie, sa valeur est toujours `false`, sinon elle est `true` par défaut. - -`closable: false` - -![Lock Option: Closable](/docs/images/fr-ca/cdy7uua7fh8z/2qwXtPQev1nlpyOQauXKBO/f967e1157972ecbf5b030b3be3600f2e/lock-closable.png) - -### container `{String}` - -L'`identifiant` de l’élément html où le gadget logiciel sera affiché. - -Cela fait apparaître le gadget logiciel en ligne dans votre `div` plutôt que dans une fenêtre contextuelle modale. - -```html lines -
- - -``` - -![Lock Option: Container](/docs/images/fr-ca/cdy7uua7fh8z/5L4S47Yfset2DR9pjcqVrX/1c4d1928cf75acf40129ffd01394bf33/lock-container.png) - -### flashMessage `{Object}` - -Affiche un message éclair `error` ou de `success` lorsque Lock est affiché. Cet objet a les propriétés suivantes : - -* type `{String}`  : Le type de message, les types supportés sont `error`, `info`, et `success` -* text `{String}` : Le texte à afficher. - -```javascript lines -var options = { - flashMessage: { - type: 'success', - text: 'Welcome!' - } -}; -``` - -### language `{String}` - -Spécifie la langue du gadget logiciel. La valeur par défaut est « en ». Consultez le [répertoire d’internationalisation](https://github.com/auth0/lock/blob/master/src/i18n/) pour une liste actuelle des langues fournies. - -`language: 'es'` - -![Lock Option: Language](/docs/images/fr-ca/cdy7uua7fh8z/3u3lytCUBDbcKmXFV34OUv/5cf5d7e1af9593a3b094f32815a4da11/lock-language.png) - -### languageDictionary `{Object}` - -Permet de personnaliser chaque élément de texte affiché dans Lock. La valeur par défaut est {}. Voir [Spécification du dictionnaire de langue](https://github.com/auth0/lock/blob/master/src/i18n/en.js) en anglais pour la liste complète des valeurs `LanguageDictionary` pouvant être modifiées avec cet objet. - -```javascript lines -var options = { - languageDictionary: { - emailInputPlaceholder: "something@youremail.com", - title: "Log me in" - }, -}; -``` - -![Lock Option: Language Dictionary](/docs/images/fr-ca/cdy7uua7fh8z/5203ofwtagtIKGT4HnIPmk/8ad9cdd151a2cdb18b8a42ee47dbf679/lock-languagedictionary.png) - -De plus, consultez la page [Personnalisation des messages d’erreur](/docs/fr-ca/customize/login-pages/classic-login/customize-lock-error-messages) ou la page [Internationalisation](/docs/fr-ca/customize/internationalization-and-localization/lock-internationalization) pour plus d’informations sur l’utilisation de l’option `LanguageDictionary`. - -### popupOptions `{Object}` - -Permet de personnaliser l’emplacement de la fenêtre contextuelle dans l’écran. Toute fonctionnalité de position et de taille autorisée par window.open est acceptée. La valeur par défaut est {}. - -Options pour les fonctionnalités `window.open`. Cela ne s’applique que si la `redirection` est définie sur `false`. - -```javascript lines -var options = { - auth: { - redirect: false - }, - popupOptions: { width: 300, height: 400, left: 200, top: 300 } -}; -``` - -### rememberLastLogin `{Boolean}` - -Détermine s’il faut ou non afficher un écran qui vous permet de vous connecter rapidement avec le compte que vous avez utilisé la dernière fois. -Demande des données d’authentification unique (SSO) et active un message **Dernière fois que vous vous êtes connecté avec**. Par défaut sur `true`. Ces informations proviennent de la session Auth0 de l’utilisateur, cette capacité durera donc aussi longtemps que sa session Auth0 (qui est configurable). - -`rememberLastLogin: false` - -Pour les nouveaux locataires [Seamless SSO est automatiquement activé](/docs/fr-ca/get-started/tenant-settings/enable-sso-for-legacy-tenants). Une fois cette option activée, l’option `RememberLastLogin` ne sera pas pertinente, car si une session est en place, la page de connexion universelle ne sera pas affichée du tout. L’utilisation de Seamless SSO est fortement recommandée, car elle offre une expérience d’authentification transparente : les utilisateurs se connectent une seule fois et n’auront pas à saisir à nouveau leurs informations d’identification lorsqu’ils naviguent dans les applications que vous avez créées ou dans des applications tierces. Si l’utilisateur n’est pas connecté, il sera redirigé vers l’écran de connexion, comme prévu. De plus, le message **Dernière fois que vous vous êtes connecté avec** ne sera pas disponible dans les circonstances suivantes : - -* Vous avez utilisé Lock sur une [page de connexion hébergée](/docs/fr-ca/authenticate/login/auth0-universal-login) avec la session établie à l’aide de l'[authentification sans mot de passe](/docs/fr-ca/connections/passwordless). -* Vous avez utilisé Lock dans un [scénario de connexion intégré](/docs/fr-ca/authenticate/login/universal-vs-embedded-login) où `responseType: code` (indiquant le [flux de code d’autorisation](/docs/fr-ca/get-started/authentication-and-authorization-flow/authorization-code-flow), utilisé pour les applications Web standard). - -### scrollGlobalMessagesIntoView `{Boolean}` - -Détermine si un `globalMessage` doit ou non défiler dans la fenêtre d’affichage de l’utilisateur. Par défaut sur `vrai`. - -`scrollGlobalMessagesIntoView: false` - -## Options de thème - -Ces options sont groupées dans la propriété `theme` de l’objet `options`. - -```javascript lines -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}` - -Permet la personnalisation des boutons dans Lock avec des connexions OAuth2 personnalisées. Chaque connexion personnalisée dont vous souhaitez personnaliser le bouton doit être répertoriée par nom, chacune avec son propre ensemble de paramètres. Les paramètres personnalisables sont énumérés ci-dessous : - -* **displayName** `{String}` : Le nom à afficher à la place du nom de la connexion lors de la création du titre du bouton, par exemple `LOGIN WITH MYCONNECTION` (pour la connexion). -* **primaryColor** `{String}` : couleur d’arrière-plan du bouton. La valeur par défaut est `#eb5424`. -* **foregroundColor** `{String}` : couleur du texte du bouton. La valeur par défaut est `#FFFFFF`. -* **icon** `{String}` : l’URL de l’icône de cette connexion. Par exemple : `http://site.com/logo.png`. - -```javascript lines -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}` - -Cette option indique si le bouton de soumission doit avoir ou non une étiquette et la valeur par défaut est `true`. Lorsqu’il est défini sur `false`, une icône s’affichera à la place. - -```javascript lines -var options = { - theme: { - labeledSubmitButton: false - } -}; -``` - -![Lock Option: Labeled Submit Button](/docs/images/fr-ca/cdy7uua7fh8z/5PNCvsbYa98pKZwWHVPS9S/39cb5ac63818ec5558c451b1e37f735f/lock-theme-labeledsubmitbutton.png) - -Si l’étiquette est définie sur true, ce qui est la valeur par défaut, le texte de l’étiquette peut être personnalisé via l’option [languageDictionary](#languagedictionary-object-). - -### logo `{String}` - -La valeur de `logo` est une URL pour une image qui sera placée dans l’en-tête de Lock, et par défaut le logo d’Auth0. Il a une hauteur maximale recommandée de `58 pixels` pour une meilleure expérience utilisateur. - -```javascript lines -var options = { - theme: { - logo: 'https://example.com/logo.png' - } -}; -``` - -![Lock UI customization - Logo](/docs/images/fr-ca/cdy7uua7fh8z/FdOAKKy71rTbFjIlZEL8D/2eef96008095d85388daaa461707901d/lock-theme-logo.png) - -### primaryColor `{String}` - -La propriété `primaryColor` définit la couleur primaire du Lock; toutes les couleurs utilisées dans le gagdet logiciel seront calculées à partir de cette couleur. Cette option est utile lorsque l’on fournit un `logo` personnalisé, afin de s’assurer que toutes les couleurs s’harmonisent avec la palette de couleurs du `logo`. La valeur par défaut est `#ea5323`. - -```javascript lines -var options = { - theme: { - logo: 'https://example.com/logo.png', - primaryColor: '#31324F' - } -}; -``` - -![Lock UI customization - primary color](/docs/images/fr-ca/cdy7uua7fh8z/1qQjeTmXJyIziv400VPaOn/48dd3cb8a72a6e88b2634b4b8a8bed63/lock-theme-primarycolor.png) - -## Options d’authentification - -Les options d’authentification sont groupées dans la propriété `auth` de l’objet `options`. - -La valeur par défaut de la permission utilisée par Lock est `openid profile email`. - -```javascript lines -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}` - -L’option `audience` indique l’API qui consommera le jeton d’accès reçu après l’authentification. - -export const codeExample = `var options = { - auth: { - audience: 'https://{yourDomain}/userinfo', - } -}`; - - - -### autoParseHash `{Boolean}` - -Lorsque `autoParseHash` est défini sur `true`, Lock analysera la chaîne `window.location.hash` une fois instanciée. S’il est défini sur `false`, vous devrez reprendre manuellement l’authentification à l’aide de la méthode [summaryAuth](/docs/fr-ca/libraries/lock/lock-api-reference). - -```javascript lines -var options = { - auth: { - autoParseHash: false - } -}; -``` - -### connectionScopes `{Object}` - -Cette option vous permet de définir les permissions à envoyer à la connexion oauth2/média social pour l’authentification. - -```javascript lines -var options = { - auth: { - connectionScopes: { - 'facebook': ['scope1', 'scope2'] - } - } -}; -``` - -Une liste de domaines particuliers pour vos connexions aux médias sociaux peut être obtenue auprès du fournisseur en question. Par exemple, la référence [Facebook for Developers](https://developers.facebook.com/docs/facebook-login/permissions/) a une liste d’autorisations distinctes qui peuvent être demandées pour votre connexion. - -### params `{Object}` - -Vous pouvez envoyer des paramètres lors du démarrage d’une connexion en les ajoutant à l’objet options. L’exemple ci-dessous ajoute un paramètre `state` avec une valeur égale à `foo` et ajoute également un paramètre `scope` (qui inclut la permission, puis les attributs demandés). - -```javascript lines -var options = { - auth: { - params: { - state: 'foo', - scope: 'openid email user_metadata app_metadata picture' - } - } -}; -``` - -Pour plus de détails sur les paramètres pris en charge, consultez [Paramètres d’authentification de Lock](/docs/fr-ca/libraries/lock/lock-authentication-parameters). - -### redirect `{Boolean}` - -La valeur par défaut est true. Lorsqu’il est défini sur true, le mode de redirection sera utilisé. S’il est défini sur false, le [mode fenêtre contextuelle](/docs/fr-ca/libraries/lock/lock-authentication-modes) est choisi. - -```javascript lines -var options = { - auth: { - redirect: false - } -}; -``` - -### redirectUrl `{String}` - -L’URL Auth0 de redirectiion après l’authentification. La valeur par défaut est le lien vide "" (pas d’URL de redirection). - -```javascript lines -var options = { - auth: { - redirectUrl: 'http://testurl.com' - } -}; -``` - -Lorsque `redirectUrl` est fourni (défini sur une valeur non vide), l’option `responseType` sera définie par défaut sur `code` si elle n’est pas définie manuellement. - -### responseMode `{String}` - -Doit être défini sur `« form_post »` si vous souhaitez que le code ou le jeton soit transmis via une requête HTTP POST à `​​redirectUrl`, au lieu d’être inclus dans ses parties de requête ou de fragment. - -Sinon, cette option doit être omise et est omise par défaut. - -```javascript lines -var options = { - auth: { - responseMode: 'form_post' - } -}; -``` - -### responseType `{String}` - -La valeur `responseType` doit être définie sur « token » pour les applications à page unique et sur « code » dans le cas contraire. La valeur par défaut est « code » lorsque redirectUrl est fourni, et « token » dans le cas contraire. - -```javascript lines -var options = { - auth: { - responseType: 'token' - } -}; -``` - -Lorsque `responsetype` est défini sur `code`, Lock n’affichera jamais un message **Dernière fois que vous vous êtes connecté avec** et demandera toujours à l’utilisateur ses informations d’identification. - -## sso `{Boolean}` - -La valeur par défaut est vrai. Lorsqu’il est défini sur true, il active l'[authentification unique](/docs/fr-ca/authenticate/single-sign-on) dans Lock. - -```javascript lines -var options = { - auth: { - sso: false - } -}; -``` - -## Options de base de données - -### additionalSignUpFields {Array} - -Des champs de saisie supplémentaires peuvent être ajoutés à l’écran d’inscription avec l’option `additionalSignUpFields`. Chaque option ajoutée de cette manière sera ensuite ajoutée aux `user_metadata` de cet utilisateur. Pour en savoir davantage, consultez [Comprendre le fonctionnement des métadonnées dans les profils utilisateurs](/docs/fr-ca/manage-users/user-accounts/metadata). Chaque entrée doit avoir un `name` et un `paramètre fictif`, et l’URL d’une `icône` peut également être fournie. De plus, la valeur initiale peut être fournie avec l’option `prefill`, qui peut être un lien avec la valeur ou une fonction qui l’obtient. Les autres options dépendent du type du champ, qui est défini via l’option type et par défaut « texte ». - - - -L’option `additionalSingUpFields` sert uniquement pour les inscriptions à une base de données Si vous avez des inscriptions provenant de connexions sociales, vous pouvez demander des informations supplémentaires après l’inscription des utilisateurs (consultez cette [page à propos de l’inscription personnalisée](/docs/fr-ca/libraries/custom-signup) pour en savoir plus). Vous pouvez utiliser la clé `databaseAlternativeSignupInstructions` i18n pour afficher ces instructions. - - - -Les nouveaux champs sont affichés sous les champs de saisie de connexion habituels dans l’ordre dans lequel ils sont fournis. - -#### Champs de texte - -Les champs de texte sont le type par défaut de champ de connexion supplémentaire. À noter qu’une fonction `validator` peut également être fournie. - -```javascript lines -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" - }] -} -``` - -Si vous ne spécifiez pas de `validator`, le champ de texte sera **obligatoire**. Si vous souhaitez rendre le champ de texte facultatif, utilisez un validateur qui renvoie toujours `true` comme ceci : - -```javascript lines -var options = { - additionalSignUpFields: [{ - name: "favorite_color", - placeholder: "Enter your favorite color (optional)", - validator: function() { - return true; - } - }] -} -``` - -Si vous souhaitez enregistrer la valeur de l’attribut à la racine de votre profil, utilisez le `storage: 'root'`. Seul un sous-ensemble de valeurs peut être stocké de cette manière. La liste des attributs pouvant être ajoutés à votre profil root est [ici](/docs/fr-ca/api/management/v2#!/Users/patch_users_by_id). Par défaut, chaque champ de connexion supplémentaire est stocké dans l’objet user_metadata. - -```javascript lines -var options = { - additionalSignUpFields: [{ - name: "name", - storage: "root" - }] -}; -``` - -![Lock Option: Additional Signup Fields](/docs/images/fr-ca/cdy7uua7fh8z/2KPDGZb3caq57caJ90w53k/e092bdb4a4d93589aa006f796ff20fca/lock-additionalsignupfields.png) - -#### Sélectionnez un champ - -Le champ de connexion `type: "select"` vous permettra d’utiliser des éléments de sélection parmi lesquels l’utilisateur pourra choisir une valeur. - -```javascript lines -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" - }] -} -``` - -Les éléments du tableau `options` pour les champs `select` doivent respecter le format suivant : -`{label: “non empty string”, value: “non empty string”}`, et au moins une option doit être définie. - -Les valeurs `options` et `prefill` peuvent être fournies via une fonction : - -```javascript lines -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); - } - }] -} -``` - -#### Champ de case à cocher - -Le troisième type de champ de connexion personnalisé est `type: "checkbox"`. La valeur `préremplissage` peut déterminer l’état par défaut de la case à cocher (`true` ou `false`), et elle est obligatoire. - -```javascript lines -var options = { - additionalSignUpFields: [{ - type: "checkbox", - name: "newsletter", - prefill: "true", - placeholder: "I hereby agree that I want to receive marketing emails from your company" - }] -} -``` - -#### Champ invisible - -Le champ de connexion `type "hidden"` : vous permettra d’utiliser une entrée cachée avec une valeur fixe. - -```javascript lines -var options = { - additionalSignUpFields: [{ - type: "hidden", - name: "signup_code", - value: "abc123" - }] -} -``` - -Certains cas d’utilisation peuvent être en mesure d’utiliser des données `additionalSignUpFields` pour les modèles de courriels, comme une option pour les préférences linguistiques, dont la valeur pourrait ensuite être utilisée pour définir la langue des communications par courriel modélisées. - -### allowLogin `{Boolean}` - -Lorsqu’il est défini sur `false`, le gadget logiciel n’affichera pas l’écran de connexion. Ceci est utile si vous souhaitez utiliser le gadget logiciel uniquement pour les inscriptions (les onglets de connexion et d’inscription dans l’écran d’inscription seront masqués) ou pour réinitialiser les mots de passe (le bouton de retour dans l’écran de mot de passe oublié sera masqué). Dans de tels cas, vous devrez peut-être également spécifier les options `initialScreen`, `AllowForgotPassword` et `AllowSignUp`. La valeur par défaut est `true`. - -`allowLogin: false` - -![Lock Option: Allow Login](/docs/images/fr-ca/cdy7uua7fh8z/6gI4aSLHXLzhcHiR9aWMET/d05c2a08a3895278b01150ecf894cb5f/lock-allowlogin.png) - -### allowForgotPassword `{Boolean}` - -Lorsqu’il est défini sur false, `allowForgotPassword` masque le lien « Vous ne vous souvenez pas de votre mot de passe? » dans l’écran de connexion, rendant l’écran Mot de passe oublié inaccessible. La valeur par défaut est vrai. Si vous utilisez une connexion à une base de données personnalisée qui ne dispose pas d’un script de modification du mot de passe, l’écran Mot de passe oublié ne sera pas disponible. - -`allowForgotPassword: false` - -![Lock Option: Allow Forgot Password](/docs/images/fr-ca/cdy7uua7fh8z/1L6wJS3UnWK1VGKYMFhAB9/2ddcf2d462255e78a8b78958c2503809/lock-allowforgotpassword.png) - -### allowSignUp `{Boolean}` - -Lorsqu’il est défini sur `false`, masque les onglets de connexion et d’inscription dans l’écran de connexion, rendant l’écran de connexion inaccessible. Par défaut sur `vrai`. Gardez à l’esprit que si la connexion à la base de données a désactivé les inscriptions ou si vous utilisez une base de données personnalisée qui ne dispose pas de script de création, l’écran de connexion ne sera pas disponible. - -Gardez également à l’esprit que cette option contrôle **uniquement** l’apparence côté client et n’arrête pas complètement les nouvelles connexions de visiteurs anonymes déterminés. Si vous souhaitez empêcher complètement la connexion de nouveaux utilisateurs, vous devez utiliser l’option **Disable Sign Ups (Désactiver les connexions)** dans le tableau de bord, dans les paramètres de connexion. - -`allowSignUp: false` - -![Lock Option: Allow Signup](/docs/images/fr-ca/cdy7uua7fh8z/2BNlYe99EFlRmIlhoLZiEB/f280d865cb16fa5fecda952271cb18bf/lock-allowsignup.png) - -### defaultDatabaseConnection `{String}` - -Spécifie la connexion à la base de données qui sera utilisée lorsqu’il y en a plusieurs disponibles. - -`defaultDatabaseConnection: 'test-database'` - -### initialScreen `{String}` - -Le nom de l’écran qui sera affiché à l’ouverture du gadget logiciel. Les valeurs valides sont `connexion`, `s’inscrire` et `Mot de passe oublié`. Si cette option n’est pas spécifiée, le gadget logiciel affichera par défaut le premier écran disponible dans cette liste. - -`initialScreen: 'forgotPassword'` - -### loginAfterSignUp `{Boolean}` - -Détermine si l’utilisateur sera automatiquement connecté ou non après une inscription réussie. Par défaut sur `vrai`. - -`loginAfterSignUp: false` - -### forgotPasswordLink `{String}` - -Définissez l’URL d’une page qui permet à l’utilisateur de réinitialiser son mot de passe. Lorsqu’il est défini sur un lien non vide, l’utilisateur sera redirigé vers l’URL fournie lorsqu’il cliquera sur le lien « Vous ne vous souvenez pas de votre mot de passe? dans l’écran de connexion. - -`forgotPasswordLink: 'https://yoursite.com/reset-password'` - -### showTerms `{Boolean}` - -Lorsqu’il est défini sur `true`, affiche le lien `languageDictionary.signUpTerms`. Par défaut sur `vrai`. - -`showTerms: false` - -### mustAcceptTerms `{Boolean}` - -Une fois définie sur `true`, affiche une case à cocher à côté des modalités qui doivent être vérifiées avant de procéder à l’inscription. Les modalités peuvent être spécifiées à l’aide de l’option `languageDictionary`. Cette option ne prendra effet que pour les utilisateurs s’inscrivant avec des connexions à la base de données. La valeur par défaut est false. - -`mustAcceptTerms: true` - -### prefill `{Object}` - -Permet de définir la valeur initiale des entrées courriel et/ou nom d’utilisateur. En cas d’omission, aucune valeur initiale ne sera fournie. - -```javascript lines -var options = { - prefill: { - email: "someone@auth0.com", - username: "someone", - phoneNumber: "+1234567890" - } -}; -``` - -### signUpLink `{String}` - -Définissez l’URL à demander en cliquant sur le bouton d’inscription. Lorsqu’elle est définie sur un lien non vide, cette option force `Permettre l’inscription` à `true`. - -`signUpLink: 'https://yoursite.com/signup'` - -### usernameStyle `{String}` - -Détermine ce qui sera utilisé pour identifier l’utilisateur pour une connexion à la base de données dont l’option `require_username` est défini (s’il n’est pas défini, l’option `usernameStyle` sera ignorée). Les valeurs possibles sont `"username"` and `"email"`. Par défaut, `username` et `email` sont autorisés; la définition de cette option limitera les connexions à utiliser l’un ou l’autre. - -`usernameStyle: 'username'` - -## Options Entreprise - -### defaultEnterpriseConnection `{String}` - -Spécifie la connexion d’entreprise qui permet de se connecter à l’aide d’un nom d’utilisateur et d’un mot de passe qui seront utilisés lorsqu’il y en a plusieurs disponibles ou qu’il existe une connexion à une base de données. Si `defaultDatabaseConnection` est fourni, la connexion à la base de données sera utilisée et cette option sera ignorée. - -`defaultEnterpriseConnection: 'test-database'` - -### defaultADUsernameFromEmailPrefix `{Boolean}` - -Résolvez le nom d’utilisateur de l’espace réservé AD à partir du préfixe du courriel. Par défaut sur `vrai`. - -`defaultADUsernameFromEmailPrefix: false` - -## Options sans mot de passe - -### passwordlessMethod `{String}` - -Lorsque vous utilisez `Auth0LockPasswordless` avec une connexion de messagerie, vous pouvez utiliser cette option pour choisir entre l’envoi d’un [code](/docs/fr-ca/connections/passwordless/spa-email-code) ou d’un [lien magique](/docs/fr-ca/connections/passwordless/spa-email-link) pour authentifier l’utilisateur. Les valeurs disponibles pour les connexions de messagerie sont `code` et `lien`. Par défaut à `code`. Les connexions SMS sans mot de passe utiliseront toujours `code`. - -`passwordlessMethod: code` - -## Autres options - -### configurationBaseUrl `{String}` - -Remplace l’URL de base des paramètres de l’application. Par défaut, utilise le domaine fourni. Cette option n’est nécessaire que si votre cas d’utilisation spécifique exige que votre application n’utilise pas le comportement par défaut. - -`configurationBaseUrl: "https://www.example.com"` - -### languageBaseUrl `{String}` - -Remplace l’URL source de la langue pour les traductions fournies par Auth0. Par défaut, cette option utilise l’URL `https://cdn.auth0.com` CDN d’Auth0 puisque c’est là que sont stockées toutes les traductions fournies. En fournissant une autre valeur, vous pouvez utiliser une autre source pour les traductions si nécessaire. - -`languageBaseUrl: "https://www.example.com"` - -### hashCleanup `{Boolean}` - -Lorsque l’option `hashCleanup` est activée, elle supprimera la partie hachage de l’URL de rappel après l’authentification de l’utilisateur. La valeur par défaut est true. - -`hashCleanup: false` - -### connectionResolver {Function} - -Lorsqu’il est utilisé, fournit un point d’extensibilité pour permettre de choisir la connexion à utiliser en fonction des informations du nom d’utilisateur. - -Possède les paramètres `username`, `context`, et `callback`. Le rappel attend un objet comme : `{type: 'database', name: 'connection name'}`. **Cela ne fonctionne que pour les connexions à la base de données.** Gardez à l’esprit que ce résolveur s’exécutera dans l’événement `onSubmit` du formulaire, alors restez simple et rapide. - -Il s’agit d’une fonctionnalité bêta. Si vous trouvez un bogue, veuillez le signaler via une [issue](https://github.com/auth0/lock/issues/new) sur GitHub. - -### leeway {Integer} - -L’option `leeway` peut être définie sur un nombre entier - une valeur en secondes - qui peut être utilisée pour tenir compte du décalage d’horloge dans les expirations des jetons d’ID. Généralement, la valeur ne dépasse pas une minute ou deux au maximum. - -`leeway: 30` \ No newline at end of file diff --git a/main/docs/fr-ca/libraries/lock/lock-ui-customization.mdx b/main/docs/fr-ca/libraries/lock/lock-ui-customization.mdx deleted file mode 100644 index 5c8d5187fd..0000000000 --- a/main/docs/fr-ca/libraries/lock/lock-ui-customization.mdx +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: "Lock UI Customization" -'description': "Customizing the appearance of your Lock widget can be important for branding and a cohesive UI, and this resource highlights the ways in which you can do so while implementing Lock in your project." ---- - -You can customize the appearance of your Lock widget in a few different ways. The best and safest way to do so is with the provided JavaScript options. - -## JavaScript Options - -You can set up a variety of customizations to your Lock via the `options` parameter when you instantiate your Lock. Some of them allow you to customize your UI. The UI customization options are a work in progress - we expect to be adding more as we go. - -First, you'll define the `options` object, containing whichever options you're wanting to customize. Then you'll need to include that options object as the third parameter when you instantiate Lock; more on that below. - -### Theming Options - -There are a couple of theming options currently available, namespaced under the `theme` property. - -#### logo `{String}` - -![Lock UI customization - Logo](/docs/images/fr-ca/cdy7uua7fh8z/FdOAKKy71rTbFjIlZEL8D/2eef96008095d85388daaa461707901d/lock-theme-logo.png) - -The value for `logo` is a URL for an image that will be placed in the Lock's header, and defaults to Auth0's logo. The minimum recommended resolution is 200 pixels (width) by 200 pixels (height). - -```javascript lines -var options = { - theme: { - logo: 'https://example.com/logo.png' - } -}; -``` - -#### primaryColor `{String}` - -![Lock UI customization - primary color](/docs/images/fr-ca/cdy7uua7fh8z/1qQjeTmXJyIziv400VPaOn/48dd3cb8a72a6e88b2634b4b8a8bed63/lock-theme-primarycolor.png) - -The `primaryColor` property defines the primary color of the Lock; all colors used in the widget will be calculated from it. This option is useful when providing a custom `logo`, to ensure all colors go well together with the `logo`'s color palette. Defaults to `#ea5323`. - -```javascript lines -var options = { - theme: { - logo: 'https://example.com/logo.png', - primaryColor: '#31324F' - } -}; -``` - -#### authButtons `{Object}` - -Allows the customization of buttons in Lock. Each custom connection whose button you desire to customize should be listed by name, each with their own set of parameters. The customizable parameters are listed below: - -* **displayName** `{String}`: The name to show instead of the connection name when building the button title, such as `LOGIN WITH MYCONNECTION` for login). -* **primaryColor** `{String}`: The button's background color. Defaults to `#eb5424`. -* **foregroundColor** `{String}`: The button's text color. Defaults to `#FFFFFF`. -* **icon** `{String}`: The URL of the icon for this connection. For example: `http://site.com/logo.png`. - -```javascript lines -var options = { - theme: { - authButtons: { - "testConnection": { - displayName: "Test Conn", - primaryColor: "#b7b7b7", - foregroundColor: "#000000", - icon: "http://example.com/icon.png" - }, - "testConnection2": { - primaryColor: "#000000", - foregroundColor: "#ffffff", - } - } - } -}; -``` - -### Customizing Text - -The `languageDictionary` option allows customization of every piece of text displayed in the Lock. Defaults to {}. See below for an example. - -```javascript lines -var options = { - languageDictionary: { - emailInputPlaceholder: "something@youremail.com", - title: "Log me in" - }, -}; -``` - -![Customizing text in the Lock UI via languageDictionary option](/docs/images/fr-ca/cdy7uua7fh8z/iNvBLxxmea2tiWBhzwKX5/db0d7f86d0f7f95f70e5edcd34ab736f/lock-languagedictionary.png) - -For a complete list of the items able to be customized using `languageDictionary`, see the [English Language Dictionary Specification](https://github.com/auth0/lock/blob/master/src/i18n/en.js) in the repository. - -### Instantiating Lock - -Finally, you'll want to go ahead and instantiate your Lock, with the `options` object that you've defined with your custom options in it. - -`var lock = new Auth0Lock('{yourClientId}', '{yourDomain}', options);` - -## Overriding CSS - -Customizing your Lock by overriding its CSS isn't recommended. The issue is that with new releases of Lock, some styling may change, leading to unintended problems if you are overriding the CSS. Additionally, it's possible to simply overlook use of styles in other places and while the change may look fine in one view, it might not in another. - -If you still intend to override CSS to further style your Lock, we recommend that you use a specific patch version of Lock rather than a major or minor version, so that you limit the amount of unexpected results that may occur when you alter the styles, and then another patch is deployed that might cause unexpected behavior in your UI due to the changes. This can be done by ensuring that you specify that patch version (`x.y.z`) when including Lock, or downloading it. - -Additionally, we of course recommend that you test your CSS changes exhaustively, to ensure that the experience is the one you intend it to be for your customers. - -## Further Information - -If you're looking for more detailed information while working to customize Lock for your application, check out the [configuration options](/docs/fr-ca/libraries/lock/lock-configuration) page or the [Lock API](/docs/fr-ca/libraries/lock/lock-api-reference) page! - -If you have specific theming options that you would like to see added, let us know. We are working on improving the customization options that are available through JavaScript, and this list will be updated as new options are added. \ No newline at end of file diff --git a/main/docs/get-started/architecture-scenarios/b2e.mdx b/main/docs/get-started/architecture-scenarios/b2e.mdx index 28a2c7d8b2..d2746e38e0 100644 --- a/main/docs/get-started/architecture-scenarios/b2e.mdx +++ b/main/docs/get-started/architecture-scenarios/b2e.mdx @@ -61,7 +61,7 @@ You can also integrate purchased applications with Auth0 for Single Sign-on (SS Branding is an important part of any application. Your logo, colors and styles should be consistent in all parts of the application. You can [customize](/docs/libraries/custom-signup) the login, signup, and error pages displayed by Auth0 so it matches your application. Add your own logo, text, and colors. There's also I18N/L10N support for global rollouts. [Emails for verification or password resets](/docs/customize/email/email-templates) are customizable too. -[Login screens](/docs/libraries/lock/lock-ui-customization) should appear to come from your application’s branded domain name. To maintain consistency, you can define a [custom domain name](/docs/customize/custom-domains) for the login screen displayed by Auth0. +Login screens should appear to come from your application’s branded domain name. To maintain consistency, you can define a [custom domain name](/docs/customize/custom-domains) for the login screen displayed by Auth0. ## Multi-factor authentication diff --git a/main/docs/get-started/architecture-scenarios/business-to-business/authentication.mdx b/main/docs/get-started/architecture-scenarios/business-to-business/authentication.mdx index c2af6801e5..527db380f7 100644 --- a/main/docs/get-started/architecture-scenarios/business-to-business/authentication.mdx +++ b/main/docs/get-started/architecture-scenarios/business-to-business/authentication.mdx @@ -108,7 +108,7 @@ Though it is possible to implement Identifier First Login or allow a user to sel The simplest way to implement home realm discovery on the universal login page is to utilize the email subdomain of the user’s identifier to map that to their Identity Provider. This, of course, only works in situations where the email subdomain will be a 1:1 mapping to an organization or at least to an Identity Provider. -Auth0’s [Lock](/docs/libraries/lock) widget or [Universal Login](/docs/authenticate/login/auth0-universal-login/universal-login-vs-classic-login/universal-experience) can do this for you if you are using the domain map in an enterprise connection; however, if you want to build this yourself, you can, but it requires you to build a mapping of email subdomain to connection. +[Universal Login](/docs/authenticate/login/auth0-universal-login/universal-login-vs-classic-login/universal-experience) can do this for you if you are using the domain map in an enterprise connection; however, if you want to build this yourself, you can, but it requires you to build a mapping of email subdomain to connection. Additionally, when using the Universal Login experience, the [Organizations Feature](/docs/manage-users/organizations/organizations-overview) will help you in two ways: diff --git a/main/docs/get-started/architecture-scenarios/business-to-business/launch/testing.mdx b/main/docs/get-started/architecture-scenarios/business-to-business/launch/testing.mdx index eb81e89f7c..66c8e92bc5 100644 --- a/main/docs/get-started/architecture-scenarios/business-to-business/launch/testing.mdx +++ b/main/docs/get-started/architecture-scenarios/business-to-business/launch/testing.mdx @@ -12,7 +12,7 @@ Quality Assurance is important in identifying issues before they impact your cus * How will your application perform when subjected to unexpected production loads? * How can you ensure your application is safe from security-related vulnerabilities? -Auth0 [Universal Login](/docs/authenticate/login/auth0-universal-login) and associated UI widgets (such as [Lock](/docs/libraries/lock)) have already been designed and built following usability and accessibility best practices, and provide tested out-of-box support for a whole host of [browsers and devices](/docs/troubleshoot/customer-support/product-support-matrix). Support for [internationalization](/docs/customize/internationalization-and-localization) (I18N) is also provided out-of-box, with built-in extensibility designed for custom multi-language and localization (L10N) situations. +Auth0 [Universal Login](/docs/authenticate/login/auth0-universal-login) have already been designed and built following usability and accessibility best practices, and provide tested out-of-box support for a whole host of [browsers and devices](/docs/troubleshoot/customer-support/product-support-matrix). Support for [internationalization](/docs/customize/internationalization-and-localization) (I18N) is also provided out-of-box, with built-in extensibility designed for custom multi-language and localization (L10N) situations. To ensure functional requirements are met and unexpected events are handled correctly, guidance is provided for testing the [integration](#integration-testing) between your application(s) and Auth0, and for [unit testing](#unit-testing) individual extensibility modules (such as [Rules](/docs/customize/rules/debug-rules), [Hooks](/docs/customize/hooks/update-hooks), and Custom Database scripts). Guidance is also provided regarding Auth0's [penetration testing policy](/docs/troubleshoot/customer-support/operational-policies/penetration-testing-policy) to help when testing for security vulnerability, and also how [Mock](#mock-testing) testing can be leveraged in conjunction with our [load testing policy](/docs/troubleshoot/customer-support/operational-policies/load-testing-policy) to help ensure your application(s) perform under unexpected load. diff --git a/main/docs/get-started/architecture-scenarios/business-to-business/quality-assurance.mdx b/main/docs/get-started/architecture-scenarios/business-to-business/quality-assurance.mdx index e99867fda6..3b1940fd80 100644 --- a/main/docs/get-started/architecture-scenarios/business-to-business/quality-assurance.mdx +++ b/main/docs/get-started/architecture-scenarios/business-to-business/quality-assurance.mdx @@ -10,7 +10,7 @@ Quality Assurance is important in identifying issues before they impact your cus * How will your application perform when subjected to unexpected production loads? * How can you ensure your application is safe from security-related vulnerabilities? -Auth0 [Universal Login](/docs/authenticate/login/auth0-universal-login) and associated UI widgets (such as [Lock](/docs/libraries/lock)) have already been designed and built following usability and accessibility best practices, and provide tested out-of-box support for a whole host of [browsers and devices](/docs/troubleshoot/customer-support/product-support-matrix). Support for [internationalization](/docs/customize/internationalization-and-localization) (I18N) is also provided out-of-box, with built-in extensibility designed for custom multi-language and localization (L10N) situations. +Auth0 [Universal Login](/docs/authenticate/login/auth0-universal-login) have already been designed and built following usability and accessibility best practices, and provide tested out-of-box support for a whole host of [browsers and devices](/docs/troubleshoot/customer-support/product-support-matrix). Support for [internationalization](/docs/customize/internationalization-and-localization) (I18N) is also provided out-of-box, with built-in extensibility designed for custom multi-language and localization (L10N) situations. To ensure functional requirements are met and unexpected events are handled correctly, guidance is provided for testing the [integration](#integration-testing) between your application(s) and Auth0, and for [unit testing](#unit-testing) individual extensibility modules (such as [Rules](/docs/customize/rules/debug-rules), [Hooks](/docs/customize/hooks/update-hooks), and Custom Database scripts). Guidance is also provided regarding Auth0's [penetration testing policy](/docs/troubleshoot/customer-support/operational-policies/penetration-testing-policy) to help when testing for security vulnerability, and also how [Mock](#mock-testing) testing can be leveraged in conjunction with our [load testing policy](/docs/troubleshoot/customer-support/operational-policies/load-testing-policy) to help ensure your application(s) perform under unexpected load. diff --git a/main/docs/get-started/architecture-scenarios/business-to-consumer/launch/testing.mdx b/main/docs/get-started/architecture-scenarios/business-to-consumer/launch/testing.mdx index 3c50ba8082..ae8e8af438 100644 --- a/main/docs/get-started/architecture-scenarios/business-to-consumer/launch/testing.mdx +++ b/main/docs/get-started/architecture-scenarios/business-to-consumer/launch/testing.mdx @@ -12,7 +12,7 @@ Quality Assurance is important in identifying issues before they impact your cus * How will your application perform when subjected to unexpected production loads? * How can you ensure your application is safe from security-related vulnerabilities? -Auth0 [Universal Login](/docs/authenticate/login/auth0-universal-login) and associated UI widgets (such as [Lock](/docs/libraries/lock)) have already been designed and built following usability and accessibility best practices, and provide tested out-of-box support for a whole host of [browsers and devices](/docs/troubleshoot/customer-support/product-support-matrix). Support for [internationalization](/docs/customize/internationalization-and-localization) (I18N) is also provided out-of-box, with built-in extensibility designed for custom multi-language and localization (L10N) situations. +Auth0 [Universal Login](/docs/authenticate/login/auth0-universal-login) have already been designed and built following usability and accessibility best practices, and provide tested out-of-box support for a whole host of [browsers and devices](/docs/troubleshoot/customer-support/product-support-matrix). Support for [internationalization](/docs/customize/internationalization-and-localization) (I18N) is also provided out-of-box, with built-in extensibility designed for custom multi-language and localization (L10N) situations. To ensure functional requirements are met and unexpected events are handled correctly, guidance is provided for testing the [integration](#integration-testing) between your application(s) and Auth0, and for [unit testing](#unit-testing) individual extensibility modules (such as [Rules](/docs/customize/rules/debug-rules), [Hooks](/docs/customize/hooks/update-hooks), and Custom Database scripts). Guidance is also provided regarding Auth0's [penetration testing policy](/docs/troubleshoot/customer-support/operational-policies/penetration-testing-policy) to help when testing for security vulnerability, and also how [Mock](#mock-testing) testing can be leveraged in conjunction with our [load testing policy](/docs/troubleshoot/customer-support/operational-policies/load-testing-policy) to help ensure your application(s) perform under unexpected load. diff --git a/main/docs/get-started/architecture-scenarios/business-to-consumer/quality-assurance.mdx b/main/docs/get-started/architecture-scenarios/business-to-consumer/quality-assurance.mdx index c04232795b..b0831412fd 100644 --- a/main/docs/get-started/architecture-scenarios/business-to-consumer/quality-assurance.mdx +++ b/main/docs/get-started/architecture-scenarios/business-to-consumer/quality-assurance.mdx @@ -10,7 +10,7 @@ Quality Assurance is important in identifying issues before they impact your cus * How will your application perform when subjected to unexpected production loads? * How can you ensure your application is safe from security-related vulnerabilities? -Auth0 [Universal Login](/docs/authenticate/login/auth0-universal-login) and associated UI widgets (such as [Lock](/docs/libraries/lock)) have already been designed and built following usability and accessibility best practices, and provide tested out-of-box support for a whole host of [browsers and devices](/docs/troubleshoot/customer-support/product-support-matrix). Support for [internationalization](/docs/customize/internationalization-and-localization) (I18N) is also provided out-of-box, with built-in extensibility designed for custom multi-language and localization (L10N) situations. +Auth0 [Universal Login](/docs/authenticate/login/auth0-universal-login) have already been designed and built following usability and accessibility best practices, and provide tested out-of-box support for a whole host of [browsers and devices](/docs/troubleshoot/customer-support/product-support-matrix). Support for [internationalization](/docs/customize/internationalization-and-localization) (I18N) is also provided out-of-box, with built-in extensibility designed for custom multi-language and localization (L10N) situations. To ensure functional requirements are met and unexpected events are handled correctly, guidance is provided for testing the [integration](#integration-testing) between your application(s) and Auth0, and for [unit testing](#unit-testing) individual extensibility modules (such as [Rules](/docs/customize/rules/debug-rules), [Hooks](/docs/customize/hooks/update-hooks), and Custom Database scripts). Guidance is also provided regarding Auth0's [penetration testing policy](/docs/troubleshoot/customer-support/operational-policies/penetration-testing-policy) to help when testing for security vulnerability, and also how [Mock](#mock-testing) testing can be leveraged in conjunction with our [load testing policy](/docs/troubleshoot/customer-support/operational-policies/load-testing-policy) to help ensure your application(s) perform under unexpected load. diff --git a/main/docs/get-started/architecture-scenarios/sso-for-regular-web-apps/part-3.mdx b/main/docs/get-started/architecture-scenarios/sso-for-regular-web-apps/part-3.mdx index 2ba19f440b..62ccb68ec1 100644 --- a/main/docs/get-started/architecture-scenarios/sso-for-regular-web-apps/part-3.mdx +++ b/main/docs/get-started/architecture-scenarios/sso-for-regular-web-apps/part-3.mdx @@ -27,7 +27,7 @@ You may however want to avoid that first step, where the user needs to choose th + There are multiple practical ways of getting the `connection` value. One of them is to use **vanity URLs**: for example, company employees will use `https://internal.yoursite.com`, while external contractors will use `https://external.yoursite.com`. * **Use email domains**: Lock can use email domains as a way of routing authentication requests. Enterprise connections in Auth0 can be mapped to `domains`. If a connection has this setup, then the password textbox gets disabled automatically when typing an email with a mapped domain. Note that you can associate multiple domains to a single connection. -For additional information on this topic refer to [Select from Multiple Connection Options](/docs/libraries/lock/selecting-from-multiple-connection-options). + ## Session Management diff --git a/main/docs/get-started/auth0-overview/create-applications/machine-to-machine-apps.mdx b/main/docs/get-started/auth0-overview/create-applications/machine-to-machine-apps.mdx index 80e5b673b3..4c313e3136 100644 --- a/main/docs/get-started/auth0-overview/create-applications/machine-to-machine-apps.mdx +++ b/main/docs/get-started/auth0-overview/create-applications/machine-to-machine-apps.mdx @@ -39,7 +39,7 @@ Once you have registered and configured your application, some common next steps * Modify your app code to use your Auth0-registered application. See our [Auth0 Quickstarts](/docs/quickstarts), where you'll find detailed instructions and samples for a variety of technologies. You'll also learn how to implement login and logout, handle your user sessions, retrieve and display user profile information, and more. * Use [Auth0 APIs](/docs/api). - + The [Authentication API](https://auth0.com/docs/api/authentication) handles all primary identity-related functions (for example, login, logout, and get user profile). Most users consume this API through our Quickstarts, the [Auth0.js library](/docs/libraries/auth0js), or the [Lock widget](/docs/libraries/lock). However, if you are building all of your authentication UI manually, you will have to interact with this API directly. + + The [Authentication API](https://auth0.com/docs/api/authentication) handles all primary identity-related functions (for example, login, logout, and get user profile). Most users consume this API through our Quickstarts, our Auth0 SDKs. However, if you are building all of your authentication UI manually, you will have to interact with this API directly. + The [Management API](https://auth0.com/docs/api/management/v2) allows you to automate various tasks that can also be accessed via the Dashboard in Auth0 (for example: creating users, setting application grant types). ## Learn more diff --git a/main/docs/get-started/auth0-overview/create-applications/native-apps.mdx b/main/docs/get-started/auth0-overview/create-applications/native-apps.mdx index c7a3421ee2..5c3052960a 100644 --- a/main/docs/get-started/auth0-overview/create-applications/native-apps.mdx +++ b/main/docs/get-started/auth0-overview/create-applications/native-apps.mdx @@ -34,7 +34,7 @@ Once you have registered and configured your application, some common next steps * Modify your app code to use your Auth0-registered application. See our [Auth0 Quickstarts](/docs/quickstarts), where you'll find detailed instructions and samples for a variety of technologies. You'll also learn how to implement login and logout, handle your user sessions, retrieve and display user profile information, and more. * Use [Auth0 APIs](/docs/api). - + The [Authentication API](https://auth0.com/docs/api/authentication) handles all primary identity-related functions (for example, login, logout, and get user profile). Most users consume this API through our Quickstarts, the [Auth0.js library](/docs/libraries/auth0js), or the [Lock widget](/docs/libraries/lock). However, if you are building all of your authentication UI manually, you will have to interact with this API directly. + + The [Authentication API](https://auth0.com/docs/api/authentication) handles all primary identity-related functions (for example, login, logout, and get user profile). Most users consume this API through our Quickstarts, our Auth0 SDKs. However, if you are building all of your authentication UI manually, you will have to interact with this API directly. + The [Management API](https://auth0.com/docs/api/management/v2) allows you to automate various tasks that can also be accessed via the Dashboard in Auth0 (for example: creating users, setting application grant types). ## Learn more diff --git a/main/docs/get-started/auth0-overview/create-applications/regular-web-apps.mdx b/main/docs/get-started/auth0-overview/create-applications/regular-web-apps.mdx index 36b37d297d..23ffe23d63 100644 --- a/main/docs/get-started/auth0-overview/create-applications/regular-web-apps.mdx +++ b/main/docs/get-started/auth0-overview/create-applications/regular-web-apps.mdx @@ -31,7 +31,7 @@ Once you have registered and configured your application, follow these next step 2. Implement authentication in your app code by using your Auth0-registered application. See our [Auth0 Quickstarts](/docs/quickstarts), where you'll find detailed instructions and samples for a variety of technologies. You'll also learn how to implement login and logout, handle your user sessions, retrieve and display user profile information, and more. * Use [Auth0 APIs](/docs/api). - + The [Authentication API](https://auth0.com/docs/api/authentication) handles all primary identity-related functions (for example, login, logout, and get user profile). Most users consume this API through our Quickstarts, the [Auth0.js library](/docs/libraries/auth0js), or the [Lock widget](/docs/libraries/lock). However, if you are building all of your authentication UI manually, you can interact with this API directly. + + The [Authentication API](https://auth0.com/docs/api/authentication) handles all primary identity-related functions (for example, login, logout, and get user profile). Most users consume this API through our Quickstarts, our Auth0 SDKs. However, if you are building all of your authentication UI manually, you can interact with this API directly. + The [Management API](https://auth0.com/docs/api/management/v2) allows you to automate various tasks that you can also access via the Auth0 Dashboard (for example, creating users and setting application grant types). ## Learn more diff --git a/main/docs/get-started/auth0-overview/create-applications/single-page-web-apps.mdx b/main/docs/get-started/auth0-overview/create-applications/single-page-web-apps.mdx index 521474c698..a7ed9da96e 100644 --- a/main/docs/get-started/auth0-overview/create-applications/single-page-web-apps.mdx +++ b/main/docs/get-started/auth0-overview/create-applications/single-page-web-apps.mdx @@ -30,7 +30,7 @@ Once you have registered your application, review and complete these configurati * Modify your app code to use your Auth0-registered application. Review our [Auth0 Quickstarts](/docs/quickstarts), where you'll find detailed instructions on how to implement login and logout, handle your user sessions, retrieve and display user profile information, and more. * Use [Auth0 APIs](/docs/api). - + The [Authentication API](https://auth0.com/docs/api/authentication) handles all primary identity-related functions (for example, login, logout, and get user profile). Most users consume this API through our Quickstarts, the [Auth0 SPA SDK](/docs/libraries/auth0-spa-js), or the [Lock widget](/docs/libraries/lock). For legacy applications, see the [Auth0.js library](/docs/libraries/auth0js). However, if you are building all of your authentication UI manually, you will have to interact with this API directly. + + The [Authentication API](https://auth0.com/docs/api/authentication) handles all primary identity-related functions (for example, login, logout, and get user profile). Most users consume this API through our Quickstarts, the [Auth0 SPA SDK](/docs/libraries/auth0-single-page-app-sdk). However, if you are building all of your authentication UI manually, you will have to interact with this API directly. + The [Management API](https://auth0.com/docs/api/management/v2) allows you to automate various tasks that can also be accessed via the Dashboard in Auth0 (for example: creating users, setting application grant types). ## Learn more diff --git a/main/docs/get-started/tenant-settings.mdx b/main/docs/get-started/tenant-settings.mdx index 9ff72ecd71..0ca45ddd55 100644 --- a/main/docs/get-started/tenant-settings.mdx +++ b/main/docs/get-started/tenant-settings.mdx @@ -160,7 +160,7 @@ The **Global bad actors from being able to guess previously-registered identifiers (username, email, or phone) from reading error response codes, such as `user_exists`. -* **Enable Publishing of Enterprise Connections Information with IdP domains**: When enabled, it supports [Home Realm Discovery](/docs/authenticate/login/auth0-universal-login/identifier-first) and [Auth0 Lock](/docs/libraries/lock) relies on a checked public file that includes enterprise connection information. If you don’t require that functionality, you can disable it. +* **Enable Publishing of Enterprise Connections Information with IdP domains**: When enabled, it supports [Home Realm Discovery](/docs/authenticate/login/auth0-universal-login/identifier-first) and Lock relies on a checked public file that includes enterprise connection information. If you don’t require that functionality, you can disable it. * **Enable email verification flow during login for Azure AD and ADFS connections**: When enabled, users will be presented with an email verification prompt during their first login when using Azure AD or ADFS connections. * **Refresh Token Revocation Deletes Grant**: When enabled, it deletes the underlying grant when you revoke a refresh token using the Authentication API `/oauth/revoke` endpoint. diff --git a/main/docs/ja-jp/libraries/lock.mdx b/main/docs/ja-jp/libraries/lock.mdx deleted file mode 100644 index b309bd1dc7..0000000000 --- a/main/docs/ja-jp/libraries/lock.mdx +++ /dev/null @@ -1,243 +0,0 @@ ---- -title: "Web用のLock" -'description': "Webアプリにスムーズなログイン・サインアップエクスペリエンスを提供するウィジェットです。" ---- -import {AuthCodeBlock} from "/snippets/AuthCodeBlock.jsx"; - - -Lockは、[ユーザーのニーズに合わせて構成](/docs/ja-jp/libraries/lock/v11/configuration)できる埋め込み可能なログインフォームで、シングルページアプリでの使用が推奨されますが、[ユニバーサルログイン](/docs/ja-jp/universal-login)と併用するのが望ましく、可能なときはいつでも使用してください。Lockを使用すると、ソーシャルIDプロバイダーを手軽に追加できるため、ユーザーは任意のプロバイダーを使用してシームレスにログインすることができます。 - - - -Web用の埋め込みログインは、クロスオリジン認証を使用します。一部のブラウザーでは、[カスタムドメイン](/docs/ja-jp/customize/custom-domains)を設定して**同じドメインにアプリをホスト** しないと、[クロスオリジン認証の信頼性が欠ける可能性があります](/docs/ja-jp/authenticate/login/cross-origin-authentication)。カスタムドメインを使用できない場合は、ユニバーサルログインへの移行を検討してください。 - - - -## Lockのインストール - -Lockのインストールには、いくつかの方法があります。環境とアプリケーションに合ったインストールソースを以下から選択してください。 - -### インストールソース - -[npm](https://npmjs.org)を介してインストールする： -`npm install auth0-lock` - -[bower](http://bower.io)を介してインストールする： - -`bower install auth0-lock` - -CDNを介してインクルード（`.x`と`.y`を[Lock Githubリポジトリ](https://github.com/auth0/lock/releases)からの最新のマイナーリリース番号とパッチリリース番号に置き換える）： - -最新のマイナーリリース：``最新のパッチリリース： -`` - -運用アプリケーションで指定のパッチバージョン、または、最低でも指定のマイナーバージョンを使用することをお勧めします。Lockをどのようにしてインクルードしたかにかかわらず、バージョンをロックダウンしてアップデートを手動でのみ行うようにし、アップデートによる悪影響を防ぐことをお勧めします。[GitHubリポジトリ](https://github.com/auth0/lock/releases)で現在のリリース一覧を確認します。 - -### モバイル - -モバイルのオーディエンスを対象にしている場合は、次のメタタグをアプリケーションの`head`に追加することをお勧めします。 - -`` - -### 依存関係のバンドル - -browserifyまたはwebpackを使ってプロジェクトをビルドし、その依存関係をバンドルする場合、`auth0-lock`モジュールをインストールした後に、そのすべての依存関係とバンドルする必要があります。[Browserify](https://github.com/auth0/lock/tree/master/examples/bundling/browserify)と[webpack](https://github.com/auth0/lock/tree/master/examples/bundling/webpack)を使用した例が用意されています。 - -### クロスオリジン認証 - - - -Web用の埋め込みログインは、クロスオリジン認証を使用します。一部のブラウザーでは、[カスタムドメイン](/docs/ja-jp/customize/custom-domains)を設定して**同じドメインにアプリをホスト** しないと、[クロスオリジン認証の信頼性が欠ける可能性があります](/docs/ja-jp/authenticate/login/cross-origin-authentication)。カスタムドメインを使用できない場合は、ユニバーサルログインへの移行を検討してください。 - - - -アプリケーション内でLockを埋め込むには、[クロスオリジン認証](/docs/ja-jp/authenticate/login/cross-origin-authentication)を適切に構成する必要があります。具体的には、**［Allowed Web Origins（許可されているWebオリジン）］** プロパティを要求しているドメインに設定する必要があります。このフィールドは、[［Application Settings（アプリケーションの設定）］](https://manage.auth0.com/#/applications/{yourClientId}/settings)で見つけることができます。 - -Lockで埋め込みログインを実装する前に、必ずクロスオリジン認証の制限事項をお読みください。 - -## 使用 - -### 1. Lockの初期化 - -まず、新しい`Auth0Lock`オブジェクトを初期化し、そのオブジェクトにAuth0クライアントID（Auth0アプリケーションごとに一意のクライアントIDで、[管理ダッシュボード](https://manage.auth0.com/#)から入手可能）とAuth0ドメイン（`yourname.auth0.com`など）を提供する必要があります。 - - - -export const codeExample1 = `// Initializing our Auth0Lock -var lock = new Auth0Lock( - '{yourClientId}', - '{yourDomain}' -);`; - - - -### 2. ユーザー情報の認証と取得 - -次に、`on`メソッドを使って`authenticated`イベントをリッスンします。イベントが発生したら、`accessToken`を使用します。これは、`getUserInfo`メソッドを呼び出し、ユーザーのプロファイル情報を（必要に応じて）取得するために受け取ったものです。 - - - -export const codeExample2 = `var Auth = (function() { - - var wm = new WeakMap(); - var privateStore = {}; - var lock; - - function Auth() { - this.lock = new Auth0Lock( - '<{yourClientId}>', - '<{yourDomain}>' - ); - wm.set(privateStore, { - appName: "example" - }); - } - - Auth.prototype.getProfile = function() { - return wm.get(privateStore).profile; - }; - - Auth.prototype.authn = function() { - // Listening for the authenticated event - this.lock.on("authenticated", function(authResult) { - // Use the token in authResult to getUserInfo() and save it if necessary - this.getUserInfo(authResult.accessToken, function(error, profile) { - if (error) { - // Handle error - return; - } - - //we recommend not storing Access Tokens unless absolutely necessary - wm.set(privateStore, { - accessToken: authResult.accessToken - }); - - wm.set(privateStore, { - profile: profile - }); - - }); - }); - }; - return Auth; -}());`; - - - -その後で、ページのコンテンツを操作して、ユーザーにプロファイル情報を表示（歓迎メッセージに名前を表示するなど）することができます。 - -`

Welcome

` - -ユーザープロファイルを保存する場合は、プロファイルオブジェクトに`JSON.stringify`を適用し、後で使用する場合は`JSON.parse`を適用します。これは、JSONオブジェクトでなく文字列として`localStorage`に保存する必要があるからです。 - -### 3. Lockの表示 - -ここでは、ユーザーが［ログイン］ボタンをクリックしたときにLockウィジェットが表示されるようにしています。ページに移動した時点で自動的にLockを表示したいときは、ページの読み込み時に`lock.show();`を使用します。 - -これでLockウィジェットが表示されるようになります。上記の手順も完了し、ログインを処理する準備が整いました！ - -```javascript lines -document.getElementById('btn-login').addEventListener('click', function() { - lock.show(); -}); -``` - -## パスワードレス - -Lockでは、Lock v11.2.0以降でのみパスワードレスモードが用意されています。この機能には[Lockの最新リリース](https://github.com/auth0/lock/releases)を使用してください。 - -Lockのパスワードレスモードを使うと、ユーザーがメールアドレスや携帯電話番号だけで認証できるようになります。ユーザーにコードが送信され、それを入力するか、リンクをクリックするだけで認証できるため、パスワードを覚える必要がありません。 - -Lockでパスワードレスモードを実装するには、`Auth0Lock`でなく`Auth0LockPasswordless`を使って、Lockを若干異なる方法で初期化します。 - - - -export const codeExample3 = `var lockPasswordless = new Auth0LockPasswordless( - '{yourClientId}', - '{yourDomain}' -);`; - - - -### パスワードレスのオプション - -また、Lockのパスワードレスモードには、専用の構成オプションがいくつかあります。 - -使用したい接続タイプを示すには、`allowedConnections`オプションでLockを初期化し、`email`か`sms`のいずれかを値に使用します。 - -```javascript lines -var passwordlessOptions = { - allowedConnections: ['sms'] -} -``` - -[［Dashboard］](https://manage.auth0.com/#)の **［Connections（接続）］-> ［Passwordless（パスワードレス）］** でご希望のパスワードレス接続を必ず有効にしてから、アプリケーション用に有効にします。こうすることで、Lockで使用しようとするときに、接続はすでに設定されアプリケーションにリンクされています。 - -`email`を使用することを選んだ場合は、ユーザーに入力コードとマジックリンクのどちらを送信するかも指定しなければなりません。これは、`passwordlessMethod`オプションを介して行われます。このオプションは、`code`または`link`の値をとります。 - -```javascript lines -var passwordlessOptions = { - allowedConnections: ['email'], - passwordlessMethod: 'code' -} -``` - -### パスワードレスの例 - - -export const codeExample4 = `var passwordlessOptions = { - allowedConnections: ['email'], - passwordlessMethod: 'code', - auth: { - redirectUrl: 'http://localhost:3000/callback', - responseType: 'token id_token', - params: { - scope: 'openid email' - } - } -} - -var lockPasswordless = new Auth0LockPasswordless( - '{yourClientId}', - '{yourDomain}', - passwordlessOptions -);`; - - - -### シングルサインオンと埋め込み認証 - -埋め込みログインのあるアプリがシングルサインオン（SSO）を使用するには、2つの条件を満たす必要があります。 - -1. SSOを行おうとするアプリケーションの両方が、ファーストパーティーのアプリケーションでなくてはなりません。サードパーティーのアプリケーションではSSOが動作しません。 -2. カスタムドメインを使用していること、SSOを実装しようとしているアプリケーションとAuth0テナントが同じドメインにあることが必要です。従来、Auth0ドメインの形式は`foo.auth0.com`ですが、カスタムドメインを使用すると、該当するすべてのアプリケーションとAuth0テナントに同じドメインを使用してCSRF攻撃のリスクを回避できます。 - -埋め込みログインの実装では、SSOをセットアップする代わりに、ユニバーサルログインの使用をお勧めします。ユニバーサル ログインは、SSOを実行するための最も信頼性が高く安定した方法であり、アプリケーションに複数のドメインを使用する必要がある場合や、[サードパーティアプリケーション](/docs/ja-jp/get-started/applications/third-party-applications/configure-third-party-applications)を使用する必要がある場合に実行できる唯一の方法です。 - -## エラーコードと説明 - -Lockを埋め込み型ログインに使用する場合は、`/co/authenticate`エンドポイントが採用されます。このエンドポイントには、次のエラーが含まれます。 - -エラーの説明は人間が判読できるものです。この説明は**コードを用いて解析するものではありません** 。また、いつでも変更される可能性があります。 - -| ステータス | コード | 説明 | -| --- | --- | --- | -| 400 | invalid_request | 無効な要求本文。client_id、credential_type、username、otp、realmのすべてが必要で、これ以外があってはなりません。 | -| 401 | unauthorized_client | クロスオリジンログインは許可されていません。 | -| 400 | unsupported_credential_type | 不明な資格情報タイプのパラメーター。 | -| 400 | invalid_request | 不明な領域の存在しない接続。 | -| 403 | access_denied | 間違ったメールアドレスまたはパスワード。 | -| 403 | access_denied | 認証エラー。 | -| 403 | blocked_user | ブロックされたユーザー。 | -| 401 | password_leaked | 使用しているパスワードは（このアプリケーションではなく）データ侵害により以前開示されたため、このログイン試行はブロックされました。 | -| 429 | too_many_attempts | 複数の連続したログイン試行の後にアカウントがブロックされました。ご希望の連絡方法を使用して、ブロック解除の手順を記載した通知を送信しました。 | -| 429 | too_many_attempts | 疑わしいログイン動作を検知したため、今後の試行はブロックされます。管理者に問い合わせてください。 | - -## ブラウザーとの互換性 - -**Chrome** 、**Safari** 、**Firefox** 、**IE >= 10** ではブラウザー互換性が確保されています。Auth0は現在、[zuul](https://github.com/defunctzombie/zuul)と[Saucelabs](https://saucelabs.com)を使って、各プッシュで統合テストを実行しています。 - -## もっと詳しく - -* [Lock APIのリファレンス](/docs/ja-jp/libraries/lock/lock-api-reference) -* [Lockの構成オプション](/docs/ja-jp/libraries/lock/lock-configuration) \ No newline at end of file diff --git a/main/docs/ja-jp/libraries/lock/lock-api-reference.mdx b/main/docs/ja-jp/libraries/lock/lock-api-reference.mdx deleted file mode 100644 index bca9bcc737..0000000000 --- a/main/docs/ja-jp/libraries/lock/lock-api-reference.mdx +++ /dev/null @@ -1,273 +0,0 @@ ---- -title: "Lock APIのリファレンス" -'description': "Lock v11 APIの詳細。" ---- -import {AuthCodeBlock} from "/snippets/AuthCodeBlock.jsx"; - - -Lockには、多くのメソッド、機能、構成可能なオプションがあります。このリファレンスでは、必要なものを紹介し、その使用方法について説明します。以下をクリックして、探しているメソッドに直接移動するか、単に参照してください。Lockによって生成されるイベントに関する情報を探している場合は、[on()](#on-)メソッドのセクションに記載されています。 - -* [new Auth0Lock](#auth0lock)-ロックのインスタンス化 -* [getUserInfo()](#getuserinfo-)-ログインしているユーザーのプロファイルの取得 -* [show()](#show-) - Lockウィジェットの表示 -* [on()](#on-) - イベントのリッスン -* [resumeAuth()](#resumeauth-) - `autoParseHash`がfalseの場合に認証フローを完了するために使用します -* [checkSession()](#checksession-) - 認証済みユーザーのAuth0から新しいトークンを取得します -* [logout()](#logout-) - ユーザーのログアウト - -## Auth0LockPasswordless - -`new Auth0Lock(clientID、ドメイン、オプション)` - -アプリケーションの`clientID`と[Auth0](https://manage.auth0.com/#/)管理ダッシュボードのアカウントの`ドメイン`を使用して構成された`Auth0Lock`の新しいインスタンスを初期化します。3番目のオプションのパラメーターは、アプリケーションのニーズに合わせてLockを構成するために使用される`オプション`オブジェクトです。この情報は、[アプリケーションの設定](https://manage.auth0.com/#/applications)で確認できます。 - -* **clientId `{String}`** :必須パラメーター。Auth0のアプリケーションのclientId。 -* **ドメイン{String}** :必須パラメーター。Auth0ドメイン。通常は、your-account.auth0.comです。 -* **オプション `{Object}`** :オプションのパラメーター。ロックの外観と動作を構成できます。詳細については、[構成オプションのページ](/docs/ja-jp/libraries/lock/lock-configuration)を参照してください。 - - -export const codeExample1 = `var Auth = (function() { - - var privateStore = {}; - - function Auth() { - // Instantiate Lock - without custom options - this.lock = new Auth0Lock( - '<{yourClientId}>', - '<{yourDomain}>' - ); - } - - Auth.prototype.getProfile = function() { - return privateStore.profile; - }; - - Auth.prototype.authn = function() { - // Listening for the authenticated event and get profile - this.lock.on("authenticated", function(authResult) { - // Use the token in authResult to getUserInfo() and save it if necessary - this.getUserInfo(authResult.accessToken, function(error, profile) { - if (error) { - // Handle error - return; - } - - //save Access Token only if necessary - privateStore.accessToken = accessToken; - privateStore.profile = profile; - - // Update DOM - }); - }); - }; - return Auth; -}());`; - - - -## getUserInfo() - -`getUserInfo（accessToken、コールバック）` - -ログインし、トークンを所有している場合は、そのトークンを使用して`getUserInfo`でユーザーのプロファイルを取得できます。このメソッドは、廃止の`getProfile()`に代わるものです。 - -* **accessToken{String}** ：ユーザートークン。 -* **コールバック{Function}** :ユーザープロファイルが取得された後に呼び出されます。 - -```javascript lines -lock.getUserInfo(accessToken, function(error, profile) { - if (!error) { - alert("hello " + profile.name); - } -}); -``` - -## show() - -`show(オプション)` - -`show`メソッドはウィジェットを表示します。Lockバージョン10.2.0以降では、`show`メソッドはパラメーターとして`オプション`オブジェクトを受け取ることができるようになりました。このパラメーターは、ウィジェットのこの特定の表示に対してLockの`オプション`をオーバーライドする方法として使用されることに注意してください。オプションは、Lockをインスタンス化するときに設定し、特定のユースケースで必要な場合にのみオーバーライドする必要があります。 - -次の`オプション`のサブセットは、ロックがインスタンス化されたときに指定された値（またはデフォルト）からオーバーライドされます。 - -* allowedConnections -* auth.params -* allowLogin -* allowSignUp -* allowForgotPassword -* initialScreen -* rememberLastLogin - -`show`メソッドでオーバーライドできる上記の限られたサブセットとは対照的に、Lockのインスタンス化時に選択できる設定可能なオプションの全リストの詳細については、[ユーザー構成可能オプションのページ](/docs/ja-jp/libraries/lock/lock-configuration)を参照してください。 - -オプションのオーバーライド例: - -```javascript lines -// Show the Lock widget, without overriding any options -lock.show(); - -// Show the Lock widget, overriding some options -lock.show({ - allowedConnections: ["twitter", "facebook"], - allowSignUp: false -}); -``` - -オプションは、最初にLockをインスタンス化するときに設定する必要があります`var lock = new Auth0Lock(クライアン、ドメイン、オプション);`.オプションは、この特定の時間と場所でウィジェットを表示するときに、以前に設定したオプションをオーバーライドするためにのみ`show`に渡す必要があります。 - -`show`メソッドで設定できる`flashMessage`という追加オプションがあります。 - -### flashMessage - -このオブジェクトは、`show`メソッドのオプションとしてのみ使用でき、Lockをインスタンス化するときに通常の`オプション`オブジェクトでは使用できません。`flashMessage`オブジェクトは、Lockが表示されたときにエラーまたは成功のフラッシュメッセージを表示します。次のパラメーターがあります。 - -* **タイプ** `{String}`:メッセージタイプ。`エラー`または`成功`のいずれかである必要があります。 -* **テキスト** `{String}`:表示するテキスト。 - -```javascript lines -lock.show({ - flashMessage:{ - type: 'success', - text: 'Amazing Success!!' - } -}); -``` - -`flashMessage`オプションの実際の用途は、認可エラーを処理することです。`flashMessage`には、エラーの説明テキストを入力できます。 - -```javascript lines -lock.on('authorization_error', function(error) { - lock.show({ - flashMessage: { - type: 'error', - text: error.errorDescription - } - }); -}); -``` - -したがって、ブロックされているユーザーである`tester@example.com`がサインインしようとすると、ログインに失敗してLockが閉じるのではなく、上部のバーにエラーメッセージが表示され、Lockが再度表示されます。 - -## hide() - -`hide()` - -`hide`メソッドは、現在開いているウィジェットを閉じます。ほとんどの場合、ウィジェットは自動的に閉じるため、このメソッドは主に特定のユースケースでのみ呼び出されます。たとえば、`unrecoverable_error`イベントをリッスンしてからLockを`非表示`にして、独自のカスタムエラーページにリダイレクトしたい場合があります。別の例としては、[ポップアップモード](/docs/ja-jp/libraries/lock/lock-authentication-modes)を実装しているユーザーが、`認証済み`イベントが発生した後にウィジェットを手動で`非表示`にする必要がある場合があります。 - -ポップアップモードでLockウィジェットを非表示にする（閉じる）使用例: - -```javascript lines -// Listen for authenticated event and hide Lock -lock.on("authenticated", function() { - lock.hide(); - - // Whatever else you'd like to do on authenticated event - -}); -``` - -## on() - -Lockは、そのライフサイクル中にイベントを生成します。`on`メソッドを使用して、特定のイベントをリッスンし、それらに対応できます。 - -* Show:`show`: Lockが表示されたときに生成されます。引数はありません。 -* `hide`: Lockが非表示のときに生成されます。引数はありません。 -* `unrecoverable_error`: 接続が利用できないなど、回復できないエラーが発生したときに生成されます。唯一の引数はエラーです。 -* `authenticated`: 認証が成功した後に生成されます。唯一の引数は認証結果です。認証結果にはトークンが含まれ、このトークンを使用してユーザーのプロファイルを取得したり、次回以降のログインに使用したりすることができます。 -* `authorization_error`:認可が失敗したときに生成されます。唯一の引数はエラーです。 -* `hash_parsed`: 新しいAuth0Lockオブジェクトがリダイレクトモード（デフォルト）で初期化されるたびに、ログイン試行の結果を探してurlのハッシュ部分を解析しようとします。これは高度な使用例のための低レベルのイベントであり、可能な場合は`認可済み`と`authorization_error`を優先する必要があります。その後、ハッシュ内に何も見つからなかった場合、このイベントは`null`と共に生成されます。これは、ログインが成功した後に`認可済み`イベントと同じ引数を使用して、または何か問題が発生した場合に`authorization_error`と同じ引数を使用して生成されます。このイベントは、urlのハッシュ部分を解析する必要がないため、[ポップアップモード](/docs/ja-jp/libraries/lock/lock-authentication-modes)では生成されません。 -* `forgot_password ready`:「パスワードを忘れた」場合、画面が表示されたときに生成されます。(バージョン>`10.18`) -* `forgot_password submit`:「パスワードを忘れた」場合、画面の送信ボタンをクリックしたときに生成されます。(バージョン>`10.14`) -* `signin ready`:「サインイン」画面が表示されたときに生成されます。 -* `signup ready`:「サインアップ」画面が表示されたときに生成されます。 -* `signin submit`: ユーザーが「ログイン」画面の送信ボタンをクリックしたときに生成されます。(バージョン>`10.18`) -* `signup submit`: ユーザーが「サインアップ」画面の送信ボタンをクリックしたときに生成されます。(バージョン>`10.18`) -* `federated login`: ソーシャル接続ボタンをクリックしたときに生成されます。引数として接続名と戦略を持ちます。(バージョン>`10.18`) -* `socialOrPhoneNumber ready`: ソーシャル+電話番号を使用したパスワードレス画面が表示されたときに生成されます -* `socialOrPhoneNumber submit`: ソーシャル+電話番号を使用したパスワードレス画面が送信されたときに生成されます -* `socialOrEmail ready`: ソーシャル+電子メールを使用したパスワードレス画面が表示されたときに生成されます -* `socialOrEmail submit`: ソーシャル+電子メールを使用したパスワードレス画面が送信されたときに生成されます -* `vcode ready`: ワンタイムパスワードを使用したパスワードレス画面が表示されたときに生成されます -* `vcode submit`: ワンタイムパスワードを使用したパスワードレス画面が送信されたときに生成されます - -`認証済み`イベントリスナーには、`authResult`オブジェクトという1つの引数があります。このオブジェクトには、次のプロパティが含まれています。`accessToken`、`idToken`、`state`、`refreshToken`および`idTokenPayload`。 - -`認証済み`イベントの使用例: - -export const codeExample2 = `var Auth = (function() { - - var privateStore = {}; - - function Auth() { - this.lock = new Auth0Lock( - '<{yourClientId}>', - '<{yourDomain}>' - ); - } - - Auth.prototype.getProfile = function() { - return privateStore.profile; - }; - - Auth.prototype.authn = function() { - // Listening for the authenticated event - this.lock.on("authenticated", function(authResult) { - // Use the token in authResult to getUserInfo() and save it if necessary - this.getUserInfo(authResult.accessToken, function(error, profile) { - if (error) { - // Handle error - return; - } - - privateStore.profile = profile; - - }); - }); - }; - return Auth; -}());`; - - - -## resumeAuth() - -このメソッドは、[auth.autoParseHash](/docs/ja-jp/libraries/lock/lock-configuration)オプションを`false`に設定した場合にのみ使用できます。認証フローを完了するには、`resumeAuth`を呼び出す必要があります。このメソッドは、`#`を使用してurl (`useHash`を使用したangular2、または`hashHistory`を使用したreact-router)を処理するクライアント側ルーターを使用している場合に便利です。 - -* **hash** `{String}`:リダイレクトから受信したハッシュフラグメント。 -* **コールバック** {Function}:解析が完了した後に呼び出されます。最初の引数としてエラー（存在する場合）があり、2番目の引数として認証結果があります。使用できるハッシュがない場合は、両方の引数が`null`になります。 - -```javascript lines -lock.resumeAuth(hash, function(error, authResult) { - if (error) { - alert("Could not parse hash"); - } - //This is just an example; you should not log Access Tokens in production. - console.log(authResult.accessToken); -}); -``` - -## checkSession() - -`checkSession`メソッドを使用すると、ドメインのAuth0に対して既に認証済みのユーザーのAuth0から新しいトークンを取得できます。次のパラメーターがあります。 - -* **オプション** `{Object}`:オプション。通常は`/authorize`に送信される有効なOAuth2パラメーターを受け入れます。省略した場合は、Auth0の初期化時に指定されたパラメーターが使用されます。 -* **コールバック** {Function}:トークンの更新結果で呼び出されます。最初の引数としてエラー（存在する場合）があり、2番目の引数として認証結果があります。 - -```javascript lines -lock.checkSession({}, function(err, authResult) { - // handle error or new tokens -}); -``` - -## logout() - -ユーザーをログアウトします。 - -* **オプション** `{Object}`:これはオプションであり、auth0.js logout()と同じルールに従います。 - -```javascript lines -lock.logout({ - returnTo: 'https://myapp.com/bye-bye' -}); -``` - diff --git a/main/docs/ja-jp/libraries/lock/lock-authentication-modes.mdx b/main/docs/ja-jp/libraries/lock/lock-authentication-modes.mdx deleted file mode 100644 index e14684ed4c..0000000000 --- a/main/docs/ja-jp/libraries/lock/lock-authentication-modes.mdx +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: "Lock認証モード" -'description': "Lockを使用した認証モードについての詳細情報。" ---- -import {AuthCodeBlock} from "/snippets/AuthCodeBlock.jsx"; - - -Lockは、2つの異なるモードで機能します。デフォルトモードは**リダイレクトモード** です。このモードでは、ユーザーは、認証のためにリダイレクトされ、その後アプリケーションに戻されます。2番目のモードの**ポップアップモード** では、ポップアップウィンドウにより、ユーザーはアプリケーションを離れることなく、IDプロバイダーで認証できます。 - -## リダイレクトモード - -リダイレクトモードを使用したIdPボタン（たとえば、Facebook）をクリックすると、すぐに Facebookにリダイレクトされます。リダイレクトモードは、Lockがデフォルトで、ほとんどのユースケースに推奨されるモードです。（たとえばこの例ではFacebookへの）ログインに成功したら、Facebookは（Auth0を通して）ユーザーを再びアプリにリダイレクトします。参考資料のほとんどの例またはサンプルは、リダイレクトモードを採用しています。 - -## ポップアップモード - -IdPボタン（たとえば、Facebook）をクリックしてポップアップ（新しいタブまたはウィンドウ）が開いた場合は、ポップアップモードが使用されていることを意味します。そのポップアップで、Facebookページが表示されます。Facebookへのログインに成功したら、ポップアップが閉じ、Webアプリはユーザーが認証されたことを認識します。Webアプリは、**別のページへはリダイレクトされません** 。 - -ポップアップモードのLockの実装は、デフォルトから`リダイレクト`オプションを変更するだけです。 - -export const codeExample = `var lock = new Auth0Lock( - '{yourClientId}', - '{yourDomain}', - { - auth: { - redirect: false - } - } -);`; - - - -Lockがポップアップモードで、アプリケーションに埋め込まれているときは、多要素認証（MFA）がサポートされません。さらに、ポップアップモードは、ユニバーサルログインでは機能しません。 - -複数アプリケーション間の[シングルサインオン（SSO）](/docs/ja-jp/authenticate/single-sign-on)などのAuth0機能の中には、ユーザーが`'{yourDomain}'`でCookieを設定するために、Auth0にリダイレクトされることに依存しているものもあります。 - -ポップアップモードを使用する場合、このCookieを設定するためにポップアップウィンドウが表示されます。プロンプトが必要ない場合は、中断を最小限に抑えるために、このポップアップウィンドウは空白で、非表示のiframe（インラインフレーム）内で表示されます。この理由は、アプリケーションからAuth0に送信されたクロスオリジン要求はCookieを設定できないからです。 - -ポップアップウィンドウを表示したくなく、かつ複数アプリケーション間のSSOが必要ない場合は、Lockまたはauth0.js使用時に`sso: false`を設定できます。 - -```javascript lines -var options = { - auth: { - sso: false - } -} -``` - diff --git a/main/docs/ja-jp/libraries/lock/lock-authentication-parameters.mdx b/main/docs/ja-jp/libraries/lock/lock-authentication-parameters.mdx deleted file mode 100644 index ab2568bfcc..0000000000 --- a/main/docs/ja-jp/libraries/lock/lock-authentication-parameters.mdx +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: "Lock認証パラメーター" -'description': "認証パラメーターの設定に関するLockドキュメントです。" ---- - -ログインを開始するときには、オプションオブジェクトにパラメーターを追加して送信することができます。下の例では、`'foo'`と等しい値のある`state`パラメーターを追加します。 - -```javascript lines -var options = { - auth: { - params: {state: 'foo'}, - } -}; -``` - -上の例は、`https://{yourDomain}/authorize?state=foo&...`を使用してログインをトリガーすること類似しています。 - -パラメーターの`scope`、`device`、`nonce`と`state`に対応しています。 - -## 対応しているパラメーター - -### scope{string} - -```javascript lines -var options = { - auth: { - params: {scope: 'openid email user_metadata app_metadata picture'}, - } -}; -``` - -スコープはさまざまな値に対応しています。JWTはすべてのAPI要求に送信されるため、できる限り小さくしておくことが賢明です。 - -Lockでデフォルトの`scope`値は、`openid profile email`です。この最小のスコープ値は、**Last time you logged in with（最終ログイン日）** 機能を正しく動作させるためには必須です。 - - - -Lockの初期化時に少なくともデフォルトのスコープ（`openid profile email`）を手動で指定しなかった場合、Webサイトが`http://localhost`または`http://127.0.0.1`から実行されている際には、ブラウザーコンソールに以下のエラーが表示されます。 - -`Consent required.When using getSSOData, the user has to be authenticated with the following scope: openid profile email`（同意が必要です。getSSODataを使用する場合、ユーザーはopenid profile emailのスコープで認証される必要があります） - -このエラーは、アプリケーションを運用環境で実行している場合や、スコープに`openid profile email`を指定した場合には発生**しません** 。詳細については、「[ユーザーの同意とサードパーティーアプリケーション](/docs/ja-jp/get-started/applications/third-party-applications/user-consent-and-third-party-applications)」をお読みください。 - - - -スコープの詳細については、[スコープに関するドキュメント](/docs/ja-jp/get-started/apis/scopes)のページを参照してください。 - -#### 例：トークンを取得する - -Lockでユーザーのプロファイルデータを取得できるトークンを受け取りたい場合には、`scope`パラメーターを追加する必要があります。 - -```javascript lines -var options = { - auth: { - params: { - scope: 'openid profile' - } - } -}; -``` - -Lockには`connectionScopes`構成オプションもあり、任意の接続を特定してスコープを指定することができます。これは、スコープのセット（ダッシュボードで定義済み）で始めてから、後で特定の接続に追加の権限や属性を要求したい場合に便利です。詳細については、「[Lock構成オプション](/docs/ja-jp/libraries/lock/lock-configuration)」をお読みください。 - -### state {string} - -`state`パラメーターには任意の状態値が設定され、リダイレクト間で維持されます。[XSRF攻撃](https://en.wikipedia.org/wiki/Cross-site_request_forgery)の軽減や、認証プロセスが完了した後で必要になるかもしれない任意のコンテキスト情報（[リターンURL](/docs/ja-jp/authenticate/login/logout/redirect-users-after-logout)など）に便利です。カスタムの状態パラメーターが提供されない場合には、Lockが自動的に生成します。詳細については、「[Stateパラメーター](/docs/ja-jp/secure/attack-protection/state-parameters)」を参照してください。 - -### nonce {string} - -`nonce`パラメーターはリプレイ攻撃を防ぐために使用され、カスタム値が提供されない場合にはLockが自動的に生成します。 - -### device {string} - -`device`パラメーターは、認証を要求しているデバイスやブラウザーの名前を設定します。 \ No newline at end of file diff --git a/main/docs/ja-jp/libraries/lock/lock-configuration.mdx b/main/docs/ja-jp/libraries/lock/lock-configuration.mdx deleted file mode 100644 index 16a51d7959..0000000000 --- a/main/docs/ja-jp/libraries/lock/lock-configuration.mdx +++ /dev/null @@ -1,823 +0,0 @@ ---- -title: "Lockの構成オプション" -'description': "Lockには、Lockウィジェットの動作、外観、接続性を変更できる多くの設定オプションがあります。このリソースでは、それらのオプションの詳細を提供しています。" ---- -import {AuthCodeBlock} from "/snippets/AuthCodeBlock.jsx"; - - -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`に設定すると、次のようにパスワードが表示されるようになります。 - -![Lock Option: Allow Show Password](/docs/images/ja-jp/cdy7uua7fh8z/6G8LJaNjaMl5zUrwGi5UJQ/44dc951b70077b0ec6bc04d2f0413b12/lock-allowshowpassword.png) - -### allowedConnections {Array} - -`signin|signup|reset`のアクションで使用される接続の配列です。デフォルトは、すべての有効な接続です。 - -`allowedConnections:['Username-Password-Authentication']` - -`allowedConnections:['twitter', 'facebook', 'linkedin']` - -`allowedConnections:['qraftlabs.com']` - -`allowedConnections`の例： - -![Lock Option: Allowed Connections - Database](/docs/images/ja-jp/cdy7uua7fh8z/1mllPDLFCCETwQ9MeGEf3W/763728971302656618ef3bd131ab83b1/lock-allowedconnections-database.png) - -![Lock Option: Allowed Connections - Social](/docs/images/ja-jp/cdy7uua7fh8z/7uYN4ebrLLM8bjx1fee8j0/1e716cca3e1bae990063e9226dfe9ac2/lock-allowedconnections-social.png) - -### autoclose \{Boolean} - -サインインが成功した後、Lockが自動的に閉じられるかどうかを決定します。デフォルトはfalseです。Lockが`closable`ではない場合、このオプションがtrueに設定されていてもLockは閉じられません。 - -`autoclose: true` - -### autofocus \{Boolean} - -trueの場合、ウィジェットの最初のフィールドにフォーカスが設定されます。モバイルデバイスでレンダリングされる場合、または`container`オプションが指定されている場合のデフォルトは`false`です。それ以外の場合はすべて、デフォルトは`true`です。 - -`autofocus: false` - -### avatar \{Object} - -デフォルトでは、ユーザーのプロフィール画像と表示名の取得にはGravatarが使用されますが、`avatar`オプションを使用すると、どこからでも取得できるようになります。 - -```javascript lines -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のデフォルトの動作： - -![Lock Option: Avatar](/docs/images/ja-jp/cdy7uua7fh8z/69Nz0QoQifPWpfBZwX15J0/204aad93cde406f0ed3771ce38766f56/lock-avatar.png) - -### closable \{Boolean} - -Lockを閉じられるかどうかを決定します。`container`オプションが指定されている場合、その値は常に`false`です。それ以外の場合、デフォルトは`true`です。 - -`closable: false` - -![Lock Option: Closable](/docs/images/ja-jp/cdy7uua7fh8z/2qwXtPQev1nlpyOQauXKBO/f967e1157972ecbf5b030b3be3600f2e/lock-closable.png) - -### container \{String} - -ウィジェットが表示されるhtml要素の`id`です。 - -これにより、ウィジェットはモーダルポップアウトウィンドウではなく、`div`内にインラインで表示されます。 - -```html lines -
- - -``` - -![Lock Option: Container](/docs/images/ja-jp/cdy7uua7fh8z/5L4S47Yfset2DR9pjcqVrX/1c4d1928cf75acf40129ffd01394bf33/lock-container.png) - -### flashMessage `{Object}` - -Lockが表示されているときに、`error`または`success`のフラッシュメッセージを表示します。このオブジェクトは次のプロパティを含みます： - -* type `{String}`：メッセージタイプ。サポートされているタイプは`error`、`info`、`success`です。 -* text `{String}`：表示するテキスト。 - -```javascript lines -var options = { - flashMessage: { - type: 'success', - text: 'Welcome!' - } -}; -``` - -### language \{String} - -ウィジェットの言語を指定します。デフォルトは「en」です。現在提供されている言語の一覧については、[国際化ディレクトリ](https://github.com/auth0/lock/blob/master/src/i18n/)を参照してください。 - -`language:'es'` - -![Lock Option: Language](/docs/images/ja-jp/cdy7uua7fh8z/3u3lytCUBDbcKmXFV34OUv/5cf5d7e1af9593a3b094f32815a4da11/lock-language.png) - -### languageDictionary \{Object} - -Lockで表示されるあらゆるテキストをカスタマイズできます。デフォルトは{}です。このオブジェクトで変更できる`languageDictionary`値の一覧については、英語の[言語辞書仕様](https://github.com/auth0/lock/blob/master/src/i18n/en.js)ページを参照してください。 - -```javascript lines -var options = { - languageDictionary: { - emailInputPlaceholder: "something@youremail.com", - title: "Log me in" - }, -}; -``` - -![Lock Option: Language Dictionary](/docs/images/ja-jp/cdy7uua7fh8z/5203ofwtagtIKGT4HnIPmk/8ad9cdd151a2cdb18b8a42ee47dbf679/lock-languagedictionary.png) - -また、`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 -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 -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 -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 -var options = { - theme: { - labeledSubmitButton: false - } -}; -``` - -![Lock Option: Labeled Submit Button](/docs/images/ja-jp/cdy7uua7fh8z/5PNCvsbYa98pKZwWHVPS9S/39cb5ac63818ec5558c451b1e37f735f/lock-theme-labeledsubmitbutton.png) - -ラベルがデフォルトのtrueに設定されている場合、ラベルのテキストは、[languageDictionary](#languagedictionary-object-)オプションでカスタマイズできます。 - -### logo `{String}` - -`logo`の値は、画像のURLであり、Lockのヘッダーに配置され、Auth0のロゴのデフォルトになります。ユーザーエクスペリエンスを向上させるために推奨される最大高さは`58px`です。 - -```javascript lines -var options = { - theme: { - logo: 'https://example.com/logo.png' - } -}; -``` - -![Lock UI customization - Logo](/docs/images/ja-jp/cdy7uua7fh8z/FdOAKKy71rTbFjIlZEL8D/2eef96008095d85388daaa461707901d/lock-theme-logo.png) - -### primaryColor \{String} - -`primaryColor`プロパティは、Lockのプライマリカラーを定義します。ウィジェットで使用されるカラーはすべて、そこから計算されます。このオプションは、すべてのカラーが`logo`のカラーパレットと合うように、カスタム`logo`を提供する際に、役立ちます。デフォルトは、`#ea5323`です。 - -```javascript lines -var options = { - theme: { - logo: 'https://example.com/logo.png', - primaryColor: '#31324F' - } -}; -``` - -![Lock UI customization - primary color](/docs/images/ja-jp/cdy7uua7fh8z/1qQjeTmXJyIziv400VPaOn/48dd3cb8a72a6e88b2634b4b8a8bed63/lock-theme-primarycolor.png) - -## 認証オプション - -認証オプションは`options`オブジェクトの`auth`プロパティにグループ化されています。 - -Lockによってデフォルトで使用されるスコープは`openid profile email`です。 - -```javascript lines -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 -var options = { - auth: { - autoParseHash: false - } -}; -``` - -### connectionScopes \{Object} - -このオプションでは、認証用にoauth2/ソーシャル接続に送信するスコープを設定できます。 - -```javascript lines -var options = { - auth: { - connectionScopes: { - 'facebook': ['scope1', 'scope2'] - } - } -}; -``` - -ソーシャル接続の具体的なスコープの一覧は、該当するプロバイダーから取得できます。たとえば、[開発者向けFacebook](https://developers.facebook.com/docs/facebook-login/permissions/)のリファレンスには、接続用に要求できる個別の許可の一覧があります。 - -### params \{Object} - -optionsオブジェクトにパラメーターを追加することで、ログインを開始する際にパラメーターを送信できます。以下の例では、`foo`に等しい値を持つ`state`パラメーターを追加し、さらに`scope`パラメーター（スコープ、さらに要求された属性を含む）を追加します。 - -```javascript lines -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 -var options = { - auth: { - redirect: false - } -}; -``` - -### redirectUrl `{String}` - -URL Auth0が認証後にリダイレクトされます。デフォルトは空の文字列「」（リダイレクトURLなし）です。 - -```javascript lines -var options = { - auth: { - redirectUrl: 'http://testurl.com' - } -}; -``` - -`redirectUrl`が指定されている場合（空の値以外が設定されている場合）の`responseType`オプションは、手動で設定されていない場合はデフォルトで`code`になります。 - -### responseMode `{String}` - -コードまたはトークンを、クエリ部やフラグメント部分に含めるのではなく、HTTP POST要求で`redirectUrl`に送信する場合は、`"form_post"`に設定する必要があります。 - -それ以外の場合、このオプションは省略しなければならず、デフォルトでは省略されています。 - -```javascript lines -var options = { - auth: { - responseMode: 'form_post' - } -}; -``` - -### responseType \{String} - -`responseType`の値は、シングルページアプリケーションの場合は「token」に、それ以外の場合には「code」に設定する必要があります。redirectUrlが指定されている場合のデフォルトは「code」、指定されていない場合のデフォルトは「token」です。 - -```javascript lines -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 -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 -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 -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 -var options = { - additionalSignUpFields: [{ - name: "name", - storage: "root" - }] -}; -``` - -![Lock Option: Additional Signup Fields](/docs/images/ja-jp/cdy7uua7fh8z/2KPDGZb3caq57caJ90w53k/e092bdb4a4d93589aa006f796ff20fca/lock-additionalsignupfields.png) - -#### selectフィールド - -サインアップフィールドの`type:"select"`を使用すると、ユーザーが値を選択するためのselect要素を使用できます。 - -```javascript lines -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 -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 -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 -var options = { - additionalSignUpFields: [{ - type: "hidden", - name: "signup_code", - value: "abc123" - }] -} -``` - -一部のユースケースでは、言語設定のオプションなど、メールテンプレート用の`additionalSignUpFields`データを使用できる場合があります。その値を使用して、テンプレート化されたメール通信の言語を設定できます。 - -### allowLogin \{Boolean} - -`false`に設定すると、ウィジェットのログイン画面が表示されなくなります。これは、ウィジェットをサインアップ専用にしたい場合（サインアップ画面のログインタブとサインアップタブは非表示になります）や、パスワードのリセット専用にしたい場合（パスワード再設定画面の戻るボタンは非表示になります）に便利です。そのような場合、`initialScreen`、`allowForgotPassword`、`allowSignUp`のオプションも指定しなければならないことがあります。デフォルトは`true`です。 - -`allowLogin: false` - -![Lock Option: Allow Login](/docs/images/ja-jp/cdy7uua7fh8z/6gI4aSLHXLzhcHiR9aWMET/d05c2a08a3895278b01150ecf894cb5f/lock-allowlogin.png) - -### allowForgotPassword \{Boolean} - -`allowForgotPassword`をfalseに設定すると、ログイン画面の「パスワードを覚えていない場合」のリンクが非表示になり、「パスワードを忘れた場合」画面にアクセスできなくなります。デフォルトはtrueです。パスワード変更スクリプトを持たないカスタムデータベースとのデータベース接続を使用している場合、「パスワードを忘れた場合」画面は使用できなくなります。 - -`allowForgotPassword: false` - -![Lock Option: Allow Forgot Password](/docs/images/ja-jp/cdy7uua7fh8z/1L6wJS3UnWK1VGKYMFhAB9/2ddcf2d462255e78a8b78958c2503809/lock-allowforgotpassword.png) - -### allowSignUp \{Boolean} - -`false`に設定すると、ログイン画面のログインタブとサインアップのタブが非表示になり、サインアップ画面にアクセスできなくなります。デフォルトは`true`です。データベース接続でサインアップが無効になっている場合、または作成スクリプトのないカスタムデータベースを使用している場合は、サインアップ画面は使用できなくなることに注意してください。 - -また、このオプションはクライアント側の外観**のみ** を制御するものであり、特定の匿名訪問者からの新規サインアップを完全に阻止するものではないことに注意してください。新規ユーザーのサインアップを完全に防止したい場合は、ダッシュボードの接続設定で**サインアップを無効にする** オプションを使用する必要があります。 - -`allowSignUp: false` - -![Lock Option: Allow Signup](/docs/images/ja-jp/cdy7uua7fh8z/2BNlYe99EFlRmIlhoLZiEB/f280d865cb16fa5fecda952271cb18bf/lock-allowsignup.png) - -### 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 -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` \ No newline at end of file diff --git a/main/docs/ja-jp/libraries/lock/lock-ui-customization.mdx b/main/docs/ja-jp/libraries/lock/lock-ui-customization.mdx deleted file mode 100644 index b41bc12d90..0000000000 --- a/main/docs/ja-jp/libraries/lock/lock-ui-customization.mdx +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: "Lock UIのカスタマイズ" -'description': "Lockウィジェットの外見をカスタマイズすることは、ブランディングおよびまとまりのあるUIを確立するために重要です。このリソースは、プロジェクトにLockを実装しながら、これを行う方法に焦点を合わせます。" ---- - -いくつかの方法で、Lockウィジェットの外見をカスタマイズできます。最も安全でベストな方法は、提供されているJavaScriptオプションを使用することです。 - -## JavaScriptOptions - -Lockをインスタンス化するときに、`options`パラメーターを介してLockにさまざまなカスタマイズを設定できます。その中には、UIをカスタマイズできるものがあります。UIのカスタマイズオプションは、まだ発展中であり、今後さらに追加されます。 - -まず、カスタマイズしたいオプションを含む、`options`オブジェクトを定義します。次に、Lockをインスタンス化するときに、3番目のパラメーターとしてそのoptionsオブジェクトを含める必要があります。詳細は以下のとおりです。 - -### テーマオプション - -`theme`プロパティの下の名前空間で、現在利用できるテーマオプションがいくつかあります。 - -#### logo `{String}` - -![Lock UI customization - Logo](/docs/images/ja-jp/cdy7uua7fh8z/FdOAKKy71rTbFjIlZEL8D/2eef96008095d85388daaa461707901d/lock-theme-logo.png) - -`logo`の値は、画像のURLであり、Lockのヘッダーに配置され、Auth0のロゴのデフォルトになります。推奨される最小解像度は200ピクセル（幅） x 200ピクセル（高さ）です。 - -```javascript lines -var options = { - theme: { - logo: 'https://example.com/logo.png' - } -}; -``` - -#### primaryColor `{String}` - -![Lock UI customization - primary color](/docs/images/ja-jp/cdy7uua7fh8z/1qQjeTmXJyIziv400VPaOn/48dd3cb8a72a6e88b2634b4b8a8bed63/lock-theme-primarycolor.png) - -`primaryColor`プロパティは、Lockのプライマリカラーを定義します。ウィジェットで使用されるカラーはすべて、そこから計算されます。このオプションは、すべてのカラーが`logo`のカラーパレットと合うように、カスタム`logo`を提供する際に、役立ちます。デフォルトは、`#ea5323`です。 - -```javascript lines -var options = { - theme: { - logo: 'https://example.com/logo.png', - primaryColor: '#31324F' - } -}; -``` - -#### authButtons `{Object}` - -Lockのボタンをカスタマイズできます。カスタマイズを希望するカスタムの接続ボタンはそれぞれ、独自のパラメーターセットと一緒に名前で表記する必要があります。カスタマイズ可能なパラメーターは以下です。 - -* **displayName** `{String}`：ボタンタイトルを作成する際に、接続名の代わりに表示する名前、たとえばログインのための「`LOGIN WITH MYCONNECTION`」など。 -* **primaryColor** `{String}`：ボタンの背景色。デフォルトは、`#eb5424`です。 -* **foregroundColor** `{String}`:ボタンの文字の色。デフォルトは、`#FFFFFF`です。 -* **icon** `{String}`:この接続のためのアイコンのURL。例：`http://site.com/logo.png`。 - -```javascript lines -var options = { - theme: { - authButtons: { - "testConnection": { - displayName: "Test Conn", - primaryColor: "#b7b7b7", - foregroundColor: "#000000", - icon: "http://example.com/icon.png" - }, - "testConnection2": { - primaryColor: "#000000", - foregroundColor: "#ffffff", - } - } - } -}; -``` - -### テキストのカスタム - -`languageDictionary`オプションを使用して、Lockで表示されるあらゆるテキストをカスタマイズできます。デフォルトは{}です。下の例を参照してください。 - -```javascript lines -var options = { - languageDictionary: { - emailInputPlaceholder: "something@youremail.com", - title: "Log me in" - }, -}; -``` - -![Customizing text in the Lock UI via languageDictionary option](/docs/images/ja-jp/cdy7uua7fh8z/iNvBLxxmea2tiWBhzwKX5/db0d7f86d0f7f95f70e5edcd34ab736f/lock-languagedictionary.png) - -`languageDictionary`を使用してカスタマイズできる項目の全リストは、リポジトリの[英語辞書の仕様](https://github.com/auth0/lock/blob/master/src/i18n/en.js)をご覧ください。 - -### Lockをインスタンス化する - -最後に、カスタムオプションで定義した`options`オブジェクトで、Lockをインスタンス化します。 - -`var lock = new Auth0Lock('{yourClientId}', '{yourDomain}', options);` - -## CSSの上書き - -CSSを上書きしてLockをカスタマイズすることは、お勧めしません。Lockの新しいリリースで、何かスタイリングが変更する可能性があり、CSSを上書きしている場合に意図しない問題を引き起こすことがあります。さらに、別の場所のスタイルの使用を見落とす可能性があり、一方では変更が問題なく見えたとしても、他方では問題がある場合があります。 - -それでもLockのスタイルをさらに設定するためにCSSを上書きしたい場合は、メジャーまたはマイナーバージョンではなく、Lockの特定のパッチバージョンを使用することをお勧めします。そうすることで、スタイルを変更し、その変更によりUIに予期しない動作を引き起こす可能性がある別のパッチがデプロイされた場合に発生する可能性のある予期しない結果の量を制限できます。これは、Lockを含めるとき、またはダウンロードするときに、パッチバージョン（`x.y.z`）を指定することで行えます。 - -さらに、CSSの変更を徹底的にテストすることをもちろんお勧めします。顧客のために意図したエクスペリエンスになっていることを確認してください。 - -## その他の詳細情報 - -アプリケーション用のLockをカスタマイズする際に、より詳細な情報が必要な場合は、[構成オプション](/docs/ja-jp/libraries/lock/lock-configuration)ページまたは[Lock API](/docs/ja-jp/libraries/lock/lock-api-reference)ページをご覧ください。 - -追加を希望する特定のテーマオプションがある場合は、ぜひお知らせください。私たちは、JavaScriptを通して利用できるカスタマイズオプションを向上するために取り組んでいます。新しいオプションが追加されるたびに、このリストは更新されます。 \ No newline at end of file diff --git a/main/docs/libraries.mdx b/main/docs/libraries.mdx index 387a257dfe..0df2b95230 100644 --- a/main/docs/libraries.mdx +++ b/main/docs/libraries.mdx @@ -776,15 +776,4 @@ Do you use Lock, Auth0's legacy self-hosted login experience? You can still rely { label: "Get started", url: "/docs/libraries/lock-ios" } ], }}/> - diff --git a/main/docs/libraries/lock.mdx b/main/docs/libraries/lock.mdx deleted file mode 100644 index 493543b3d5..0000000000 --- a/main/docs/libraries/lock.mdx +++ /dev/null @@ -1,237 +0,0 @@ ---- -description: A widget that provides a frictionless login and signup experience for your web apps. -title: Lock for Web ---- -import {AuthCodeBlock} from "/snippets/AuthCodeBlock.jsx"; - -Lock is an embeddable login form that can be [configured to your needs](/docs/libraries/lock/lock-configuration). Lock enables you to easily add social identity providers, so that your users can log in seamlessly using any desired provider. - - - -Embedded login for web applications uses [cross-origin authentication](/docs/authenticate/login/cross-origin-authentication) unless you [configure a custom domain](/docs/customize/custom-domains) for your tenant. Cross-origin authentication uses third-party cookies to allow for secure authentication transactions across different origins. - - - -## Lock Installation - -You can install Lock via several methods. Select any of the following installation sources that best suit your environment and application. - -### Installation Sources - -Install via [npm](https://npmjs.org): -`npm install auth0-lock` - -Install via [bower](http://bower.io): - -`bower install auth0-lock` - -Include via our CDN (Replace `.x` and `.y` with the latest minor and patch release numbers from the [Lock Github repository](https://github.com/auth0/lock/releases): - -Latest Minor Release:``Latest Patch Release: -`` - -It is recommended that production applications use a specific patch version, or at the very least a specific minor version. Regardless of the method by which Lock is included, the recommendation is that the version should be locked down and only manually updated, to ensure that those updates do not adversely affect your implementation. Check the [GitHub repository](https://github.com/auth0/lock/releases) for a current list of releases. - -### Mobile - -If you are targeting mobile audiences, Auth0 recommends that you add the following meta tag to your application's `head`: - -`` - -### Bundling Dependencies - -If you are using browserify or webpack to build your project and bundle its dependencies, after installing the `auth0-lock` module, you will need to bundle it with all its dependencies. Examples are available for [Browserify](https://github.com/auth0/lock/tree/master/examples/bundling/browserify) and [webpack](https://github.com/auth0/lock/tree/master/examples/bundling/webpack). - -### Cross-Origin Authentication - - - -Embedded login for web applications uses [cross-origin authentication](/docs/authenticate/login/cross-origin-authentication) unless you [configure a custom domain](/docs/customize/custom-domains) for your tenant. Cross-origin authentication uses third-party cookies to allow for secure authentication transactions across different origins. - - - -Embedding Lock within your application requires [cross-origin authentication](/docs/authenticate/login/cross-origin-authentication) to be properly configured. Specifically, you need to set the **Allowed Web Origins** property to the domain making the request. You can find this field in the [Application Settings](https://manage.auth0.com/#/applications/{yourClientId}/settings). - -## Usage - -### Step 1. Initializing Lock - -First, you'll need to initialize a new `Auth0Lock` object, and provide it with your Auth0 client ID (the unique client ID for each Auth0 application, which you can get from the [management dashboard](https://manage.auth0.com/#)) and your Auth0 domain (for example `yourname.auth0.com`). - - -export const codeExample1 = `// Initializing our Auth0Lock -var lock = new Auth0Lock( - '{yourClientId}', - '{yourDomain}' -);`; - - - -### Step 2. Authenticating and Getting User Info - -Next, listen using the `on` method for the `authenticated` event. When the event occurs, use the `accessToken` which was received to call the `getUserInfo` method and acquire the user's profile information (as needed). - - -export const codeExample2 = `var Auth = (function() { - - var wm = new WeakMap(); - var privateStore = {}; - var lock; - - function Auth() { - this.lock = new Auth0Lock( - '<{yourClientId}>', - '<{yourDomain}>' - ); - wm.set(privateStore, { - appName: "example" - }); - } - - Auth.prototype.getProfile = function() { - return wm.get(privateStore).profile; - }; - - Auth.prototype.authn = function() { - // Listening for the authenticated event - this.lock.on("authenticated", function(authResult) { - // Use the token in authResult to getUserInfo() and save it if necessary - this.getUserInfo(authResult.accessToken, function(error, profile) { - if (error) { - // Handle error - return; - } - - //we recommend not storing Access Tokens unless absolutely necessary - wm.set(privateStore, { - accessToken: authResult.accessToken - }); - - wm.set(privateStore, { - profile: profile - }); - - }); - }); - }; - return Auth; -}());`; - - - -You can then manipulate page content and display profile information to the user (for example, displaying their name in a welcome message). - -`

Welcome

` - -Note that if you are storing the user profile, you will want to `JSON.stringify` the profile object and then, when using it later, `JSON.parse` it, because it will need to be stored in `localStorage` as a string rather than a JSON object. - -### Step 3. Showing Lock - -Here you're showing the Lock widget after the user clicks a login button; you can just as easily show Lock automatically when arriving at a page by just using `lock.show();` on page load. - -This will show the Lock widget, and paired with the above, you're now ready to handle logins! - -```js lines -document.getElementById('btn-login').addEventListener('click', function() { - lock.show(); -}); -``` - -## Passwordless - -Lock's Passwordless Mode is only available in Lock v11.2.0 and later. Please use the [latest release of Lock](https://github.com/auth0/lock/releases) for this feature! - -You can use Lock's Passwordless Mode to allow users to authenticate using just an email or mobile number. They will receive the code and then return to input it, or click the link, and they can be authenticated without remembering a password. - -In Lock, in order to implement Passwordless Mode, you initialize Lock in a slightly different manner, with `Auth0LockPasswordless` rather than with `Auth0Lock`: - - -export const codeExample3 = `var lockPasswordless = new Auth0LockPasswordless( - '{yourClientId}', - '{yourDomain}' -);`; - - - -### Passwordless options - -Additionally, Lock's Passwordless Mode has a couple of configuration options that are unique to it. - -In order to indicate which connection type you would like, you initialize Lock with the `allowedConnections` option with either `email` or `sms` as the value: - -```js lines -var passwordlessOptions = { - allowedConnections: ['sms'] -} -``` - -Remember to enable the passwordless connection of your choice in the [Dashboard](https://manage.auth0.com/#) under **Connections -> Passwordless**, and then to enable it for your application, that way when Lock tries to use it, it is already set up and linked to the application. - -If you choose to use `email`, you have one more option to select - whether you wish your users to receive a code to input, or a "magic link" to use. This is done via the `passwordlessMethod` option, which takes values of `code` or `link`. - -```js lines -var passwordlessOptions = { - allowedConnections: ['email'], - passwordlessMethod: 'code' -} -``` - -### Passwordless example - - -export const codeExample4 = `var passwordlessOptions = { - allowedConnections: ['email'], - passwordlessMethod: 'code', - auth: { - redirectUrl: 'http://localhost:3000/callback', - responseType: 'token id_token', - params: { - scope: 'openid email' - } - } -} - -var lockPasswordless = new Auth0LockPasswordless( - '{yourClientId}', - '{yourDomain}', - passwordlessOptions -);`; - - - -### Single Sign-On with embedded authentication - -Apps with embedded login must meet two criteria in order to have Single Sign-on (SSO). - -1. Both of the applications attempting SSO must be first-party applications. SSO with third-party applications will not work. -2. They need to make use of custom domains and have both the applications which intend to have SSO as well as the Auth0 tenant on the same domain. Traditionally, Auth0 domains are in the format `foo.auth0.com`, but custom domains allow you to use the same domain for each of the applications in question as well as your Auth0 tenant, preventing the risk of CSRF attacks. - -Our recommendation is to use Universal Login instead of setting up SSO in embedded login scenarios. Universal Login is the most reliable and stable way to perform SSO, and is the only way to do so if you must use multiple domains for your applications, or use [third-party applications](/docs/get-started/applications/third-party-applications/configure-third-party-applications). - -## Error Codes and Descriptions - -When Lock is used for embedded login, it employs the `/co/authenticate` endpoint, which has the following errors. - -The error description is human readable. It **should not be parsed by any code** and it subject to change at any time. - -| **Status** | **Code** | **Description** | -| --- | --- | --- | -| 400 | invalid\_request | Invalid request body. All and only of client\_id, credential\_type, username, otp, realm are required. | -| 401 | unauthorized\_client | Cross origin login not allowed. | -| 400 | unsupported\_credential\_type | Unknown credential type parameter. | -| 400 | invalid\_request | Unknown realm non-existent-connection. | -| 403 | access\_denied | Wrong email or password. | -| 403 | access\_denied | Authentication error | -| 403 | blocked\_user | Blocked user | -| 401 | password\_leaked | This login attempt has been blocked because the password you're using was previously disclosed through a data breach (not in this application). | -| 429 | too\_many\_attempts | Your account has been blocked after multiple consecutive login attempts. We've sent you a notification via your preferred contact method with instructions on how to unblock it. | -| 429 | too\_many\_attempts | We have detected suspicious login behavior and further attempts will be blocked. Please contact the administrator. | - -## Browser Compatibility - -Browser compatibility is ensured for **Chrome**, **Safari**, **Firefox** and **IE >= 10**. Auth0 currently uses [zuul](https://github.com/defunctzombie/zuul) along with [Saucelabs](https://saucelabs.com) to run integration tests on each push. - -## Learn more - -* [Lock API Reference](/docs/libraries/lock/lock-api-reference) -* [Lock Configuration Options](/docs/libraries/lock/lock-configuration) diff --git a/main/docs/libraries/lock/lock-api-reference.mdx b/main/docs/libraries/lock/lock-api-reference.mdx deleted file mode 100644 index ddfa7c7d7b..0000000000 --- a/main/docs/libraries/lock/lock-api-reference.mdx +++ /dev/null @@ -1,272 +0,0 @@ ---- -description: Details on the Lock v11 API. -title: Lock API Reference ---- -import {AuthCodeBlock} from "/snippets/AuthCodeBlock.jsx"; - -Lock has many methods, features, and configurable options. This reference is designed to direct you to the ones that you need, and discuss how to use them. Click below to go straight the method you're looking for, or just browse! If you're looking for information about events emitted by Lock, they're listed under the [on()](#on-) method section! - -* [new Auth0Lock](#auth0lock) - Instantiating Lock -* [getUserInfo()](#getuserinfo-) - Obtaining the profile of a logged in user -* [show()](#show-) - Showing the Lock widget -* [on()](#on-) - Listening for events -* [resumeAuth()](#resumeauth-) - Use to complete authentication flow when `autoParseHash` is false -* [checkSession()](#checksession-) - Get a new token from Auth0 for an authenticated user -* [logout()](#logout-) - Log out the user - -## Auth0Lock - -`new Auth0Lock(clientID, domain, options)` - -Initializes a new instance of `Auth0Lock` configured with your application's `clientID` and your account's `domain` from your [Auth0](https://manage.auth0.com/#/) management dashboard. The third and optional parameter is an `options` object used to configure Lock for your application's needs. You can find this information at your [application settings](https://manage.auth0.com/#/applications). - -* **clientId `{String}`**: Required parameter. Your application's clientId in Auth0. -* **domain `{String}`**: Required parameter. Your Auth0 domain. Usually your-account.auth0.com. -* **options `{Object}`**: Optional parameter. Allows for the configuration of Lock's appearance and behavior. See [the configuration options page](/docs/libraries/lock/lock-configuration) for details. - - -export const codeExample1 = `var Auth = (function() { - - var privateStore = {}; - - function Auth() { - // Instantiate Lock - without custom options - this.lock = new Auth0Lock( - '<{yourClientId}>', - '<{yourDomain}>' - ); - } - - Auth.prototype.getProfile = function() { - return privateStore.profile; - }; - - Auth.prototype.authn = function() { - // Listening for the authenticated event and get profile - this.lock.on("authenticated", function(authResult) { - // Use the token in authResult to getUserInfo() and save it if necessary - this.getUserInfo(authResult.accessToken, function(error, profile) { - if (error) { - // Handle error - return; - } - - //save Access Token only if necessary - privateStore.accessToken = accessToken; - privateStore.profile = profile; - - // Update DOM - }); - }); - }; - return Auth; -}());`; - - - -## getUserInfo() - -`getUserInfo(accessToken, callback)` - -Once the user has logged in and you are in possession of a token, you can use that token to obtain the user's profile with `getUserInfo`. This method replaces the deprecated `getProfile()`. - -* **accessToken \{String}**: User token. -* **callback \{Function}**: Will be invoked after the user profile been retrieved. - -```js lines -lock.getUserInfo(accessToken, function(error, profile) { - if (!error) { - alert("hello " + profile.name); - } -}); -``` - -## show() - -`show(options)` - -The `show` method displays the widget. Beginning with Lock version 10.2.0, the `show` method can now accept an `options` object as a parameter. Note that this parameter is meant to be used as a way to override your Lock's `options` for this particular displaying of the widget - options should be set when instantiating Lock, and overridden, only if needed for your specific use case, here. - -The following subset of `options` to be overridden from the values they were given (or their defaults) when Lock was instantiated: - -* allowedConnections -* auth.params -* allowLogin -* allowSignUp -* allowForgotPassword -* initialScreen -* rememberLastLogin - -For more detail on the entire list of configurable options that can be chosen when instantiating Lock, as opposed to the limited subset above that can be overridden in the `show` method, please see the [user configurable options page](/docs/libraries/lock/lock-configuration). - -Options override examples: - -```js lines -// Show the Lock widget, without overriding any options -lock.show(); - -// Show the Lock widget, overriding some options -lock.show({ - allowedConnections: ["twitter", "facebook"], - allowSignUp: false -}); -``` - -Options should be set when first instantiating Lock `var lock = new Auth0Lock(clientId, domain, options);`. Options should only be passed to `show` in order to override your previously set options while displaying the widget at this particular time and place. - -There is an additional option that can be set in the `show` method called `flashMessage`. - -### flashMessage - -This object is only available as an option for the `show` method, not for use in the normal `options` object when instantiating Lock. The `flashMessage` object shows an error or success flash message when Lock is shown. It has the following parameters: - -* **type** \{String}: The message type, it should be either `error` or `success`. -* **text** \{String}: The text to show. - -```js lines -lock.show({ - flashMessage:{ - type: 'success', - text: 'Amazing Success!!' - } -}); -``` - -A practical application of the `flashMessage` option is to handle authorization errors. The `flashMessage` can be populated with error description text. - -```js lines -lock.on('authorization_error', function(error) { - lock.show({ - flashMessage: { - type: 'error', - text: error.errorDescription - } - }); -}); -``` - -So, if `tester@example.com` were now to try to sign in, being a user who is blocked, the user will be shown Lock again, with a top bar displaying the error message, rather than simply failing to login and Lock closing. - -## hide() - -`hide()` - -The `hide` method closes the widget if it is currently open. The widget closes itself under most circumstances, so this method would primarily be invoked in specific use cases only. For instance, one might wish to listen for the `unrecoverable_error` event and then `hide` the Lock and redirect to their own custom error page. Another example is users who are implementing [popup mode](/docs/libraries/lock/lock-authentication-modes), and might need to manually `hide` the widget after the `authenticated` event fires. - -Example usage to hide (close) the Lock widget in popup mode: - -```js lines -// Listen for authenticated event and hide Lock -lock.on("authenticated", function() { - lock.hide(); - - // Whatever else you'd like to do on authenticated event - -}); -``` - -## on() - -Lock will emit events during its lifecycle. The `on` method can be used to listen for particular events and react to them. - -* `show`: emitted when Lock is shown. Has no arguments. -* `hide`: emitted when Lock is hidden. Has no arguments. -* `unrecoverable_error`: emitted when there is an unrecoverable error, for instance when no connection is available. Has the error as the only argument. -* `authenticated`: emitted after a successful authentication. Has the authentication result as the only argument. The authentication result contains the token which can be used to get the user's profile or stored to log them in on subsequent checks. -* `authorization_error`: emitted when authorization fails. Has error as the only argument. -* `hash_parsed`: every time a new Auth0Lock object is initialized in redirect mode (the default), it will attempt to parse the hash part of the url looking for the result of a login attempt. This is a low level event for advanced use cases and `authenticated` and `authorization_error` should be preferred when possible. After that this event will be emitted with `null` if it couldn't find anything in the hash. It will be emitted with the same argument as the `authenticated` event after a successful login or with the same argument as `authorization_error` if something went wrong. This event won't be emitted in [popup mode](/docs/libraries/lock/lock-authentication-modes) because there is no need to parse the url's hash part. -* `forgot_password ready`: emitted when the "Forgot password" screen is shown. (Only in Version >`10.18`) -* `forgot_password submit`: emitted when the user clicks on the submit button of the "Forgot password" screen. (Only in Version >`10.14`) -* `signin ready`: emitted when the "Sign in" screen is shown. -* `signup ready`: emitted when the "Sign up" screen is shown. -* `signin submit`: emitted when the user clicks on the submit button of the "Login" screen. (Only in Version >`10.18`) -* `signup submit`: emitted when the user clicks on the submit button of the "Sign Up" screen. (Only in Version >`10.18`) -* `federated login`: emitted when the user clicks on a social connection button. Has the connection name and the strategy as arguments. (Only in Version >`10.18`) -* `socialOrPhoneNumber ready`: emitted when the Passwordless screen with Social + Phone Number is shown -* `socialOrPhoneNumber submit`: emitted when the Passwordless screen with Social + Phone Number is submitted -* `socialOrEmail ready`: emitted when the Passwordless screen with Social + Email is shown -* `socialOrEmail submit`: emitted when the Passwordless screen with Social + Email is submitted -* `vcode ready`: emitted when the Passwordless screen with the one-time-password is shown -* `vcode submit`: emitted when the Passwordless screen with the one-time-password is submitted - -The `authenticated` event listener has a single argument, an `authResult` object. This object contains the following properties: `accessToken`, `idToken`, `state`, `refreshToken` and `idTokenPayload`. - -An example use of the `authenticated` event: - - -export const codeExample2 = `var Auth = (function() { - - var privateStore = {}; - - function Auth() { - this.lock = new Auth0Lock( - '<{yourClientId}>', - '<{yourDomain}>' - ); - } - - Auth.prototype.getProfile = function() { - return privateStore.profile; - }; - - Auth.prototype.authn = function() { - // Listening for the authenticated event - this.lock.on("authenticated", function(authResult) { - // Use the token in authResult to getUserInfo() and save it if necessary - this.getUserInfo(authResult.accessToken, function(error, profile) { - if (error) { - // Handle error - return; - } - - privateStore.profile = profile; - - }); - }); - }; - return Auth; -}());`; - - - -## resumeAuth() - -This method can only be used when you set the [auth.autoParseHash](/docs/libraries/lock/lock-configuration) option to `false`. You'll need to call `resumeAuth` to complete the authentication flow. This method is useful when you're using a client-side router that uses a `#` to handle urls (angular2 with `useHash`, or react-router with `hashHistory`). - -* **hash** \{String}: The hash fragment received from the redirect. -* **callback** \{Function}: Will be invoked after the parse is done. Has an error (if any) as the first argument and the authentication result as the second one. If there is no hash available, both arguments will be `null`. - -```js lines -lock.resumeAuth(hash, function(error, authResult) { - if (error) { - alert("Could not parse hash"); - } - //This is just an example; you should not log Access Tokens in production. - console.log(authResult.accessToken); -}); -``` - -## checkSession() - -The `checkSession` method allows you to acquire a new token from Auth0 for a user who is already authenticated against Auth0 for your domain. It takes the following parameters: - -* **options** \{Object}: Optional. Accepts any valid OAuth2 parameters that would normally be sent to `/authorize`. If you omit them, it will use the ones provided when initializing Auth0. -* **callback** \{Function}: Will be invoked with the token renewal result. Has an error (if any) as the first argument and the authentication result as the second one. - -```js lines -lock.checkSession({}, function(err, authResult) { - // handle error or new tokens -}); -``` - -## logout() - -Logs out the user. - -* **options** \{Object}: This is optional and follows the same rules as auth0.js logout(). - -```js lines -lock.logout({ - returnTo: 'https://myapp.com/bye-bye' -}); -``` \ No newline at end of file diff --git a/main/docs/libraries/lock/lock-authentication-modes.mdx b/main/docs/libraries/lock/lock-authentication-modes.mdx deleted file mode 100644 index 8fc8483f2e..0000000000 --- a/main/docs/libraries/lock/lock-authentication-modes.mdx +++ /dev/null @@ -1,46 +0,0 @@ ---- -description: Details about Authentication Modes with Lock. -title: Lock Authentication Modes ---- -import {AuthCodeBlock} from "/snippets/AuthCodeBlock.jsx"; - -Lock can function in two different modes. The default mode is **redirect mode**. In this mode, your user is redirected to be authenticated, and then is returned to the application. In the second mode, **popup mode**, a popup window allows the user to authenticate with the identity provider without leaving the application. - -## Redirect Mode - -When you click the IdP button (For example, Facebook) with redirect mode, you are redirected to Facebook momentarily. Redirect mode is the default with Lock, and is the recommended mode for almost all use cases. Once you successfully login (to Facebook, in this example), Facebook will redirect you back to your app (through Auth0). The majority of examples or samples in the reference documentation employ redirect mode. - -## Popup Mode - -If after you click on the IdP button (Facebook for example), a popup (new tab or window) is opened, it means you are using popup mode. In that popup, you'll see that Facebook page is displayed. Once you successfully login to Facebook, the popup will be closed and your web app will recognize that the user has been authenticated. The web app has **never been redirected to any other page**. - -Implementing Lock with Popup Mode is again a simple change of the `redirect` option from its default. - - -export const codeExample = `var lock = new Auth0Lock( - '{yourClientId}', - '{yourDomain}', - { - auth: { - redirect: false - } - } -);`; - - - -Multi-factor authentication (MFA) is not supported when Lock is in popup mode and embedded in your application. Additionally, popup mode does not work with Universal Login. - -Some Auth0 features, such as [Single Sign-on (SSO)](/docs/authenticate/single-sign-on) between multiple applications, depend on users being redirected to Auth0 to set a cookie on `'{yourDomain}'`. - -When using popup mode, a popup window will be displayed in order to set this cookie. If prompts are unnecessary, this popup window will be blank and be in a hidden iframe to minimize disruption. The reason for this is that cross-origin requests sent from your application to Auth0 are not be able to set cookies. - -If you do not want to display a popup window and do not need SSO between multiple applications, you can set `sso: false` when using Lock or auth0.js. - -```js lines -var options = { - auth: { - sso: false - } -} -``` \ No newline at end of file diff --git a/main/docs/libraries/lock/lock-authentication-parameters.mdx b/main/docs/libraries/lock/lock-authentication-parameters.mdx deleted file mode 100644 index a73613752e..0000000000 --- a/main/docs/libraries/lock/lock-authentication-parameters.mdx +++ /dev/null @@ -1,73 +0,0 @@ ---- -description: Lock documentation on setting authentication parameters. -title: Lock Authentication Parameters ---- -You can send parameters when starting a login by adding them to the options object. The example below adds a `state` parameter with a value equal to `'foo'`. - -```js lines -var options = { - auth: { - params: {state: 'foo'}, - } -}; -``` - -The above example would be analogous to triggering the login with `https://{yourDomain}/authorize?state=foo&...`. - -The following parameters are supported: `scope`, `device`, `nonce` and `state`. - -## Supported parameters - -### scope \{string} - -```js lines -var options = { - auth: { - params: {scope: 'openid email user_metadata app_metadata picture'}, - } -}; -``` - -There are different values supported for scope. Keep in mind that JWTs are sent on every API request, so it is desirable to keep them as small as possible. - -The default `scope` value in Lock is `openid profile email`. This minimum scope value is required to make the **Last time you logged in with** feature work correctly. - - - -If you don't manually specify at least the default scope of `openid profile email` when initializing Lock, and you are running your website from `http://localhost` or `http://127.0.0.1`, you will get the following error in the browser console: - -`Consent required. When using getSSOData, the user has to be authenticated with the following scope: openid profile email` - -That will **not** happen when you run your application in production or if you specify the `openid profile email` scope. You can read more about this in the [User consent and third-party applications](/docs/get-started/applications/third-party-applications/user-consent-and-third-party-applications) document. - - - -For more information about scopes, see the [scopes documentation page](/docs/get-started/apis/scopes). - -#### Example: retrieve a token - -In Lock, if you wish to receive a token with the ability to fetch the user's profile data, you should add the `scope` parameter. - -```js lines -var options = { - auth: { - params: { - scope: 'openid profile' - } - } -}; -``` - -There is also a `connectionScopes` configuration option for Lock, which allows you to specify scopes on any specific connection. This will be useful if you want to initially start with a set of scopes (defined on the dashboard), but later on request additional permissions or attributes from a specific connection. Read more about it on the [Lock Configuration Options](/docs/libraries/lock/lock-configuration) page. - -### state \{string} - -The `state` parameter is an arbitrary state value that will be maintained across redirects. It is useful to mitigate [XSRF attacks](https://en.wikipedia.org/wiki/Cross-site_request_forgery) and for any contextual information, [such as a return url](/docs/authenticate/login/logout/redirect-users-after-logout) that you might need after the authentication process is finished. If a custom state parameter is not provided, Lock will automatically generate one. For more information, see [State Parameter](/docs/secure/attack-protection/state-parameters). - -### nonce \{string} - -The `nonce` parameter is used to help prevent replay attacks, and will be automatically generated by Lock if a custom value is not provided. - -### device \{string} - -The `device` parameter sets the name of the device or browser requesting authentication. \ No newline at end of file diff --git a/main/docs/libraries/lock/lock-configuration.mdx b/main/docs/libraries/lock/lock-configuration.mdx deleted file mode 100644 index 3fbff9fd41..0000000000 --- a/main/docs/libraries/lock/lock-configuration.mdx +++ /dev/null @@ -1,821 +0,0 @@ ---- -description: Lock has many configurable options that allow you to change the behavior, appearance, and connectivity of the Lock widget - this resource provides the details on those options for you! -title: Lock Configuration Options ---- -import {AuthCodeBlock} from "/snippets/AuthCodeBlock.jsx"; - -Lock can be configured through the `options` parameter sent to the constructor. These options can alter the way that the Lock widget behaves, how it deals with connections, additional signup fields that you require for your project, the language and text values, colors, and images on the widget, and many more. Take a look at the index below if you know what you are looking for, or browse the options for more details. - -## UI - -| Option | Description | -| --- | --- | -| [allowAutocomplete](#allowautocomplete-boolean-) | Enable or disable autocompletion on the email or username inputs | -| [allowPasswordAutocomplete](#allowpasswordautocomplete-boolean-) | Enable or disable autocompletion on password input | -| [allowShowPassword](#allowshowpassword-boolean-) | Specifies if the user can choose to show password while typing it | -| [allowedConnections](#allowedconnections-array-) | List of connections that will be available to perform authentication | -| [autoclose](#autoclose-boolean-) | Specifies if Lock closes after a login | -| [autofocus](#autofocus-boolean-) | Specifies if focus is set on the first input field | -| [avatar](#avatar-object-) | Specifies if an avatar and a username should be displayed on the Lock's header once an email or username has been entered and how to obtain it | -| [closable](#closable-boolean-) | Determines whether or not Lock can be closed | -| [container](#container-string-) | The HTML element where Lock will be rendered. This causes Lock to appear inline instead of in a modal window | -| [flashMessage](#flashmessage-object-) | Shows an `error` or `success` flash message when Lock is shown | -| [language](#language-string-) | Specifies the language of the widget | -| [languageDictionary](#languagedictionary-object-) | Customize text used for widget elements (such as labels and placeholders) | -| [popupOptions](#popupoptions-object-) | Customize the location of the popup in the screen | -| [rememberLastLogin](#rememberlastlogin-boolean-) | Whether or not to show a screen that allows you to quickly log in with the account you used the last time | -| [scrollGlobalMessagesIntoView](#scrollglobalmessagesintoview-boolean-) | Specify if a globalMessage should be scrolled into the user's viewport | - -## Theme - -Theme options are grouped in the `theme` property of the `options` object. - -| Option | Description | -| --- | --- | -| [authButtons](#authbuttons-object-) | Customize the appearance of specific connection buttons | -| [labeledSubmitButton](#labeledsubmitbutton-boolean-) | whether or not the submit button has text | -| [logo](#logo-string-) | What logo should be used | -| [primaryColor](#primarycolor-string-) | Color of the primary button on the widget | - -## Authentication - -Authentication options are grouped in the `auth` property of the `options` object. - -| Option | Description | -| --- | --- | -| [audience](#audience-string-) | The API which will be consuming your Access Token | -| [autoParseHash](#autoparsehash-boolean-) | Whether or not to automatically parse hash and continue | -| [connectionScopes](#connectionscopes-object-) | Specify connection scopes | -| [params](#params-object-) | Option to send parameters at login | -| [redirect](#redirect-boolean-) | Whether or not to use redirect mode | -| [redirectUrl](#redirecturl-string-) | The URL to redirect to after auth | -| [responseMode](#responsemode-string-) | Option to send response as POST | -| [responseType](#responsetype-string-) | Response as a code or token | -| [sso](#sso-boolean-) | Determines whether Single Sign-On is enabled or not in Lock | - -## Database - -| Option | Description | -| --- | --- | -| [additionalSignUpFields](#additionalsignupfields-array-) | Additional fields collected at signup | -| [allowLogin](#allowlogin-boolean-) | Whether or not to allow login on widget | -| [allowForgotPassword](#allowforgotpassword-boolean-) | Whether or not to allow forgot password on widget | -| [allowSignUp](#allowsignup-boolean-) | Whether or not to allow signup on widget | -| [defaultDatabaseConnection](#defaultdatabaseconnection-string-) | Default shown DB connection | -| [initialScreen](#initialscreen-string-) | Which screen to show when the widget is opened | -| [loginAfterSignUp](#loginaftersignup-boolean-) | After signup, whether or not to auto login | -| [forgotPasswordLink](#forgotpasswordlink-string-) | Link to a custom forgot password page | -| [showTerms](#showterms-boolean-) | Specify if signup terms should be display | -| [mustAcceptTerms](#mustacceptterms-boolean-) | Whether or not terms must be accepted (checkbox) | -| [prefill](#prefill-object-) | Prefill values for email/username fields | -| [signUpLink](#signuplink-string-) | Set a custom url to fire when clicking "sign up" | -| [usernameStyle](#usernamestyle-string-) | Limit username field to accept only "username" values or only "email" values | - -## Enterprise - -| Option | Description | -| --- | --- | -| [defaultEnterpriseConnection](#defaultenterpriseconnection-string-) | Specifies a connection if more than one present | - -## Passwordless - -| Option | Description | -| --- | --- | -| [passwordlessMethod](#passwordlessmethod-string-) | When using `Auth0LockPasswordless` with an email connection, you can use this option to pick between sending a [code](/docs/authenticate/passwordless) or a [magic link](/docs/authenticate/passwordless) to authenticate the user | - -### Other - -| Option | Description | -| --- | --- | -| [configurationBaseUrl](#configurationbaseurl-string-) | Override your application's base URL | -| [languageBaseUrl](#languagebaseurl-string-) | Override your language file base URL | -| [hashCleanup](#hashcleanup-boolean-) | Override the default removal of the hash from the URL | -| [connectionResolver](#connectionresolver-function-) | Optional callback function for choosing a connection based on the username information | - ---- - -## UI Options - -### allowAutocomplete \{Boolean} - -Determines whether or not the email or username fields will allow autocomplete (``). Defaults to `false`. - -`allowAutocomplete: true` - -### allowPasswordAutocomplete \{Boolean} - -Determines whether or not the password field will allow autocomplete (``). Defaults to `false`. - -Set `allowPasswordAutocomplete` to `true` for password manager support and to avoid other cases of adverse behavior. - -`allowPasswordAutocomplete: true` - -### allowShowPassword \{Boolean} - -This option determines whether or not to add a checkbox to the UI which, when selected, will allow the user to show their password when typing it. The option defaults to `false`. - -`allowShowPassword: true` - -Lock with `allowShowPassword` set to `true` and toggled to show the password: - -![Lock Option: Allow Show Password](/docs/images/cdy7uua7fh8z/6G8LJaNjaMl5zUrwGi5UJQ/44dc951b70077b0ec6bc04d2f0413b12/lock-allowshowpassword.png) - -### allowedConnections \{Array} - -Array of connections that will be used for the `signin|signup|reset` actions. Defaults to all enabled connections. - -`allowedConnections: ['Username-Password-Authentication']` - -`allowedConnections: ['twitter', 'facebook', 'linkedin']` - -`allowedConnections: ['qraftlabs.com']` - -Examples of `allowedConnections`: - -![Lock Option: Allowed Connections - Database](/docs/images/cdy7uua7fh8z/1mllPDLFCCETwQ9MeGEf3W/763728971302656618ef3bd131ab83b1/lock-allowedconnections-database.png)![Lock Option: Allowed Connections - Social](/docs/images/cdy7uua7fh8z/7uYN4ebrLLM8bjx1fee8j0/1e716cca3e1bae990063e9226dfe9ac2/lock-allowedconnections-social.png) - -### autoclose \{Boolean} - -Determines whether or not the Lock will be closed automatically after a successful sign in. Defaults to false. If the Lock is not `closable` it won't be closed, even if this option is set to true. - -`autoclose: true` - -### autofocus \{Boolean} - -If true, the focus is set to the first field on the widget. Defaults to `false` when being rendered on a mobile device, or if a `container` option is provided; defaults to `true` in all other cases. - -`autofocus: false` - -### avatar \{Object} - -By default, Gravatar is used to fetch the user avatar and display name, but you can obtain them from anywhere with the `avatar` option. - -```js lines -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); - } - } -}; -``` - -Or, if you want to display no avatar at all, simply pass in `null`. - -`avatar: null` - -Default behavior with Gravatar: - -![Lock Option: Avatar](/docs/images/cdy7uua7fh8z/69Nz0QoQifPWpfBZwX15J0/204aad93cde406f0ed3771ce38766f56/lock-avatar.png) - -### closable \{Boolean} - -Determines whether or not the Lock can be closed. When a `container` option is provided its value is always `false`, otherwise it defaults to `true`. - -`closable: false` - -![Lock Option: Closable](/docs/images/cdy7uua7fh8z/2qwXtPQev1nlpyOQauXKBO/f967e1157972ecbf5b030b3be3600f2e/lock-closable.png) - -### container \{String} - -The `id` of the html element where the widget will be shown. - -This makes the widget appear inline within your `div` instead of in a modal pop-out window. - -```html lines -
- - -``` - -![Lock Option: Container](/docs/images/cdy7uua7fh8z/5L4S47Yfset2DR9pjcqVrX/1c4d1928cf75acf40129ffd01394bf33/lock-container.png) - -### flashMessage \{Object} - -Shows an `error` or `success` flash message when Lock is shown. This object has the following properties: - -* type \{String}: The message type, supported types are `error`, `info`, and `success` -* text \{String}: The text to show. - -```js lines -var options = { - flashMessage: { - type: 'success', - text: 'Welcome!' - } -}; -``` - -### language \{String} - -Specifies the language of the widget. Defaults to "en". See the [internationalization directory](https://github.com/auth0/lock/blob/master/src/i18n/) for a current list of provided languages. - -`language: 'es'` - -![Lock Option: Language](/docs/images/cdy7uua7fh8z/3u3lytCUBDbcKmXFV34OUv/5cf5d7e1af9593a3b094f32815a4da11/lock-language.png) - -### languageDictionary \{Object} - -Allows customization of every piece of text displayed in the Lock. Defaults to {"{}"}. See English language [Language Dictionary Specification](https://github.com/auth0/lock/blob/master/src/i18n/en.js) for the full list of `languageDictionary` values able to be altered with this object. - -```js lines -var options = { - languageDictionary: { - emailInputPlaceholder: "something@youremail.com", - title: "Log me in" - }, -}; -``` - -![Lock Option: Language Dictionary](/docs/images/cdy7uua7fh8z/5203ofwtagtIKGT4HnIPmk/8ad9cdd151a2cdb18b8a42ee47dbf679/lock-languagedictionary.png) - -Additionally, check out the [Customizing Error Messages](/docs/customize/login-pages/classic-login/customize-lock-error-messages) page or the [Internationalization](/docs/customize/internationalization-and-localization/lock-internationalization) page for more information about the use of the `languageDictionary` option. - -### popupOptions \{Object} - -Allows the customization the location of the popup in the screen. Any position and size feature allowed by window.open is accepted. Defaults to {"{}"}. - -Options for the `window.open` features. This only applies if `redirect` is set to `false`. - -```js lines -var options = { - auth: { - redirect: false - }, - popupOptions: { width: 300, height: 400, left: 200, top: 300 } -}; -``` - -### rememberLastLogin \{Boolean} - -Determines whether or not to show a screen that allows you to quickly log in with the account you used the last time. -Requests Single Sign-on (SSO) data and enables a **Last time you signed in with** message. Defaults to `true`. This information comes from the user's Auth0 session, so this ability will last as long as their Auth0 session would (which is configurable). - -`rememberLastLogin: false` - -New tenants [automatically have Seamless SSO enabled](/docs/get-started/tenant-settings/enable-sso-for-legacy-tenants). With this enabled, the `rememberLastLogin` option will not be relevant because if there is a session in place then the Universal Login page will not be displayed at all. Using Seamless SSO is highly recommended because it provides a seamless authentication experience: users log in once and won’t have to enter credentials again when they navigate either through the applications you have built, or third party apps. If the user is not logged in they will be redirected to the login screen, as expected. Additionally, the **Last time you signed in with** message will not be available under the following circumstances: - -* You used Lock in a [Hosted Login Page](/docs/authenticate/login/auth0-universal-login) with the session established using [Passwordless authentication](/docs/libraries/lock/lock-configuration#passwordlessmethod-string-). -* You used Lock in an [embedded login scenario](/docs/authenticate/login/universal-vs-embedded-login) where `responseType: code` (indicating the [Authorization Code Flow](/docs/get-started/authentication-and-authorization-flow/authorization-code-flow), which is used for Regular Web Apps). - -### scrollGlobalMessagesIntoView \{Boolean} - -Determines whether or not a `globalMessage` should be scrolled into the user's viewport. Defaults to `true`. - -`scrollGlobalMessagesIntoView: false` - -## Theme Options - -Theme options are grouped in the `theme` property of the `options` object. - -```js lines -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} - -Allows the customization of buttons in Lock with custom OAuth2 connections. Each custom connection whose button you desire to customize should be listed by name, each with their own set of parameters. The customizable parameters are listed below: - -* **displayName** \{String}: The name to show instead of the connection name when building the button title, such as `LOGIN WITH MYCONNECTION` for login). -* **primaryColor** \{String}: The button's background color. Defaults to `#eb5424`. -* **foregroundColor** \{String}: The button's text color. Defaults to `#FFFFFF`. -* **icon** \{String}: The URL of the icon for this connection. For example: `http://site.com/logo.png`. - -```js lines -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} - -This option indicates whether or not the submit button should have a label, and defaults to `true`. When set to `false`, an icon will be shown instead. - -```js lines -var options = { - theme: { - labeledSubmitButton: false - } -}; -``` - -![Lock Option: Labeled Submit Button](/docs/images/cdy7uua7fh8z/5PNCvsbYa98pKZwWHVPS9S/39cb5ac63818ec5558c451b1e37f735f/lock-theme-labeledsubmitbutton.png) - -If the label is set to true, which is the default, the label's text can be customized through the [languageDictionary](#languagedictionary-object-) option. - -### logo \{String} - -The value for `logo` is a URL for an image that will be placed in the Lock's header, and defaults to Auth0's logo. It has a recommended max height of `58px` for a better user experience. - -```js lines -var options = { - theme: { - logo: 'https://example.com/logo.png' - } -}; -``` - -![Lock UI customization - Logo](/docs/images/cdy7uua7fh8z/FdOAKKy71rTbFjIlZEL8D/2eef96008095d85388daaa461707901d/lock-theme-logo.png) - -### primaryColor \{String} - -The `primaryColor` property defines the primary color of the Lock; all colors used in the widget will be calculated from it. This option is useful when providing a custom `logo`, to ensure all colors go well together with the `logo`'s color palette. Defaults to `#ea5323`. - -```js lines -var options = { - theme: { - logo: 'https://example.com/logo.png', - primaryColor: '#31324F' - } -}; -``` - -![Lock UI customization - primary color](/docs/images/cdy7uua7fh8z/1qQjeTmXJyIziv400VPaOn/48dd3cb8a72a6e88b2634b4b8a8bed63/lock-theme-primarycolor.png) - -## Authentication Options - -Authentication options are grouped in the `auth` property of the `options` object. - -The default scope used by Lock is `openid profile email`. - -```js lines -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} - -The `audience` option indicates the API which will be consuming the Access Token that is received after authentication. - -export const codeExample = `var options = { - auth: { - audience: 'https://{yourDomain}/userinfo', - } -}`; - - - -### autoParseHash \{Boolean} - -When `autoParseHash` is set to `true`, Lock will parse the `window.location.hash` string when instantiated. If set to `false`, you'll have to manually resume authentication using the [resumeAuth](/docs/libraries/lock/lock-api-reference) method. - -```js lines -var options = { - auth: { - autoParseHash: false - } -}; -``` - -### connectionScopes \{Object} - -This option allows you to set scopes to be sent to the oauth2/social connection for authentication. - -```js lines -var options = { - auth: { - connectionScopes: { - 'facebook': ['scope1', 'scope2'] - } - } -}; -``` - -A listing of particular scopes for your social connections can be acquired from the provider in question. For example, [Facebook for Developers](https://developers.facebook.com/docs/facebook-login/permissions/) reference has a listing of separate permissions that can be requested for your connection. - -### params \{Object} - -You can send parameters when starting a login by adding them to the options object. The example below adds a `state` parameter with a value equal to `foo` and also adds a `scope` parameter (which includes the scope, and then the requested attributes). - -```js lines -var options = { - auth: { - params: { - state: 'foo', - scope: 'openid email user_metadata app_metadata picture' - } - } -}; -``` - -For more details about supported parameters, see [Lock Authentication Parameters](/docs/libraries/lock/lock-authentication-parameters). - -### redirect \{Boolean} - -Defaults to true. When set to true, redirect mode will be used. If set to false, [popup mode](/docs/libraries/lock/lock-authentication-modes) is chosen. - -```js lines -var options = { - auth: { - redirect: false - } -}; -``` - -### redirectUrl \{String} - -The URL Auth0 will redirect back to after authentication. Defaults to the empty string "" (no redirect URL). - -```js lines -var options = { - auth: { - redirectUrl: 'http://testurl.com' - } -}; -``` - -When the `redirectUrl` is provided (set to non blank value) the `responseType` option will be defaulted to `code` if not manually set. - -### responseMode \{String} - -Should be set to `"form_post"` if you want the code or the token to be transmitted via an HTTP POST request to the `redirectUrl`, instead of being included in its query or fragment parts. - -Otherwise, this option should be omitted, and is omitted by default. - -```js lines -var options = { - auth: { - responseMode: 'form_post' - } -}; -``` - -### responseType \{String} - -The value of `responseType` should be set to "token" for Single-Page Applications, and "code" otherwise. Defaults to "code" when redirectUrl is provided, and to "token" otherwise. - -```js lines -var options = { - auth: { - responseType: 'token' - } -}; -``` - -When the `responseType` is set to `code`, Lock will never show the **Last time you logged in with** message, and will always prompt the user for credentials. - -## sso \{Boolean} - -Defaults to true. When set to true, enables [Single Sign-On](/docs/authenticate/single-sign-on) in Lock. - -```js lines -var options = { - auth: { - sso: false - } -}; -``` - -## Database Options - -### additionalSignUpFields \{Array} - -Extra input fields can be added to the sign up screen with the `additionalSignUpFields` option. Each option added in this manner will then be added to that user's `user_metadata`. To learn more, read [Understand How Metadata Works in User Profiles](/docs/manage-users/user-accounts/metadata). Every input must have a `name` and a `placeholder`, and an `icon` URL can also be provided. Also, the initial value can be provided with the `prefill` option, which can be a string with the value or a function that obtains it. Other options depend on the type of the field, which is defined via the type option and defaults to "text". - - - -The `additionalSignUpFields` are intended for use with database signups only. If you have social sign ups too, you can ask for the additional information after the users sign up (see this [page about custom signup](/docs/libraries/custom-signup) for more details). You can use the `databaseAlternativeSignupInstructions` i18n key to display these instructions. - - - -The new fields are rendered below the regular sign up input fields in the order they are provided. - -#### Text Fields - -Text fields are the default type of additional signup field. Note that a `validator` function can also be provided. - -```js lines -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" - }] -} -``` - -If you don't specify a `validator` the text field will be **required**. If you want to make the text field optional, use a validator that always returns `true` like this: - -```js lines -var options = { - additionalSignUpFields: [{ - name: "favorite_color", - placeholder: "Enter your favorite color (optional)", - validator: function() { - return true; - } - }] -} -``` - -If you want to save the value of the attribute in the root of your profile, use `storage: 'root'`. Only a subset of values can be stored this way. The list of attributes that can be added to your root profile is [here](https://auth0.com/docs/api/management/v2#!/Users/patch_users_by_id). By default, every additional sign up field is stored inside the user\_metadata object. - -```js lines -var options = { - additionalSignUpFields: [{ - name: "name", - storage: "root" - }] -}; -``` - -![Lock Option: Additional Signup Fields](/docs/images/cdy7uua7fh8z/2KPDGZb3caq57caJ90w53k/e092bdb4a4d93589aa006f796ff20fca/lock-additionalsignupfields.png) - -#### Select Field - -The signup field `type: "select"` will allow you to use select elements for the user to choose a value from. - -```js lines -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" - }] -} -``` - -The `options` array items for `select` fields must adhere to the following format: -`{label: “non empty string”, value: “non empty string”}`, and at least one option must be defined. - -The `options` and `prefill` values can be provided through a function: - -```js lines -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 Field - -The third type of custom signup field is the `type: "checkbox"`. The `prefill` value can determine the default state of the checkbox (`true` or `false`), and it is required. - -```js lines -var options = { - additionalSignUpFields: [{ - type: "checkbox", - name: "newsletter", - prefill: "true", - placeholder: "I hereby agree that I want to receive marketing emails from your company" - }] -} -``` - -#### Hidden field - -The signup field `type: "hidden"` will allow you to use a hidden input with a fixed value. - -```js lines -var options = { - additionalSignUpFields: [{ - type: "hidden", - name: "signup_code", - value: "abc123" - }] -} -``` - -Some use cases may be able to use `additionalSignUpFields` data for email templates, such as an option for language preferences, the value of which could then be used to set the language of templated email communications. - -### allowLogin \{Boolean} - -When set to `false` the widget won't display the login screen. This is useful if you want to use the widget just for signups (the login and signup tabs in the signup screen will be hidden) or to reset passwords (the back button in the forgot password screen will be hidden). In such cases you may also need to specify the `initialScreen`, `allowForgotPassword` and `allowSignUp` options. It defaults to `true`. - -`allowLogin: false` - -![Lock Option: Allow Login](/docs/images/cdy7uua7fh8z/6gI4aSLHXLzhcHiR9aWMET/d05c2a08a3895278b01150ecf894cb5f/lock-allowlogin.png) - -### allowForgotPassword \{Boolean} - -When set to false, `allowForgotPassword` hides the "Don't remember your password?" link in the Login screen, making the Forgot Password screen unreachable. Defaults to true. If you are using a database connection with a custom database which doesn't have a change password script the Forgot Password screen won't be available. - -`allowForgotPassword: false` - -![Lock Option: Allow Forgot Password](/docs/images/cdy7uua7fh8z/1L6wJS3UnWK1VGKYMFhAB9/2ddcf2d462255e78a8b78958c2503809/lock-allowforgotpassword.png) - -### allowSignUp \{Boolean} - -When set to `false`, hides the login and sign up tabs in the login screen, making the sign up screen unreachable. Defaults to `true`. Keep in mind that if the database connection has sign ups disabled or you are using a custom database which doesn't have a create script, then the sign up screen won't be available. - -Also bear in mind that this option **only** controls client-side appearance, and does not completely stop new sign ups from determined anonymous visitors. If you are looking to fully prevent new users from signing up, you must use the **Disable Sign Ups** option in the dashboard, in the connection settings. - -`allowSignUp: false` - -![Lock Option: Allow Signup](/docs/images/cdy7uua7fh8z/2BNlYe99EFlRmIlhoLZiEB/f280d865cb16fa5fecda952271cb18bf/lock-allowsignup.png) - -### defaultDatabaseConnection \{String} - -Specifies the database connection that will be used when there is more than one available. - -`defaultDatabaseConnection: 'test-database'` - -### initialScreen \{String} - -The name of the screen that will be shown when the widget is opened. Valid values are `login`, `signUp`, and `forgotPassword`. If this option is left unspecified, the widget will default to the first screen that is available from that list. - -`initialScreen: 'forgotPassword'` - -### loginAfterSignUp \{Boolean} - -Determines whether or not the user will be automatically signed in after a successful sign up. Defaults to `true`. - -`loginAfterSignUp: false` - -### forgotPasswordLink \{String} - -Set the URL for a page that allows the user to reset their password. When set to a non-empty string, the user will be sent to the provided URL when clicking the "Don't remember your password?" link in the login screen. - -`forgotPasswordLink: 'https://yoursite.com/reset-password'` - -### showTerms \{Boolean} - -When set to `true` displays the `languageDictionary.signUpTerms` string. Defaults to `true`. - -`showTerms: false` - -### mustAcceptTerms \{Boolean} - -When set to `true` displays a checkbox input alongside the terms and conditions that must be checked before signing up. The terms and conditions can be specified via the `languageDictionary` option. This option will only take effect for users signing up with database connections. Defaults to `false`. - -`mustAcceptTerms: true` - -### prefill \{Object} - -Allows to set the initial value for the email and/or username inputs. When omitted, no initial value will be provided. - -```js lines -var options = { - prefill: { - email: "someone@auth0.com", - username: "someone", - phoneNumber: "+1234567890" - } -}; -``` - -### signUpLink \{String} - -Set the URL to be requested when clicking on the Signup button. When set to a non empty string, this option forces `allowSignUp` to `true`. - -`signUpLink: 'https://yoursite.com/signup'` - -### usernameStyle \{String} - -Determines what will be used to identify the user for a Database connection that has the `requires_username` flag set (if it is not set, `usernameStyle` option will be ignored). Possible values are `"username"` and `"email"`. By default both `username` and `email` are allowed; setting this option will limit logins to use one or the other. - -`usernameStyle: 'username'` - -## Enterprise Options - -### defaultEnterpriseConnection \{String} - -Specifies the enterprise connection which allows to login using a username and a password that will be used when there is more than one available or there is a database connection. If a `defaultDatabaseConnection` is provided the database connection will be used and this option will be ignored. - -`defaultEnterpriseConnection: 'test-database'` - -### defaultADUsernameFromEmailPrefix \{Boolean} - -Resolve the AD placeholder username from the email's prefix. Defaults to `true`. - -`defaultADUsernameFromEmailPrefix: false` - -## Passwordless Options - -### passwordlessMethod \{String} - -When using `Auth0LockPasswordless` with an email connection, you can use this option to pick between sending a [code](/docs/authenticate/passwordless) or a [magic link](/docs/authenticate/passwordless) to authenticate the user. Available values for email connections are `code` and `link`. Defaults to `code`. SMS passwordless connections will always use `code`. - -`passwordlessMethod: code` - -## Other Options - -### configurationBaseUrl \{String} - -Overrides the application settings base URL. By default, it uses the provided domain. This option is only necessary if your specific use case dictates that your application does not use the default behavior. - -`configurationBaseUrl: "https://www.example.com"` - -### languageBaseUrl \{String} - -Overrides the language source url for Auth0's provided translations. By default, this option uses Auth0's CDN URL `https://cdn.auth0.com` since this is where all of the provided translations are stored. By providing another value, you can use another source for the language translations if needed. - -`languageBaseUrl: "https://www.example.com"` - -### hashCleanup \{Boolean} - -When the `hashCleanup` option is enabled, it will remove the hash part of the callback URL after the user authentication. It defaults to true. - -`hashCleanup: false` - -### connectionResolver \{Function} - -When in use, provides an extensibility point to make it possible to choose which connection to use based on the username information. - -Has `username`, `context`, and `callback` as parameters. The callback expects an object like: `{type: 'database', name: 'connection name'}`. **This only works for database connections.** Keep in mind that this resolver will run in the form's `onSubmit` event, so keep it simple and fast. - -This is a beta feature. If you find a bug, please open a GitHub [issue](https://github.com/auth0/lock/issues/new). - -### leeway \{Integer} - -The `leeway` option can be set to an integer - a value in seconds - which can be used to account for clock skew in ID Token expirations. Typically the value is no more than a minute or two at maximum. - -`leeway: 30` diff --git a/main/docs/libraries/lock/lock-ui-customization.mdx b/main/docs/libraries/lock/lock-ui-customization.mdx deleted file mode 100644 index b0225bcf3f..0000000000 --- a/main/docs/libraries/lock/lock-ui-customization.mdx +++ /dev/null @@ -1,109 +0,0 @@ ---- -description: Customizing the appearance of your Lock widget can be important for branding and a cohesive UI, and this resource highlights the ways in which you can do so while implementing Lock in your project. -title: Lock UI Customization ---- -You can customize the appearance of your Lock widget in a few different ways. The best and safest way to do so is with the provided JavaScript options. - -## JavaScript Options - -You can set up a variety of customizations to your Lock via the `options` parameter when you instantiate your Lock. Some of them allow you to customize your UI. The UI customization options are a work in progress - we expect to be adding more as we go. - -First, you'll define the `options` object, containing whichever options you're wanting to customize. Then you'll need to include that options object as the third parameter when you instantiate Lock; more on that below. - -### Theming Options - -There are a couple of theming options currently available, namespaced under the `theme` property. - -#### logo \{String} - -![Lock UI customization - Logo](/docs/images/cdy7uua7fh8z/FdOAKKy71rTbFjIlZEL8D/2eef96008095d85388daaa461707901d/lock-theme-logo.png) - -The value for `logo` is a URL for an image that will be placed in the Lock's header, and defaults to Auth0's logo. The minimum recommended resolution is 200 pixels (width) by 200 pixels (height). - -```js lines -var options = { - theme: { - logo: 'https://example.com/logo.png' - } -}; -``` - -#### primaryColor \{String} - -![Lock UI customization - primary color](/docs/images/cdy7uua7fh8z/1qQjeTmXJyIziv400VPaOn/48dd3cb8a72a6e88b2634b4b8a8bed63/lock-theme-primarycolor.png) - -The `primaryColor` property defines the primary color of the Lock; all colors used in the widget will be calculated from it. This option is useful when providing a custom `logo`, to ensure all colors go well together with the `logo`'s color palette. Defaults to `#ea5323`. - -```js lines -var options = { - theme: { - logo: 'https://example.com/logo.png', - primaryColor: '#31324F' - } -}; -``` - -#### authButtons `{Object}` - -Allows the customization of buttons in Lock. Each custom connection whose button you desire to customize should be listed by name, each with their own set of parameters. The customizable parameters are listed below: - -* **displayName** \{String}: The name to show instead of the connection name when building the button title, such as `LOGIN WITH MYCONNECTION` for login). -* **primaryColor** \{String}: The button's background color. Defaults to `#eb5424`. -* **foregroundColor** \{String}: The button's text color. Defaults to `#FFFFFF`. -* **icon** \{String}: The URL of the icon for this connection. For example: `http://site.com/logo.png`. - -```js lines -var options = { - theme: { - authButtons: { - "testConnection": { - displayName: "Test Conn", - primaryColor: "#b7b7b7", - foregroundColor: "#000000", - icon: "http://example.com/icon.png" - }, - "testConnection2": { - primaryColor: "#000000", - foregroundColor: "#ffffff", - } - } - } -}; -``` - -### Customizing Text - -The `languageDictionary` option allows customization of every piece of text displayed in the Lock. Defaults to {}. See below for an example. - -```js lines -var options = { - languageDictionary: { - emailInputPlaceholder: "something@youremail.com", - title: "Log me in" - }, -}; -``` - -![Customizing text in the Lock UI via languageDictionary option](/docs/images/cdy7uua7fh8z/iNvBLxxmea2tiWBhzwKX5/db0d7f86d0f7f95f70e5edcd34ab736f/lock-languagedictionary.png) - -For a complete list of the items able to be customized using `languageDictionary`, see the [English Language Dictionary Specification](https://github.com/auth0/lock/blob/master/src/i18n/en.js) in the repository. - -### Instantiating Lock - -Finally, you'll want to go ahead and instantiate your Lock, with the `options` object that you've defined with your custom options in it. - -`var lock = new Auth0Lock('{yourClientId}', '{yourDomain}', options);` - -## Overriding CSS - -Customizing your Lock by overriding its CSS isn't recommended. The issue is that with new releases of Lock, some styling may change, leading to unintended problems if you are overriding the CSS. Additionally, it's possible to simply overlook use of styles in other places and while the change may look fine in one view, it might not in another. - -If you still intend to override CSS to further style your Lock, we recommend that you use a specific patch version of Lock rather than a major or minor version, so that you limit the amount of unexpected results that may occur when you alter the styles, and then another patch is deployed that might cause unexpected behavior in your UI due to the changes. This can be done by ensuring that you specify that patch version (`x.y.z`) when including Lock, or downloading it. - -Additionally, we of course recommend that you test your CSS changes exhaustively, to ensure that the experience is the one you intend it to be for your customers. - -## Further Information - -If you're looking for more detailed information while working to customize Lock for your application, check out the [configuration options](/docs/libraries/lock/lock-configuration) page or the [Lock API](/docs/libraries/lock/lock-api-reference) page! - -If you have specific theming options that you would like to see added, let us know. We are working on improving the customization options that are available through JavaScript, and this list will be updated as new options are added. diff --git a/main/docs/libraries/lock/selecting-from-multiple-connection-options.mdx b/main/docs/libraries/lock/selecting-from-multiple-connection-options.mdx index 59783edf22..63406a452a 100644 --- a/main/docs/libraries/lock/selecting-from-multiple-connection-options.mdx +++ b/main/docs/libraries/lock/selecting-from-multiple-connection-options.mdx @@ -60,11 +60,11 @@ var options = { } ``` -You can use the [`defaultDatabaseConnection` option](/docs/libraries/lock/lock-configuration#defaultdatabaseconnection-string-) to specify the database connection that will be used by default. +You can use the `defaultDatabaseConnection` option to specify the database connection that will be used by default. ## Filtering available connections programmatically -The [`allowedConnections` option](/docs/libraries/lock/lock-configuration#allowedconnections-array-) in Lock lets you indicate which of the available connections should be presented as an option to the user. +The `allowedConnections` option in Lock lets you indicate which of the available connections should be presented as an option to the user. This lets you tailor the experience based on additional input or context (e.g. "Click here to log in as a student, or here to log in as a faculty member"). @@ -79,7 +79,7 @@ export const codeExample = `var lock = new Auth0Lock( -Note that you can also provide the `allowedConnections` option to the `lock.show()` method if providing it at instantiation is not ideal for your use case. Please refer to the [API documentation](/docs/libraries/lock/lock-api-reference) for the `show` method for more information. +Note that you can also provide the `allowedConnections` option to the `lock.show()` method if providing it at instantiation is not ideal for your use case. ## Sending realm information from the application diff --git a/main/docs/manage-users/user-accounts/manage-user-access-to-applications.mdx b/main/docs/manage-users/user-accounts/manage-user-access-to-applications.mdx index 4fc6851847..8728a660d1 100644 --- a/main/docs/manage-users/user-accounts/manage-user-access-to-applications.mdx +++ b/main/docs/manage-users/user-accounts/manage-user-access-to-applications.mdx @@ -21,5 +21,4 @@ All users associated with a single Auth0 tenant are shared between the tenant's ## Learn more * [Create Multiple Tenants](/docs/get-started/auth0-overview/create-tenants/create-multiple-tenants) -* [Select from Multiple Connection Options](/docs/libraries/lock/selecting-from-multiple-connection-options) * [Set Up Multiple Environments](/docs/get-started/auth0-overview/create-tenants/set-up-multiple-environments) diff --git a/main/docs/manage-users/user-accounts/metadata.mdx b/main/docs/manage-users/user-accounts/metadata.mdx index 1f108c0101..0c53cf0b2d 100644 --- a/main/docs/manage-users/user-accounts/metadata.mdx +++ b/main/docs/manage-users/user-accounts/metadata.mdx @@ -57,7 +57,7 @@ Use the Auth0 Dashboard to configure application metadata which contains key/val ### Use the Lock library -Use the [Lock](/docs/libraries/lock) library to define, add, read, and update `user_metadata.` Read `user_metadata` properties the same way you would read any other user profile property. For example, the following code snippet retrieves the value associated with `user_metadata.hobby` and assigns it to an element on the page: +Use the Lock library to define, add, read, and update `user_metadata.` Read `user_metadata` properties the same way you would read any other user profile property. For example, the following code snippet retrieves the value associated with `user_metadata.hobby` and assigns it to an element on the page: ```javascript lines // Use the accessToken acquired upon authentication to call getUserInfo @@ -73,7 +73,7 @@ lock.getUserInfo(accessToken, function(error, profile) { -You can use `additionalSignUpFields` to add custom fields to user sign-up forms. When a user adds data in a custom field, Auth0 stores entered values in that user's `user_metadata`. To learn more about adding `user_metadata` on signup, read [Additional Signup Fields](/docs/libraries/lock/lock-configuration#additionalsignupfields). +You can use `additionalSignUpFields` to add custom fields to user sign-up forms. When a user adds data in a custom field, Auth0 stores entered values in that user's `user_metadata`. To learn more about adding `user_metadata` on signup, read the Additional Signup Fields documentation. ## Custom database connections and metadata diff --git a/main/docs/manage-users/user-accounts/metadata/manage-metadata-lock.mdx b/main/docs/manage-users/user-accounts/metadata/manage-metadata-lock.mdx index 7bd026e016..9719964f34 100644 --- a/main/docs/manage-users/user-accounts/metadata/manage-metadata-lock.mdx +++ b/main/docs/manage-users/user-accounts/metadata/manage-metadata-lock.mdx @@ -2,7 +2,7 @@ description: Learn how to manage user and app metadata with the Auth0 Lock library. title: Manage Metadata with Lock --- -You can use the [Lock library](/docs/libraries/lock) to define, add, read, and update the `user_metadata.` You can read the user's `user_metadata` properties the same way you would read any other user profile property. For example, the following code snippet retrieves the value associated with `user_metadata.hobby` and assigns it to an element on the page: +You can use the Lock library to define, add, read, and update the `user_metadata.` You can read the user's `user_metadata` properties the same way you would read any other user profile property. For example, the following code snippet retrieves the value associated with `user_metadata.hobby` and assigns it to an element on the page: ```javascript lines // Use the accessToken acquired upon authentication to call getUserInfo @@ -18,10 +18,8 @@ lock.getUserInfo(accessToken, function(error, profile) { -You can use `additionalSignUpFields` to add custom fields to user sign-up forms. When a user adds data in a custom field, Auth0 stores entered values in that user's `user_metadata`. To learn more about adding `user_metadata` on signup, read [Additional Signup Fields](/docs/libraries/lock/lock-configuration#additionalsignupfields-array-). +You can use `additionalSignUpFields` to add custom fields to user sign-up forms. When a user adds data in a custom field, Auth0 stores entered values in that user's `user_metadata`. To learn more about adding `user_metadata` on signup, read the Additional Signup Fields documentation. ## Learn more -* [Lock for Web](/docs/libraries/lock) -* [Lock API Reference](/docs/libraries/lock/lock-api-reference) * [Deprecation Errors](/docs/troubleshoot/basic-issues/check-deprecation-errors) diff --git a/main/docs/manage-users/user-accounts/user-profiles.mdx b/main/docs/manage-users/user-accounts/user-profiles.mdx index e08b2862ef..fbf0bbd4f6 100644 --- a/main/docs/manage-users/user-accounts/user-profiles.mdx +++ b/main/docs/manage-users/user-accounts/user-profiles.mdx @@ -84,7 +84,6 @@ Once Auth0 completes authentication and returns control to your application, it One SDK is the Auth0 Lock widget, which provides a user login interface. To learn more, read: -* [Lock for Web](/docs/libraries/lock) * [Lock Swift](/docs/libraries/lock-swift) * [Lock.Android](/docs/libraries/lock-android) diff --git a/main/docs/manage-users/user-accounts/user-profiles/progressive-profiling.mdx b/main/docs/manage-users/user-accounts/user-profiles/progressive-profiling.mdx index 38b8f120c1..7c3a66c8f4 100644 --- a/main/docs/manage-users/user-accounts/user-profiles/progressive-profiling.mdx +++ b/main/docs/manage-users/user-accounts/user-profiles/progressive-profiling.mdx @@ -38,7 +38,7 @@ You can use the Auth0 -If you are using the [Lock SDK](/docs/libraries/lock) with the Classic Login experience, you must update to version 11.35.0 or higher to use Bot Detection for passwordless flows. +If you are using the Lock SDK with the Classic Login experience, you must update to version 11.35.0 or higher to use Bot Detection for passwordless flows. If you are using the [Auth0.js SDK](/docs/libraries/auth0js), you must update to version 9.20.0 or higher to use Bot Detection for passwordless flows. diff --git a/main/docs/secure/data-privacy-and-compliance/gdpr/gdpr-conditions-for-consent.mdx b/main/docs/secure/data-privacy-and-compliance/gdpr/gdpr-conditions-for-consent.mdx index a0e8599b9c..4af0bde827 100644 --- a/main/docs/secure/data-privacy-and-compliance/gdpr/gdpr-conditions-for-consent.mdx +++ b/main/docs/secure/data-privacy-and-compliance/gdpr/gdpr-conditions-for-consent.mdx @@ -28,7 +28,7 @@ Auth0 metadata is not a secure data store and should not be used to store sensit ### Use Lock -You can customize the Lock UI to display links to your terms and conditions and/or privacy statement pages, and a consent checkbox that the user has to check in order to sign up. This can be done with the `mustAcceptTerm`s Lock option. This property, when set to `true`, displays a checkbox alongside the terms and conditions that must be checked before signing up. The terms and conditions can be specified using the languageDictionary option. To learn more, read [Lock Configuration Options](/docs/libraries/lock/lock-configuration). +You can customize the Lock UI to display links to your terms and conditions and/or privacy statement pages, and a consent checkbox that the user has to check in order to sign up. This can be done with the `mustAcceptTerm`s Lock option. This property, when set to `true`, displays a checkbox alongside the terms and conditions that must be checked before signing up. The terms and conditions can be specified using the languageDictionary option. To learn more, read the Lock Configuration Options documentation. Once the user accepts and signs up, save the consent information at the `user_metadata` using a rule that will run upon first login. To learn more about rules, read [Auth0 Rules](/docs/customize/rules). diff --git a/main/docs/secure/data-privacy-and-compliance/gdpr/gdpr-track-consent-with-lock.mdx b/main/docs/secure/data-privacy-and-compliance/gdpr/gdpr-track-consent-with-lock.mdx index 7c49cb6e79..5a72123f4b 100644 --- a/main/docs/secure/data-privacy-and-compliance/gdpr/gdpr-track-consent-with-lock.mdx +++ b/main/docs/secure/data-privacy-and-compliance/gdpr/gdpr-track-consent-with-lock.mdx @@ -67,7 +67,7 @@ This works both for database connections and social logins. 1. Go to [Auth0 Dashboard > Branding > Universal Login](https://manage.auth0.com/#/login_page). 2. Select the **Login** view, and enable the **Customize Login Page** toggle. 3. Locate the **Default Templates** dropdown, and select `Lock`. The code block will be pre-populated for you. -4. To add a field for the `consentGiven` metadata, use the `mustAcceptTerms` option. To include links to your Terms & Conditions and/or privacy policy pages, use the `languageDictionary` option. To learn more, read [Lock Configuration Options](/docs/libraries/lock/lock-configuration). The example below displays text that says `I agree to the terms of service and privacy policy` (including links to both pages) next to the flag: +4. To add a field for the `consentGiven` metadata, use the `mustAcceptTerms` option. To include links to your Terms & Conditions and/or privacy policy pages, use the `languageDictionary` option. To learn more, read the Lock Configuration Options documentation. The example below displays text that says `I agree to the terms of service and privacy policy` (including links to both pages) next to the flag: ```javascript lines //code reducted for simplicity @@ -128,7 +128,7 @@ This works only for database connections (if you use social logins, see the next 1. Navigate to [Auth0 Dashboard > Branding > Universal Login](https://manage.auth0.com/#/login_page). 2. Select the **Login** view, and enable the **Customize Login Page** toggle. 3. Locate the **Default Templates** dropdown, and select `Lock`. The code block will be pre-populated for you. -4. To add a field for the `consentGiven` metadata, use the `additionalSignUpFields` option. To learn more, read [Lock Configuration Options](/docs/libraries/lock/lock-configuration). The example below sets the type to `checkbox` (so we have a flag), the label to `I consent to data processing`, and the default value to `checked`. +4. To add a field for the `consentGiven` metadata, use the `additionalSignUpFields` option. To learn more, read the Lock Configuration Options documentation. The example below sets the type to `checkbox` (so we have a flag), the label to `I consent to data processing`, and the default value to `checked`. ```javascript lines //code reducted for simplicity diff --git a/main/docs/secure/tokens/id-tokens/get-id-tokens.mdx b/main/docs/secure/tokens/id-tokens/get-id-tokens.mdx index dc53b9a28c..630022fb0f 100644 --- a/main/docs/secure/tokens/id-tokens/get-id-tokens.mdx +++ b/main/docs/secure/tokens/id-tokens/get-id-tokens.mdx @@ -4,7 +4,7 @@ title: Get ID Tokens --- To get an ID token, you need to request them when authenticating users. Auth0 makes it easy for your app to authenticate users using: -* [Quickstarts](/docs/quickstarts): The easiest way to implement authentication, which can show you how to use [Universal Login](/docs/authenticate/login/auth0-universal-login), the Lock widget, and Auth0's language and framework-specific SDKs. Our [Lock documentation](/docs/libraries/lock) and [Auth0.js documentation](/docs/libraries/auth0js) provide specifics about retrieving an ID token after authentication. +* [Quickstarts](/docs/quickstarts): The easiest way to implement authentication, which can show you how to use [Universal Login](/docs/authenticate/login/auth0-universal-login), Auth0's language and framework-specific SDKs. Our [Auth0.js documentation](/docs/libraries/auth0js) provides specifics about retrieving an ID token after authentication. * [Authentication API](https://auth0.com/docs/api/authentication): If you prefer to roll your own, you can call our API directly. First, you need to know [which flow to use](/docs/get-started/authentication-and-authorization-flow/which-oauth-2-0-flow-should-i-use) before following the appropriate flow tutorial. ## Control ID token contents