feat: support google one tap signin (#2131)

* feat: add google one tap support * feat: gofumpt * feat: add google provider rule conf * feat: update i18n
2025-07-04 05:10:19 +08:00 · 2023-07-25 15:49:15 +08:00
parent bfe8e5f3e7
commit d1f88ca9b8
17 changed files with 170 additions and 14 deletions
--- a/web/src/auth/GoogleLoginButton.js
+++ b/web/src/auth/GoogleLoginButton.js
@ -14,6 +14,9 @@

 import {createButton} from "react-social-login-buttons";
 import {StaticBaseUrl} from "../Setting";
+import {useGoogleOneTapLogin} from "react-google-one-tap-login";
+import * as Setting from "../Setting";
+import * as Provider from "./Provider";

 function Icon({width = 24, height = 24, color}) {
  return <img src={`${StaticBaseUrl}/buttons/google.svg`} alt="Sign in with Google" />;
@ -29,4 +32,29 @@ const config = {

 const GoogleLoginButton = createButton(config);

+export function GoogleOneTapLoginVirtualButton(prop) {
+  const application = prop.application;
+  const providerConf = prop.providerConf;
+  // https://stackoverflow.com/questions/62281579/google-one-tap-sign-in-ui-not-displayed-after-clicking-the-close-button
+  // document.cookie = "g_state=;path=/;expires=Thu, 01 Jan 1970 00:00:01 GMT";
+  useGoogleOneTapLogin({
+    googleAccountConfigs: {
+      client_id: providerConf.provider.clientId,
+    },
+    onError: (error) => {
+      Setting.showMessage("error", error);
+    },
+    onSuccess: (response) => {
+      const code = "GoogleIdToken-" + JSON.stringify(response);
+      const authUrlParams = new URLSearchParams(Provider.getAuthUrl(application, providerConf.provider, "signup"));
+      const state = authUrlParams.get("state");
+      let redirectUri = authUrlParams.get("redirect_uri");
+      redirectUri = `${redirectUri}?state=${state}&code=${encodeURIComponent(code)}`;
+      Setting.goToLink(redirectUri);
+    },
+    disableCancelOnUnmount: true,
+  });
+
+}
+
 export default GoogleLoginButton;
--- a/web/src/auth/LoginPage.js
+++ b/web/src/auth/LoginPage.js
@ -36,7 +36,7 @@ import {CaptchaModal} from "../common/modal/CaptchaModal";
 import {CaptchaRule} from "../common/modal/CaptchaModal";
 import RedirectForm from "../common/RedirectForm";
 import {MfaAuthVerifyForm, NextMfa, RequiredMfa} from "./mfa/MfaAuthVerifyForm";
-
+import {GoogleOneTapLoginVirtualButton} from "./GoogleLoginButton";
 class LoginPage extends React.Component {
  constructor(props) {
    super(props);
@ -423,6 +423,16 @@ class LoginPage extends React.Component {
    }
  }

+  renderOtherFormProvider(application) {
+    for (const providerConf of application.providers) {
+      if (providerConf.provider?.type === "Google" && providerConf.rule === "OneTap" && this.props.preview !== "auto") {
+        return (
+          <GoogleOneTapLoginVirtualButton application={application} providerConf={providerConf} />
+        );
+      }
+    }
+  }
+
  renderForm(application) {
    if (this.state.msg !== null) {
      return Util.renderMessage(this.state.msg);
@ -580,6 +590,9 @@ class LoginPage extends React.Component {
                return ProviderButton.renderProviderLogo(providerItem.provider, application, 30, 5, "small", this.props.location);
              })
            }
+            {
+              this.renderOtherFormProvider(application)
+            }
          </Form.Item>
        </Form>
      );
@ -601,6 +614,9 @@ class LoginPage extends React.Component {
              return ProviderButton.renderProviderLogo(providerItem.provider, application, 40, 10, "big", this.props.location);
            })
          }
+          {
+            this.renderOtherFormProvider(application)
+          }
          <div>
            <br />
            {
--- a/web/src/locales/de/data.json
+++ b/web/src/locales/de/data.json
@ -197,6 +197,7 @@
    "Confirm": "Confirm",
    "Created time": "Erstellte Zeit",
    "Custom": "Custom",
+    "Default": "Default",
    "Default application": "Standard Anwendung",
    "Default application - Tooltip": "Standard-Anwendung für Benutzer, die direkt von der Organisationsseite registriert wurden",
    "Default avatar": "Standard-Avatar",
@ -722,6 +723,8 @@
    "Secret key - Tooltip": "Vom Server verwendet, um die API des Verifizierungscodes-Providers für die Verifizierung aufzurufen",
    "Send Testing Email": "Senden Sie eine Test-E-Mail",
    "Send Testing SMS": "Sende Test-SMS",
+    "Sender number": "Sender number",
+    "Sender number - Tooltip": "Sender number - Tooltip",
    "Sign Name": "Signatur Namen",
    "Sign Name - Tooltip": "Name der Signatur, die verwendet werden soll",
    "Sign request": "Signaturanfrage",
--- a/web/src/locales/en/data.json
+++ b/web/src/locales/en/data.json
@ -197,6 +197,7 @@
    "Confirm": "Confirm",
    "Created time": "Created time",
    "Custom": "Custom",
+    "Default": "Default",
    "Default application": "Default application",
    "Default application - Tooltip": "Default application for users registered directly from the organization page",
    "Default avatar": "Default avatar",
@ -722,6 +723,8 @@
    "Secret key - Tooltip": "Used by the server to call the verification code provider API for verification",
    "Send Testing Email": "Send Testing Email",
    "Send Testing SMS": "Send Testing SMS",
+    "Sender number": "Sender number",
+    "Sender number - Tooltip": "Sender number - Tooltip",
    "Sign Name": "Sign Name",
    "Sign Name - Tooltip": "Name of the signature to be used",
    "Sign request": "Sign request",
--- a/web/src/locales/es/data.json
+++ b/web/src/locales/es/data.json
@ -197,6 +197,7 @@
    "Confirm": "Confirm",
    "Created time": "Tiempo creado",
    "Custom": "Custom",
+    "Default": "Default",
    "Default application": "Aplicación predeterminada",
    "Default application - Tooltip": "Aplicación predeterminada para usuarios registrados directamente desde la página de la organización",
    "Default avatar": "Avatar predeterminado",
@ -722,6 +723,8 @@
    "Secret key - Tooltip": "Utilizado por el servidor para llamar a la API del proveedor de códigos de verificación para verificar",
    "Send Testing Email": "Enviar correo electrónico de prueba",
    "Send Testing SMS": "Enviar SMS de prueba",
+    "Sender number": "Sender number",
+    "Sender number - Tooltip": "Sender number - Tooltip",
    "Sign Name": "Firma de Nombre",
    "Sign Name - Tooltip": "Nombre de la firma a ser utilizada",
    "Sign request": "Solicitud de firma",
--- a/web/src/locales/fr/data.json
+++ b/web/src/locales/fr/data.json
@ -197,6 +197,7 @@
    "Confirm": "Confirm",
    "Created time": "Temps créé",
    "Custom": "Custom",
+    "Default": "Default",
    "Default application": "Application par défaut",
    "Default application - Tooltip": "Application par défaut pour les utilisateurs enregistrés directement depuis la page de l'organisation",
    "Default avatar": "Avatar par défaut",
@ -722,6 +723,8 @@
    "Secret key - Tooltip": "Utilisé par le serveur pour appeler l'API du fournisseur de code de vérification pour vérifier",
    "Send Testing Email": "Envoyer un e-mail de test",
    "Send Testing SMS": "Envoyer des messages SMS de tests",
+    "Sender number": "Sender number",
+    "Sender number - Tooltip": "Sender number - Tooltip",
    "Sign Name": "Nom de signature",
    "Sign Name - Tooltip": "Nom de la signature à utiliser",
    "Sign request": "Demande de signature",
--- a/web/src/locales/id/data.json
+++ b/web/src/locales/id/data.json
@ -197,6 +197,7 @@
    "Confirm": "Confirm",
    "Created time": "Waktu dibuat",
    "Custom": "Custom",
+    "Default": "Default",
    "Default application": "Aplikasi default",
    "Default application - Tooltip": "Aplikasi default untuk pengguna yang terdaftar langsung dari halaman organisasi",
    "Default avatar": "Avatar default",
@ -722,6 +723,8 @@
    "Secret key - Tooltip": "Digunakan oleh server untuk memanggil API penyedia kode verifikasi untuk melakukan verifikasi",
    "Send Testing Email": "Kirim Email Uji Coba",
    "Send Testing SMS": "Kirim SMS Uji Coba",
+    "Sender number": "Sender number",
+    "Sender number - Tooltip": "Sender number - Tooltip",
    "Sign Name": "Tanda Tangan",
    "Sign Name - Tooltip": "Nama tanda tangan yang akan digunakan",
    "Sign request": "Permintaan tanda tangan",
--- a/web/src/locales/ja/data.json
+++ b/web/src/locales/ja/data.json
@ -197,6 +197,7 @@
    "Confirm": "Confirm",
    "Created time": "作成された時間",
    "Custom": "Custom",
+    "Default": "Default",
    "Default application": "デフォルトアプリケーション",
    "Default application - Tooltip": "組織ページから直接登録されたユーザーのデフォルトアプリケーション",
    "Default avatar": "デフォルトのアバター",
@ -722,6 +723,8 @@
    "Secret key - Tooltip": "認証のためにサーバーによって使用され、認証コードプロバイダAPIを呼び出すためのもの",
    "Send Testing Email": "テスト用メールを送信する",
    "Send Testing SMS": "テストSMSを送信してください",
+    "Sender number": "Sender number",
+    "Sender number - Tooltip": "Sender number - Tooltip",
    "Sign Name": "署名",
    "Sign Name - Tooltip": "使用する署名の名前",
    "Sign request": "サインリクエスト",
--- a/web/src/locales/ko/data.json
+++ b/web/src/locales/ko/data.json
@ -197,6 +197,7 @@
    "Confirm": "Confirm",
    "Created time": "작성한 시간",
    "Custom": "Custom",
+    "Default": "Default",
    "Default application": "기본 애플리케이션",
    "Default application - Tooltip": "조직 페이지에서 직접 등록한 사용자의 기본 응용 프로그램",
    "Default avatar": "기본 아바타",
@ -722,6 +723,8 @@
    "Secret key - Tooltip": "검증을 위해 서버에서 인증 코드 공급자 API를 호출하는 데 사용됩니다",
    "Send Testing Email": "테스트 이메일을 보내기",
    "Send Testing SMS": "테스트 SMS를 보내세요",
+    "Sender number": "Sender number",
+    "Sender number - Tooltip": "Sender number - Tooltip",
    "Sign Name": "신명서",
    "Sign Name - Tooltip": "사용할 서명의 이름",
    "Sign request": "표지 요청",
--- a/web/src/locales/pt/data.json
+++ b/web/src/locales/pt/data.json
@ -197,6 +197,7 @@
    "Confirm": "Confirm",
    "Created time": "Hora de Criação",
    "Custom": "Custom",
+    "Default": "Default",
    "Default application": "Aplicação padrão",
    "Default application - Tooltip": "Aplicação padrão para usuários registrados diretamente na página da organização",
    "Default avatar": "Avatar padrão",
@ -722,6 +723,8 @@
    "Secret key - Tooltip": "Usada pelo servidor para chamar a API do fornecedor de código de verificação para verificação",
    "Send Testing Email": "Enviar E-mail de Teste",
    "Send Testing SMS": "Enviar SMS de Teste",
+    "Sender number": "Sender number",
+    "Sender number - Tooltip": "Sender number - Tooltip",
    "Sign Name": "Nome do Sinal",
    "Sign Name - Tooltip": "Nome da assinatura a ser usada",
    "Sign request": "Solicitação de assinatura",
--- a/web/src/locales/ru/data.json
+++ b/web/src/locales/ru/data.json
@ -197,6 +197,7 @@
    "Confirm": "Confirm",
    "Created time": "Созданное время",
    "Custom": "Custom",
+    "Default": "Default",
    "Default application": "Приложение по умолчанию",
    "Default application - Tooltip": "По умолчанию приложение для пользователей, зарегистрированных непосредственно со страницы организации",
    "Default avatar": "Стандартный аватар",
@ -722,6 +723,8 @@
    "Secret key - Tooltip": "Используется сервером для вызова API-интерфейса поставщика кода подтверждения для проверки",
    "Send Testing Email": "Отправить тестовое письмо",
    "Send Testing SMS": "Отправить тестовое SMS-сообщение",
+    "Sender number": "Sender number",
+    "Sender number - Tooltip": "Sender number - Tooltip",
    "Sign Name": "Подпись имени",
    "Sign Name - Tooltip": "Имя подписи, которую нужно использовать",
    "Sign request": "Подписать запрос",
--- a/web/src/locales/vi/data.json
+++ b/web/src/locales/vi/data.json
@ -197,6 +197,7 @@
    "Confirm": "Confirm",
    "Created time": "Thời gian tạo",
    "Custom": "Custom",
+    "Default": "Default",
    "Default application": "Ứng dụng mặc định",
    "Default application - Tooltip": "Ứng dụng mặc định cho người dùng đăng ký trực tiếp từ trang tổ chức",
    "Default avatar": "Hình đại diện mặc định",
@ -722,6 +723,8 @@
    "Secret key - Tooltip": "Được sử dụng bởi máy chủ để gọi API nhà cung cấp mã xác minh để xác minh",
    "Send Testing Email": "Gửi Email kiểm tra",
    "Send Testing SMS": "Gửi SMS kiểm tra",
+    "Sender number": "Sender number",
+    "Sender number - Tooltip": "Sender number - Tooltip",
    "Sign Name": "Ký tên",
    "Sign Name - Tooltip": "Tên chữ ký sẽ được sử dụng",
    "Sign request": "Yêu cầu ký tên",
--- a/web/src/locales/zh/data.json
+++ b/web/src/locales/zh/data.json
@ -197,6 +197,7 @@
    "Confirm": "确认",
    "Created time": "创建时间",
    "Custom": "自定义",
+    "Default": "默认",
    "Default application": "默认应用",
    "Default application - Tooltip": "直接从组织页面注册的用户默认所属的应用",
    "Default avatar": "默认头像",
@ -722,6 +723,8 @@
    "Secret key - Tooltip": "用于服务端调用验证码提供商API进行验证",
    "Send Testing Email": "发送测试邮件",
    "Send Testing SMS": "发送测试短信",
+    "Sender number": "Sender number",
+    "Sender number - Tooltip": "Sender number - Tooltip",
    "Sign Name": "签名名称",
    "Sign Name - Tooltip": "签名名称",
    "Sign request": "签名请求",
--- a/web/src/table/ProviderTable.js
+++ b/web/src/table/ProviderTable.js
@ -178,21 +178,37 @@ class ProviderTable extends React.Component {
        key: "rule",
        width: "100px",
        render: (text, record, index) => {
-          if (record.provider?.category !== "Captcha") {
+          if (record.provider?.type === "Google") {
+            if (text === "None") {
+              text = "Default";
+            }
+            return (
+              <Select virtual={false} style={{width: "100%"}}
+                value={text}
+                defaultValue="Default"
+                onChange={value => {
+                  this.updateField(table, index, "rule", value);
+                }} >
+                <Option key="Default" value="Default">{i18next.t("general:Default")}</Option>
+                <Option key="OneTap" value="OneTap">{"One Tap"}</Option>
+              </Select>
+            );
+          } else if (record.provider?.category === "Captcha") {
+            return (
+              <Select virtual={false} style={{width: "100%"}}
+                value={text}
+                defaultValue="None"
+                onChange={value => {
+                  this.updateField(table, index, "rule", value);
+                }} >
+                <Option key="None" value="None">{i18next.t("general:None")}</Option>
+                <Option key="Dynamic" value="Dynamic">{i18next.t("application:Dynamic")}</Option>
+                <Option key="Always" value="Always">{i18next.t("application:Always")}</Option>
+              </Select>
+            );
+          } else {
            return null;
          }
-          return (
-            <Select virtual={false} style={{width: "100%"}}
-              value={text}
-              defaultValue="None"
-              onChange={value => {
-                this.updateField(table, index, "rule", value);
-              }} >
-              <Option key="None" value="None">{i18next.t("general:None")}</Option>
-              <Option key="Dynamic" value="Dynamic">{i18next.t("application:Dynamic")}</Option>
-              <Option key="Always" value="Always">{i18next.t("application:Always")}</Option>
-            </Select>
-          );
        },
      },
      {