@springmicro/auth 0.1.9 → 0.2.0-alpha.0

package/src/components/provider/ProviderButton.jsx

@@ -0,0 +1,327 @@
+// 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 i18next from "i18next";
+import * as Provider from "./Provider";
+import { getProviderLogoURL } from "../forms/util/core";
+import {
+  GithubLoginButton,
+  GoogleLoginButton,
+} from "react-social-login-buttons";
+import QqLoginButton from "./QqLoginButton";
+import FacebookLoginButton from "./FacebookLoginButton";
+import WeiboLoginButton from "./WeiboLoginButton";
+import GiteeLoginButton from "./GiteeLoginButton";
+import WechatLoginButton from "./WechatLoginButton";
+import DingTalkLoginButton from "./DingTalkLoginButton";
+import LinkedInLoginButton from "./LinkedInLoginButton";
+import WeComLoginButton from "./WeComLoginButton";
+import LarkLoginButton from "./LarkLoginButton";
+import GitLabLoginButton from "./GitLabLoginButton";
+import AdfsLoginButton from "./AdfsLoginButton";
+import CasdoorLoginButton from "./CasdoorLoginButton";
+import BaiduLoginButton from "./BaiduLoginButton";
+import AlipayLoginButton from "./AlipayLoginButton";
+import InfoflowLoginButton from "./InfoflowLoginButton";
+import AppleLoginButton from "./AppleLoginButton";
+import AzureADLoginButton from "./AzureADLoginButton";
+import AzureADB2CLoginButton from "./AzureADB2CLoginButton";
+import SlackLoginButton from "./SlackLoginButton";
+import SteamLoginButton from "./SteamLoginButton";
+import BilibiliLoginButton from "./BilibiliLoginButton";
+import OktaLoginButton from "./OktaLoginButton";
+import DouyinLoginButton from "./DouyinLoginButton";
+import LoginButton from "./LoginButton";
+import * as AuthBackend from "../forms/util/auth-api";
+import { WechatOfficialAccountModal } from "../forms/util/auth-util";
+
+function getSigninButton(provider) {
+  const text = i18next
+    .t("login:Sign in with {type}")
+    .replace(
+      "{type}",
+      provider.displayName !== "" ? provider.displayName : provider.type
+    );
+  if (provider.type === "GitHub") {
+    return <GithubLoginButton text={text} align={"center"} />;
+  } else if (provider.type === "Google") {
+    return <GoogleLoginButton text={text} align={"center"} />;
+  } else if (provider.type === "QQ") {
+    return <QqLoginButton text={text} align={"center"} />;
+  } else if (provider.type === "Facebook") {
+    return <FacebookLoginButton text={text} align={"center"} />;
+  } else if (provider.type === "Weibo") {
+    return <WeiboLoginButton text={text} align={"center"} />;
+  } else if (provider.type === "Gitee") {
+    return <GiteeLoginButton text={text} align={"center"} />;
+  } else if (provider.type === "WeChat") {
+    return <WechatLoginButton text={text} align={"center"} />;
+  } else if (provider.type === "DingTalk") {
+    return <DingTalkLoginButton text={text} align={"center"} />;
+  } else if (provider.type === "LinkedIn") {
+    return <LinkedInLoginButton text={text} align={"center"} />;
+  } else if (provider.type === "WeCom") {
+    return <WeComLoginButton text={text} align={"center"} />;
+  } else if (provider.type === "Lark") {
+    return <LarkLoginButton text={text} align={"center"} />;
+  } else if (provider.type === "GitLab") {
+    return <GitLabLoginButton text={text} align={"center"} />;
+  } else if (provider.type === "ADFS") {
+    return <AdfsLoginButton text={text} align={"center"} />;
+  } else if (provider.type === "Casdoor") {
+    return <CasdoorLoginButton text={text} align={"center"} />;
+  } else if (provider.type === "Baidu") {
+    return <BaiduLoginButton text={text} align={"center"} />;
+  } else if (provider.type === "Alipay") {
+    return <AlipayLoginButton text={text} align={"center"} />;
+  } else if (provider.type === "Infoflow") {
+    return <InfoflowLoginButton text={text} align={"center"} />;
+  } else if (provider.type === "Apple") {
+    return <AppleLoginButton text={text} align={"center"} />;
+  } else if (provider.type === "AzureAD") {
+    return <AzureADLoginButton text={text} align={"center"} />;
+  } else if (provider.type === "AzureADB2C") {
+    return <AzureADB2CLoginButton text={text} align={"center"} />;
+  } else if (provider.type === "Slack") {
+    return <SlackLoginButton text={text} align={"center"} />;
+  } else if (provider.type === "Steam") {
+    return <SteamLoginButton text={text} align={"center"} />;
+  } else if (provider.type === "Bilibili") {
+    return <BilibiliLoginButton text={text} align={"center"} />;
+  } else if (provider.type === "Okta") {
+    return <OktaLoginButton text={text} align={"center"} />;
+  } else if (provider.type === "Douyin") {
+    return <DouyinLoginButton text={text} align={"center"} />;
+  } else {
+    return (
+      <LoginButton
+        key={provider.type}
+        type={provider.type}
+        logoUrl={getProviderLogoURL(provider)}
+      />
+    );
+  }
+}
+
+function goToSamlUrl(provider, location) {
+  const params = new URLSearchParams(location.search);
+  const clientId = params.get("client_id") ?? "";
+  const state = params.get("state");
+  const realRedirectUri = params.get("redirect_uri");
+  const redirectUri = `${window.location.origin}/callback/saml`;
+  const providerName = provider.name;
+
+  const relayState = `${clientId}&${state}&${providerName}&${realRedirectUri}&${redirectUri}`;
+  AuthBackend.getSamlLogin(
+    `${provider.owner}/${providerName}`,
+    btoa(relayState)
+  ).then((res) => {
+    if (res.data2 === "POST") {
+      document.write(res.data);
+    } else {
+      window.location.href = res.data;
+    }
+  });
+}
+
+export function goToWeb3Url(application, provider, method) {
+  if (provider.type === "MetaMask") {
+    import("./Web3Auth").then((module) => {
+      const authViaMetaMask = module.authViaMetaMask;
+      authViaMetaMask(application, provider, method);
+    });
+  } else if (provider.type === "Web3Onboard") {
+    import("./Web3Auth").then((module) => {
+      const authViaWeb3Onboard = module.authViaWeb3Onboard;
+      authViaWeb3Onboard(application, provider, method);
+    });
+  }
+}
+
+export function renderProviderLogo(
+  provider,
+  application,
+  width,
+  margin,
+  size,
+  location
+) {
+  if (size === "small") {
+    if (provider.category === "OAuth") {
+      if (
+        provider.type === "WeChat" &&
+        provider.clientId2 !== "" &&
+        provider.clientSecret2 !== "" &&
+        provider.disableSsl === true &&
+        !navigator.userAgent.includes("MicroMessenger")
+      ) {
+        return (
+          <a key={provider.displayName}>
+            <img
+              width={width}
+              height={width}
+              src={getProviderLogoURL(provider)}
+              alt={provider.displayName}
+              className="provider-img"
+              style={{ margin: margin }}
+              onClick={() => {
+                WechatOfficialAccountModal(application, provider, "signup");
+              }}
+            />
+          </a>
+        );
+      } else {
+        return (
+          <a
+            key={provider.displayName}
+            href={Provider.getAuthUrl(application, provider, "signup")}
+          >
+            <img
+              width={width}
+              height={width}
+              src={getProviderLogoURL(provider)}
+              alt={provider.displayName}
+              className="provider-img"
+              style={{ margin: margin }}
+            />
+          </a>
+        );
+      }
+    } else if (provider.category === "SAML") {
+      return (
+        <a
+          key={provider.displayName}
+          onClick={() => goToSamlUrl(provider, location)}
+        >
+          <img
+            width={width}
+            height={width}
+            src={getProviderLogoURL(provider)}
+            alt={provider.displayName}
+            className="provider-img"
+            style={{ margin: margin }}
+          />
+        </a>
+      );
+    } else if (provider.category === "Web3") {
+      return (
+        <a
+          key={provider.displayName}
+          onClick={() => goToWeb3Url(application, provider, "signup")}
+        >
+          <img
+            width={width}
+            height={width}
+            src={getProviderLogoURL(provider)}
+            alt={provider.displayName}
+            className="provider-img"
+            style={{ margin: margin }}
+          />
+        </a>
+      );
+    }
+  } else if (provider.type === "Custom") {
+    // style definition
+    const text = i18next
+      .t("login:Sign in with {type}")
+      .replace("{type}", provider.displayName);
+    const customAStyle = { display: "block", height: "55px", color: "#000" };
+    const customButtonStyle = {
+      display: "flex",
+      alignItems: "center",
+      width: "calc(100% - 10px)",
+      height: "50px",
+      margin: "5px",
+      padding: "0 10px",
+      backgroundColor: "transparent",
+      boxShadow: "0px 1px 3px rgba(0,0,0,0.5)",
+      border: "0px",
+      borderRadius: "3px",
+      cursor: "pointer",
+    };
+    const customImgStyle = { justfyContent: "space-between" };
+    const customSpanStyle = {
+      textAlign: "center",
+      width: "100%",
+      fontSize: "19px",
+    };
+    if (provider.category === "OAuth") {
+      return (
+        <a
+          key={provider.displayName}
+          href={Provider.getAuthUrl(application, provider, "signup")}
+          style={customAStyle}
+        >
+          <div style={customButtonStyle}>
+            <img
+              width={26}
+              src={getProviderLogoURL(provider)}
+              alt={provider.displayName}
+              className="provider-img"
+              style={customImgStyle}
+            />
+            <span style={customSpanStyle}>{text}</span>
+          </div>
+        </a>
+      );
+    } else if (provider.category === "SAML") {
+      return (
+        <a
+          key={provider.displayName}
+          onClick={() => goToSamlUrl(provider, location)}
+          style={customAStyle}
+        >
+          <div style={customButtonStyle}>
+            <img
+              width={26}
+              src={getProviderLogoURL(provider)}
+              alt={provider.displayName}
+              className="provider-img"
+              style={customImgStyle}
+            />
+            <span style={customSpanStyle}>{text}</span>
+          </div>
+        </a>
+      );
+    }
+  } else {
+    // big button, for disable password signin
+    if (provider.category === "SAML") {
+      return (
+        <div key={provider.displayName} className="provider-big-img">
+          <a onClick={() => goToSamlUrl(provider, location)}>
+            {getSigninButton(provider)}
+          </a>
+        </div>
+      );
+    } else if (provider.category === "Web3") {
+      return (
+        <div key={provider.displayName} className="provider-big-img">
+          <a onClick={() => goToWeb3Url(application, provider, "signup")}>
+            {getSigninButton(provider)}
+          </a>
+        </div>
+      );
+    } else {
+      return (
+        <div key={provider.displayName} className="provider-big-img">
+          <a href={Provider.getAuthUrl(application, provider, "signup")}>
+            {getSigninButton(provider)}
+          </a>
+        </div>
+      );
+    }
+  }
+}

