# Guard for Web

Guard for Web

Guard is an embeddable login form that can be configured according to your needs and is recommended for single-page applications. It allows you to easily add various social login methods so that your users can log in seamlessly and have a consistent login experience on different platforms.

The form has the following basic functions:

Login:
- Account password login (including mobile phone number + password, email + password, user name + password);
- Login with mobile verification code;
- APP scan code login (need to access APP scan code login);
- Mini program scan code login (need to configure in the background first);
- Social login, such as Github login (Need to configure in the background first);
- Enterprise identity source login (requires enterprise identity source configuration);
Registration:
- Account and password registration;
- Mobile phone verification code registration;
Forgot password and reset password;
MFA;
Responsive features (compatible with mobile and PC terminals);
Complete UI customization function;
Compatible with mainstream front-end UI libraries:
- Native JavaScript call;
- Vue components;
- React components;
- Angular components.

Guard demo

Online example

# Guard for Native JavaScript

Native JavaScript, that is, native JavaScript, if your project does not use React, Vue, Angular and other frameworks, you can call Guard imperatively through the native JavaScript version.

# Basic usage

# 1. Install and use via npm

installation

$ yarn add @authing/native-js-ui-components

# OR

$ npm install @authing/native-js-ui-components --save

use

import { AuthingGuard } from '@authing/native-js-ui-components'
// Import css file
import '@authing/native-js-ui-components/lib/index.min.css'

const guard = new AuthingGuard('AUTHING_APP_ID')

// event monitoring
guard.on('load', (authClient) => console.log(authClient))

# 2. Introduce and use through cdn

Introduction code

// JavaScript code
<script src="https://cdn.jsdelivr.net/npm/@authing/native-js-ui-components"></script>
...
// CSS file
<link href="https://cdn.jsdelivr.net/npm/@authing/native-js-ui-components/lib/index.min.css" rel="stylesheet"></link>

use

<script>
var guard = new AuthingNativeJsUIComponents.AuthingGuard("AUTHING_APP_ID")

// event monitoring
guard.on("load", authClient => console.log(authClient))
</script>

# Event monitoring

Guard will trigger various events throughout the life cycle, such as: successful login, successful registration, failed login... The methods to monitor these events are as follows:

...
// Guard check appId complete
guard.on("load", authClient => {
    console.log(authClient)
})
// User login is successful
guard.on("login", (user, authClient) => {
    console.log(user, authClient)
})
...

For more events, please see the complete event list

# API

# Constructor new Guard(appId, config)

