@criipto/验证-反应
Idura 校验 React SDK 允许您用 European eID 提供者认证用户 由偶像支持。 。 。 .
SDK会使用 PKCE 流量 适合公共客户.
安装
npm install @criipto/verify-react
先决条件
你需要一个Idura应用程序来初始化SDK. 如果你还没有,跟着 仪表板设置指南 来创造一个.
SDK需要两个值 从您的 Idura 应用程序:
- 您的 Idura 域名
- 您的应用程序客户端ID
初始化 SDK
通过将您的 React app 包装到 CriiptoVerifyProvider数字 :
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { CriiptoVerifyProvider } from '@criipto/verify-react';
import App from './App';
ReactDOM.render(
<CriiptoVerifyProvider
domain="{YOUR_IDURA_DOMAIN}"
clientID="{YOUR_IDURA_APPLICATION_CLIENT_ID}"
redirectUri={window.location.href}
>
<App />
</CriiptoVerifyProvider>,
document.getElementById('root'),
);
这个 redirectUri 交给你 CriiptoVerifyProvider 是 Idura 登录后返回用户的地方,它必须注册为您的 Idura 应用程序上的重定向 URL。 实例 window.location.href,但任何路线(例如专用 /callback 路)也起作用.
打电话 useCriiptoVerify 钩子
内置一个由 CriiptoVerifyProvider电话 useCriiptoVerify 以读取认证状态并开始登录.
const {
result,
claims,
error,
loginWithRedirect,
loginWithPopup,
logout,
isLoading,
isInitializing,
} = useCriiptoVerify();
result: 登录结果,result.id_token或者说result.code成功和错误claims: 已解码id_tokenerror: 配置和登录出错loginWithRedirect编号 :loginWithPopup: 以重定向或弹出窗口启动登录logout:清除会话存储并结束SSO会话isLoading编号 :isInitializing: SDK 是否还在工作或开始
渲染登录选项
SDK提供了一个 AuthMethodSelector 组件,使方法选择器屏幕能够让用户选择登录方法.
默认, AuthMethodSelector 显示为您的 Idura 应用程序启用的每个 eID 方法的一个按钮( E)应用程序 应用程序 eID 在仪表板上.
// 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 <pre>{JSON.stringify(result.id_token, null, 2)}</pre>;
}
return (
<React.Fragment>
{error ? <p>An error occurred: {String(error)}. Please try again.</p> : null}
<AuthMethodSelector />
</React.Fragment>
);
}
总是使 error 从字段 useCriiptoVerify都浮出水面 配置错误 (例如无效) domain 或者说 clientID,或CORS)在供应商上架时提起,以及 运行时间出错 登录尝试中( 例如用户取消, 或 OAuth2 错误) 时被提高 身份提供者( IdP)) (中文(简体) ). 没有渲染 error,错误的配置和失败的登录将会在用户面前显得沉默.
在程序上选择 eID
要控制代码中的 eID 方法而不是仪表板, 请通过 acrValues 改为 AuthMethodSelector数字 :
<AuthMethodSelector
acrValues={['urn:grn:authn:dk:mitid:substantial', 'urn:grn:authn:dk:mitid:high']}
/>
见 授权 URL 构建器 或支持的完整列表的单个 eID 页面 acr_values。 。 。 .
配置每个 eID 的请求
login_hint 财务报告和审定财务报表 scope 值是 eID 特定的,所以一个单一的提供者级设置很少符合每个按钮。 传出 a beforeAuthorize 函数改为 CriiptoVerifyProvider 调整用户实际选择的 eID 请求:
<CriiptoVerifyProvider
domain="{YOUR_IDURA_DOMAIN}"
clientID="{YOUR_IDURA_APPLICATION_CLIENT_ID}"
beforeAuthorize={({ acrValues }) => {
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' };
}
}}
>
<App />
</CriiptoVerifyProvider>
beforeAuthorize 运行在创建每个授权请求之前, 以开始登录的方式 : AuthMethodSelector, (中文(简体) ), AuthMethodButton, (中文(简体) ), SEBankIDQRCode, (中文(简体) ), loginWithRedirect 或者说 loginWithPopup返回您要更改的该请求的值, 或完全没有将其保留在提供者上 .
acrValues总是一个数组,并持有从按钮开始的登录的单个值或AuthMethodSelectoroptions等SDK发来时再考虑 以防你想检查- 您可以覆盖
loginHint, (中文(简体) ),scope, (中文(简体) ),prompt, (中文(简体) ),uiLocales, (中文(简体) ),state, (中文(简体) ),nonce, (中文(简体) ),extraUrlParams编辑action编号 :message缩写 loginHint附加到 SDK 已添加的提示后, 所以使用action财务报告和审定财务报表message而不是写作action:编号 :message:暗指着自己acrValues, (中文(简体) ),redirectUri和PKCE及响应参数由SDK管理,不能在此被推翻. 使用redirectUri按钮或选择器上,在单个 eID 返回用户时更改
提示值和范围值每个 eID 值不同,请参见 Idura 文档 各人所供养的.
直接将用户发送到 eID 登录屏幕
如果你不需要方法选择器,请使用 loginWithRedirect (或 loginWithPopup),并在 acrValues。 。 。 .
// 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 <pre>{JSON.stringify(result.id_token, null, 2)}</pre>;
}
return (
<button onClick={() => loginWithRedirect({ acrValues: 'urn:grn:authn:dk:mitid:substantial' })}>
Log in with MitID
</button>
);
}
(简体中文)
SDK向Idura提出取货请求有两个原因:
- 当供应商挂载时装入应用程序配置 .
- 当用户点击登录按钮时会推动授权请求(PAR).
确保您的 React app 运行的源代码包含在您的 Idura 应用程序的重定向 URL 列表中 。 否则,两通电话都会因CORS出错而失败.
会议
如果您想要将 SDK 用于会话管理(而不是一次性认证), 您可以配置一个 sessionStore数字 :
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { CriiptoVerifyProvider } from '@criipto/verify-react';
import App from './App';
ReactDOM.render(
<CriiptoVerifyProvider
domain="{YOUR_IDURA_DOMAIN}"
clientID="{YOUR_IDURA_APPLICATION_CLIENT_ID}"
redirectUri={window.location.href}
sessionStore={window.sessionStorage} // or window.localStorage
>
<App />
</CriiptoVerifyProvider>,
document.getElementById('root'),
);
当a sessionStore 配置, SDK 存储 id_token 在您选择的存储中( e)sessionStorage 或者说 localStorage),一旦失效即失效.
SDK也会试图通过SSO在页面加载时取回该令牌. (这需要在您的 Idura 域名上启用 SSO : 请检查 域 / 您的域 / SSO 在仪表板上.
更长的课,你可以增加 托肯一生 设置您的 Idura 应用程序 (应用程序 应用程序 高级选项) (中文(简体) ).
// 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 <div>Loading</div>;
}
if (claims) {
return <pre>{JSON.stringify(claims, null, 2)}</pre>;
}
return (
<React.Fragment>
{error ? (
<p>
An error occurred:{' '}
{error instanceof OAuth2Error
? `${error.error} (${error.error_description})`
: String(error)}
. Please try again.
</p>
) : null}
<AuthMethodSelector />
</React.Fragment>
);
}
正在注销
这个 logout 方法清除会话存储并结束任何现有的SSO会话.
// 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 (
<React.Fragment>
<pre>{JSON.stringify(claims, null, 2)}</pre>
<button onClick={() => logout({ redirectUri: window.location.href })}>Log out</button>
</React.Fragment>
);
}
return <AuthMethodSelector />;
}
logout 选择 redirectUri (之后将在哪里发送用户)和 state (用于减轻CSRF攻击的不透明字符串,参见: 状态) (中文(简体) ).
使用效果 + 登录与直接
如果你是触发 loginWithRedirect 内置 a useEffect 钩子,您需要允许 SDK 时间在重定向用户之前初始化一些值 :
const { isLoading, isInitializing, loginWithRedirect } = useCriiptoVerify();
useEffect(() => {
if (isLoading || isInitializing) return;
loginWithRedirect();
}, [isLoading, isInitializing]);
偶像
了解更多关于Idura的信息,并注册到自由开发商账户 (原始内容存档于2016-10-12). idura.eu。 。 。 .
为什么包被命名 @criipto/verify-react
Idura以前叫Criipto 我们大部分的SDK都留着 @criipto 后向兼容性的名称。 你可以读到更多关于 重新品牌在 我们的博客。 。 。 .