package/src/components/provider/QqLoginButton.jsx

@@ -0,0 +1,31 @@
+// 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 {createButton} from "react-social-login-buttons";
+
+function Icon({width = 24, height = 24, color}) {
+  return <svg xmlns="http://www.w3.org/2000/svg" height="48" width="32" viewBox="-18.15 -35.9725 157.3 215.835"><path fill="#faab07" d="M60.503 142.237c-12.533 0-24.038-4.195-31.445-10.46-3.762 1.124-8.574 2.932-11.61 5.175-2.6 1.918-2.275 3.874-1.807 4.663 2.056 3.47 35.273 2.216 44.862 1.136zm0 0c12.535 0 24.039-4.195 31.447-10.46 3.76 1.124 8.573 2.932 11.61 5.175 2.598 1.918 2.274 3.874 1.805 4.663-2.056 3.47-35.272 2.216-44.862 1.136zm0 0" /><path d="M60.576 67.119c20.698-.14 37.286-4.147 42.907-5.683 1.34-.367 2.056-1.024 2.056-1.024.005-.189.085-3.37.085-5.01C105.624 27.768 92.58.001 60.5 0 28.42.001 15.375 27.769 15.375 55.401c0 1.642.08 4.822.086 5.01 0 0 .583.615 1.65.913 5.19 1.444 22.09 5.65 43.312 5.795zm56.245 23.02c-1.283-4.129-3.034-8.944-4.808-13.568 0 0-1.02-.126-1.537.023-15.913 4.623-35.202 7.57-49.9 7.392h-.153c-14.616.175-33.774-2.737-49.634-7.315-.606-.175-1.802-.1-1.802-.1-1.774 4.624-3.525 9.44-4.808 13.568-6.119 19.69-4.136 27.838-2.627 28.02 3.239.392 12.606-14.821 12.606-14.821 0 15.459 13.957 39.195 45.918 39.413h.848c31.96-.218 45.917-23.954 45.917-39.413 0 0 9.368 15.213 12.607 14.822 1.508-.183 3.491-8.332-2.627-28.021" /><path fill="#fff" d="M49.085 40.824c-4.352.197-8.07-4.76-8.304-11.063-.236-6.305 3.098-11.576 7.45-11.773 4.347-.195 8.064 4.76 8.3 11.065.238 6.306-3.097 11.577-7.446 11.771m31.133-11.063c-.233 6.302-3.951 11.26-8.303 11.063-4.35-.195-7.684-5.465-7.446-11.77.236-6.305 3.952-11.26 8.3-11.066 4.352.197 7.686 5.468 7.449 11.773" /><path fill="#faab07" d="M87.952 49.725C86.79 47.15 75.077 44.28 60.578 44.28h-.156c-14.5 0-26.212 2.87-27.375 5.446a.863.863 0 00-.085.367.88.88 0 00.16.496c.98 1.427 13.985 8.487 27.3 8.487h.156c13.314 0 26.319-7.058 27.299-8.487a.873.873 0 00.16-.498.856.856 0 00-.085-.365" /><path d="M54.434 29.854c.199 2.49-1.167 4.702-3.046 4.943-1.883.242-3.568-1.58-3.768-4.07-.197-2.492 1.167-4.704 3.043-4.944 1.886-.244 3.574 1.58 3.771 4.07m11.956.833c.385-.689 3.004-4.312 8.427-2.993 1.425.347 2.084.857 2.223 1.057.205.296.262.718.053 1.286-.412 1.126-1.263 1.095-1.734.875-.305-.142-4.082-2.66-7.562 1.097-.24.257-.668.346-1.073.04-.407-.308-.574-.93-.334-1.362" /><path fill="#fff" d="M60.576 83.08h-.153c-9.996.12-22.116-1.204-33.854-3.518-1.004 5.818-1.61 13.132-1.09 21.853 1.316 22.043 14.407 35.9 34.614 36.1h.82c20.208-.2 33.298-14.057 34.616-36.1.52-8.723-.087-16.035-1.092-21.854-11.739 2.315-23.862 3.64-33.86 3.518" /><path fill="#eb1923" d="M32.102 81.235v21.693s9.937 2.004 19.893.616V83.535c-6.307-.357-13.109-1.152-19.893-2.3" /><path fill="#eb1923" d="M105.539 60.412s-19.33 6.102-44.963 6.275h-.153c-25.591-.172-44.896-6.255-44.962-6.275L8.987 76.57c16.193 4.882 36.261 8.028 51.436 7.845h.153c15.175.183 35.242-2.963 51.437-7.845zm0 0" /></svg>;
+}
+
+const config = {
+  text: "Sign in with QQ",
+  icon: Icon,
+  iconFormat: name => `fa fa-${name}`,
+  style: {background: "rgb(94,188,249)"},
+  activeStyle: {background: "rgb(76,143,208)"},
+};
+
+const QqLoginButton = createButton(config);
+
+export default QqLoginButton;

