Skip to content

Logto 使用指南 ​

Logto 简介 ​

Logto 是一个开源的 Auth0、Cognito 和 Firebase Auth 替代方案,适用于现代应用和 SaaS 产品,支持 OIDC、OAuth 2.0 和 SAML 等身份验证和授权的开放标准。

如何配置 Logto? ​

本项目的配置流程是在 earthworm 项目的logto配置教程中取出了项目需要用到的配置,如果需要完整教程可以访问 earthworm-config-logto 项目的配置教程

1. 点击 Create account 按钮创建账号 ​

2. 注册或者登录帐号 ​

TIP

我这里使用的是 Github 账号登录

3. 配置页面 ​

TIP

可以按照配置切换语言为中文(如果英文看不懂的话)

4. 创建 API 资源 ​

创建 API ​

点击左侧 API资源 创建

选择 Express 立即开始

配置 Logto API Identifier ​

将 后端代码 apps/api/.env 文件中

  • BACKEND_ENDPOINT → API Identifier
bash
BACKEND_ENDPOINT= API Identifier

配置 apps/api/.env 文件

  • Logto Management API → LOGTO_M2M_API
bash
LOGTO_M2M_API= Logto Management API

至此 API 资源部分配置完成 🎉

5. 创建 Logto 前端应用 ​

TIP

这里创建一个Vue应用

点击 完成

配置前端代码 apps/client/.env 文件 ​

  • 点击左侧 全部应用 会看到多了一个应用,复制 App ID

  • App ID → LOGTO_APP_ID

配置 Logto URI ​

将 apps/client/.env 中 ​

  • LOGTO_SIGN_IN_REDIRECT_URI → 重定向 URIs
  • LOGTO_SIGN_OUT_REDIRECT_URI → 退出登录后重定向 URIs

WARNING

注意:更改内容最后要记得点击 保存更改 哈!

至此前端部分配置完成 🎉

6. 创建 Logto 后端应用 ​

构建应用 找 MACHINE-TO-MACHINE 开始构建

和前端应用创建差不多,输入内容后点击完成就好了

配置 apps/api/.env 文件 ​

点击刚刚创建的后端应用,来到应用详情页,复制下面参数值

  • 应用 ID → LOGTO_CLIENT_ID
  • 应用密钥 → LOGTO_CLIENT_SECRET

至此后端应用部分配置完成 🎉

7. 创建管理员 ​

WARNING

创建管理员并设置权限(步骤点击稍多,别遗漏步骤哦)

给 admin 角色分配刚刚创建的 后端应用 ​

8. 重新启动后端 + 前端服务 ​

bash
# 起动后端服务
pnpm run dev:api

# 起动前端服务
pnpm run dev:client

来到首页,点击导航栏右上角的 登录 按钮后 ​

看到下面的页面则视为配置成功 🎉 ​

可以点击 create account 创建一下帐号然后登录查看下 ​

9. 最后 ​

TIP

如果还有其他问题,也欢迎一起交流学习哦!

点击下方链接在评论区提出你的沟通建议吧!

开发者日记✏️:技术选型完成!

Released under the MIT License.