¶ Login Component (Guard) Configuration Parameter List
The Authing login component (Guard) provides many advanced configurations, such as customizing the UI and using specific login methods. All configurations are as follows:
Parameter Name | Parameter Description | Type | Required | Default |
|---|---|---|---|---|
target | Specify the mount point of the Guard form, accept all the parameters or dom elements that querySelector (opens new window) can accept, if not passed in, Guard will automatically generate a div tag and put it at the end of the body. | String | HTMLElement | No |
mode | Guard display mode | No | GuardMode.Normal | |
title | Product name | String | No | Authing |
logo | Product logo | String | No | [Authing logo] |
contentCss | **Custom CSS style,**If specified, a node will be inserted into the head of the DOM.such as body {background:#6699 !important;}. | String | No | - |
loginMethods | List of common login methods(include LDAP) that need to be used. | No | [LoginMethods.PhoneCode, LoginMethods.Password] | |
registerMethods | Registration method that need to be used. | No | [RegisterMethods.Email,RegisterMethods.Phone] | |
defaultRegisterMethod | Registration method displayed by default | No | _RegisterMethods.Email* | |
defaultScenes | The interface displayed when the component is opened. | No | _GuardScenes.Login* | |
socialConnections | Social login list that need to be used. | No | [] | |
enterpriseConnections | List of corporate identity sources(exclude LDAP) that need to be used,The list item value is the unique identifier of the configured corporate identity source, attention:The corporate identity source needs to be passed in the corresponding appId before it can be used. | Array | No | [] |
defaultLoginMethod | Default login method.Optional value is one of options.loginMethods. | String | No | LoginMethods.Password |
autoRegister | Whether to merge registration and login, after the merge, if the user does not exist, it will be automatically registered. | Boolean | No | false |
disableRegister | Whether to merge registration and login,If prohibited, the "register" will be hidden. | Boolean | No | false |
disableResetPwd | Whether to prohibit password reset, If prohibited, the "forgot password" will be hidden. | |||
clickCloseable | Whether to hide the close button in the upper right corner of the login box in Modal mode, if it is hidden, the user will not be able to close the login box by clicking the button. | Boolean | No | true |
escCloseable | Whether it is possible to close the login box through the keyboard ESC key in Modal mode. | Boolean | No | true |
isSSO | whether it is single sign on | Boolean | No | false |
appHost | App host | String | Yes | - |
qrCodeScanOptions | QR code login configuration，details:options parameter in QrCodeAuthenticationClient().startScanning(domId, options)(opens new window) (opens new window) | Objcect | No | null |
apiHost | API request address for private deployment | String | Yes in private deployment | [Authing official api address] |
The following is a description of all enumeration values that may be used in the advanced configuration:
¶ GuardMode
Guard currently has two display methods: modal | normal. The normal method inserts the form into the specified dom node, which is suitable for scenarios where login is used as a separate page. The modal mode displays the form in the form of a modal box, which is suitable for popping up in an existing page. log in. The default display mode is normal, and the display mode can be configured by passing in the mode parameter:
import { AuthingGuard, GuardMode } from "@authing/native-js-ui-components";
// import css files
import "@authing/native-js-ui-components/lib/index.min.css";
const guard = new AuthingGuard("AUTHING_APP_ID", {
mode: GuardMode.Modal
});
// modal mode need to call the “show” method to display the form
guard.show();
Attention：The native js version of modal mode needs to manually call guard.show() after initialization to show Guard.
SSO login mode can be enabled by passing in appHost and isSSO. Guard will detect whether there is a user logged in to this application after the load event. If so, the login event will be triggered directly to make your next operation easy.
| key | value | Description |
|---|---|---|
| Modal | 'modal' | Modal box mode |
| Normal | 'normal' | Normal mode |
¶ LoginMethods
Common login methods supported by Guard
| key | value | Description |
|---|---|---|
| LDAP | 'ldap' | LDAP identity directory login(Need to configure LDAP service) |
| AppQr | 'app-qrcode' | APP QR code login(Need to import APP QR code login) |
| Password | 'password' | Account password login (including mobile phone number + password, email + password, user name + password.) |
| PhoneCode | 'phone-code' | SMS code login |
| AD | 'ad' | AD user directory login |
¶ RegisterMethods
Registration methods supported by Guard
| key | value | Description |
|---|---|---|
| 'email' | Email registration | |
| Phone | 'phone' | SMS code registration |
¶ GuardScenes
Guard displayable interface
| key | value | Description |
|---|---|---|
| Login | 'login' | Login interface |
| Register | 'register' | Registration interface |
¶ ResetPwdMethods
Password reset methods supported by Guard
| key | value | Description |
|---|---|---|
| 'email' | Reset by email verification code | |
| Phone | 'phone' | Reset by SMS code |
¶ SocialConnections
Guard 支持的社会化登录方式
| key | value | Description |
|---|---|---|
| Github | 'github' | GitHub login |
| 'google' | Google login |
¶ Get help
Join us on forum: #authing-chat (opens new window)