@authing/react-ui-components 3.0.1-beta.1 → 3.0.1-rc.3

package/src/components/AuthingGuard/Forms/SocialAndIdpLogin/index.tsx

@@ -0,0 +1,325 @@
+import qs from 'qs'
+import shortid from 'shortid'
+import React, { FC, useEffect } from 'react'
+import { Button, Avatar, Space, Tooltip, message } from 'antd'
+
+import { isWechatBrowser, popupCenter } from '../../../../utils'
+import { useGuardContext } from '../../../../context/global/context'
+import {
+  APP_MFA_CODE,
+  OTP_MFA_CODE,
+} from '../../../../components/AuthingGuard/constants'
+import {
+  Lang,
+  Protocol,
+  SocialAndIdpLoginProps,
+} from '../../../../components/AuthingGuard/types'
+import {
+  OIDCConnectionConfig,
+  ICasConnectionConfig,
+  ISamlConnectionConfig,
+  IAzureAdConnectionConfig,
+  IOAuthConnectionConfig,
+} from '../../../../components/AuthingGuard/api'
+import { requestClient } from '../../api/http'
+
+import './style.less'
+import { IconFont } from '../../IconFont'
+import { useScreenSize } from '../../hooks/useScreenSize'
+import { SocialConnectionProvider } from 'authing-js-sdk'
+import { useTranslation } from 'react-i18next'
+import { i18n } from '../../locales'
+
+export const SocialAndIdpLogin: FC<SocialAndIdpLoginProps> = ({
+  onFail = () => {},
+  onSuccess = () => {},
+}) => {
+  const {
+    state: { config, userPoolId, appId, authClient },
+  } = useGuardContext()
+  const { t } = useTranslation()
+
+  const noForm = !config.loginMethods?.length
+
+  const [screenSize] = useScreenSize()
+
+  useEffect(() => {
+    const onMessage = (evt: MessageEvent) => {
+      // TODO: event.origin是指发送的消息源，一定要进行验证！！！
+
+      const { code, message: errMsg, data, event } = evt.data
+
+      const { source, eventType } = event || {}
+
+      // 社会化登录是用 authing-js-sdk 实现的，不用再在这里回调了
+      if (source === 'authing' && eventType === 'socialLogin') {
+        return
+      }
+
+      try {
+        const parsedMsg = JSON.parse(errMsg)
+        const { code: authingCode } = parsedMsg
+        if ([OTP_MFA_CODE, APP_MFA_CODE].includes(authingCode)) {
+          onFail(parsedMsg)
+          return
+        }
+      } catch (e) {
+        // do nothing...
+      }
+
+      if (code !== undefined) {
+        if (code === 200) {
+          localStorage.setItem('_authing_token', data?.token)
+          onSuccess(data)
+        } else {
+          message.error(errMsg)
+        }
+      }
+    }
+    window.addEventListener('message', onMessage)
+    return () => {
+      window.removeEventListener('message', onMessage)
+    }
+  }, [onFail, onSuccess])
+
+  const idpButtons = config.enterpriseConnectionObjs.map((i) => {
+    if (i.protocol === Protocol.OIDC) {
+      const configItem = i.config as OIDCConnectionConfig
+      const state = shortid.generate()
+
+      const query = qs.stringify({
+        client_id: configItem.clientId,
+        redirect_uri: configItem.redirectUri,
+        scope: configItem.scopes,
+        response_type: configItem.responseType,
+        state,
+        nonce: shortid.generate(),
+      })
+      const url = `${configItem.authorizationEdpoint}?${query}`
+
+      return (
+        <Button
+          key={i.identifier}
+          className="authing-guard-third-login-btn"
+          block
+          size="large"
+          icon={<Avatar size={20} src={i.logo} style={{ marginRight: 8 }} />}
+          onClick={async () => {
+            await requestClient.post(
+              '/api/v2/connections/oidc/start-interaction',
+              {
+                state,
+                protocol: i.protocol,
+                userPoolId,
+                appId,
+                referer: window.location.href,
+                connection: { providerIentifier: i.identifier },
+              }
+            )
+            popupCenter(url)
+          }}
+        >
+          {t('login.loginBy', {
+            name: i.displayName,
+          })}
+        </Button>
+      )
+    } else if (i.protocol === Protocol.SAML) {
+      const config = i.config as ISamlConnectionConfig
+      return (
+        <Button
+          key={i.identifier}
+          className="authing-guard-third-login-btn"
+          block
+          size="large"
+          icon={<Avatar size={20} src={i.logo} style={{ marginRight: 8 }} />}
+          onClick={async () => {
+            popupCenter(config.samlRequest!)
+          }}
+        >
+          {t('login.loginBy', {
+            name: i.displayName,
+          })}
+        </Button>
+      )
+    } else if (i.protocol === Protocol.CAS) {
+      const config = i.config as ICasConnectionConfig
+
+      return (
+        <Button
+          key={i.identifier}
+          className="authing-guard-third-login-btn"
+          block
+          size="large"
+          icon={<Avatar size={20} src={i.logo} style={{ marginRight: 8 }} />}
+          onClick={async () => {
+            popupCenter(config.casConnectionLoginUrl!)
+          }}
+        >
+          {t('login.loginBy', {
+            name: i.displayName,
+          })}
+        </Button>
+      )
+    } else if (i.protocol === Protocol.OAUTH) {
+      const config = i.config as IOAuthConnectionConfig
+
+      return (
+        <Button
+          key={i.identifier}
+          className="authing-guard-third-login-btn"
+          block
+          size="large"
+          icon={<Avatar size={20} src={i.logo} style={{ marginRight: 8 }} />}
+          onClick={async () => {
+            popupCenter(config.authUrl!)
+          }}
+        >
+          {t('login.loginBy', {
+            name: i.displayName,
+          })}
+        </Button>
+      )
+    } else if (i.protocol === Protocol.AZURE_AD) {
+      const configItem = i.config as IAzureAdConnectionConfig
+      return (
+        <Button
+          key={i.identifier}
+          className="authing-guard-third-login-btn"
+          block
+          size="large"
+          icon={<Avatar size={20} src={i.logo} style={{ marginRight: 8 }} />}
+          onClick={async () => {
+            popupCenter(configItem.authorizationUrl)
+          }}
+        >
+          {t('login.loginBy', {
+            name: i.displayName,
+          })}
+        </Button>
+      )
+    } else {
+      return null
+    }
+  })
+
+  const socialLoginButtons = config.socialConnectionObjs
+    .filter((item) =>
+      isWechatBrowser()
+        ? item.provider === SocialConnectionProvider.WECHATMP
+        : item.provider !== SocialConnectionProvider.WECHATMP
+    )
+    .map((item) => {
+      const iconType = `authing-${item.provider.replace(/:/g, '-')}`
+
+      const authorization_params: Record<string, any> = {}
+      if (item.provider === SocialConnectionProvider.BAIDU) {
+        authorization_params.display = screenSize
+      }
+
+      const onLogin = () => {
+        authClient.social.authorize(item.identifier, {
+          onSuccess(user) {
+            onSuccess(user)
+          },
+          onError(code, msg) {
+            try {
+              const parsedMsg = JSON.parse(msg)
+              const { code: authingCode } = parsedMsg
+              if ([OTP_MFA_CODE, APP_MFA_CODE].includes(authingCode)) {
+                onFail(parsedMsg)
+                return
+              }
+            } catch (e) {
+              // do nothing...
+            }
+
+            message.error(msg)
+          },
+          authorization_params,
+        })
+      }
+
+      return noForm ? (
+        <Button
+          key={item.provider}
+          block
+          size="large"
+          className="authing-guard-third-login-btn"
+          icon={
+            <IconFont
+              type={iconType}
+              style={{ fontSize: 20, marginRight: 8 }}
+            />
+          }
+          onClick={onLogin}
+        >
+          {item.tooltip?.[i18n.language as Lang] || item.displayName}
+        </Button>
+      ) : (
+        <Tooltip
+          key={item.provider}
+          title={item.tooltip?.[i18n.language as Lang] || item.displayName}
+        >
+          <div className="authing-social-login-item" onClick={onLogin}>
+            <IconFont type={iconType} />
+          </div>
+        </Tooltip>
+      )
+    })
+
+  const idp =
+    config.enterpriseConnectionObjs.length > 0 ? (
+      <>
+        {!noForm && <div className="authing-social-login-title">OR</div>}
+        <Space
+          size={12}
+          className="authing-guard-full-width-space"
+          direction="vertical"
+        >
+          {idpButtons}
+        </Space>
+      </>
+    ) : null
+
+  const socialLogin =
+    socialLoginButtons.length > 0 && noForm ? (
+      <Space
+        size={12}
+        className="authing-guard-full-width-space"
+        direction="vertical"
+      >
+        {socialLoginButtons}
+      </Space>
+    ) : (
+      socialLoginButtons.length > 0 && (
+        <>
+          <div className="authing-social-login-title">
+            {t('login.thridAccLogin')}
+          </div>
+          <div className="authing-social-login-list">{socialLoginButtons}</div>
+        </>
+      )
+    )
+
+  return (
+    <>
+      {!noForm && (
+        <div
+          style={{
+            flex: 1,
+            minHeight: 26,
+          }}
+        ></div>
+      )}
+      <Space
+        size={12}
+        direction="vertical"
+        className="authing-guard-full-width-space"
+      >
+        {idp}
+        {socialLogin}
+      </Space>
+    </>
+  )
+}

