-
Notifications
You must be signed in to change notification settings - Fork 723
迁移 Logto 用户系统后本地启动配置方案(贡献者)
- 如果你是新贡献者
- 之前没有跑过项目
- 已经过了一遍 README 中 如何开始? 执行步骤
可以直接跳过前面三个执行步骤,从第四步配置 env
文件开始,前面三步主要是为了确保旧版贡献者们配置迁移过来的环境是一致的,所以先删一删 😊
打开 Docker Desktop → Volumes
之前存储在本地的 Volumes 数据 earthworm_data
pnpm docker:down
执行结果
earthworm_data 被删除掉了
需要等待安装 Logto/postgress 的镜像,可能会有点慢,参考配置一下镜像源会快很多:Docker Hub 镜像加速配置
pnpm docker:start
执行结果
# 创建数据库表结构
pnpm db:init
# 上传数据
pnpm db:upload
需要将这两个文件内容复制到对应目录下的 .env
文件中,提供命令如下
# 后端
cp apps/api/.env.example apps/api/.env
# 前端
cp apps/client/.env.example apps/client/.env
关于前后端两个 .env.example
示例文件部分变量的简单说明(先看看就行,后面跟着文档来写空缺的变量)
检查 Docker Containers 中 Logto 相关服务是否正常启动,如果没有启动或者压根没有容器服务,可以先通过下面命令来启动
pnpm docker:start
手动访问地址:http://localhost:3011/
点击 Create account 按钮创建账号
必须从首页跳转过来,不要直接访问(否则会 404,注意这是管理用户的创建页面而不是普通用户的哦)
输入用户名 + 密码注册一个账号(密码要稍微复杂一点,不过貌似 QQ 也行 ^-^)
先切中文!(因为英文看不懂 😢,其实我是看得懂的,主要还是怕一些小伙伴看不懂 [手动狗头]
点击左侧 API 资源 创建
选择 Express 立即开始
将 apps/api/.env
文件中
-
BACKEND_ENDPOINT
→ API Identifier
前面已经配置好的小伙伴也需要配置一下这步哦~ 😊
-
Logto Management API →
LOGTO_M2M_API
至此 API 资源部分配置完成 🎉
可以选择构建一个 Vue 应用
点击 完成
点击左侧 全部应用 会看到多了一个应用,复制 App ID
-
App ID
→LOGTO_APP_ID
将 apps/client/.env
中
-
LOGTO_SIGN_IN_REDIRECT_URI
→ 重定向 URIs -
LOGTO_SIGN_OUT_REDIRECT_URI
→ 退出登录后重定向 URIs
注意:更改内容最后要记得点击 保存更改 哈!至此前端部分配置完成 🎉
找 MACHINE-TO-MACHINE 开始构建
和前端应用创建差不多,输入内容后点击完成就好了
点击刚刚创建的后端应用,来到应用详情页,复制下面参数值
- 应用 ID →
LOGTO_CLIENT_ID
- 应用密钥 →
LOGTO_CLIENT_SECRET
至此后端应用部分配置完成 🎉
创建管理员并设置权限(步骤点击稍多,别遗漏步骤哦)
给 admin 角色分配刚刚创建的 后端应用
# 启动后端服务
pnpm dev:serve
# 启动前端服务
pnpm dev:client
来到首页,点击导航栏右上角的 登录 按钮后
看到下面的页面则视为配置成功 🎉
如果你跟着文档到这一步,请不要使用上面注册的管理员账号来尝试登录,然后问我为什么登录不上去,具体见最后的 常见问题
所以这里应该是点击底部 注册 来到注册页面(后续看看直接让用户先到注册页面,不然确实会有一点歧义)
可以多测测对应的注册和登录,注册的用户可以在 管理控制台页面 的 用户管理 中查看
至此,恭喜你完成了所有 Logto 配置,愉快的编码叭!
有小伙伴分不清下面两个 Logto 页面,简单说明一下
- http://localhost:3010/ - 给 普通用户 使用,只有在首页点击登录用才能访问,因为需要携带 token 信息校验,相当于我们之前的 登录/注册 页面
- http://localhost:3011/ - 给 控制台管理员 使用,只能注册一个账号,有对应的配置后台,可以管理上面用户信息还有对应的应用