tusaryan opened a new pull request, #17428: URL: https://github.com/apache/dolphinscheduler/pull/17428
<!--Thanks very much for contributing to Apache DolphinScheduler, we are happy that you want to help us improve DolphinScheduler! --> ## Purpose of the pull request <!--(For example: This pull request adds checkstyle plugin).--> This pull request introduces the complete user interface for the **OIDC (OpenID Connect) authentication** feature, as part of [DSIP-88](https://github.com/apache/dolphinscheduler/issues/17171) as mentioned in [[TOC] DSIP Collection](https://github.com/apache/dolphinscheduler/issues/14102). This change enables users to log in via configured external identity providers (like Keycloak, Okta, etc.) by dynamically rendering SSO buttons on the login page. It provides the final user-facing piece for a seamless OIDC integration, making DolphinScheduler more accessible for enterprise environments. Closes: #17171 (Part 3: Frontend) ## Brief change log <!--*(for example:)* - *Add maven-checkstyle-plugin to root pom.xml* --> This PR implements the end-to-end frontend logic for OIDC authentication, broken down as follows: - **API Service Integration:** - A new service function `getOidcProviders` has been added in `dolphinscheduler-ui/src/service/modules/login/index.ts` to fetch the list of configured OIDC providers from the `/oidc-providers` backend endpoint. - The `OidcProvider` interface was added to `dolphinscheduler-ui/src/service/modules/login/types.ts` to ensure type-safe handling of the API response, including the optional `iconUri`. - **Login Page Logic:** - The core logic in the `use-login.ts` hook has been updated. On component mount, it now calls the new service to fetch the OIDC providers. - A `handleRedirect` function has been implemented to process the callback from the IdP. It checks the URL for a `sessionId`, sets the session cookie, and fetches user info to complete the login process. - **UI Rendering and Styling:** - The main login component, `dolphinscheduler-ui/src/views/login/index.tsx`, now dynamically renders a styled button for each OIDC provider returned from the API. - New styles have been added to `dolphinscheduler-ui/src/views/login/index.module.scss` to create visually distinct and professional buttons for each provider, complete with logos and interactive hover effects (lift and shadow). - **Internationalization (i18n):** - A minor change in `dolphinscheduler-ui/src/locales/en_US/login.ts` file for text displayed as a divider above the SSO buttons. ## Verify this pull request <!--*(Please pick either of the following options)*--> This change does not add new automated tests but can be verified through manual testing of the complete user flow. **Steps to Verify:** 1. Ensure the backend is running with at least one OIDC provider configured in `application.yaml`. The configuration should include an `icon-uri` pointing to a valid image path (e.g., `/images/providers-icon/keycloak.svg`). 2. Start the `dolphinscheduler-ui` service. 3. Navigate to the login page. You should see the new, styled OIDC provider button(s) rendered below the main login form. 4. Click on an OIDC provider button. You should be correctly redirected to the external identity provider's login page. 5. Authenticate successfully with the external provider. 6. After authentication, you should be redirected back to the DolphinScheduler dashboard, fully logged in. ## Pull Request Notice [Pull Request Notice](https://github.com/apache/dolphinscheduler/blob/dev/docs/docs/en/contribute/join/pull-request.md) If your pull request contains incompatible change, you should also add it to `docs/docs/en/guide/upgrade/incompatible.md` -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected]