package/src/components/provider/SelfLoginButton.jsx

@@ -0,0 +1,47 @@
+// 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 {createButton} from "react-social-login-buttons";
+
+class SelfLoginButton extends React.Component {
+  generateIcon() {
+    const avatar = this.props.account.avatar;
+    return () => {
+      return <img width={36} height={36} src={avatar} alt="Sign in with Google" />;
+    };
+  }
+
+  getAccountShowName() {
+    let {name, displayName} = this.props.account;
+    if (displayName !== "") {
+      name += " (" + displayName + ")";
+    }
+    return name;
+  }
+
+  render() {
+    const config = {
+      icon: this.generateIcon(),
+      iconFormat: name => `fa fa-${name}`,
+      style: {background: "#ffffff", color: "#000000"},
+      activeStyle: {background: "#eff0ee"},
+    };
+
+    const SelfLoginButton = createButton(config);
+    return <SelfLoginButton text={this.getAccountShowName()} onClick={this.props.onClick} align={"center"} />;
+  }
+}
+
+export default SelfLoginButton;

package/src/components/provider/SlackLoginButton.jsx

@@ -0,0 +1,38 @@
+// 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 { createButton } from "react-social-login-buttons";
+import { StaticBaseUrl } from "../forms/util/core";
+
+function Icon({ width = 24, height = 24, color }) {
+  return (
+    <img
+      src={`${StaticBaseUrl}/buttons/slack.svg`}
+      alt="Sign in with Slack"
+      style={{ width: 24, height: 24 }}
+    />
+  );
+}
+
+const config = {
+  text: "Sign in with Slack",
+  icon: Icon,
+  iconFormat: (name) => `fa fa-${name}`,
+  style: { background: "#ffffff", color: "#000000" },
+  activeStyle: { background: "#ededee" },
+};
+
+const SlackLoginButton = createButton(config);
+
+export default SlackLoginButton;

