forked from lobehub/lobe-chat
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
✨ feat: support login & session authentication via OAuth 2.0 (Auth0) (l…
…obehub#1143) * ✨ feat: adding OAuth2 support * 🐛 fix: translation for OAuth2 * ♻️ refactor: refactor OAuth 2.0 - clean up code under /api/openai - update middleware.ts to use custom middleware - clean up unnessary type definitions * ♻️ refactor(config): Use server config to enable/disable OAuth 2.0 * 🐛 fix: Adapt OAuth 2.0 middleware to new authentication methods * 📝 docs(config): Environment variables for Authentication Service Providers * 📝 docs: Add authentication setup guides for LobeChat docs: Add authentication setup guides for LobeChat ``` Added detailed documentation for setting up the authentication services in LobeChat, with a focus on integrating Auth0. This includes guides for creating an Auth0 application, adding users, and configuring environment variables. Advanced topics cover connecting to existing single sign-on services and setting up social logins. This effort enhances the platform's security and provides clear instructions for enterprise users on authentication procedures. * 📝 docs: Add authentication integration guide for LobeChat docs: Add authentication integration guide with Auth.js Adds a comprehensive guide on integrating a new authentication provider using Auth.js in both English and Chinese documentation. The guide includes pre-requisites, step-by-step code integration, server configuration updates, frontend changes, and environment variable setup. ``` The changes introduce a new guide in the documentation for integrating new authentication providers using Auth.js. The guide is provided in both English and Chinese, ensuring broad accessibility. It covers the necessary pre-requisites, detailed instructions for adding the core authentication code, updating server configuration, modifying frontend components, and setting up the required environment variables. This will aid developers in implementing authentication features using Auth.js in the LobeChat application.
- Loading branch information
1 parent
b51d1aa
commit 0609690
Showing
83 changed files
with
1,105 additions
and
59 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| # Authentication Service | ||
|
|
||
| LobeChat supports configuring external identity verification services for internal use within enterprises/organizations, facilitating centralized management of user authorizations. Currently, [Auth0][auth0-client-page] is supported. This article will guide you through the process of setting up the identity verification service. | ||
|
|
||
| ### TOC | ||
|
|
||
| - [Creating an Auth0 Application](#creating-an-auth0-application) | ||
| - [Adding Users](#adding-users) | ||
| - [Configuring Environment Variables](#configuring-environment-variables) | ||
| - [Advanced - Connecting to an Existing Single Sign-On Service](#advanced---connecting-to-an-existing-single-sign-on-service) | ||
| - [Advanced - Configuring Social Login](#advanced---configuring-social-login) | ||
|
|
||
| ## Creating an Auth0 Application | ||
|
|
||
| To begin, register and log in to [Auth0][auth0-client-page]. Then, navigate to the **_Applications_** section in the left sidebar to access the application management interface. Click on **_Create Application_** in the top right corner to initiate the application creation process. | ||
|
|
||
|  | ||
|
|
||
| Next, fill in the desired application name to be displayed to organization users. You can choose any application type, then click on **_Create_**. | ||
|
|
||
|  | ||
|
|
||
| Once the application is successfully created, click on the respective application to access its details page. Switch to the **_Settings_** tab to view the corresponding configuration information. | ||
|
|
||
|  | ||
|
|
||
| ## Adding Users | ||
|
|
||
| Navigate to the **_Users Management_** section in the left sidebar to access the user management interface. You can create new users for your organization to log in to LobeChat. | ||
|
|
||
|  | ||
|
|
||
| ## Configuring Environment Variables | ||
|
|
||
| When deploying LobeChat, you need to configure the following environment variables: | ||
|
|
||
| | Environment Variable | Required | Description | Default Value | Example | | ||
| | --------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------- | ------------- | ------------------------------------------------------------------ | | ||
| | `ENABLE_OAUTH_SSO` | Yes | Enable single sign-on (SSO) for LobeChat. Set this value to `1` to enable single sign-on. | - | `1` | | ||
| | `NEXTAUTH_SECRET` | Yes | The key used to encrypt the session token in Auth.js. You can generate a key using the following command: `openssl rand -base64 32` | - | `Tfhi2t2pelSMEA8eaV61KaqPNEndFFdMIxDaJnS1CUI=` | | ||
| | `AUTH0_CLIENT_ID` | Yes | Client ID of the Auth0 application | - | `evCnOJP1UX8FMnXR9Xkj5t0NyFn5p70P` | | ||
| | `AUTH0_CLIENT_SECRET` | Yes | Client Secret of the Auth0 application | - | `wnX7UbZg85ZUzF6ioxPLnJVEQa1Elbs7aqBUSF16xleBS5AdkVfASS49-fQIC8Rm` | | ||
| | `AUTH0_ISSUER` | Yes | Domain of the Auth0 application | - | `https://example.auth0.com` | | ||
| | `ACCESS_CODE` | Yes | Add a password to access this service. You can set a long random password to "disable" accessed by the code | - | `awCT74` or `e3@09!` or `code1,code2,code3` | | ||
|
|
||
| > \[!NOTE] | ||
| > | ||
| > After successful deployment, users will be able to authenticate and use LobeChat using the users configured in Auth0. | ||
| ## Advanced - Connecting to an Existing Single Sign-On Service | ||
|
|
||
| If your enterprise or organization already has an existing unified identity verification infrastructure, you can connect to an existing single sign-on service in **_Applications -> SSO Integrations_**. | ||
|
|
||
| Auth0 supports single sign-on services such as Azure Active Directory, Slack, Google Workspace, Office 365, and Zoom. For a detailed list of supported services, refer to [this page][auth0-sso-integrations]. | ||
|
|
||
|  | ||
|
|
||
| ## Advanced - Configuring Social Login | ||
|
|
||
| If your enterprise or organization needs to support external personnel login, you can configure social login services in **_Authentication -> Social_**. | ||
|
|
||
|  | ||
|
|
||
| > \[!NOTE] | ||
| > | ||
| > Configuring social login services will allow anyone to authenticate by default, which may lead to abuse of LobeChat by external personnel. If you need to restrict login personnel, be sure to configure a blocking policy. | ||
| > | ||
| > After enabling social login options, refer to [this article][auth0-login-actions-manual] to create an Action to set the deny/allow list. | ||
| [auth0-client-page]: https://manage.auth0.com/dashboard | ||
| [auth0-login-actions-manual]: https://auth0.com/blog/permit-or-deny-login-requests-using-auth0-actions/ | ||
| [auth0-sso-integrations]: https://marketplace.auth0.com/features/sso-integrations |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| # 身份验证服务 | ||
|
|
||
| LobeChat 支持配置外部身份验证服务，供企业 / 组织内部使用，统一管理用户授权，目前支持 [Auth0][auth0-client-page] 本文将介绍如何配置身份验证服务。 | ||
|
|
||
| ### TOC | ||
|
|
||
| - [创建 Auth0 应用](#创建-auth0-应用) | ||
| - [新增用户](#新增用户) | ||
| - [配置环境变量](#配置环境变量) | ||
| - [进阶 - 连接现有的单点登录服务](#进阶---连接现有的单点登录服务) | ||
| - [进阶 - 配置社交登录](#进阶---配置社交登录) | ||
|
|
||
| ## 创建 Auth0 应用 | ||
|
|
||
| 注册并登录 [Auth0][auth0-client-page]，点击左侧导航栏的「Applications」，切换到应用管理界面，点击右上角「Create Application」以创建应用。 | ||
|
|
||
|  | ||
|
|
||
| 填写你想向组织用户显示的应用名称，可选择任意应用类型，点击「Create」。 | ||
|
|
||
|  | ||
|
|
||
| 创建成功后，点击相应的应用，进入应用详情页，切换到「Settings」标签页，就可以看到相应的配置信息 | ||
|
|
||
|  | ||
|
|
||
| ## 新增用户 | ||
|
|
||
| 点击左侧导航栏的「Users Management」，进入用户管理界面，可以为你的组织新建用户，用以登录 LobeChat | ||
|
|
||
|  | ||
|
|
||
| ## 配置环境变量 | ||
|
|
||
| 在部署 LobeChat 时，你需要配置以下环境变量： | ||
|
|
||
| | 环境变量 | 类型 | 描述 | 默认值 | 示例 | | ||
| | --------------------- | ---- | --------------------------------------------------------------------------------------- | ------ | ------------------------------------------------------------------ | | ||
| | `ENABLE_OAUTH_SSO` | 必选 | 为 LobeChat 启用单点登录 (SSO)。设置为 `1` 以启用单点登录。 | - | `1` | | ||
| | `NEXTAUTH_SECRET` | 必选 | 用于加密 Auth.js 会话令牌的密钥。您可以使用以下命令生成秘钥： `openssl rand -base64 32` | - | `Tfhi2t2pelSMEA8eaV61KaqPNEndFFdMIxDaJnS1CUI=` | | ||
| | `AUTH0_CLIENT_ID` | 必选 | Auth0 应用程序的 Client ID | - | `evCnOJP1UX8FMnXR9Xkj5t0NyFn5p70P` | | ||
| | `AUTH0_CLIENT_SECRET` | 必选 | Auth0 应用程序的 Client Secret | - | `wnX7UbZg85ZUzF6ioxPLnJVEQa1Elbs7aqBUSF16xleBS5AdkVfASS49-fQIC8Rm` | | ||
| | `AUTH0_ISSUER` | 必选 | Auth0 应用程序的 Domain | - | `https://example.auth0.com` | | ||
| | `ACCESS_CODE` | 必选 | 添加访问此服务的密码，你可以设置一个足够长的随机密码以 “禁用” 访问码授权 | - | `awCT74` 或 `e3@09!` or `code1,code2,code3` | | ||
|
|
||
| > \[!NOTE] | ||
| > | ||
| > 部署成功后，用户将可以使用 Auth0 中配置的用户通过身份认证并使用 LobeChat。 | ||
| ## 进阶 - 连接现有的单点登录服务 | ||
|
|
||
| 如果你的企业或组织已有现有的统一身份认证设施，可在 Applications -> SSO Integrations 中，连接现有的单点登录服务。 | ||
|
|
||
| Auth0 支持 Azure Active Directory, Slack, Google Workspace, Office 365, Zoom 等单点登录服务，详细支持列表可参考 [这里][auth0-sso-integrations] | ||
|
|
||
|  | ||
|
|
||
| ## 进阶 - 配置社交登录 | ||
|
|
||
| 如果你的企业或组织需要支持外部人员登录，可以在 Authentication -> Social 中，配置社交登录服务。 | ||
|
|
||
|  | ||
|
|
||
| > \[!NOTE] | ||
| > | ||
| > 配置社交登录服务默认会允许所有人通过认证，这可能会导致 LobeChat 被外部人员滥用。如果你需要限制登录人员，务必配置阻止策略 | ||
| > | ||
| > 请在打开社交登录选项后，参考 [这篇文章][auth0-login-actions-manual] 创建 Action 来设置阻止 / 允许 列表 | ||
| [auth0-client-page]: https://manage.auth0.com/dashboard | ||
| [auth0-login-actions-manual]: https://auth0.com/blog/permit-or-deny-login-requests-using-auth0-actions/ | ||
| [auth0-sso-integrations]: https://marketplace.auth0.com/features/sso-integrations |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| # New Authentication Provider Guide | ||
|
|
||
| LobeChat uses [Auth.js v5](https://authjs.dev/) as the external authentication service. Auth.js is an open-source authentication library that provides a simple way to implement authentication and authorization features. This document will introduce how to use Auth.js to implement a new authentication provider. | ||
|
|
||
| ### TOC | ||
|
|
||
| - [Add New Authentication Provider](#add-new-authentication-provider) | ||
| - [Pre-requisites: Check the Official Provider List](#pre-requisites-check-the-official-provider-list) | ||
| - [Step 1: Add Authenticator Core Code](#step-1-add-authenticator-core-code) | ||
| - [Step 2: Update Server Configuration Code](#step-2-update-server-configuration-code) | ||
| - [Step 3: Change Frontend Pages](#step-3-change-frontend-pages) | ||
| - [Step 4: Configure the Environment Variables](#step-4-configure-the-environment-variables) | ||
|
|
||
| ## Add New Authentication Provider | ||
|
|
||
| To add a new authentication provider in LobeChat (for example, adding Okta), you need to follow the steps below: | ||
|
|
||
| ### Pre-requisites: Check the Official Provider List | ||
|
|
||
| First, you need to check the [Auth.js Provider List](https://authjs.dev/reference/core/providers) to see if your provider is already supported. If yes, you can directly use the SDK provided by Auth.js to implement the authentication feature. | ||
|
|
||
| Next, I will use [Okta](https://authjs.dev/reference/core/providers/okta) as an example to introduce how to add a new authentication provider. | ||
|
|
||
| ### Step 1: Add Authenticator Core Code | ||
|
|
||
| Open the `src/app/api/oauth/next-auth.ts` file and import `next-auth/providers/okta`. | ||
|
|
||
| ```ts | ||
| import { NextAuth } from 'next-auth'; | ||
| import Auth0 from 'next-auth/providers/auth0'; | ||
| import Okta from 'next-auth/providers/okta'; | ||
|
|
||
| // Import Okta provider | ||
| ``` | ||
|
|
||
| Add the predefined server configuration. | ||
|
|
||
| ```ts | ||
| // Import server configuration | ||
| const { OKTA_CLIENT_ID, OKTA_CLIENT_SECRET, OKTA_ISSUER } = getServerConfig(); | ||
|
|
||
| const nextAuth = NextAuth({ | ||
| providers: [ | ||
| // ... Other providers | ||
|
|
||
| Okta({ | ||
| clientId: OKTA_CLIENT_ID, | ||
| clientSecret: OKTA_CLIENT_SECRET, | ||
| issuer: OKTA_ISSUER, | ||
| }), | ||
| ], | ||
| }); | ||
| ``` | ||
|
|
||
| ### Step 2: Update Server Configuration Code | ||
|
|
||
| Open the `src/config/server/app.ts` file and add Okta-related environment variables in the `getAppConfig` function. | ||
|
|
||
| ```ts | ||
| export const getAppConfig = () => { | ||
| // ... Other code | ||
|
|
||
| return { | ||
| // ... Other environment variables | ||
|
|
||
| OKTA_CLIENT_ID: process.env.OKTA_CLIENT_ID || '', | ||
| OKTA_CLIENT_SECRET: process.env.OKTA_CLIENT_SECRET || '', | ||
| OKTA_ISSUER: process.env.OKTA_ISSUER || '', | ||
| }; | ||
| }; | ||
| ``` | ||
|
|
||
| ### Step 3: Change Frontend Pages | ||
|
|
||
| Modify the `signIn` function parameter in `src/Features/Conversation/Error/OAuthForm.tsx` and \`src/app/settings/common/Common.tsx | ||
|
|
||
| The default is `auth0`, which you can change to `okta` to switch to the Okta provider, or remove this parameter to support all added authentication services | ||
|
|
||
| This value is the id of the Auth.js provider, and you can read the source code of the corresponding `next-auth/providers` module to read the default ID. | ||
|
|
||
| ### Step 4: Configure the Environment Variables | ||
|
|
||
| Add `OKTA_CLIENT_ID`、`OKTA_CLIENT_SECRET`、`OKTA_ISSUER` environment variables when you deploy. | ||
|
|
||
| Now, you can use Okta as your provider to implement the authentication feature in LobeChat. |
Oops, something went wrong.