feat: add Bilibili OAuth (#720)

* implemented bilibili oauth

* add bilibili oauth

* add document address

* add frontend page

* uncheck

web/src/Setting.js

@@ -554,6 +554,7 @@ export function getProviderTypeOptions(category) {
         {id: 'AzureAD', name: 'AzureAD'},
         {id: 'Slack', name: 'Slack'},
         {id: 'Steam', name: 'Steam'},
+        {id: 'Bilibili', name: 'Bilibili'},
         {id: 'Okta', name: 'Okta'},
         {id: 'Custom', name: 'Custom'},
       ]

web/src/auth/BilibiliLoginButton.js

@@ -0,0 +1,32 @@
+// 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 "../Setting";
+
+function Icon({ width = 24, height = 24, color }) {
+    return <img src={`${StaticBaseUrl}/buttons/bilibili.svg`} alt="Sign in with Bilibili"/>;
+}
+
+const config = {
+    text: "Sign in with Bilibili",
+    icon: Icon,
+    iconFormat: name => `fa fa-${name}`,
+    style: {background: "#0191e0"},
+    activeStyle: {background: "rgb(76,143,208)"},
+};
+
+const BilibiliLoginButton = createButton(config);
+
+export default BilibiliLoginButton;

web/src/auth/LoginPage.js

@@ -46,6 +46,7 @@ import SteamLoginButton from "./SteamLoginButton";
 import OktaLoginButton from "./OktaLoginButton";
 import CustomGithubCorner from "../CustomGithubCorner";
 import {CountDownInput} from "../common/CountDownInput";
+import BilibiliLoginButton from "./BilibiliLoginButton";
 
 class LoginPage extends React.Component {
   constructor(props) {
@@ -279,6 +280,8 @@ class LoginPage extends React.Component {
       return <SlackLoginButton text={text} align={"center"} />
     } else if (type === "Steam") {
       return <SteamLoginButton text={text} align={"center"} />
+    } else if (type === "Bilibili") {
+      return <BilibiliLoginButton text={text} align={"center"} />
     } else if (type === "Okta") {
       return <OktaLoginButton text={text} align={"center"} />
     }

web/src/auth/Provider.js

@@ -114,6 +114,9 @@ const authInfo = {
   Custom: {
     endpoint: "https://example.com/",
   },
+  Bilibili: {
+    endpoint: "https://passport.bilibili.com/register/pc_oauth2.html"
+  }
 };
 
 export function getProviderUrl(provider) {
@@ -238,5 +241,7 @@ export function getAuthUrl(application, provider, method) {
     return `${provider.domain}/v1/authorize?client_id=${provider.clientId}&redirect_uri=${redirectUri}&state=${state}&response_type=code&scope=${scope}`;
   } else if (provider.type === "Custom") {
     return `${provider.customAuthUrl}?client_id=${provider.clientId}&redirect_uri=${redirectUri}&scope=${provider.customScope}&response_type=code&state=${state}`;
-  } 
+  } else if (provider.type === "Bilibili") {
+    return `${endpoint}#/?client_id=${provider.clientId}&return_url=${redirectUri}&state=${state}&response_type=code`
+  }
 }