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
62 lines
1.5 KiB
TypeScript
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>
|
|
);
|
|
};
|