Feat: Add frontend support for third-party login integration (#7553)

### What problem does this PR solve?

Add frontend support for third-party login integration:

- Used `getLoginChannels` API to fetch available login channels from the
server
- Used `loginWithChannel` function to initiate login based on the
selected channel
- Refactored `useLoginWithGithub` hook to `useOAuthCallback` for
generalized OAuth callback handling
- Updated the login page to dynamically render third-party login buttons
based on the fetched channel list
- Styled third-party login buttons to improve user experience
- Removed unused code snippets

> This PR removes the previously hardcoded GitHub login button. Since
the functionality only worked when `location.host` was equal to
`demo.ragflow.io`, and the authentication logic is now based on
`login.ragflow.io`, this change does not affect the existing logic and
is considered a non-breaking change
---
#### Frontend Screenshot && Backend Configuration


![image](https://github.com/user-attachments/assets/190ad3a5-3718-409a-ad0e-01e7aca39069)

```yaml
# docker/service_conf.yaml.template

# ...
oauth:
  github:
    icon: github
    display_name: "Github"
    # ...

  custom_channel:
    display_name: "OIDC"
    # ...

  custom_channel_2:
    display_name: "OAuth2"
    # ...
```
---
- Related pull requests:
  - #7379
  - #7521 
- Related issues:
  - #3495 

### Type of change

- [x] New Feature (non-breaking change which adds functionality)
- [x] Refactoring
- [x] Performance Improvement

web/src/hooks/auth-hooks.ts

@@ -3,7 +3,7 @@ import { message } from 'antd';
 import { useEffect, useMemo, useState } from 'react';
 import { useNavigate, useSearchParams } from 'umi';
 
-export const useLoginWithGithub = () => {
+export const useOAuthCallback = () => {
   const [currentQueryParameters, setSearchParams] = useSearchParams();
   const error = currentQueryParameters.get('error');
   const newQueryParameters: URLSearchParams = useMemo(
@@ -12,26 +12,38 @@ export const useLoginWithGithub = () => {
   );
   const navigate = useNavigate();
 
-  if (error) {
-    message.error(error);
-    navigate('/login');
-    newQueryParameters.delete('error');
-    setSearchParams(newQueryParameters);
-    return;
-  }
+  useEffect(() => {
+    if (error) {
+      message.error(error);
+      setTimeout(() => {
+        navigate('/login');
+        newQueryParameters.delete('error');
+        setSearchParams(newQueryParameters);
+      }, 1000);
+      return;
+    }
 
-  const auth = currentQueryParameters.get('auth');
+    const auth = currentQueryParameters.get('auth');
+    if (auth) {
+      authorizationUtil.setAuthorization(auth);
+      newQueryParameters.delete('auth');
+      setSearchParams(newQueryParameters);
+      navigate('/knowledge');
+    }
+  }, [
+    error,
+    currentQueryParameters,
+    newQueryParameters,
+    navigate,
+    setSearchParams,
+  ]);
 
-  if (auth) {
-    authorizationUtil.setAuthorization(auth);
-    newQueryParameters.delete('auth');
-    setSearchParams(newQueryParameters);
-  }
-  return auth;
+  console.debug(currentQueryParameters.get('auth'));
+  return currentQueryParameters.get('auth');
 };
 
 export const useAuth = () => {
-  const auth = useLoginWithGithub();
+  const auth = useOAuthCallback();
   const [isLogin, setIsLogin] = useState<Nullable<boolean>>(null);
 
   useEffect(() => {