¶ Global Login Box

Path: Branding->Global Login Box

Branding is one of the modules that GenAuth pays the most attention to, providing users with very powerful customization functions.

The following figure is an overview of the global login configuration.

¶ Style configuration

You can configure the display style of the login box here.

¶ Overall style

The overall style applies to the entire process of application login/registration, including one-time authentication, two-time authentication, and information completion.

Administrators can customize the login/registration page background, loading icon, login box version, display language, CSS, etc. on the Overall style page.

¶ Custom background

Administrators can set the login box display background to a solid color, or upload an image and use it as the background.

¶ Custom loading icon

Administrators can customize the icon displayed when the login box is loading in this module.

To delete the current loading icon, just click the checkbox and confirm the deletion.

¶ Login box version

Administrators can choose between Upgraded version and Classic version login box configuration pages, with the default being the upgraded version.

¶ Default language

Define the display language of the login box:

• Follow the system
  The display language of the login box may be different from the system language of the application after login. Administrators can set the display language of the login box to follow the system language of the application to improve the user login experience.
• Simplified Chinese
• Traditional Chinese
• English
• 日本語

¶ Switch language

Administrators can use the Switch language switch to define whether to display the language switch option at the bottom of the login box, so that users can customize the display language of the login box. If this switch is turned off, users cannot customize the display language of the login box. At this time, the interface display language is the one configured by the administrator in Default language.

¶ Custom css

Custom css can achieve more detailed control over the hosted login page to meet user expectations for the login page. By customizing CSS, you can customize the login box with some advanced styles, such as changing the background color:

.authing-guard-layout {
  background: gray;
}

To configure a personalized login box through custom CSS, you need to turn on the Custom CSS switch in the Overall Style tab.

Customizing CSS has the following points to note:

• Try to control the scope of the specified CSS, and its generation rule depends on the last level of routing.
  If you only want to style the login page, you can add .login before all CSS selectors, such as .login for the /login page.

• Try to specify the guard rendering node to be modified, common rendering nodes such as:
  • .g2-view-login​
  • .g2-view-register​
  • .g2-forget-password​
  • .g2-need-help​
  • ...
    As shown in the figure below, the class name .g2-view-login indicates that guard is in the login node. Carrying this class name as the front selector, its style will only take effect in the login node.

• The specific css class name can be viewed through the Chrome console on the login interface of GenAuth. The dom tags that need custom styles all provide fixed class names. Class names with hash cannot be used because they change frequently.

• Try to select elements accurately. If the dom hierarchy is very deep, it is recommended to use copy selector and use it with the first and second preceding selectors.

¶ General login

The so-called General login refers to password login and verification code login. This section will introduce the Forgot password, Enterprise account login, Social account login hide/show switches that are only applicable to general login.

¶ Forgot password

Administrators can define whether to display the Forgot password component in the login box. After turning it on, users can click this button to reset their password when they forget their login password.

¶ Enterprise account login

Administrators can define whether to display other enterprise account login entrances in the login box. After turning it on, users can log in using other enterprise application accounts.

¶ Social Account Login

Administrators can define whether to display third-party social account login entrances in the login box. After turning it on, users can log in using third-party social accounts.

¶ Scan QR code login

GenAuth supports users to log in by scanning QR codes on the mobile terminal. In addition to using mobile APP to scan QR codes, you can also use mobile third-party enterprise identity sources or social identity sources to scan QR codes.

Administrators can configure whether to enable enterprise account login and social account login here. After turning it on, users can see it on the scan code login page.

¶ Enterprise account login

Same as [Regular login Enterprise account login](#Enterprise account login).

¶ Social account login

Same as [Regular login Social account login](#Social account login).

¶ Function configuration

¶ Login and registration agreement

When users register, you need to let them understand and agree to your terms of service to help you avoid legal risks. To this end, GenAuth provides the Login and registration agreement function.

To enable this function, perform the following steps:

1. In the Branding->Function Configuration->Login Registration Agreement module, click the Add button in the upper right corner.
   Open the agreement addition panel below.

2. Check Show Location.

3. Select the interface language applicable to the registration agreement.

4. Configure the agreement content.

5. Click the Save button to save the current configuration.

After the configuration is completed, you can see the registration agreement on the registration interface. When logging in/registering, users need to review and check the terms of service and privacy terms you configured:

¶ Login registration information completion

Users usually need to provide personal information such as mobile phone number/email address when logging in and registering. In addition to these general personal information, administrators can specify users to complete specific information to complete login/registration for business data collection.

Administrators can specify the information to be completed (i.e. fields) in the console Branding->Function Configuration->Login Registration Information Completion module.

To configure the information to be completed, perform the following steps:

1. Select Information completion start position: Information completion during registration and/or Information completion during login.

2. Specify whether the user can skip the completion window when logging in/registering.

3. In the Login and registration information completion module, click the Add button in the upper right corner to add the fields to be completed.
   Open the Add field pop-up window.

4. Select the category of fields to be completed: User basic fields, User extended fields.

5. Specify whether the current field to be completed is Required.

6. Select the field to be completed.

7. Specify Validation Rules, including two options:

• No validation
• Regular expression: Enter the Regular expression and Error message below (required).

8. Click Save.