package/src/components/AuthingGuard/Forms/SocialAndIdpLogin/style.less

@@ -0,0 +1,75 @@
+.authing-guard-third-login-btn {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.authing-social-login-item {
+  display: inline-flex;
+  margin: 8px 8px;
+  width: 48px;
+  height: 48px;
+  background-color: #eff1f6;
+  border-radius: 50%;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+
+  .authing-icon {
+    font-size: 20px;
+    color: #aeb9d4;
+    transition: color 0.3s ease-in-out;
+  }
+
+  &:hover .authing-icon {
+    color: #396aff;
+  }
+}
+
+.authing-social-login-title {
+  text-align: center;
+  font-size: 14px;
+  color: #999999;
+}
+
+.authing-social-login-title::before,
+.authing-social-login-title::after {
+  content: '——';
+  color: #eeeeee;
+  margin: 0 11px;
+}
+
+.authing-social-login-list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+@media only screen and (max-width: 719px) {
+  .authing-social-login-title {
+    font-size: 12px;
+  }
+  .authing-social-login-item {
+    width: 32px;
+    height: 32px;
+    .authing-icon {
+      font-size: 16px;
+    }
+  }
+  .authing-guard-full-width-space {
+    .authing-ant-space-item {
+      margin-bottom: 16px !important;
+      display: flex;
+      justify-content: center;
+      .authing-ant-btn {
+        width: 200px;
+        height: 34px;
+        background: #ffffff;
+        border-radius: 18px;
+        border: 1px solid #e7e7e7;
+        font-size: 12px;
+      }
+    }
+  }
+}

package/src/components/AuthingGuard/Forms/UploadImage/index.tsx

@@ -0,0 +1,70 @@
+import { PlusOutlined } from '@ant-design/icons'
+import { message, Spin, Upload } from 'antd'
+import { UploadChangeParam } from 'antd/lib/upload'
+import React, { FC, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useGuardContext } from '../../../../context/global/context'
+
+export const UploadImage: FC<{
+  value?: string
+  onChange?: (value: string) => void
+}> = ({ value, onChange }) => {
+  const [uploading, setUploading] = useState(false)
+  const { t } = useTranslation()
+  const {
+    state: {
+      config: { apiHost },
+    },
+  } = useGuardContext()
+
+  const onStatusChange = (info: UploadChangeParam) => {
+    const { status } = info.file
+
+    if (status === 'uploading') {
+      setUploading(true)
+    } else {
+      setUploading(false)
+    }
+
+    if (status === 'done') {
+      const { code, message: errMsg, data } = info.file.response
+      if (code !== 200) {
+        return message.error(errMsg)
+      }
+      const { url } = data
+      onChange?.(url)
+    } else if (status === 'error') {
+      message.error(
+        t('common.uploadFail', {
+          name: info.file.name,
+        })
+      )
+    }
+  }
+
+  const uploadButton = (
+    <div>
+      <PlusOutlined />
+      <div style={{ marginTop: 8 }}>Upload</div>
+    </div>
+  )
+
+  return (
+    <Upload
+      name="file"
+      accept="image/*"
+      listType="picture-card"
+      showUploadList={false}
+      action={`${apiHost}/api/v2/upload?folder=photos`}
+      onChange={onStatusChange}
+    >
+      <Spin size="small" spinning={uploading}>
+        {value ? (
+          <img src={value} alt="" style={{ width: '100%' }} />
+        ) : (
+          uploadButton
+        )}
+      </Spin>
+    </Upload>
+  )
+}

package/src/components/AuthingGuard/Forms/index.ts

@@ -0,0 +1,13 @@
+export * from './ADLoginForm'
+export * from './ResetPwdForm'
+export * from './MfaVerifyForm'
+export * from './LdapLoginForm'
+export * from './QrCodeLoginForm'
+export * from './MfaResetCodeForm'
+export * from './EmailRegisterForm'
+export * from './PhoneRegisterForm'
+export * from './PasswordLoginForm'
+export * from './SocialAndIdpLogin'
+export * from './PhoneCodeLoginForm'
+export * from './SmsMfaVerifyForm'
+export * from './EmailMfaVerifyForm'