@axa-fr/vanilla-oidc (英语)
试试演示 https://icy-glacier-004ab4303. azurestaticapps.net/ 互联网档案馆的存檔,存档日期2013-12-22
关于
@axa-fr/vanilla-oidc是一个纯OIDC客户端库,对任何框架都是不可知论的. 它被@axa-fr/react-oidc使用,可以被任何框架使用.
它是现有类离子客户端库的真正替代品.
- 安全 数字 :
- 由于使用Service Worker,您的令牌(refresh token and access token)无法访问JavaScript客户端代码(大保护以防范XSRF攻击)
- OIDC 仅使用 PKCE 客户端代码证书赠款
- 轻巧
- 简单 数字 :
- 刷新 token 和 access token 在背景中自动刷新
- 您无需在每次获取时输入访问权限 ken,只需配置
OidcTrustedDomains.js文件
- 没有饼干问题 : 您可以禁用无声符号( 内部使用 iframe) 。 您的 OIDC 服务器应该位于您网站的同域, 以便通过 IFRAME 从您的网站发送 OIDC 服务器 cookie, 否则您可能会遇到 CoOKIES 问题 .
- 多重认证 数字 :
- 您可以多次认证给同一提供商, 范围不同( 例如, 您可以获得一个新的“ 支付” 支付范围 )
- 您可以在同一 SPA (单一页面应用程序) 网站上认证多个不同的供应商
- 弹性 数字 :
- 与 Service Worker 合作( 更安全) , 不为旧浏览器工作( 不安全)
服务员抓住了 访问( t) 财务报告和审定财务报表 刷新( tk) 客户永远无法访问.
开始
npm install @axa-fr/vanilla-oidc --save
# If you have a "public" folder, the 2 files will be created :
# ./public/OidcServiceWorker.js <-- will be updated at each "npm install"
# ./public/OidcTrustedDomains.js <-- won't be updated if already exist
如果您需要非常安全的模式, 刷新 token 和访问 token 将会隐藏在服务员的后方, 以复制请求 . 你唯一应该编辑的文件是"OidcTrustedDomains.js".
// OidcTrustedDomains.js
// Add bellow trusted domains, access tokens will automatically injected to be send to
// trusted domain can also be a path like https://www.myapi.com/users,
// then all subroute like https://www.myapi.com/useers/1 will be authorized to send access_token to.
// Domains used by OIDC server must be also declared here
const trustedDomains = {
default: ["https://demo.duendesoftware.com", "https://www.myapi.com/users"],
};
演示的代码 :
import { VanillaOidc } from '@axa-fr/vanilla-oidc'
export const configuration = {
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',
service_worker_relative_url:'/OidcServiceWorker.js',
service_worker_only: false,
};
const href = window.location.href;
const vanillaOidc = VanillaOidc.getOrCreate(() => fetch)(configuration);
console.log(href);
vanillaOidc.tryKeepExistingSessionAsync().then(() => {
if(href.includes(configuration.redirect_uri)){
vanillaOidc.loginCallbackAsync().then(()=>{
window.location.href = "/";
});
document.body.innerHTML = `<div>
<h1>@axa-fr/vanilla-oidc demo</h1>
<h2>Loading</h2>
</div>`;
return
}
let tokens = vanillaOidc.tokens;
if(tokens){
// @ts-ignore
window.logout = () => vanillaOidc.logoutAsync();
document.body.innerHTML = `<div>
<h1>@axa-fr/vanilla-oidc demo</h1>
<button onclick="window.logout()">Logout</button>
<h2>Authenticated</h2>
<pre>${JSON.stringify(tokens,null,'\t')}</pre>
</div>`
}
else {
// @ts-ignore
window.login= () => vanillaOidc.loginAsync("/");
document.body.innerHTML = `<div>
<h1>@axa-fr/vanilla-oidc demo</h1>
<button onclick="window.login()">Login</button>
</div>`
}
})
配置
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<string> // Optional tokens to invalidate during logout, default: ['access_token', 'refresh_token']
};
运行演示
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
- 英语: 增加您的信息系统的安全性和简洁性, 并使用可打开的连接
散列路线
vanilla-oidc 还有散列路线.
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上测试