快速开始

使用之前

高效的开发，离不开基础工程的搭建。在开始使用 Guard 之前，我们也假设你已经写过 React / Vue / Angular ，并掌握了 webpack 基础配置方式及相关前端框架的基本内容。

使用推荐工程

我们为你准备好了基础工程，以此为基础开发，可以为你省去大量配置和调试环境的时间。可前往 examples (opens new window) 获取对应的代码。

如果你使用了我们推荐的工程，可以略过下面的内容直接进入开发阶段，我们也推荐使用这套工程来构建你的项目。

如果你希望自己配置或使用其它工程，请继续往下阅读。

引入并初始化 Guard

// App.tsx

// React 16 / 17
// 代码示例：https://github.com/Authing/Guard/tree/dev-v6/examples/guard-react/normal/src/App.tsx
import { GuardProvider } from '@authing/guard-react'

import '@authing/guard-react/dist/esm/guard.min.css'

// React 18
// 代码示例：https://github.com/Authing/Guard/tree/dev-v6/examples/guard-react18/normal/src/App.tsx
// import { GuardProvider } from '@authing/guard-react18'
// import '@authing/guard-react18/dist/esm/guard.min.css'

import React from 'react'

// 你的业务代码根组件
import RouterComponent from './router'

function App() {
  return (
    <GuardProvider
      appId="AUTHING_APP_ID"
      
      // 如果你使用的是私有化部署的 Authing 服务，需要传入自定义 host，如:
      // host="https://my-authing-app.example.com"

      // 默认情况下，会使用你在 Authing 控制台中配置的第一个回调地址为此次认证使用的回调地址。
      // 如果你配置了多个回调地址，也可以手动指定（此地址也需要加入到应用的「登录回调 URL」中）：
      // redirectUri="YOUR_REDIRECT_URI"
    >
      <RouterComponent></RouterComponent>
    </GuardProvider>
  );
}

  
        复制成功

渲染 Guard

// Embed.tsx

// React 16 / 17
// 代码示例：https://github.com/Authing/Guard/tree/dev-v6/examples/guard-react/normal/src/pages/Embed.tsx
import { useGuard } from '@authing/guard-react'

// React 18
// 代码示例：https://github.com/Authing/Guard/tree/dev-v6/examples/guard-react18/normal/src/pages/Embed.tsx
import { useGuard, User } from '@authing/guard-react'

import React, { useEffect } from 'react'

function Login() {
  const guard = useGuard()

  useEffect(() => {
    // 使用 start 方法挂载 Guard 组件到你指定的 DOM 节点，登录成功后返回 userInfo
    guard.start('#authing-guard-container').then((userInfo: User) => {
      console.log('userInfo: ', userInfo)
    })
  }, [])

  return (
    <div id="authing-guard-container"></div>
  );
}

  
        复制成功