Use Guard for Web

The Authing login component (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.

Guard supports React, Vue, Angular three front-end frameworks and native JS calls. Take React components as an example:

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)

For detailed documentation, please see: Guard for Web.

Next

After obtaining the user information, you can get the login credential token. You can carry this token in subsequent API requests, and then distinguish different users based on this token in the backend interface. For details, see Verification token.