Authing DocsDocuments
Concept
Guides
Development Integration
Application integration
Concept
Guides
Development Integration
Application integration
Old Version
Development Integration
  • Single Sign-On (SSO)
  • Login component

    • React
    • Vue
    • Angular
    • Native JavaScript
    • Complete parameter list
  • JavaScript/Node.js

  • Java / Kotlin

  • Python

  • C#

  • PHP

  • Go

  • Ruby
  • Android

  • iOS

  • Flutter

  • React Native
  • WeChat Mini Program
  • WeChat webpage authorization
  • Framework Integration
  • Error code
  1. Development Integration
  2. /
  3. Login component
  4. /
  5. Complete parameter list

¶ Login Component (Guard) Configuration Parameter List

Update Time: 2022-05-14 19:59:55
Edit

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

GuardMode (opens new window)

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.

LoginMethods (opens new window)[]

No

[LoginMethods.PhoneCode, LoginMethods.Password]

registerMethods

Registration method that need to be used.

RegisterMethods (opens new window)[]

No

[RegisterMethods.Email,RegisterMethods.Phone]

defaultRegisterMethod

Registration method displayed by default

RegisterMethods (opens new window)

No

_RegisterMethods.Email*

defaultScenes

The interface displayed when the component is opened.

GuardScenes (opens new window)

No

_GuardScenes.Login*

socialConnections

Social login list that need to be used.

SocialConnections (opens new window)[]

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.

keyvalueDescription
Modal'modal'Modal box mode
Normal'normal'Normal mode

¶ LoginMethods

Common login methods supported by Guard

keyvalueDescription
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

keyvalueDescription
Email'email'Email registration
Phone'phone'SMS code registration

¶ GuardScenes

Guard displayable interface

keyvalueDescription
Login'login'Login interface
Register'register'Registration interface

¶ ResetPwdMethods

Password reset methods supported by Guard

keyvalueDescription
Email'email'Reset by email verification code
Phone'phone'Reset by SMS code

¶ SocialConnections

Guard 支持的社会化登录方式

keyvalueDescription
Github'github'GitHub login
Google'google'Google login

¶ Get help

Join us on forum: #authing-chat (opens new window)

Prev: Native JavaScript Next: JavaScript/Node.js
  • GuardMode
  • LoginMethods
  • RegisterMethods
  • GuardScenes
  • ResetPwdMethods
  • SocialConnections
  • Get help

User identity management

Integrated third-party login
Mobile phone number flash check (opens new window)
Universal login form component
Custom authentication process

Enterprise internal management

Single Sign On
Multi-factor Authentication
Authority Management

Developers

Development Document
Framework Integration
Blog (opens new window)
GitHub (opens new window)
Community User Center (opens new window)

Company

400 888 2106
sales@authing.cn
16 / F, Block B, NORTH STAR CENTURY CENTER, Beijing(Total)
room 406, 4th floor, zone B, building 1, No. 200, Tianfu Fifth Street, Chengdu(branch)

Beijing ICP No.19051205-1

© Beijing Steamory Technology Co.