tachybase_todo/packages/plugins/@nocobase/plugin-oidc/src/client/OIDCButton.tsx
sealday 3e58c54aa8 feat: 仓库二期 (#719)
Co-authored-by: hello@lv <2256334253@qq.com>
Co-authored-by: wjh <wwwjh0710@163.com>
Co-authored-by: sealday <sealday@gmail.com>
Reviewed-on: daoyoucloud/tachybase#719
2024-05-08 16:20:31 +08:00

62 lines
1.5 KiB
TypeScript

import { LoginOutlined } from '@ant-design/icons';
import { css, useAPIClient } from '@tachybase/client';
import { Button, Space, message } from 'antd';
import React, { useEffect } from 'react';
import { useOidcTranslation } from './locale';
import { useLocation } from 'react-router-dom';
import { Authenticator } from '@nocobase/plugin-auth/client';
export interface OIDCProvider {
clientId: string;
title: string;
}
export const OIDCButton = ({ authenticator }: { authenticator: Authenticator }) => {
const { t } = useOidcTranslation();
const api = useAPIClient();
const location = useLocation();
const params = new URLSearchParams(location.search);
const redirect = params.get('redirect');
const login = async () => {
const response = await api.request({
method: 'post',
url: 'oidc:getAuthUrl',
headers: {
'X-Authenticator': authenticator.name,
},
data: {
redirect,
},
});
const authUrl = response?.data?.data;
window.location.replace(authUrl);
};
useEffect(() => {
const name = params.get('authenticator');
const error = params.get('error');
if (name !== authenticator.name) {
return;
}
if (error) {
message.error(t(error));
return;
}
});
return (
<Space
direction="vertical"
className={css`
display: flex;
`}
>
<Button shape="round" block icon={<LoginOutlined />} onClick={login}>
{t(authenticator.title)}
</Button>
</Space>
);
};