Initialize a new Guard instance. appId is the Authing application ID and must be passed in. config is the advanced configuration of Guard, please refer to [Advanced Configuration](#Advanced Configuration)

# Guard example

The Guard instance provides three methods:

Method Name	Method Parameters	Function
on	evtName: event name, please refer to event list Handler: corresponding event processing function	listen to an event
show	-	Show form in modal mode
hide	-	Hide the form in modal mode

Method Name

Method Parameters

Function

evtName: event name, please refer to event list

Handler: corresponding event processing function

listen to an event

show

Show form in modal mode

hide

Hide the form in modal mode

# online experience

# Guard for React

# Basic usage

# 1. Install and use via npm

installation

$ yarn add @authing/react-ui-components

# OR

$ npm install @authing/react-ui-components --save

use

import React from 'react'
import ReactDOM from 'react-dom'
import { AuthingGuard } from '@authing/react-ui-components'
// Import css file
import '@authing/react-ui-components/lib/index.min.css'

const App = () => {
  const appId = 'AUTHING_APP_ID'
  const config = {
    logo: 'https://usercontents.authing.cn/client/logo@2.png',
    title: 'Authing',
    socialConnections: ['github'],
  }
  const onLogin = (userInfo) => {
    console.log(userInfo)
  }
  return <Guard appId={appId} config={config} onLoding={onLogin} />
}

ReactDOM.render(<App />, root)

# 2. Introduce and use through cdn

Introduction code

// JavaScript code
<script src="https://cdn.jsdelivr.net/npm/@authing/react-ui-components"></script>
...
// CSS file
<link href="https://cdn.jsdelivr.net/npm/@authing/react-ui-components/lib/index.min.css" rel="stylesheet"></link>

use

<script>
var App = () => {
    const appId = "AUTHING\_APP\_ID"
    const config = {
    logo: "https://usercontents.authing.cn/client/logo@2.png",
    title: "Authing",
    socialConnections: ['github'],
  }
  const onLogin = (userInfo) => {
    console.log(userInfo)
  }
    return <AuthingReactUIComponents.AuthingGuard appId={appId} config={config} onLogin={onLogin} />
}

ReactDOM.render(<App />, root);
</script>

# Parameters

Parameter	Description	Required	Default value
appId	User Pool ID	Yes	-
config	Guard advanced configuration, same as [Advanced Configuration](#Advanced Configuration), note that there is no need to pass in target parameter here	No	-
visible	Is the form visible in modal mode	No	·

# Event monitoring

Please refer to Event List for all events. Note that in React, event listeners should be named after a small hump, such as: onLogin, onLoginError

# online experience

# Guard for Vue

# Basic usage

# 1. Install and use via npm

installation

$ yarn add @authing/vue-ui-components

# OR

$ npm install @authing/vue-ui-components --save

use

<template>
<AuthingGuard :appId="appId" :config="config" @register="handleRegister" />
</template>
<script>
import {AuthingGuard} from "@authing/vue-ui-components"

export default {
  components: {
    AuthingGuard
  },
  data() {
    return {
      appId: "AUTHING\_USER\_POOL\_ID",
      config: {
        socialConnections: ['github'],
        logo: "https://usercontents.authing.cn/client/logo@2.png",
        title: "Authing",
      },
    };
  },
  methods: {
    handleRegister(*user*) {
      console.log(user)
    }
  },
};
</script>

# 2. Introduce and use through cdn

Introduction code

// JavaScript code
<script src="https://cdn.jsdelivr.net/npm/@authing/vue-ui-components"></script>
...
// CSS file
<link href="https://cdn.jsdelivr.net/npm/@authing/vue-ui-components/lib/index.min.css" rel="stylesheet"></link>

use

<script>
const appId = "AUTHING\_APP\_ID"
const config = {
  logo: "https://usercontents.authing.cn/client/logo@2.png",
  title: "Authing",
  socialConnections: ['github'],
}

const app = new Vue({
  el: "#app",
  render: h => h(AuthingVueUIComponents.AuthingGuard, {
      props: {
        appId,
        config,
      }
  }),
})
</script>

# Parameters

Parameter	Description	Required	Default value
appId	User Pool ID	Yes	-
config	Guard advanced configuration, same as [Advanced Configuration](#Advanced Configuration), note that there is no need to pass in target parameter here	No	-
visible	Is the form visible in modal mode	No	·

# Event monitoring

For all events, please refer to Event List, the monitoring method is @login @login-error etc.

# online experience

# Guard for Angular

# Basic usage

# 1. Install and use via npm

installation

$ yarn add @authing/ng-ui-components

# OR

$ npm install @authing/ng-ui-components --save

use

// app.module.ts
import {BrowserModule} from'@angular/platform-browser'
import {NgModule} from'@angular/core'
import {AuthingGuardModule} from'@authing/ng-ui-components'
import {AppComponent} from'./app.component'
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AuthingGuardModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

// app.component.ts
import {Component} from'@angular/core'
import {
  CommonMessage,
  AuthenticationClient,
} from'ng-ui-components'
@Component({
  selector:'app-root',
  templateUrl:'./app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  title ='demo'
  appId = '59f86b4832eb28071bdd9214'
  onLoad(e: AuthenticationClient) {
    console.log('ffffff', *e*)
  }
}

// app.component.html
<authing-guard [appId]="appId" (onLoad)="onLoad($event)"></authing-guard>

# 2. Introduce and use through cdn

Introduction code

<script src="https://cdn.jsdelivr.net/npm/@authing/ng-ui-components"></script>

use

<div ng-app="">
  <authing-guard [appId]="AUTHING_USER_POOL_ID"></authing-guard>
</div>

# Parameters

Parameter	Description	Required	Default value
appId	User Pool ID	Yes	-
config	Guard advanced configuration, same as #configuration, note that there is no need to pass in the target parameter here	No	-
visible	Is the form visible in modal mode	No	·

# Event monitoring

For all events, please refer to Event List, the monitoring method is named after the little hump, such as onLogin, onLoginError etc.

# Online example

# Display mode

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 the login is a separate page. The modal mode displays the form in the form of a modal box, suitable for A login is displayed on the existing page. 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 file
import '@authing/native-js-ui-components/lib/index.min.css'

const guard = new AuthingGuard('AUTHING_APP_ID', {
  mode: GuardMode.Modal,
})

// modal mode needs to call show method to show the form
guard.show()

Note: The native js version of modal mode needs to manually call guard.show() after initialization to show Guard.

# SSO scenario

Single sign on (Single Sign On), referred to as SSO for short, is one of the most popular solutions for enterprise business integration. The definition of SSO is that in multiple application systems, users only need to log in once to access all mutually trusted application systems. With the development of the enterprise, your company may purchase various SaaS software, OA systems, ERP systems, etc. Although these software improve office efficiency, it is very complicated to log in to each system separately. Then you can Register an application in Authing as an SSO identity provider. You only need to log in once in the same browser to access all systems. The method for SSO login using Guard is as follows:

...
const guard = new AuthingGuard("AUTHING_APP_ID", {
  appDomain: "xxx.authing.cn", // domain name of single sign-on application
  isSSO: true, // means to open SSO mode
})
...

SSO login mode can be turned on by passing in appDomain, isSSO. Guard will detect whether there is a user logged in to the application after the load event. If so, the login event will be triggered directly for your convenience Proceed to the next step.

# Advanced configuration

Guard provides many advanced configurations, such as custom UI, using specific login methods, etc. All configurations are as follows:

Parameter	Parameter description	Type	Required	Default value
target	Specify the mount point of the Guard form and accept all the parameters or dom elements that querySelector (opens new window) can accept. If 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	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 (including LDAP) that need to be used	LoginMethods[]	No	[LoginMethods.PhoneCode, LoginMethods.Password]
registerMethods	Registration method to be used	RegisterMethods[]	No	[RegisterMethods.Email, RegisterMethods.Phone]
defaultRegisterMethod	The registration method displayed by default	RegisterMethods	No	_RegisterMethods.Email*
defaultScenes	The interface displayed when the component is opened	GuardScenes	No	_GuardScenes.Login*
socialConnections	Required social login list	SocialConnections[]	No	[]
enterpriseConnections	List of enterprise identity sources to be used (excluding LDAP), the list item value is the unique identifier of the configured enterprise identity source. Note: The enterprise identity source needs to be passed in the corresponding appId before it can be used	Array	No	[]
defaultLoginMethod	The login method displayed by default. Optional value is one of options.loginMethods	String	No	LoginMethods.Password
autoRegister	**Whether registration and login should be merged? After the merge, if the user does not exist, it will automatically register	Boolean	No	false
disableRegister	whether registration is prohibited, if prohibited, the "register" entry will be hidden	Boolean	No	false
disableResetPwd	Whether to prohibit resetting the password, if prohibited, the "forgot password" entry 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 the login box can be closed by the keyboard ESC key in Modal mode	Boolean	No	true
isSSO	Is it a single sign-on	Boolean	No	false
appId	App ID	String	Required in SSO mode	-
appDomain	App domain name in SSO mode	String	Required in SSO mode	-
qrCodeScanOptions	Scan code login configuration, please see [QrCodeAuthenticationClient().startScanning(domId, options)](https://docs.authing.cn/sdk/sdk-for-node/authentication/QrCodeAuthenticationClient.html#One key Start scanning) options parameter	Objcect	No	null
apiHost	API request address for private deployment	String	Required for private deployment	[Authing official api address]

# Type description

The following is a description of all enumeration values that may be used in advanced configuration:

# GuardMode

Guard display method

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 (Requires Configure LDAP Service (opens new window))
AppQr	'app-qrcode'	APP scan code login (requires access to APP scan code login (opens new window))
Password	'password'	Account password login (including mobile phone number + password, email + password, user name + password.)
PhoneCode	'phone-code'	Mobile verification code login
WxMinQr	'wechat-miniprogram-qrcode'	WeChat Mini Program Scan Code Login
AD	'ad'	AD User Directory Login

# RegisterMethods

Registration methods supported by Guard

key	value	description
Email	'email'	Email Registration
Phone	'phone'	Mobile verification 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	'email'	Email verification code reset
Phone	'phone'	SMS verification code reset

# SocialConnections

Social login methods supported by Guard

key	value	description
Qq	'qq'	QQ Login
Weibo	'weibo'	Sina Weibo Login
Alipay	'alipay'	Alipay login
Github	'github'	GitHub login
Google	'google'	Google account login
WxPc	'wechat:pc'	Login on WeChat PC
Dingtalk	'dingtalk'	Dingtalk Login
WxMobile	'wechat:mobile'	WeChat mobile login
WxWCorpQr	'wechatwork:corp:qrconnect'	Enterprise WeChat QR code login
WxWebAuth	'wechat:webpage-authorization'	WeChat webpage authorization login
WxMinApp	'wechat:miniprogram:app-launch'	App launches the mini program to log in
WxMinDefault	'wechat:miniprogram:default'	Wechat Mini Program Login
WxWSPQr	'wechatwork:service-provider:qrconnect'	Enterprise WeChat third-party application scan code authorization login
WxWSPAuth	'wechatwork:service-provider:authorization'	Enterprise WeChat third-party application webpage authorization login

# Incident

The list of all Guard events is as follows:

Event name	Event description	Event parameters	Event parameter description
load	Authing appId are verified and loaded, and the loading is complete. /sdk/sdk-for-node/authentication/)
load-error	Authing appId authentication failed, loading failed	error	error information
login	User login successful	user, authClient	user: user information authClient same as above
login-error	User login failed	error	error information, including missing/illegal fields or server error information
register	User registration is successful	user, authClient	user: user information authClient same as above
register-error	User registration failed	error	error information, including information such as missing/illegal fields or server errors
pwd-email-send	Forgot password email sent successfully	-	-
pwd-email-send-error	Failed to send the forgotten password email	error	error message
pwd-phone-send	Forgot the password and the mobile phone verification code was sent successfully	-	-
pwd-phone-send-error	Failed to send the mobile phone verification code for forgotten password	error	error information
pwd-reset	Password reset successfully	-	-
pwd-reset-error	Failed to reset password	error	error information
close	The guard close event in modal mode	-	-

← Privatization deployment SDK for Single Sign-On →