Auth 客户端项目
这个项目旨在与Hydra和OIDC处理使用OAuth2的认证. 该项目分为两个阶段:
- 第1阶段: OAuth2 与 Hydr
- 第2阶段OIDC 公共客户端(即将到来)
目录
开始
先决条件
- 节点.js (>= 14.x)
- npm (>= 8.x) (中文(简体) )
安装
-
清除仓库 :
git clone https://github.com/your-username/auth-client.git cd auth-client -
安装依赖性 :
npm install -
启动开发服务器 :
npm run dev
第1阶段:OAuth2与海德拉
在这个阶段,我们使用OAuth2和Hydra进行认证.
设置水母
- 跟着 水文学文献 在QA盒环境中设置海德拉.
- 在工程中配置您的 OAuth2 设置 .
使用 OAuth2 钩
使用 useOAuth2 钩入你的组件.
import React from 'react';
import { useOAuth2 } from '@deriv-com/auth-client';
const YourComponent = () => {
const { logout } = useAuthData(); // Your custom hook or function to handle logout
const WSLogoutAndRedirect = async () => {
await logout();
// Redirect or perform any additional actions here
};
const { OAuth2Logout } = useOAuth2(WSLogoutAndRedirect);
return (
<div>
<button onClick={OAuth2Logout}>Logout</button>
</div>
);
};
export default YourComponent;
阶段2: OIDC 公共客户端
在Deriv,我们正在实施Hydra和OpenID连接(OIDC),以更新和加强我们的认证和授权机制。 这种过渡对于确保我们的应用程序和用户的安全、可扩展和符合标准的接入管理至关重要.
执行细节
在背景中,大部分设置和执行已经在这个图书馆完成. 只是需要进口一些东西 你可以走了.
登录流量
- 登录按钮组件
import {requestOidcAuthentication } from '@deriv-com/auth-client';
const handleLogin = async () => {
await requestOidcAuthentication({
redirectCallbackUri: `${window.location.origin}/callback`,
});
};
<button onClick={handleLogin}>Login</button>
回拨页面
您需要在您的应用程序中创建此部分的新路线和页面 。 此页面将处理遗留给消费者应用的代币发行.
import React from 'react';
import { Callback } from '@deriv-com/auth-client';
import { transformAccountsFromResponseBody } from '@site/src/utils';
import useAuthContext from '@site/src/hooks/useAuthContext';
const CallbackPage = () => {
const { updateLoginAccounts } = useAuthContext();
return (
<Callback
onSignInSuccess={(tokens) => {
const accounts = transformAccountsFromResponseBody(tokens);
updateLoginAccounts(accounts);
window.location.href = '/';
}}
/>
);
};
export default CallbackPage;
从 signInSuccess 上返回的符号将使用此格式 :
{
acct1: 'CR123123',
curr1: 'USD',
token1: 'a1-zxcnzxchzxc1'
acct2: 'CR998989',
curr2: 'EUR',
token2: 'a1-fidifdf0991',
...
}
您需要将符号转换为您的应用程序能理解和工作的格式 。 一旦完成,就安全地保存在本地Storage或会话Storage中.
大部分的应用程序已经设置,以寻找客户端账户或存储中的账户列表等内容. 如果发现它们,它会自动授权用户进入. 因此,在转换了符号并将其存储后,它对于重定向到您应用的主页非常重要,因此应用可以成功授权.
一旦遗留的代号被发送到消费者应用程序,库会假设用户被登录,因此它设置一个叫"locked state"的饼干为真. 这将有利于无声登录和单一登录功能.
注:回调页面不处理授权调用. 其唯一目的是进行访问符交换,并将遗留的符回给消费者应用.
状态参数
您可以在附加状态参数中通过有效载荷到 requestOidcAuthentication 或者说 requestSilentOidcAuthentication,将结转至 Callback 组件。 你可以做一些事情,比如通过一个额外的 redirect_to 要告知的元数据 Callback 在认证完成后重定向到下一个位置的页面 :
requestOidcAuthentication({
redirectCallbackUri: `${window.location.origin}/callback`,
state: {
redirect_to: '/tradershub/home'
}
});
和内部 Callback 组件,它将返回状态从 onSignInSuccess 回调函数 :
const CallbackPage = () => {
const { updateLoginAccounts } = useAuthContext();
return (
<Callback
onSignInSuccess={(tokens, state) => {
const accounts = transformAccountsFromResponseBody(tokens);
updateLoginAccounts(accounts);
const redirectTo = (state as Record<string, any>)?.redirect_to;
if (redirectTo) {
window.location.href = redirectTo;
} else {
window.location.href = '/';
}
}}
/>
);
};
注销流程
这个登出程序结合了两部分:通过 OAuth2Logout 函数清除 OAuth会话 cookie , 并运行针对您的应用程序的自定义清除逻辑( 如清除用户账户或令牌) 。 让我们分解一下:
-
此功能由@deriv-com/auth-client 库提供. 它使用iframe将用户重定向到OAuth提供者的会话结束点. OAuth2Logout的主要工作是在登录会话中清除由OAuth系统设置的任何饼干. 您的 App 自定义登录逻辑 .
-
除了清除OAuth cookie外,您的应用程序还需要处理自己的登录任务,例如: 从后端登录用户(通过API或WebSocket呼叫). 从本地Storage或SessionStorage中清除所储存的用户数据(如指针或账户信息).
-
组合两个 OAuth2Logout 函数可以将您的自定义登录逻辑(称为消费者登录函数)作为参数传递. OAuth会话 cookie 清空后,消费者登出功能会运行,以确保用户从后端(BE)和前端(FE)被完全记录出.
-
登录完成后, cookie 登录 state 将被设定为虚假 .
-
一旦用户顺利地登录出Hydra,我们就应该撤销他们的遗迹(例如a1-. 我们可以调用这个功能
revokeLegacyTokens并传递在遗迹列表中 以废除。 通常您应该在您的登录处理器中这样做, 在 Hydra 成功记录了用户的会话后, 才会引用 .
import { OAuth2Logout, revokeLegacyTokens } from '@deriv-com/auth-client';
// we clean up everything related to the user here, for now it's just user's account
// later on we should clear user tokens as well
const logout = useCallback(async () => {
const clientAccounts = localStorage.getItem('client.accounts') || []
const tokens = Object.values(clientAccounts).map(account => account.token);
// revoke the legacy tokens,
await revokeLegacyTokens(tokens);
// then call your application's post-logout cleanup functions
await apiManager.logout();
updateLoginAccounts([]);
updateCurrentLoginAccount({
name: '',
token: '',
currency: '',
});
}, [updateCurrentLoginAccount, updateLoginAccounts]);
const handleLogout = () => {
OAuth2Logout(logout);
};
// In your button
<button onClick={handleLogout}>Logout</button>
关闭前频道
前方渠道是您的应用程序中的页面, 唯一的责任是清除您认证数据的本地/会话存储, 如 client.accounts 或者说 loginid 当它变成。 这将会被OIDC在登录过程中在一个iframe中被使用和引用,以登录您的应用程序并清除其局部/会话存储,这样当我们降落在应用程序中时,它就已经处于被登录状态了. 通常我们会在路线下登记前台 /front-channel。 。 。 .
例如,假设您已经登录到Deriv App、Smart Trader和Traders Hub Outsystems上,而且这些应用程序在以下线路上安装了前台频道:
https://app.deriv.com/front-channelhttps://smarttrader.deriv.com/front-channel财务报告和审定财务报表https://hub.deriv.com/tradershub/front-channel
假设你在Deriv. app上记录下来 当点击日志按钮时,在背景 Hydra 中检查其注册过的任何具有前频道日志路径并有会话的应用程序,并使用iframe 等自动引用路径:
<iframe src="https://app.deriv.com/front-channel?iss=https://oauth.deriv.com&sid=..."></iframe>
<iframe src="https://smarttrader.deriv.com/front-channel?iss=https://oauth.deriv.com&sid=..."></iframe>
<iframe src="https://hub.deriv.com/tradershub/front-channel?iss=https://oauth.deriv.com&sid=..."></iframe>
这将自动清除SmartTrader和Traders Hub Outsystems中用于认证数据的本地/会话存储,这样当用户导航到SmartTrader或Traders Hub Outsystems时,它们已经处于关闭状态 client.accounts 已经清除了本地仓库.
一旦路径和页面被执行,您需要通知认证小组或DevOps注册前频道登录URI,以便Hydra在登录流量中引用.