React Components

React アプリケーションで OpenBait を利用する

OpenBait は React コンポーネントを提供しており、React アプリケーションへのアンチフィッシング防御の統合が容易に行えます。

Install

npm install @openbait/react

Basic Usage

import { OpenBaitProvider, usePhishingDetection } from '@openbait/react'
 
function App() {
  return (
    <OpenBaitProvider apiKey="your_api_key" domain="example.com">
      <YourApp />
    </OpenBaitProvider>
  )
}
 
function LoginForm() {
  const { isPhishing, check } = usePhishingDetection()
 
  const handleSubmit = async (e) => {
    e.preventDefault()
 
    const safe = await check()
    if (!safe) {
      alert('Security risk detected')
      return
    }
 
    // Continue login flow
  }
 
  return (
    <form onSubmit={handleSubmit}>
      {isPhishing && <div className="warning">Warning: Phishing risk detected</div>}
      {/* Form fields */}
    </form>
  )
}

Component API

`<OpenBaitProvider>`

Prop	Type	Required	説明
`apiKey`	`string`	Yes	API Key
`domain`	`string`	Yes	保護対象ドメイン
`children`	`ReactNode`	Yes	子コンポーネント

`usePhishingDetection()`

Returns:

Property	Type	説明
`isPhishing`	`boolean`	フィッシング検出フラグ
`isLoading`	`boolean`	検出処理中
`check`	`() => Promise<boolean>`	手動で検出をトリガー
`result`	`object`	詳細な検出結果

ビルトイン警告コンポーネント

import { PhishingWarning } from '@openbait/react'
 
function App() {
  return (
    <OpenBaitProvider apiKey="..." domain="...">
      <PhishingWarning />
      <YourApp />
    </OpenBaitProvider>
  )
}

JavaScript SDK Webhook統合