`
}
})
```
## 配置
```javascript
const configuration: {
client_id: PropTypes.string.isRequired, // oidc client id
redirect_uri: PropTypes.string.isRequired, // oidc redirect url
silent_redirect_uri: PropTypes.string, // Optional activate silent-signin that use cookies between OIDC server and client javascript to restore sessions
silent_login_uri: PropTypes.string, // Optional, route that trigger the signin
silent_login_timeout: PropTypes.number, // Optional default is 12000 milliseconds
scope: PropTypes.string.isRequired, // oidc scope (you need to set "offline_access")
authority: PropTypes.string.isRequired,
storage: Storage, // Default sessionStorage, you can set localStorage but it is less secure to XSS attacks
authority_configuration: PropTypes.shape({
// Optional for providers that does not implement OIDC server auto discovery via a .wellknowurl
authorization_endpoint: PropTypes.string,
token_endpoint: PropTypes.string,
userinfo_endpoint: PropTypes.string,
end_session_endpoint: PropTypes.string,
revocation_endpoint: PropTypes.string,
check_session_iframe: PropTypes.string,
issuer: PropTypes.string,
}),
refresh_time_before_tokens_expiration_in_second: PropTypes.number, // default is 120 seconds
service_worker_relative_url: PropTypes.string,
service_worker_only: PropTypes.boolean, // default false
service_worker_convert_all_requests_to_cors: PropTypes.boolean, // force all requests that servie worker upgrades to have 'cors' mode. This allows setting authentication token on requests initialted by html parsing(e.g. img tags, download links etc).
extras: StringMap | undefined, // ex: {'prompt': 'consent', 'access_type': 'offline'} list of key/value that are send to the oidc server (more info: https://github.com/openid/AppAuth-JS)
token_request_extras: StringMap | undefined, // ex: {'prompt': 'consent', 'access_type': 'offline'} list of key/value that are send to the oidc server during token request (more info: https://github.com/openid/AppAuth-JS)
withCustomHistory: PropTypes.function, // Override history modification, return instance with replaceState(url, stateHistory) implemented (like History.replaceState())
authority_time_cache_wellknowurl_in_second: 60 * 60, // Time to cache in second of openid wellknowurl, default is 1 hour
authority_timeout_wellknowurl_in_millisecond: 10000, // Timeout in millisecond of openid wellknowurl, default is 10 seconds, then error is throwed
monitor_session: PropTypes.boolean, // Add OpenId monitor session, default is false (more information https://openid.net/specs/openid-connect-session-1_0.html), if you need to set it to true consider https://infi.nl/nieuws/spa-necromancy/
onLogoutFromAnotherTab: Function, // Optional, can be set to override the default behavior, this function is triggered when user with the same subject is logged out from another tab when session_monitor is active
onLogoutFromSameTab: Function, // Optional, can be set to override the default behavior, this function is triggered when user is logged out from same tab when session_monitor is active
token_renew_mode: PropTypes.string, // Optional, update tokens base on the selected token(s) lifetime: "access_token_or_id_token_invalid" (default), "access_token_invalid" , "id_token_invalid"
logout_tokens_to_invalidate : Array // Optional tokens to invalidate during logout, default: ['access_token', 'refresh_token']
};
```
## 运行演示
```sh
git clone https://github.com/AxaGuilDEv/react-oidc.git
cd react-oidc/packages/vanilla-demo
npm install
npm start
# then navigate to http://localhost:3000
```
## 如何运作
这个组件是一个纯梵文JS OIDC客户端库,对任何框架都是不可知的. 它是现有类离子客户端库的真正替代品.
更多关于OIDC的信息
- [法语:Agamentez la security la security and la simplicé de votre Système d ' Information OpenID Connection 互联网档案馆的存檔,存档日期2013-12-20](https://medium.com/just-tech-it-now/augmentez-la-s%C3%A9curit%C3%A9-et-la-simplicit%C3%A9-de-votre-syst%C3%A8me-dinformation-avec-oauth-2-0-cf0732d71284)
- [英语: 增加您的信息系统的安全性和简洁性, 并使用可打开的连接](https://medium.com/just-tech-it-now/increase-the-security-and-simplicity-of-your-information-system-with-openid-connect-fa8c26b99d6d)
## 散列路线
`vanilla-oidc` 还有散列路线.
```javascript
export const configurationIdentityServerWithHash = {
client_id: "interactive.public.short",
redirect_uri: window.location.origin + "#authentication-callback",
silent_redirect_uri:
window.location.origin + "#authentication-silent-callback",
scope: "openid profile email api offline_access",
authority: "https://demo.duendesoftware.com",
refresh_time_before_tokens_expiration_in_second: 70,
service_worker_relative_url: "/OidcServiceWorker.js",
service_worker_only: false,
};
```
## 服务工人支助
- Firefox:在Firefox上测试 98.0.2
- Chrome/Edge:在上至90版本测试
- 歌剧:在上至80版本测试
- Safari:在Safari/605.1.15上测试
## 常见问题
### @axa-fr/vanilla-oidc 是什么？
OpenID Connect & OAuth 认证只使用本地的javascript,兼容角,反应,vue,svelte,下等\.
### 如何安装 @axa-fr/vanilla-oidc？
在项目目录运行 npm install @axa-fr/vanilla-oidc，或使用 pnpm add / yarn add / bun add。
### @axa-fr/vanilla-oidc 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @axa-fr/vanilla-oidc 支持 ESM 还是 CommonJS？
同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。
### @axa-fr/vanilla-oidc 可以商用吗？
@axa-fr/vanilla-oidc 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @axa-fr/vanilla-oidc 的下载量有多少？
根据 npm 官方下载统计，@axa-fr/vanilla-oidc 在 2026/10/08 – 2026/11/06 这 30 天内被下载 1,989 次，日均约 66 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @axa-fr/vanilla-oidc 还在维护吗？
最新版本 6\.25\.6 发布于 2023/07/24（3 年前）；至今共发布 317 个版本，其中过去 12 个月发布了 0 个；首次发布于 2019/03/08。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。