feat: add oidc support (#1725)

* feat: add the ui for configuring the third-party standard OAuth2.0/OIDC.

- update SystemSetting.js
- add setup ui
- add configuration

* feat: add the ui for "allow the OAuth 2.0 to login"

- update SystemSetting.js

* feat: add OAuth 2.0 web ui and its process functions

- update common.js
- update AuthLogin.js
- update config.js

* fix: missing "Userinfo" endpoint configuration entry, used by OAuth clients to request user information from the IdP.

- update config.js
- update SystemSetting.js

* feat: updated the icons for Lark and OIDC to match the style of the icons for WeChat, EMail, GitHub.

- update lark.svg
- new oidc.svg

* refactor: Changing OAuth 2.0 to OIDC

* feat: add OIDC login method

* feat: Add support for OIDC login to the backend

* fix: Change the AppId and AppSecret on the Web UI to the standard usage: ClientId, ClientSecret.

* feat: Support quick configuration of OIDC through Well-Known Discovery Endpoint

* feat: Standardize terminology, add well-known configuration

- Change the AppId and AppSecret on the Server End to the standard usage: ClientId, ClientSecret.
- add Well-Known configuration to store in database, no actual use in server end but store and display in web ui only

web/berry/src/views/Profile/index.js

@@ -20,7 +20,7 @@ import SubCard from 'ui-component/cards/SubCard';
 import { IconBrandWechat, IconBrandGithub, IconMail } from '@tabler/icons-react';
 import Label from 'ui-component/Label';
 import { API } from 'utils/api';
-import { showError, showSuccess } from 'utils/common';
+import { onOidcClicked, showError, showSuccess } from 'utils/common';
 import { onGitHubOAuthClicked, onLarkOAuthClicked, copy } from 'utils/common';
 import * as Yup from 'yup';
 import WechatModal from 'views/Authentication/AuthForms/WechatModal';
@@ -28,6 +28,7 @@ import { useSelector } from 'react-redux';
 import EmailModal from './component/EmailModal';
 import Turnstile from 'react-turnstile';
 import { ReactComponent as Lark } from 'assets/images/icons/lark.svg';
+import { ReactComponent as OIDC } from 'assets/images/icons/oidc.svg';
 
 const validationSchema = Yup.object().shape({
   username: Yup.string().required('用户名 不能为空').min(3, '用户名 不能小于 3 个字符'),
@@ -123,6 +124,15 @@ export default function Profile() {
     loadUser().then();
   }, [status]);
 
+  function getOidcId(){
+    if (!inputs.oidc_id) return '';
+    let oidc_id = inputs.oidc_id;
+    if (inputs.oidc_id.length > 8) {
+      oidc_id = inputs.oidc_id.slice(0, 6) + '...' + inputs.oidc_id.slice(-6);
+    }
+    return oidc_id;
+  }
+
   return (
     <>
       <UserCard>
@@ -141,6 +151,9 @@ export default function Profile() {
               <Label variant="ghost" color={inputs.lark_id ? 'primary' : 'default'}>
                 <SvgIcon component={Lark} inheritViewBox="0 0 24 24" /> {inputs.lark_id || '未绑定'}
               </Label>
+              <Label variant="ghost" color={inputs.oidc_id ? 'primary' : 'default'}>
+                <SvgIcon component={OIDC} inheritViewBox="0 0 24 24" /> {getOidcId() || '未绑定'}
+              </Label>
             </Stack>
             <SubCard title="个人信息">
               <Grid container spacing={2}>
@@ -216,6 +229,13 @@ export default function Profile() {
                     </Button>
                   </Grid>
                 )}
+                {status.oidc && !inputs.oidc_id && (
+                  <Grid xs={12} md={4}>
+                    <Button variant="contained" onClick={() => onOidcClicked(status.oidc_authorization_endpoint,status.oidc_client_id,true)}>
+                      绑定 OIDC 账号
+                    </Button>
+                  </Grid>
+                )}
                 <Grid xs={12} md={4}>
                   <Button
                     variant="contained"