# 使用 Authing 登录组件接入社会化登录

Authing 登录组件（Guard）是一种可嵌入的登录表单，可根据你的需求进行配置，建议用于单页面应用程序。它使你可以轻松添加各种社会化登录方式，以便你的用户可以无缝登录，并且在不同平台拥有一致的登录体验。

Guard 支持 React、Vue、Angular 三种前端框架以及原生 JS 调用，以 React 组件为例：

import React from 'react'
import ReactDOM from 'react-dom'
import { AuthingGuard } from '@authing/react-ui-components'
// 引入 css 文件
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)
 
        复制成功

详细文档请见：Guard for Web。

# 接下来

获取到用户信息之后，你可以得到登录凭证 token，你可以在后续的 API 请求中携带上此 token, 然后在后端接口中根据此 token 区分不同用户，详情请见验证 token。

← 使用 JavaScript SDK 使用在线登录页面 →