@springmicro/auth 0.7.0 → 0.7.1

package/src/components/forms/util/auth-util.tsx

@@ -1,346 +1,346 @@
-// https://github.com/casdoor/casdoor/blob/master/web/src/auth/Util.js
-
-// Copyright 2021 The Casdoor Authors. All Rights Reserved.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//      http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import React from "react";
-// import { Alert, Button, Modal, Result } from "antd";
-import { getWechatMessageEvent } from "./auth-api";
-import * as Setting from "./core";
-import * as Provider from "./provider";
-import * as AuthBackend from "./auth-api";
-
-export function renderMessage(msg: string | null) {
-  if (msg !== null) {
-    return (
-      <div role="alert" className="alert alert-error">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          className="stroke-current shrink-0 h-6 w-6"
-          fill="none"
-          viewBox="0 0 24 24"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
-          />
-        </svg>
-        <div>
-          <h3 className="font-bold">Failed to sign in.</h3>
-          <div className="text-xs">{msg}</div>
-        </div>
-      </div>
-      // <div style={{ display: "inline" }}>
-      //   <Alert
-      //     message={i18next.t("application:Failed to sign in")}
-      //     showIcon
-      //     description={msg}
-      //     type="error"
-      //     action={
-      //       <Button size="small" type="primary" danger>
-      //         {i18next.t("product:Detail")}
-      //       </Button>
-      //     }
-      //   />
-      // </div>
-    );
-  } else {
-    return null;
-  }
-}
-
-export function renderMessageLarge(ths: any, msg: string | null) {
-  if (msg !== null) {
-    return (
-      // <Result
-      //   style={{margin: "0px auto"}}
-      //   status="error"
-      //   title={i18next.t("general:There was a problem signing you in..")}
-      //   subTitle={msg}
-      //   extra={[
-      //     <Button type="primary" key="back" onClick={() => {
-      //       window.history.go(-2);
-      //     }}>
-      //       {i18next.t("general:Back")}
-      //     </Button>,
-      //   ]}
-      // >
-      // </Result>
-      <div role="alert" className="alert alert-error shadow-lg">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          className="stroke-current shrink-0 h-6 w-6"
-          fill="none"
-          viewBox="0 0 24 24"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
-          />
-        </svg>
-        <div>
-          <h3 className="font-bold">There was a problem signing you in.</h3>
-          <div className="text-xs">{msg}</div>
-        </div>
-        <button
-          className="btn btn-sm btn-primary"
-          onClick={() => window.history.go(-2)}
-        >
-          Back
-        </button>
-      </div>
-    );
-  } else {
-    return null;
-  }
-}
-
-function getRefinedValue(value?: string | null) {
-  return value ?? "";
-}
-
-export function getCasParameters(params?: URLSearchParams) {
-  const queries =
-    params !== undefined ? params : new URLSearchParams(window.location.search);
-  const service = getRefinedValue(queries.get("service"));
-  const renew = getRefinedValue(queries.get("renew"));
-  const gateway = getRefinedValue(queries.get("gateway"));
-  return {
-    service: service,
-    renew: renew,
-    gateway: gateway,
-  };
-}
-
-function getRawGetParameter(key: string) {
-  const fullUrl = window.location.href;
-  const token = fullUrl.split(`${key}=`)[1];
-  if (!token) {
-    return "";
-  }
-
-  let res = token.split("&")[0];
-  if (!res) {
-    return "";
-  }
-
-  res = decodeURIComponent(res);
-  return res;
-}
-
-export function getCasLoginParameters(owner: string, name: string) {
-  const queries = new URLSearchParams(window.location.search);
-  // CAS service
-  let service = getRawGetParameter("service");
-  if (service === "") {
-    service = getRefinedValue(queries.get("service"));
-  }
-  return {
-    id: `${owner}/${encodeURIComponent(name)}`, // application ID,
-    service: service,
-    type: "cas",
-  };
-}
-
-export function getOAuthGetParameters(params?: URLSearchParams) {
-  const queries =
-    params !== undefined ? params : new URLSearchParams(window.location.search);
-  const clientId = getRefinedValue(queries.get("client_id"));
-  const responseType = getRefinedValue(queries.get("response_type"));
-
-  let redirectUri = getRawGetParameter("redirect_uri");
-  if (redirectUri === "") {
-    redirectUri = getRefinedValue(queries.get("redirect_uri"));
-  }
-
-  let scope = getRefinedValue(queries.get("scope"));
-  if (redirectUri.includes("#") && scope === "") {
-    scope = getRawGetParameter("scope");
-  }
-
-  let state = getRefinedValue(queries.get("state"));
-  if (state.startsWith("/auth/oauth2/login.php?wantsurl=")) {
-    // state contains URL param encoding for Moodle, URLSearchParams automatically decoded it, so here encode it again
-    state = encodeURIComponent(state);
-  }
-  if (redirectUri.includes("#") && state === "") {
-    state = getRawGetParameter("state");
-  }
-
-  const nonce = getRefinedValue(queries.get("nonce"));
-  const challengeMethod = getRefinedValue(queries.get("code_challenge_method"));
-  const codeChallenge = getRefinedValue(queries.get("code_challenge"));
-  const samlRequest = getRefinedValue(queries.get("SAMLRequest"));
-  const relayState = getRefinedValue(queries.get("RelayState"));
-  const noRedirect = getRefinedValue(queries.get("noRedirect"));
-
-  if (clientId === "" && samlRequest === "") {
-    // login
-    return null;
-  } else {
-    // code
-    return {
-      clientId: clientId,
-      responseType: responseType,
-      redirectUri: redirectUri,
-      scope: scope,
-      state: state,
-      nonce: nonce,
-      challengeMethod: challengeMethod,
-      codeChallenge: codeChallenge,
-      samlRequest: samlRequest,
-      relayState: relayState,
-      noRedirect: noRedirect,
-      type: "code",
-    };
-  }
-}
-
-export function getStateFromQueryParams(
-  applicationName: string,
-  providerName: string,
-  method: string,
-  isShortState: boolean
-) {
-  let query = window.location.search;
-  query = `${query}&application=${encodeURIComponent(
-    applicationName
-  )}&provider=${encodeURIComponent(providerName)}&method=${method}`;
-  if (method === "link") {
-    query = `${query}&from=${window.location.pathname}`;
-  }
-
-  if (!isShortState) {
-    return btoa(query);
-  } else {
-    const state = providerName;
-    sessionStorage.setItem(state, query);
-    return state;
-  }
-}
-
-export function getQueryParamsFromState(state: string) {
-  const query = sessionStorage.getItem(state);
-  if (query === null) {
-    return atob(state);
-  } else {
-    return query;
-  }
-}
-
-export function getEvent(
-  application: Provider.Application | null,
-  provider: Provider.Provider | null,
-  ticket: string,
-  method: string
-) {
-  getWechatMessageEvent(ticket).then((res) => {
-    if (res.data === "SCAN" || res.data === "subscribe") {
-      const code = res?.data2;
-      Setting.goToLink(
-        Provider.getAuthUrl(application, provider, method ?? "signup", code)
-      );
-    }
-  });
-}
-
-export async function WechatOfficialAccountModal(
-  application: Provider.Application,
-  provider: Provider.Provider,
-  method: string
-) {
-  // Add an event listener to close the dialog when the user clicks outside of it
-  document.addEventListener("click", function (event) {
-    const dialog = document.getElementById("WechatOfficialAccountModal");
-    if (dialog && event.target === dialog) {
-      // @ts-ignore
-      dialog!.close();
-    }
-  });
-
-  // Function to create and display the dialog
-  function showDialog(res: any, t1: any) {
-    // Define a function to open the dialog
-    function openDialog() {
-      const dialog = document.getElementById("WechatOfficialAccountModal");
-      if (dialog) {
-        //@ts-ignore
-        dialog!.showModal();
-      }
-    }
-
-    // Define a function to close the dialog
-    function closeDialog() {
-      window.clearInterval(t1);
-      const dialog = document.getElementById("WechatOfficialAccountModal");
-      if (dialog) {
-        //@ts-ignore
-        dialog!.close();
-      }
-    }
-    // @ts-ignore
-    window.closeDialog = closeDialog;
-    const dialogContent = `
-    <div style="margin-right: 34px;">
-      <img src="data:image/png;base64,${res.data}" alt="Wechat QR code" style="width: 100%;" />
-    </div>
-    <button onclick="window.closeDialog()">Close</button>
-  `;
-
-    const dialog = document.createElement("dialog");
-    dialog.innerHTML = dialogContent;
-    dialog.id = "WechatOfficialAccountModal";
-
-    // Append the dialog to the document body
-    document.body.appendChild(dialog);
-
-    // Open the dialog
-    openDialog();
-  }
-
-  AuthBackend.getWechatQRCode(`${provider.owner}/${provider.name}`).then(
-    async (res) => {
-      if (res.status !== "ok") {
-        Setting.showMessage("error", res?.msg);
-        return;
-      }
-
-      const t1 = setInterval(
-        await getEvent,
-        1000,
-        application,
-        provider,
-        res.data2,
-        method
-      );
-
-      showDialog(res, t1);
-      // {Modal.info({
-      //   title: i18next.t("provider:Please use WeChat to scan the QR code and follow the official account for sign in"),
-      //   content: (
-      //     <div style={{marginRight: "34px"}}>
-      //       <img src = {"data:image/png;base64," + res.data} alt="Wechat QR code" style={{width: "100%"}} />
-      //     </div>
-      //   ),
-      //   onOk() {
-      //     window.clearInterval(t1);
-      //   },
-      // });}
-    }
-  );
-}
+// https://github.com/casdoor/casdoor/blob/master/web/src/auth/Util.js
+
+// Copyright 2021 The Casdoor Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React from "react";
+// import { Alert, Button, Modal, Result } from "antd";
+import { getWechatMessageEvent } from "./auth-api";
+import * as Setting from "./core";
+import * as Provider from "./provider";
+import * as AuthBackend from "./auth-api";
+
+export function renderMessage(msg: string | null) {
+  if (msg !== null) {
+    return (
+      <div role="alert" className="alert alert-error">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="stroke-current shrink-0 h-6 w-6"
+          fill="none"
+          viewBox="0 0 24 24"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+          />
+        </svg>
+        <div>
+          <h3 className="font-bold">Failed to sign in.</h3>
+          <div className="text-xs">{msg}</div>
+        </div>
+      </div>
+      // <div style={{ display: "inline" }}>
+      //   <Alert
+      //     message={i18next.t("application:Failed to sign in")}
+      //     showIcon
+      //     description={msg}
+      //     type="error"
+      //     action={
+      //       <Button size="small" type="primary" danger>
+      //         {i18next.t("product:Detail")}
+      //       </Button>
+      //     }
+      //   />
+      // </div>
+    );
+  } else {
+    return null;
+  }
+}
+
+export function renderMessageLarge(ths: any, msg: string | null) {
+  if (msg !== null) {
+    return (
+      // <Result
+      //   style={{margin: "0px auto"}}
+      //   status="error"
+      //   title={i18next.t("general:There was a problem signing you in..")}
+      //   subTitle={msg}
+      //   extra={[
+      //     <Button type="primary" key="back" onClick={() => {
+      //       window.history.go(-2);
+      //     }}>
+      //       {i18next.t("general:Back")}
+      //     </Button>,
+      //   ]}
+      // >
+      // </Result>
+      <div role="alert" className="alert alert-error shadow-lg">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="stroke-current shrink-0 h-6 w-6"
+          fill="none"
+          viewBox="0 0 24 24"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+          />
+        </svg>
+        <div>
+          <h3 className="font-bold">There was a problem signing you in.</h3>
+          <div className="text-xs">{msg}</div>
+        </div>
+        <button
+          className="btn btn-sm btn-primary"
+          onClick={() => window.history.go(-2)}
+        >
+          Back
+        </button>
+      </div>
+    );
+  } else {
+    return null;
+  }
+}
+
+function getRefinedValue(value?: string | null) {
+  return value ?? "";
+}
+
+export function getCasParameters(params?: URLSearchParams) {
+  const queries =
+    params !== undefined ? params : new URLSearchParams(window.location.search);
+  const service = getRefinedValue(queries.get("service"));
+  const renew = getRefinedValue(queries.get("renew"));
+  const gateway = getRefinedValue(queries.get("gateway"));
+  return {
+    service: service,
+    renew: renew,
+    gateway: gateway,
+  };
+}
+
+function getRawGetParameter(key: string) {
+  const fullUrl = window.location.href;
+  const token = fullUrl.split(`${key}=`)[1];
+  if (!token) {
+    return "";
+  }
+
+  let res = token.split("&")[0];
+  if (!res) {
+    return "";
+  }
+
+  res = decodeURIComponent(res);
+  return res;
+}
+
+export function getCasLoginParameters(owner: string, name: string) {
+  const queries = new URLSearchParams(window.location.search);
+  // CAS service
+  let service = getRawGetParameter("service");
+  if (service === "") {
+    service = getRefinedValue(queries.get("service"));
+  }
+  return {
+    id: `${owner}/${encodeURIComponent(name)}`, // application ID,
+    service: service,
+    type: "cas",
+  };
+}
+
+export function getOAuthGetParameters(params?: URLSearchParams) {
+  const queries =
+    params !== undefined ? params : new URLSearchParams(window.location.search);
+  const clientId = getRefinedValue(queries.get("client_id"));
+  const responseType = getRefinedValue(queries.get("response_type"));
+
+  let redirectUri = getRawGetParameter("redirect_uri");
+  if (redirectUri === "") {
+    redirectUri = getRefinedValue(queries.get("redirect_uri"));
+  }
+
+  let scope = getRefinedValue(queries.get("scope"));
+  if (redirectUri.includes("#") && scope === "") {
+    scope = getRawGetParameter("scope");
+  }
+
+  let state = getRefinedValue(queries.get("state"));
+  if (state.startsWith("/auth/oauth2/login.php?wantsurl=")) {
+    // state contains URL param encoding for Moodle, URLSearchParams automatically decoded it, so here encode it again
+    state = encodeURIComponent(state);
+  }
+  if (redirectUri.includes("#") && state === "") {
+    state = getRawGetParameter("state");
+  }
+
+  const nonce = getRefinedValue(queries.get("nonce"));
+  const challengeMethod = getRefinedValue(queries.get("code_challenge_method"));
+  const codeChallenge = getRefinedValue(queries.get("code_challenge"));
+  const samlRequest = getRefinedValue(queries.get("SAMLRequest"));
+  const relayState = getRefinedValue(queries.get("RelayState"));
+  const noRedirect = getRefinedValue(queries.get("noRedirect"));
+
+  if (clientId === "" && samlRequest === "") {
+    // login
+    return null;
+  } else {
+    // code
+    return {
+      clientId: clientId,
+      responseType: responseType,
+      redirectUri: redirectUri,
+      scope: scope,
+      state: state,
+      nonce: nonce,
+      challengeMethod: challengeMethod,
+      codeChallenge: codeChallenge,
+      samlRequest: samlRequest,
+      relayState: relayState,
+      noRedirect: noRedirect,
+      type: "code",
+    };
+  }
+}
+
+export function getStateFromQueryParams(
+  applicationName: string,
+  providerName: string,
+  method: string,
+  isShortState: boolean
+) {
+  let query = window.location.search;
+  query = `${query}&application=${encodeURIComponent(
+    applicationName
+  )}&provider=${encodeURIComponent(providerName)}&method=${method}`;
+  if (method === "link") {
+    query = `${query}&from=${window.location.pathname}`;
+  }
+
+  if (!isShortState) {
+    return btoa(query);
+  } else {
+    const state = providerName;
+    sessionStorage.setItem(state, query);
+    return state;
+  }
+}
+
+export function getQueryParamsFromState(state: string) {
+  const query = sessionStorage.getItem(state);
+  if (query === null) {
+    return atob(state);
+  } else {
+    return query;
+  }
+}
+
+export function getEvent(
+  application: Provider.Application | null,
+  provider: Provider.Provider | null,
+  ticket: string,
+  method: string
+) {
+  getWechatMessageEvent(ticket).then((res) => {
+    if (res.data === "SCAN" || res.data === "subscribe") {
+      const code = res?.data2;
+      Setting.goToLink(
+        Provider.getAuthUrl(application, provider, method ?? "signup", code)
+      );
+    }
+  });
+}
+
+export async function WechatOfficialAccountModal(
+  application: Provider.Application,
+  provider: Provider.Provider,
+  method: string
+) {
+  // Add an event listener to close the dialog when the user clicks outside of it
+  document.addEventListener("click", function (event) {
+    const dialog = document.getElementById("WechatOfficialAccountModal");
+    if (dialog && event.target === dialog) {
+      // @ts-ignore
+      dialog!.close();
+    }
+  });
+
+  // Function to create and display the dialog
+  function showDialog(res: any, t1: any) {
+    // Define a function to open the dialog
+    function openDialog() {
+      const dialog = document.getElementById("WechatOfficialAccountModal");
+      if (dialog) {
+        //@ts-ignore
+        dialog!.showModal();
+      }
+    }
+
+    // Define a function to close the dialog
+    function closeDialog() {
+      window.clearInterval(t1);
+      const dialog = document.getElementById("WechatOfficialAccountModal");
+      if (dialog) {
+        //@ts-ignore
+        dialog!.close();
+      }
+    }
+    // @ts-ignore
+    window.closeDialog = closeDialog;
+    const dialogContent = `
+    <div style="margin-right: 34px;">
+      <img src="data:image/png;base64,${res.data}" alt="Wechat QR code" style="width: 100%;" />
+    </div>
+    <button onclick="window.closeDialog()">Close</button>
+  `;
+
+    const dialog = document.createElement("dialog");
+    dialog.innerHTML = dialogContent;
+    dialog.id = "WechatOfficialAccountModal";
+
+    // Append the dialog to the document body
+    document.body.appendChild(dialog);
+
+    // Open the dialog
+    openDialog();
+  }
+
+  AuthBackend.getWechatQRCode(`${provider.owner}/${provider.name}`).then(
+    async (res) => {
+      if (res.status !== "ok") {
+        Setting.showMessage("error", res?.msg);
+        return;
+      }
+
+      const t1 = setInterval(
+        await getEvent,
+        1000,
+        application,
+        provider,
+        res.data2,
+        method
+      );
+
+      showDialog(res, t1);
+      // {Modal.info({
+      //   title: i18next.t("provider:Please use WeChat to scan the QR code and follow the official account for sign in"),
+      //   content: (
+      //     <div style={{marginRight: "34px"}}>
+      //       <img src = {"data:image/png;base64," + res.data} alt="Wechat QR code" style={{width: "100%"}} />
+      //     </div>
+      //   ),
+      //   onOk() {
+      //     window.clearInterval(t1);
+      //   },
+      // });}
+    }
+  );
+}