feat: support login by following wechat official account (#1284)

* show QRcode when click WeChat Icon * update how to show qrcode * handle wechat scan qrcode * fix api problems * fix url problems * fix problems * modify get frequency * remove useless print * fix:fix PR problems * fix: fix PR problems * fix:fix PR problem * fix IMG load delay problems * fix:fix provider problems * fix test problems * use gofumpt to fmt code * fix:delete useless variables * feat:add button for follow official account * fix:fix review problems * use gofumpt to fmt code * fix:fix scantype problems * fix Response problem * use gofumpt to format code
2025-07-04 21:30:24 +08:00 · 2022-11-13 15:05:15 +08:00
parent 462a82a3d5
commit aa6a4dc74f
19 changed files with 313 additions and 11 deletions
--- a/web/src/ProviderEditPage.js
+++ b/web/src/ProviderEditPage.js
@ -424,6 +424,20 @@ class ProviderEditPage extends React.Component {
            </React.Fragment>
          )
        }
+        {
+          this.state.provider.type !== "WeChat" ? null : (
+            <Row style={{marginTop: "20px"}} >
+              <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+                {Setting.getLabel(i18next.t("provider:Enable QR code"), i18next.t("provider:Enable QR code - Tooltip"))} :
+              </Col>
+              <Col span={1} >
+                <Switch checked={this.state.provider.disableSsl} onChange={checked => {
+                  this.updateProviderField("disableSsl", checked);
+                }} />
+              </Col>
+            </Row>
+          )
+        }
        {
          this.state.provider.type !== "Adfs" && this.state.provider.type !== "Casdoor" && this.state.provider.type !== "Okta" ? null : (
            <Row style={{marginTop: "20px"}} >
--- a/web/src/auth/AuthBackend.js
+++ b/web/src/auth/AuthBackend.js
@ -130,3 +130,13 @@ export function loginWithSaml(values, param) {
    },
  }).then(res => res.json());
 }
+
+export function getWechatMessageEvent() {
+  return fetch(`${Setting.ServerUrl}/api/get-webhook-event`, {
+    method: "GET",
+    credentials: "include",
+    headers: {
+      "Accept-Language": Setting.getAcceptLanguage(),
+    },
+  }).then(res => res.json());
+}
--- a/web/src/auth/ProviderButton.js
+++ b/web/src/auth/ProviderButton.js
@ -40,6 +40,8 @@ import BilibiliLoginButton from "./BilibiliLoginButton";
 import OktaLoginButton from "./OktaLoginButton";
 import DouyinLoginButton from "./DouyinLoginButton";
 import * as AuthBackend from "./AuthBackend";
