跳至主要内容

認證狀態

SDK 提供 authState prop,針對認證流程的每個階段渲染對應的 UI。 搭配 onApiKeySubmit 可以做非同步的 API key 驗證。

認證狀態

聊天機器人載入中…

支援的狀態​

狀態UI 行為
authenticated正常聊天介面
needApiKey提示使用者輸入 API key
invalidApiKey錯誤狀態加上重試提示
loading認證判斷中,顯示 spinner
error一般錯誤 UI
subscriptionExpired訂閱到期,顯示升級 CTA
botNotFoundbot provider 回傳 404 時的封鎖畫面

程式範例​

const [authState, setAuthState] = useState<AuthState>("needApiKey");

<Chatbot
authState={authState}
onApiKeySubmit={async (key) => {
const valid = await validate(key);
setAuthState(valid ? "authenticated" : "invalidApiKey");
}}
{...rest}
/>;