# @criipto/verify-react 中文文档 规范地址：https://npmcn.com/package/%40criipto/verify-react/ 版本：6\.0\.3 npm 元数据更新时间：2026-09-25T08:01:45.832Z 中文译文更新时间：2026-11-11T00:44:05.439Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40criipto/verify-react 原文对照：https://npmcn.com/package/%40criipto/verify-react/?lang=original 项目主页：https://github.com/criipto/criipto-verify-react#readme 源码仓库：https://github.com/criipto/criipto-verify-react ## 关键信息（来自 npm 元数据） - 包体积（解压后）：306 kB，16 个文件 - 模块格式：ES Module - TypeScript 类型：包内自带 - 运行依赖：5 个 - peer 依赖：react ^16\.11\.0 \|\| ^17 \|\| ^18 \|\| ^19，react-dom ^16\.11\.0 \|\| ^17 \|\| ^18 \|\| ^19 - 首次发布：2022-07-04T11:59:29.325Z - 最新版本发布：2026-09-25T08:01:45.438Z - 近 30 天下载量：61467（2026-10-11 至 2026-11-09，npm 官方下载统计） - 已发布版本数：137（近 12 个月 12 个） ## 中文简介 校验 SDK 用于反应单页应用程序 ## 安装 ```sh npm install @criipto/verify-react ``` 也可以使用：`pnpm add @criipto/verify-react`、`yarn add @criipto/verify-react`、`bun add @criipto/verify-react` ## README # @criipto/验证-反应 Idura 校验 React SDK 允许您用 European eID 提供者认证用户 [由偶像支持](https://docs.idura.app/verify/e-ids/)。 。 。 . SDK会使用 [PKCE 流量](https://docs.idura.app/verify/reference/authorization-flows/pkce/) 适合公共客户. ## 安装 ```sh npm install @criipto/verify-react ``` ## 先决条件 你需要一个Idura应用程序来初始化SDK. 如果你还没有,跟着 [仪表板设置指南](https://docs.idura.app/verify/getting-started/dashboard-setup/) 来创造一个. SDK需要两个值 从您的 Idura 应用程序: - 您的 Idura 域名 - 您的应用程序客户端ID ## 初始化 SDK 通过将您的 React app 包装到 `CriiptoVerifyProvider`数字 : ```jsx // src/index.js import React from 'react'; import ReactDOM from 'react-dom'; import { CriiptoVerifyProvider } from '@criipto/verify-react'; import App from './App'; ReactDOM.render( , document.getElementById('root'), ); ``` 这个 `redirectUri` 交给你 `CriiptoVerifyProvider` 是 Idura 登录后返回用户的地方,它必须注册为您的 Idura 应用程序上的重定向 URL。 实例 `window.location.href`,但任何路线(例如专用 `/callback` 路)也起作用. ## 打电话 `useCriiptoVerify` 钩子 内置一个由 `CriiptoVerifyProvider`电话 `useCriiptoVerify` 以读取认证状态并开始登录. ```jsx const { result, claims, error, loginWithRedirect, loginWithPopup, logout, isLoading, isInitializing, } = useCriiptoVerify(); ``` - `result`: 登录结果, `result.id_token` 或者说 `result.code` 成功和错误 - `claims`: 已解码 `id_token` - `error`: 配置和登录出错 - `loginWithRedirect` 编号 : `loginWithPopup`: 以重定向或弹出窗口启动登录 - `logout`:清除会话存储并结束SSO会话 - `isLoading` 编号 : `isInitializing`: SDK 是否还在工作或开始 ## 渲染登录选项 SDK提供了一个 `AuthMethodSelector` 组件,使方法选择器屏幕能够让用户选择登录方法. 默认, `AuthMethodSelector` 显示为您的 Idura 应用程序启用的每个 eID 方法的一个按钮( E)**应用程序 应用程序 eID** 在仪表板上. ```jsx // src/App.js import React from 'react'; import { useCriiptoVerify, AuthMethodSelector } from '@criipto/verify-react'; import '@criipto/verify-react/index.css'; // Import the stylesheet, or the buttons render unstyled. export default function App() { const { result, error } = useCriiptoVerify(); if (result?.id_token) { return 
{JSON.stringify(result.id_token, null, 2)}
; } return ( {error ?

An error occurred: {String(error)}. Please try again.

: null} ); } ``` 总是使 `error` 从字段 `useCriiptoVerify`都浮出水面 **配置错误** (例如无效) `domain` 或者说 `clientID`,或CORS)在供应商上架时提起,以及 **运行时间出错** 登录尝试中( 例如用户取消, 或 OAuth2 错误) 时被提高 [身份提供者( IdP)](https://docs.idura.app/verify/reference/glossary/#identity-provider-idp)) (中文(简体) ). 没有渲染 `error`,错误的配置和失败的登录将会在用户面前显得沉默. ### 在程序上选择 eID 要控制代码中的 eID 方法而不是仪表板, 请通过 `acrValues` 改为 `AuthMethodSelector`数字 : ```jsx ``` 见 [授权 URL 构建器](https://docs.idura.app/verify/guides/authorize-url-builder) 或支持的完整列表的单个 eID 页面 `acr_values`。 。 。 . ### 配置每个 eID 的请求 `login_hint` 财务报告和审定财务报表 `scope` 值是 eID 特定的,所以一个单一的提供者级设置很少符合每个按钮。 传出 a `beforeAuthorize` 函数改为 `CriiptoVerifyProvider` 调整用户实际选择的 eID 请求: ```jsx { if (acrValues[0].startsWith('urn:grn:authn:dk:mitid')) { return { scope: 'openid address' }; } if (acrValues[0].startsWith('urn:grn:authn:se:bankid')) { return { loginHint: 'stepUp:mrtd' }; } }} > ``` `beforeAuthorize` 运行在创建每个授权请求之前, 以开始登录的方式 : `AuthMethodSelector`, (中文(简体) ), `AuthMethodButton`, (中文(简体) ), `SEBankIDQRCode`, (中文(简体) ), `loginWithRedirect` 或者说 `loginWithPopup`返回您要更改的该请求的值, 或完全没有将其保留在提供者上 . - `acrValues` 总是一个数组,并持有从按钮开始的登录的单个值或 `AuthMethodSelector` - `options` 等SDK发来时再考虑 以防你想检查 - 您可以覆盖 `loginHint`, (中文(简体) ), `scope`, (中文(简体) ), `prompt`, (中文(简体) ), `uiLocales`, (中文(简体) ), `state`, (中文(简体) ), `nonce`, (中文(简体) ), `extraUrlParams` 编辑 `action`编号 :`message` 缩写 - `loginHint` 附加到 SDK 已添加的提示后, 所以使用 `action` 财务报告和审定财务报表 `message` 而不是写作 `action:`编号 :`message:` 暗指着自己 - `acrValues`, (中文(简体) ), `redirectUri` 和PKCE及响应参数由SDK管理,不能在此被推翻. 使用 `redirectUri` 按钮或选择器上,在单个 eID 返回用户时更改 提示值和范围值每个 eID 值不同,请参见 [Idura 文档](https://docs.idura.app/verify/e-ids/) 各人所供养的. ## 直接将用户发送到 eID 登录屏幕 如果你不需要方法选择器,请使用 `loginWithRedirect` (或 `loginWithPopup`),并在 `acrValues`。 。 。 . ```jsx // src/App.js import React from 'react'; import { useCriiptoVerify } from '@criipto/verify-react'; export default function App() { const { result, loginWithRedirect } = useCriiptoVerify(); if (result?.id_token) { return 
{JSON.stringify(result.id_token, null, 2)}
; } return ( ); } ``` ## (简体中文) SDK向Idura提出取货请求有两个原因: 1. 当供应商挂载时装入应用程序配置 . 2. 当用户点击登录按钮时会推动授权请求(PAR). 确保您的 React app 运行的源代码包含在您的 Idura 应用程序的重定向 URL 列表中 。 否则,两通电话都会因CORS出错而失败. ## 会议 如果您想要将 SDK 用于会话管理(而不是一次性认证), 您可以配置一个 `sessionStore`数字 : ```jsx // src/index.js import React from 'react'; import ReactDOM from 'react-dom'; import { CriiptoVerifyProvider } from '@criipto/verify-react'; import App from './App'; ReactDOM.render( , document.getElementById('root'), ); ``` 当a `sessionStore` 配置, SDK 存储 `id_token` 在您选择的存储中( e)`sessionStorage` 或者说 `localStorage`),一旦失效即失效. SDK也会试图通过SSO在页面加载时取回该令牌. (这需要在您的 Idura 域名上启用 SSO : 请检查 **域 / 您的域 / SSO** 在仪表板上. 更长的课,你可以增加 **托肯一生** 设置您的 Idura 应用程序 (**应用程序 应用程序 高级选项**) (中文(简体) ). ```jsx // src/App.js import React from 'react'; import { useCriiptoVerify, AuthMethodSelector, OAuth2Error } from '@criipto/verify-react'; export default function App() { const { claims, error, isLoading } = useCriiptoVerify(); if (isLoading) { return
Loading
; } if (claims) { return 
{JSON.stringify(claims, null, 2)}
; } return ( {error ? (

An error occurred:{' '} {error instanceof OAuth2Error ? `${error.error} (${error.error_description})` : String(error)} . Please try again.

) : null} ); } ``` ### 正在注销 这个 `logout` 方法清除会话存储并结束任何现有的SSO会话. ```jsx // src/App.js import React from 'react'; import { useCriiptoVerify, AuthMethodSelector } from '@criipto/verify-react'; import '@criipto/verify-react/index.css'; export default function App() { const { claims, logout } = useCriiptoVerify(); if (claims) { return ( 
{JSON.stringify(claims, null, 2)}
 ); } return ; } ``` `logout` 选择 `redirectUri` (之后将在哪里发送用户)和 `state` (用于减轻CSRF攻击的不透明字符串,参见: [状态](https://docs.idura.app/verify/reference/request-parameters/#state)) (中文(简体) ). ## 使用效果 + 登录与直接 如果你是触发 `loginWithRedirect` 内置 a `useEffect` 钩子,您需要允许 SDK 时间在重定向用户之前初始化一些值 : ```jsx const { isLoading, isInitializing, loginWithRedirect } = useCriiptoVerify(); useEffect(() => { if (isLoading || isInitializing) return; loginWithRedirect(); }, [isLoading, isInitializing]); ``` ## 偶像 了解更多关于Idura的信息,并注册到自由开发商账户 [(原始内容存档于2016-10-12). idura.eu](https://idura.eu/)。 。 。 . ### 为什么包被命名 `@criipto/verify-react` Idura以前叫Criipto 我们大部分的SDK都留着 `@criipto` 后向兼容性的名称。 你可以读到更多关于 重新品牌在 [我们的博客](https://idura.eu/blog/criipto-is-now-idura)。 。 。 . ## 常见问题 ### @criipto/verify-react 是什么？ 校验 SDK 用于反应单页应用程序 ### 如何安装 @criipto/verify-react？ 在项目目录运行 npm install @criipto/verify-react，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^16\.11\.0 \|\| ^17 \|\| ^18 \|\| ^19）、react-dom（^16\.11\.0 \|\| ^17 \|\| ^18 \|\| ^19）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @criipto/verify-react 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @criipto/verify-react 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @criipto/verify-react 可以商用吗？ @criipto/verify-react 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @criipto/verify-react 的下载量有多少？ 根据 npm 官方下载统计，@criipto/verify-react 在 2026/10/11 – 2026/11/09 这 30 天内被下载 61,467 次，日均约 2,049 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @criipto/verify-react 还在维护吗？ 最新版本 6\.0\.3 发布于 2026/09/25（1 个月前）；至今共发布 137 个版本，其中过去 12 个月发布了 12 个；首次发布于 2022/07/04。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。