+import {getEvent} from "./Util";
+import {Modal} from "antd";

 function getSigninButton(type) {
  const text = i18next.t("login:Sign in with {type}").replace("{type}", type);
@ -116,11 +118,33 @@ function getSamlUrl(provider, location) {
 export function renderProviderLogo(provider, application, width, margin, size, location) {
  if (size === "small") {
    if (provider.category === "OAuth") {
-      return (
-        <a key={provider.displayName} href={Provider.getAuthUrl(application, provider, "signup")}>
-          <img width={width} height={width} src={getProviderLogoURL(provider)} alt={provider.displayName} style={{margin: margin}} />
-        </a>
-      );
+      if (provider.type === "WeChat" && provider.clientId2 !== "" && provider.clientSecret2 !== "" && provider.content !== "" && provider.disableSsl === true) {
+        const info = async() => {
+          const t1 = setInterval(await getEvent, 1000, application, provider);
+          {Modal.info({
+            title: i18next.t("provider:Please use WeChat and scan the QR code to sign in"),
+            content: (
+              <div>
+                <img width={256} height={256} src = {"data:image/png;base64," + provider.content} alt="Wechat QR code" style={{margin: margin}} />
+              </div>
+            ),
+            onOk() {
+              window.clearInterval(t1);
+            },
+          });}
+        };
+        return (
+          <a key={provider.displayName} >
+            <img width={width} height={width} src={getProviderLogoURL(provider)} alt={provider.displayName} style={{margin: margin}} onClick={info} />
+          </a>
+        );
+      } else {
+        return (
+          <a key={provider.displayName} href={Provider.getAuthUrl(application, provider, "signup")}>
+            <img width={width} height={width} src={getProviderLogoURL(provider)} alt={provider.displayName} style={{margin: margin}} />
+          </a>
+        );
+      }
    } else if (provider.category === "SAML") {
      return (
        <a key={provider.displayName} onClick={() => getSamlUrl(provider, location)}>
--- a/web/src/auth/Util.js
+++ b/web/src/auth/Util.js
@ -14,6 +14,9 @@

 import React from "react";
 import {Alert, Button, Result, message} from "antd";
+import {getWechatMessageEvent} from "./AuthBackend";
+import * as Setting from "../Setting";
+import * as Provider from "./Provider";

 export function showMessage(type, text) {
  if (type === "success") {
@ -150,3 +153,12 @@ export function getQueryParamsFromState(state) {
    return query;
  }
 }
+
+export function getEvent(application, provider) {
+  getWechatMessageEvent()
+    .then(res => {
+      if (res.data === "SCAN" || res.data === "subscribe") {
+        Setting.goToLink(Provider.getAuthUrl(application, provider, "signup"));
+      }
+    });
+}
--- a/web/src/locales/de/data.json
+++ b/web/src/locales/de/data.json
@ -478,6 +478,8 @@
    "Email Content - Tooltip": "Unique string-style identifier",
    "Email Title": "E-Mail-Titel",
    "Email Title - Tooltip": "Unique string-style identifier",
+    "Enable QR code": "Enable QR code",
+    "Enable QR code - Tooltip": "Enable QR code - Tooltip",
    "Endpoint": "Endpoint",
    "Endpoint (Intranet)": "Endpunkt (Intranet)",
    "Host": "Host",
@ -496,6 +498,7 @@
    "Parse": "Parse",
    "Parse Metadata successfully": "Metadaten erfolgreich analysieren",
    "Path prefix": "Path prefix",
+    "Please use WeChat and scan the QR code to sign in": "Please use WeChat and scan the QR code to sign in",
    "Port": "Port",
    "Port - Tooltip": "Unique string-style identifier",
    "Prompted": "Prompted",
--- a/web/src/locales/en/data.json
+++ b/web/src/locales/en/data.json
@ -478,6 +478,8 @@
    "Email Content - Tooltip": "Email Content - Tooltip",
    "Email Title": "Email Title",
    "Email Title - Tooltip": "Email Title - Tooltip",
+    "Enable QR code": "Enable QR code",
+    "Enable QR code - Tooltip": "Enable QR code - Tooltip",
    "Endpoint": "Endpoint",
    "Endpoint (Intranet)": "Endpoint (Intranet)",
    "Host": "Host",
@ -496,6 +498,7 @@
    "Parse": "Parse",
    "Parse Metadata successfully": "Parse Metadata successfully",
    "Path prefix": "Path prefix",
+    "Please use WeChat and scan the QR code to sign in": "Please use WeChat and scan the QR code to sign in",
    "Port": "Port",
    "Port - Tooltip": "Port - Tooltip",
    "Prompted": "Prompted",
--- a/web/src/locales/fr/data.json
+++ b/web/src/locales/fr/data.json
@ -478,6 +478,8 @@
    "Email Content - Tooltip": "Unique string-style identifier",
    "Email Title": "Titre de l'e-mail",
    "Email Title - Tooltip": "Unique string-style identifier",
+    "Enable QR code": "Enable QR code",
+    "Enable QR code - Tooltip": "Enable QR code - Tooltip",
    "Endpoint": "Endpoint",
    "Endpoint (Intranet)": "Point de terminaison (Intranet)",
    "Host": "Hôte",
@ -496,6 +498,7 @@
    "Parse": "Parse",
    "Parse Metadata successfully": "Analyse des métadonnées réussie",
    "Path prefix": "Path prefix",
+    "Please use WeChat and scan the QR code to sign in": "Please use WeChat and scan the QR code to sign in",
    "Port": "Port",
    "Port - Tooltip": "Unique string-style identifier",
    "Prompted": "Prompted",
--- a/web/src/locales/ja/data.json
+++ b/web/src/locales/ja/data.json
@ -478,6 +478,8 @@
    "Email Content - Tooltip": "Unique string-style identifier",
    "Email Title": "メールタイトル",
    "Email Title - Tooltip": "Unique string-style identifier",
+    "Enable QR code": "Enable QR code",
+    "Enable QR code - Tooltip": "Enable QR code - Tooltip",
    "Endpoint": "Endpoint",
    "Endpoint (Intranet)": "エンドポイント (イントラネット)",
    "Host": "ホスト",
@ -496,6 +498,7 @@
    "Parse": "Parse",
    "Parse Metadata successfully": "メタデータの解析に成功",
    "Path prefix": "Path prefix",
+    "Please use WeChat and scan the QR code to sign in": "Please use WeChat and scan the QR code to sign in",
    "Port": "ポート",
    "Port - Tooltip": "Unique string-style identifier",
    "Prompted": "Prompted",
--- a/web/src/locales/ko/data.json
+++ b/web/src/locales/ko/data.json
@ -478,6 +478,8 @@
    "Email Content - Tooltip": "Unique string-style identifier",
    "Email Title": "Email title",
    "Email Title - Tooltip": "Unique string-style identifier",
+    "Enable QR code": "Enable QR code",
+    "Enable QR code - Tooltip": "Enable QR code - Tooltip",
    "Endpoint": "Endpoint",
    "Endpoint (Intranet)": "Endpoint (Intranet)",
    "Host": "Host",
@ -496,6 +498,7 @@
    "Parse": "Parse",
    "Parse Metadata successfully": "Parse Metadata successfully",
    "Path prefix": "Path prefix",
+    "Please use WeChat and scan the QR code to sign in": "Please use WeChat and scan the QR code to sign in",
    "Port": "Port",
    "Port - Tooltip": "Unique string-style identifier",
    "Prompted": "Prompted",
--- a/web/src/locales/ru/data.json
+++ b/web/src/locales/ru/data.json
@ -478,6 +478,8 @@
    "Email Content - Tooltip": "Unique string-style identifier",
    "Email Title": "Заголовок письма",
    "Email Title - Tooltip": "Unique string-style identifier",
+    "Enable QR code": "Enable QR code",
+    "Enable QR code - Tooltip": "Enable QR code - Tooltip",
    "Endpoint": "Endpoint",
    "Endpoint (Intranet)": "Точка входа (Intranet)",
    "Host": "Хост",
@ -496,6 +498,7 @@
    "Parse": "Parse",
    "Parse Metadata successfully": "Анализ метаданных успешно завершен",
    "Path prefix": "Path prefix",
+    "Please use WeChat and scan the QR code to sign in": "Please use WeChat and scan the QR code to sign in",
    "Port": "Порт",
    "Port - Tooltip": "Unique string-style identifier",
    "Prompted": "Prompted",
--- a/web/src/locales/zh/data.json
+++ b/web/src/locales/zh/data.json
@ -478,6 +478,8 @@
    "Email Content - Tooltip": "邮件内容",
    "Email Title": "邮件标题",
    "Email Title - Tooltip": "邮件标题",
+    "Enable QR code": "扫码登陆",
+    "Enable QR code - Tooltip": "扫码登陆 - 工具提示",
    "Endpoint": "地域节点 (外网)",
    "Endpoint (Intranet)": "地域节点 (内网)",
    "Host": "主机",
@ -496,6 +498,7 @@
    "Parse": "Parse",
    "Parse Metadata successfully": "解析元数据成功",
    "Path prefix": "路径前缀",
+    "Please use WeChat and scan the QR code to sign in": "请使用微信扫描二维码登录",
    "Port": "端口",
    "Port - Tooltip": "端口号",
    "Prompted": "注册后提醒绑定",