tachybase_todo/packages/plugins/@nocobase/plugin-saml/src/client/SAMLButton.tsx
YANG QIA 89361ef61c
fix(auth): SSO issues (#2733)
* fix(auth): sso switch popup to rediect (fix T-2024)

* refactor: auth process optimization

* fix: test

* chore: add error handler

* fix(auth): sso redirection issue of sub app

* Revert "refactor(auth): OIDC, SAML auth switch popup to redirectction (#2737)"

This reverts commit beb4793051.

* Revert "Revert "refactor(auth): OIDC, SAML auth switch popup to redirectction (#2737)""

This reverts commit 301a85d767.

* refactor(oidc): improve validate logic

* refactor(saml): improve auth logic

* fix: test

* refactor(cas): improve auth logic

* chore: add error handler

* fix(oidc): subapp callback issue

* fix: add dependency

* chore: add dependency

* fix(auth): set default `userBindField:email`
2023-10-12 00:54:00 -05:00

63 lines
1.7 KiB
TypeScript

import { LoginOutlined } from '@ant-design/icons';
import { Authenticator, css, useAPIClient, useCurrentUserContext, useRedirect } from '@nocobase/client';
import { Button, Space, message } from 'antd';
import React, { useEffect } from 'react';
import { useSamlTranslation } from './locale';
import { useLocation } from 'react-router-dom';
export const SAMLButton = ({ authenticator }: { authenticator: Authenticator }) => {
const { t } = useSamlTranslation();
const api = useAPIClient();
const redirect = useRedirect();
const location = useLocation();
const { refreshAsync: refresh } = useCurrentUserContext();
const login = async () => {
const response = await api.request({
method: 'post',
url: 'saml:getAuthUrl',
headers: {
'X-Authenticator': authenticator.name,
},
});
const authUrl = response?.data?.data;
window.location.replace(authUrl);
};
useEffect(() => {
const params = new URLSearchParams(location.search);
const token = params.get('token');
const name = params.get('authenticator');
const error = params.get('error');
if (name !== authenticator.name) {
return;
}
if (error) {
message.error(error);
return;
}
if (token) {
api.auth.setToken(token);
api.auth.setAuthenticator(name);
refresh()
.then(() => redirect())
.catch((err) => console.log(err));
return;
}
});
return (
<Space
direction="vertical"
className={css`
display: flex;
`}
>
<Button shape="round" block icon={<LoginOutlined />} onClick={login}>
{t(authenticator.title)}
</Button>
</Space>
);
};