feat: add three idp support by goth. (#351)

1. add 3 providers: apple, azuread(v1) and slack.
2. support importing providers from goth.

Signed-off-by: 0x2a <stevesough@gmail.com>

web/src/ProviderEditPage.js

@@ -80,6 +80,9 @@ class ProviderEditPage extends React.Component {
           {id: 'WeCom', name: 'WeCom'},
           {id: 'Lark', name: 'Lark'},
           {id: 'GitLab', name: 'GitLab'},
+          {id: 'Apple', name: 'Apple'},
+          {id: 'AzureAD', name: 'AzureAD'},
+          {id: 'Slack', name: 'Slack'},
         ]
       );
     } else if (provider.category === "Email") {

web/src/auth/AppleLoginButton.js

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

web/src/auth/AzureADLoginButton.js

@@ -0,0 +1,32 @@
+// Copyright 2021 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 "../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}} />;
+}
+
+const config = {
+    text: "Sign in with AzureAD",
+    icon: Icon,
+    iconFormat: name => `fa fa-${name}`,
+    style: {background: "#ffffff", color: "#000000"},
+    activeStyle: {background: "#ededee"},
+};
+
+const AzureADLoginButton = createButton(config);
+
+export default AzureADLoginButton;

web/src/auth/LoginPage.js

@@ -34,6 +34,9 @@ import LinkedInLoginButton from "./LinkedInLoginButton";
 import WeComLoginButton from "./WeComLoginButton";
 import LarkLoginButton from "./LarkLoginButton";
 import GitLabLoginButton from "./GitLabLoginButton";
+import AppleLoginButton from "./AppleLoginButton"
+import AzureADLoginButton from "./AzureADLoginButton";
+import SlackLoginButton from "./SlackLoginButton";
 import CustomGithubCorner from "../CustomGithubCorner";
 import {CountDownInput} from "../component/CountDownInput";
 
@@ -180,6 +183,12 @@ class LoginPage extends React.Component {
       return <LarkLoginButton text={text} align={"center"} />
     } else if (type === "GitLab") {
       return <GitLabLoginButton text={text} align={"center"} />
+    } else if (type === "Apple") {
+      return <AppleLoginButton text={text} align={"center"} />
+    } else if (type === "AzureAD") {
+      return <AzureADLoginButton text={text} align={"center"} />
+    } else if (type === "Slack") {
+      return <SlackLoginButton text={text} align={"center"} />
     }
 
     return text;

web/src/auth/Provider.js

@@ -67,6 +67,18 @@ const authInfo = {
     scope: "read_user+profile",
     endpoint: "https://gitlab.com/oauth/authorize",
   },
+  Apple: {
+    scope: "name%20email",
+    endpoint: "https://appleid.apple.com/auth/authorize",
+  },
+  AzureAD: {
+    scope: "user_impersonation",
+    endpoint: "https://login.microsoftonline.com/common/oauth2/authorize",
+  },
+  Slack: {
+    scope: "users:read",
+    endpoint: "https://slack.com/oauth/authorize",
+  },
 };
 
 const otherProviderInfo = {
@@ -205,5 +217,11 @@ export function getAuthUrl(application, provider, method) {
     return `${endpoint}?app_id=${provider.clientId}&redirect_uri=${redirectUri}&state=${state}`;
   } else if (provider.type === "GitLab") {
     return `${endpoint}?client_id=${provider.clientId}&redirect_uri=${redirectUri}&state=${state}&response_type=code&scope=${scope}`;
-  }
+  } else if (provider.type === "Apple") {
+    return `${endpoint}?client_id=${provider.clientId}&redirect_uri=${redirectUri}&state=${state}&response_type=code&scope=${scope}&response_mode=form_post`;
+  } else if (provider.type === "AzureAD") {
+    return `${endpoint}?client_id=${provider.clientId}&redirect_uri=${redirectUri}&state=${state}&response_type=code&scope=${scope}&resource=https://graph.windows.net/`;
+  } else if (provider.type === "Slack") {
+    return `${endpoint}?client_id=${provider.clientId}&redirect_uri=${redirectUri}&state=${state}&response_type=code&scope=${scope}`;
+  } 
 }

web/src/auth/SlackLoginButton.js

@@ -0,0 +1,32 @@
+// Copyright 2021 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 "../Setting";
+
+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;