package/src/components/provider/SteamLoginButton.jsx

@@ -0,0 +1,38 @@
+// Copyright 2022 The casbin 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 { createButton } from "react-social-login-buttons";
+import { StaticBaseUrl } from "../forms/util/core";
+
+function Icon({ width = 24, height = 24, color }) {
+  return (
+    <img
+      src={`${StaticBaseUrl}/buttons/steam.svg`}
+      alt="Sign in with Steam"
+      style={{ width: 24, height: 24 }}
+    />
+  );
+}
+
+const config = {
+  text: "Sign in with Steam",
+  icon: Icon,
+  iconFormat: (name) => `fa fa-${name}`,
+  style: { background: "#ffffff", color: "#000000" },
+  activeStyle: { background: "#ededee" },
+};
+
+const SteamLoginButton = createButton(config);
+
+export default SteamLoginButton;

package/src/components/provider/WeComLoginButton.jsx

@@ -0,0 +1,34 @@
+// 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 { createButton } from "react-social-login-buttons";
+import { StaticBaseUrl } from "../forms/util/core";
+
+function Icon({ width = 24, height = 24, color }) {
+  return (
+    <img src={`${StaticBaseUrl}/buttons/wecom.svg`} alt="Sign in with WeCom" />
+  );
+}
+
+const config = {
+  text: "Sign in with WeCom",
+  icon: Icon,
+  iconFormat: (name) => `fa fa-${name}`,
+  style: { background: "rgb(255,255,255)", color: "#000000" },
+  activeStyle: { background: "rgb(100,150,250)" },
+};
+
+const WeComLoginButton = createButton(config);
+
+export default WeComLoginButton;