Add new B2C provider

web/src/ProviderEditPage.js

@@ -311,6 +311,9 @@ class ProviderEditPage extends React.Component {
       } else if (provider.type === "Infoflow") {
         text = i18next.t("provider:Agent ID");
         tooltip = i18next.t("provider:Agent ID - Tooltip");
+      } else if (provider.type === "AzureADB2C") {
+        text = i18next.t("provider:User flow");
+        tooltip = i18next.t("provider:User flow - Tooltip");
       }
     } else if (provider.category === "SMS") {
       if (provider.type === "Twilio SMS" || provider.type === "Azure ACS") {
@@ -758,7 +761,7 @@ class ProviderEditPage extends React.Component {
           )
         }
         {
-          this.state.provider.type !== "ADFS" && this.state.provider.type !== "AzureAD" && this.state.provider.type !== "Casdoor" && this.state.provider.type !== "Okta" ? null : (
+          this.state.provider.type !== "ADFS" && this.state.provider.type !== "AzureAD" && this.state.provider.type !== "AzureADB2C" && this.state.provider.type !== "Casdoor" && this.state.provider.type !== "Okta" ? null : (
             <Row style={{marginTop: "20px"}} >
               <Col style={{marginTop: "5px"}} span={2}>
                 {Setting.getLabel(i18next.t("provider:Domain"), i18next.t("provider:Domain - Tooltip"))} :

web/src/Setting.js

@@ -924,7 +924,8 @@ export function getProviderTypeOptions(category) {
         {id: "Casdoor", name: "Casdoor"},
         {id: "Infoflow", name: "Infoflow"},
         {id: "Apple", name: "Apple"},
-        {id: "AzureAD", name: "AzureAD"},
+        {id: "AzureAD", name: "Azure AD"},
+        {id: "AzureADB2C", name: "Azure AD B2C"},
         {id: "Slack", name: "Slack"},
         {id: "Steam", name: "Steam"},
         {id: "Bilibili", name: "Bilibili"},

web/src/auth/AzureADB2CLoginButton.js

@@ -0,0 +1,32 @@
+// Copyright 2023 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 "../Setting";
+
+function Icon({width = 24, height = 24, color}) {
+  return <img src={`${StaticBaseUrl}/buttons/azuread.svg`} alt="Sign in with Azure AD B2C" style={{width: 24, height: 24}} />;
+}
+
+const config = {
+  text: "Sign in with Azure AD B2C",
+  icon: Icon,
+  iconFormat: name => `fa fa-${name}`,
+  style: {background: "#ffffff", color: "#000000"},
+  activeStyle: {background: "#ededee"},
+};
+
+const AzureADB2CLoginButton = createButton(config);
+
+export default AzureADB2CLoginButton;

web/src/auth/AzureADLoginButton.js

@@ -16,11 +16,11 @@ import {createButton} from "react-social-login-buttons";
 import {StaticBaseUrl} from "../Setting";
 
 function Icon({width = 24, height = 24, color}) {
-  return <img src={`${StaticBaseUrl}/buttons/azuread.svg`} alt="Sign in with AzureAD" style={{width: 24, height: 24}} />;
+  return <img src={`${StaticBaseUrl}/buttons/azuread.svg`} alt="Sign in with Azure AD" style={{width: 24, height: 24}} />;
 }
 
 const config = {
-  text: "Sign in with AzureAD",
+  text: "Sign in with Azure AD",
   icon: Icon,
   iconFormat: name => `fa fa-${name}`,
   style: {background: "#ffffff", color: "#000000"},

web/src/auth/Provider.js

@@ -100,6 +100,10 @@ const authInfo = {
     scope: "user.read",
     endpoint: "https://login.microsoftonline.com/common/oauth2/v2.0/authorize",
   },
+  AzureADB2C: {
+    scope: "openid",
+    endpoint: "https://tenant.b2clogin.com/tenant.onmicrosoft.com/userflow/oauth2/v2.0/authorize",
+  },
   Slack: {
     scope: "users:read",
     endpoint: "https://slack.com/oauth/authorize",
@@ -406,6 +410,8 @@ export function getAuthUrl(application, provider, method) {
     || provider.type === "Twitch" || provider.type === "Typetalk" || provider.type === "Uber" || provider.type === "VK" || provider.type === "Wepay"
     || provider.type === "Xero" || provider.type === "Yahoo" || provider.type === "Yammer" || provider.type === "Yandex" || provider.type === "Zoom") {
     return `${endpoint}?client_id=${provider.clientId}&redirect_uri=${redirectUri}&scope=${scope}&response_type=code&state=${state}`;
+  } else if (provider.type === "AzureADB2C") {
+    return `https://${provider.domain}.b2clogin.com/${provider.domain}.onmicrosoft.com/${provider.appId}/oauth2/v2.0/authorize?client_id=${provider.clientId}&nonce=defaultNonce&redirect_uri=${encodeURIComponent(redirectUri)}&scope=${scope}&response_type=code&state=${state}&prompt=login`;
   } else if (provider.type === "DingTalk") {
     return `${endpoint}?client_id=${provider.clientId}&redirect_uri=${redirectUri}&scope=${scope}&response_type=code&prompt=consent&state=${state}`;
   } else if (provider.type === "WeChat") {

web/src/auth/ProviderButton.js

@@ -35,6 +35,7 @@ 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";
@@ -85,6 +86,8 @@ function getSigninButton(provider) {
     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") {