我正在开发的应用程序是使用
Posted: Tue Dec 10, 2024 6:49 am
在本文中，我将介绍 Auth0，解释为什么我选择它作为身份验证提供程序，并逐步指导您将其集成到使用 Next.js 构建的静态站点中。
Next.js构建的，并托管在Vercel上。当我考虑为其添加额外的安全性时，我首先查看了平台选项。Vercel 确实提供了密码保护或 SSO 功能，但仅适用于付费帐户。此外，我打算默认向所有同事授予访问权限，因此我正在寻找一种更通用的方法来解决这个问题。
Auth0似乎更有前途。它是一种面向应用程序开发人员的基于云的身份认证和授权服务。Auth0 使用户能够访问在具有各种身份提供商的多个平台上运行的应用程序的单点登录，因此他们可以使用 Google、Facebook、Azure AD 或您允许的其他提供商。该服务的基本使用是免费的，因此您可以直接开始使用它。
1.首先让我们创建一个 Next.js 应用：
npx create-next-app
# or
yarn create next-app
如果你运行你的应用程序，你将在 德国手机号码数据库 上看到“欢迎使用 Next.js”演示应用程序http://localhost:3000。
现在，想象一下这个 Web 应用程序将包含敏感信息，这些信息只应向特定受众开放。因此，我们将添加 Auth0。
2.在新创建的 Next.js 应用中安装 Auth0 SDK：
npm install @auth0/nextjs-auth0
3. 在https://auth0.com上创建账户，并添加租户，可以选择自己的名称和位置：
创建 Auth0 账户
4. 现在我们在 Auth0 上有一个具有租户的帐户，下一步是在我们的 Auth0 帐户上添加一个应用程序，它将把它连接到我们的 Next.js 应用程序。转到 Auth0 仪表板并创建一个新的常规 Web 应用程序应用程序。
Auth0 设置
然后，确保在设置页面上配置以下内容：
允许回调 URL
在本地测试时应设置为，通常在部署应用程序时设置为。用户身份验证后，Auth0 将仅回调您在此设置中添加的 URL。
允许注销 URL
在本地测试时应设置为，通常https://myapp.com/在部署应用程序时设置为。这是您注销后要访问的 URL。
5.您可以使用多个身份提供商，例如 Google、Facebook、Apple、Azure AD 等。对于我们的应用程序，我们将创建一个具有用户名和密码的新测试用户：
转到用户管理->用户->创建用户
填写用户名和密码
将用户添加到 Auth0
6.现在让我们开始施展魔法，将两者结合在一起。我们首先将环境变量添加到 Next.js 应用程序。在您的本地环境中，.env.local在应用程序的根目录中创建一个文件。在此文件中，您需要添加和调整以下变量：
我将在下面解释每个变量：
AUTH0_秘密
创建您自己的秘密；您可以使用以下命令生成合适的字符串：
AUTH0_基本网址
这是您的应用程序的 URL。对于我们的本地环境，它是
AUTH0_ISSUER_BASE_URL、AUTH0_CLIENT_ID、AUTH0_CLIENT_SECRET
您可以在 Auth0 仪表板的应用程序 -> 默认应用程序 -> 设置 -> 基本信息中找到这些内容。不要忘记添
Next.js构建的，并托管在Vercel上。当我考虑为其添加额外的安全性时，我首先查看了平台选项。Vercel 确实提供了密码保护或 SSO 功能，但仅适用于付费帐户。此外，我打算默认向所有同事授予访问权限，因此我正在寻找一种更通用的方法来解决这个问题。
Auth0似乎更有前途。它是一种面向应用程序开发人员的基于云的身份认证和授权服务。Auth0 使用户能够访问在具有各种身份提供商的多个平台上运行的应用程序的单点登录，因此他们可以使用 Google、Facebook、Azure AD 或您允许的其他提供商。该服务的基本使用是免费的，因此您可以直接开始使用它。
1.首先让我们创建一个 Next.js 应用：
npx create-next-app
# or
yarn create next-app
如果你运行你的应用程序，你将在 德国手机号码数据库 上看到“欢迎使用 Next.js”演示应用程序http://localhost:3000。
现在，想象一下这个 Web 应用程序将包含敏感信息，这些信息只应向特定受众开放。因此，我们将添加 Auth0。
2.在新创建的 Next.js 应用中安装 Auth0 SDK：
npm install @auth0/nextjs-auth0
3. 在https://auth0.com上创建账户，并添加租户，可以选择自己的名称和位置：
创建 Auth0 账户
4. 现在我们在 Auth0 上有一个具有租户的帐户，下一步是在我们的 Auth0 帐户上添加一个应用程序，它将把它连接到我们的 Next.js 应用程序。转到 Auth0 仪表板并创建一个新的常规 Web 应用程序应用程序。
Auth0 设置
然后，确保在设置页面上配置以下内容：
允许回调 URL
在本地测试时应设置为，通常在部署应用程序时设置为。用户身份验证后，Auth0 将仅回调您在此设置中添加的 URL。
允许注销 URL
在本地测试时应设置为，通常https://myapp.com/在部署应用程序时设置为。这是您注销后要访问的 URL。
5.您可以使用多个身份提供商，例如 Google、Facebook、Apple、Azure AD 等。对于我们的应用程序，我们将创建一个具有用户名和密码的新测试用户：
转到用户管理->用户->创建用户
填写用户名和密码
将用户添加到 Auth0
6.现在让我们开始施展魔法，将两者结合在一起。我们首先将环境变量添加到 Next.js 应用程序。在您的本地环境中，.env.local在应用程序的根目录中创建一个文件。在此文件中，您需要添加和调整以下变量：
我将在下面解释每个变量：
AUTH0_秘密
创建您自己的秘密；您可以使用以下命令生成合适的字符串：
AUTH0_基本网址
这是您的应用程序的 URL。对于我们的本地环境，它是
AUTH0_ISSUER_BASE_URL、AUTH0_CLIENT_ID、AUTH0_CLIENT_SECRET
您可以在 Auth0 仪表板的应用程序 -> 默认应用程序 -> 设置 -> 基本信息中找到这些内容。不要忘记添