import React, { useEffect, useState, useRef } from 'react'; import { Button, Space } from 'antd'; import { LoginOutlined } from '@ant-design/icons'; import { useMemoizedFn } from 'ahooks'; import { css } from '@emotion/css'; import { useAPIClient, useRedirect } from '@nocobase/client'; export interface OIDCProvider { clientId: string; title: string; authorizeUrl: string; } export const OIDCList = () => { const [list, setList] = useState([]); const [windowHandler, setWindowHandler] = useState(); const api = useAPIClient(); const redirect = useRedirect(); const getOidcList = async () => { const { data: pluginsRes } = await api.request({ url: 'app:getPlugins', }); if (!(pluginsRes.data as string[]).includes('oidc')) return; const { data: providersRes } = await api.request({ url: 'oidcProviders:list', params: { filter: { enabled: true, }, }, }); setList(providersRes.data); }; /** * 打开登录弹出框 */ const handleOpen = useMemoizedFn(async (item: OIDCProvider) => { const response = await api.request({ method: 'post', url: 'oidc:getAuthUrl', data: { clientId: item.clientId, }, }); const authUrl = response?.data?.data; const { width, height } = screen; const win = window.open( authUrl, '_blank', `width=800,height=600,left=${(width - 800) / 2},top=${ (height - 600) / 2 },toolbar=no,menubar=no,location=no,status=no`, ); setWindowHandler(win); }); /** * 从弹出窗口,发消息回来进行登录 */ const handleOIDCLogin = useMemoizedFn(async (event: MessageEvent) => { await api.auth.signIn(event.data, 'oidc'); windowHandler.close(); setWindowHandler(undefined); redirect(); }); /** * 监听弹出窗口的消息 */ useEffect(() => { if (!windowHandler) return; window.addEventListener('message', handleOIDCLogin); return () => { window.removeEventListener('message', handleOIDCLogin); }; }, [windowHandler]); useEffect(() => { getOidcList(); }, []); return ( {list.map((item) => ( ))} ); };