當您熟悉 SessionProvider 和 DidConnect 等核心元件後，就可以探索 @arcblock/did-connect-react 程式庫更強大、更靈活的功能。本節涵蓋了進階主題，讓您能夠建構更複雜、更健全且更方便使用者使用的去中心化身分應用程式。
我們將探討三個主要領域：
替代驗證方法
超越預設的 QR code 掃描，整合流行的登入方法，如 OAuth（社交登入）、Passkeys（無密碼）和统一登录站点群。
公用程式函式
利用一套輔助函式來處理常見任務，例如 URL 編碼、建立 API 用戶端和管理彈出視窗。
錯誤處理
學習如何優雅地處理常見錯誤，從被封鎖的彈出視窗到 WebAuthn API 失敗，確保流暢的使用者體驗。
驗證方法
雖然 DID Connect 是主要的驗證方法，但該程式庫提供了與其他流行登入流程的無縫整合。這讓您可以為使用者提供多種登入方式，以滿足不同的偏好和安全等級。
公用程式
該程式庫匯出一系列公用程式函式，旨在簡化您應用程式中的常見任務並減少樣板程式碼。這些輔助工具涵蓋了從資料編碼和密碼學操作到管理驗證流程的瀏覽器彈出視窗等所有內容。
錯誤處理
建構一個健全的應用程式需要優雅的錯誤處理。@arcblock/did-connect-react 程式庫提供了特定的錯誤類型和輔助函式，使此過程更加容易。
彈出視窗錯誤
當使用需要彈出視窗的驗證方法（如 OAuth）時，瀏覽器的彈出視窗攔截器可能會干擾。如果 openPopup 函式無法開啟視窗，它將拋出 NotOpenError。您應該捕獲此錯誤並向使用者提供適當的回饋。
處理彈出視窗錯誤
import { openPopup, runPopup } from '@arcblock/did-connect-react/lib/utils';
import { NotOpenError } from '@arcblock/did-connect-react/lib/error';
async function startOAuthFlow(url) {
try {
const popup = openPopup(url);
const result = await runPopup({ popup });
console.log('OAuth 成功：', result);
} catch (err) {
if (err instanceof NotOpenError) {
alert('彈出視窗被封鎖。請允許本網站的彈出視窗，然後再試一次。');
} else {
alert(`發生錯誤：${err.message}`);
}
}
}API 和 WebAuthn 錯誤
對於與後端服務或 WebAuthn API（由 Passkeys 使用）的互動，該程式庫提供了輔助函式，可將複雜的錯誤物件解析為方便使用者閱讀的訊息。
getApiErrorMessage(err, defaultMessage)：從 Axios 錯誤回應中提取錯誤訊息。getWebAuthnErrorMessage(err, defaultMessage, t)：處理 WebAuthn 特定錯誤（例如，使用者取消、不支援的瀏覽器）並提供可翻譯、方便使用者閱讀的訊息。
處理 WebAuthn 錯誤
import { usePasskey } from '@arcblock/did-connect-react';
import { getWebAuthnErrorMessage } from '@arcblock/did-connect-react/lib/utils';
function PasskeyLoginButton() {
const { loginWithPasskey } = usePasskey();
const handleLogin = async () => {
try {
await loginWithPasskey();
// 處理成功登入
} catch (err) {
// 使用公用程式以取得方便使用者閱讀的訊息
const friendlyMessage = getWebAuthnErrorMessage(err, '發生未知錯誤。');
alert(friendlyMessage);
}
};
return <button onClick={handleLogin}>使用 Passkey 登入</button>;
}透過實作適當的錯誤處理，您可以在事情未按計劃進行時顯著改善使用者體驗。
後續步驟
現在您已對進階功能有了概覽，可以更深入地探討與您的專案最相關的主題。