尧图网页设计 
Earthworm 注册指南邮箱与 GitHub 注册完整流程与 Logto 登录体系实现解析【免费下载链接】earthwormLearning English through the method of constructing sentences with conjunctions项目地址: https://gitcode.com/GitHub_Trending/ea/earthwormEarthworm 是一款通过连词成句、游戏化方式学习英语的开源工具其用户身份体系基于Logto开源身份认证服务构建目前支持邮箱与GitHub两种注册方式。本文将基于仓库文档 packages/docs/get-started/how-to-register.md以邮箱注册为例逐步讲解从打开官网到注册成功并进入学习页面的完整操作流程同时结合仓库前后端源码剖析注册、登录背后 Logto 的实现原理、回调处理与鉴权细节帮助你既会用又看懂。支持哪些注册方式官方文档明确说明该网站目前提供了邮箱和Github注册您可随意选择一种方式即可两种方式均通过 Logto 统一完成前端登录入口、Token 换取、用户信息拉取走的是同一条链路只是身份提供商IdP不同邮箱Email注册使用邮箱地址 邮箱验证码完成身份确认无需设置密码属于无密码登录passwordless模式GitHub 注册跳转到 GitHub 授权页授权后由 GitHub 作为第三方身份源完成认证。在仓库中这一能力由前端插件 apps/client/plugins/logto.ts 注入 Logto SDK 实现其中明确声明了登录时向 Logto 申请的 scopescopes: [ UserScope.Email, UserScope.Phone, UserScope.CustomData, UserScope.Identities, UserScope.Organizations, ], resources: [runtimeConfig.public.backendEndpoint],也就是说登录成功后前端会拿到包含邮箱、手机号、自定义数据、身份源信息等在内的用户资料并获取访问后端 API 所需的资源访问令牌。邮箱注册完整流程8 步走通以下操作步骤以邮箱注册为例GitHub 方式类似只是授权页不同按官方文档整理并补充了每一步的界面要点。第 1 步打开官网首页浏览器打开 Earthworm 官网首页earthworm.cuixueshe.com。首页承载了课程介绍、用户评价、课程套餐等营销内容顶部导航栏右侧提供账号相关入口。第 2 步点击注册或登录按钮在顶部导航栏点击注册或登录按钮触发登录流程。前端对应实现位于 apps/client/services/auth.ts 的signIn方法它调用 Logto SDK 并携带配置好的重定向地址发起登录export async function signIn(callback?: string) { callback setSignInCallback(callback); logto.signIn(runtimeConfig.public.signInRedirectURI); }第 3 步跳转到 Logto 登录页点击 Create account点击后页面跳转到 Logto 托管的统一登录页。这里集成了多种登录方式在页面底部或 Tab 中找到Create account创建账号入口并点击切换到注册表单。界面截图可参考 packages/docs/public/register/register-page.png。第 4 步输入邮箱、同意隐私说明并提交在注册表单中输入你的邮箱地址勾选同意隐私说明/服务条款点击Create account提交注册申请。Logto 会校验邮箱格式与条款勾选状态随后向该邮箱发送一封包含验证码的邮件。界面截图可参考 packages/docs/public/register/input.png。第 5 步切换到验证码页面并检查邮箱提交后页面进入验证码输入阶段同时请前往你的邮箱收件箱注意检查垃圾邮件目录找到 Logto 发送的验证码邮件。界面截图可参考 packages/docs/public/register/verify-code.png。第 6 步输入邮箱验证码回到验证码页面将邮件中的验证码填入输入框。该验证码是一次性的且存在有效期请尽快输入。界面截图可参考 packages/docs/public/register/email.png。第 7 步确认登录弹窗输入验证码并提交后Logto 会弹出邮箱注册确认弹窗确认无误后点击Sign in即完成身份确认并登录。界面截图可参考 packages/docs/public/register/ensure.png。第 8 步注册成功开始学习之旅登录成功后页面会携带授权码回调到前端指定的回调地址见下文回调页面前端完成 Token 换取与用户信息拉取后即可正常使用网站的全部学习功能选择课程开始连词成句练习查看个人学习记录与排名使用听力模式、游戏模式等各类学习玩法。登录背后发生了什么Logto 实现原理注册登录并非简单的填个邮箱而已其背后由 Logto 与前后端代码协作完成。理解这条链路对你排查登录问题或为项目接入其他登录方式都很有帮助。前端插件初始化与认证服务封装插件初始化apps/client/plugins/logto.ts 在 Nuxt 应用启动时通过createLogto将 Logto Vue SDK 注册为全局插件。endpoint、appId、backendEndpoint等关键配置均来自运行时配置配置来源见 apps/client/nuxt.config.ts 第 45-55 行的runtimeConfig.public段全部由环境变量注入runtimeConfig: { public: { apiBase: process.env.API_BASE || , endpoint: process.env.LOGTO_ENDPOINT || , appId: process.env.LOGTO_APP_ID || , backendEndpoint: process.env.BACKEND_ENDPOINT || , signInRedirectURI: process.env.LOGTO_SIGN_IN_REDIRECT_URI || , signOutRedirectURI: process.env.LOGTO_SIGN_OUT_REDIRECT_URI || , helpDocsURL: process.env.HELP_DOCS_URL || , }, },认证服务封装apps/client/services/auth.ts 将 Logto SDK 的signIn、signOut、isAuthenticated、getAccessToken、fetchUserInfo等方法封装为应用可直接调用的函数。其中getToken()会以backendEndpoint为 resource 向 Logto 换取访问后端 API 的 access token。回调页面完成登录闭环邮箱验证通过后Logto 会重定向到配置的signInRedirectURI对应前端页面 apps/client/pages/callback.vue。该页面调用 Logto 的useHandleSignInCallback完成授权码交换随后通过 apps/client/api/user.ts 的fetchCurrentUser拉取当前用户并初始化 Pinia 用户状态userStore.initUser(res)判断是否为新用户userStore.isNewUser()新用户弹出设置用户名弹窗要求设置用户名至少 2 个字符只能包含字母、数字和下划线且首字符必须是字母或下划线正则^[A-Za-z_]\w*$最大 20 字符老用户则根据getSignInCallback()返回的sessionStorage中记录的来源地址默认/跳转回原页面若登录失败页面会弹出错误提示并引导清空缓存后重试见callback.vue中对error的watch。路由守卫未登录自动跳转apps/client/middleware/auth.ts 定义了全局路由中间件当访问受保护页面且isAuthenticated()为假时自动调用signIn()发起登录确保未登录用户无法进入学习等受保护页面。后端JWT 校验与用户识别登录态的最终验证在后端完成。API 服务NestJS中的 apps/api/src/guards/auth.guard.ts 实现了全局鉴权守卫使用createRemoteJWKSet(new URL(/oidc/jwks, process.env.LOGTO_ENDPOINT))拉取 Logto 的公钥集合用于验证 JWT 签名校验 JWT 时指定issuer为 Logto 的oidc端点、audience为BACKEND_ENDPOINT与前端申请 Token 时的 resource 严格对应校验通过后从payload.sub提取userId挂载到请求对象上供各业务模块使用同时支持UncheckAuth()与Permissions(...)装饰器用于标记免鉴权接口或校验 scope 权限。而 apps/api/src/logto/logto.service.ts 则负责服务端与 Logto 的机器对机器M2M通信通过client_credentials授权模式向 Logto 换取服务端访问令牌用于管理用户等后台操作。常见问题与排查建议登录失败/报错callback.vue会提示请清空缓存后重新尝试。可优先清除浏览器站点缓存与 Cookie 后重新发起登录验证码未收到检查垃圾邮件目录确认邮箱地址拼写无误必要时重新发送验证码登录后跳转不对getSignInCallback()从sessionStorage读取登录前记录的页面地址若为空则默认跳转首页新用户没有用户名注册成功后的首次登录会强制弹出设置用户名弹窗符合规则2-20 字符、字母数字下划线、首字符为字母或下划线后才能进入学习页面本地开发接入登录需要配置 apps/client/nuxt.config.ts 中的LOGTO_ENDPOINT、LOGTO_APP_ID、LOGTO_SIGN_IN_REDIRECT_URI等环境变量Logto 侧的完整接入步骤可参考仓库文档 packages/docs/contribution/config-logto.md。小结至此你已经可以使用邮箱或GitHub账号完成 Earthworm 的注册与登录理解注册流程中官网入口 → Logto 认证页 → 邮箱验证 → 回调页面 → 用户名设置的完整闭环掌握仓库前后端在 Logto 体系下的配置方式apps/client/plugins/logto.ts、apps/client/services/auth.ts、apps/api/src/guards/auth.guard.ts与 Token 校验原理为后续自行扩展登录方式或排查登录问题打下基础。注册完成后即可开始你的连词成句学习之旅配合听力模式、课程包与学习统计等功能持续提升英语能力。【免费下载链接】earthwormLearning English through the method of constructing sentences with conjunctions项目地址: https://gitcode.com/GitHub_Trending/ea/earthworm创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Earthworm 注册指南：邮箱与 GitHub 注册完整流程与 Logto 登录体系实现解析
Earthworm 注册指南邮箱与 GitHub 注册完整流程与 Logto 登录体系实现解析【免费下载链接】earthwormLearning English through the method of constructing sentences with conjunctions项目地址: https://gitcode.com/GitHub_Trending/ea/earthwormEarthworm 是一款通过连词成句、游戏化方式学习英语的开源工具其用户身份体系基于Logto开源身份认证服务构建目前支持邮箱与GitHub两种注册方式。本文将基于仓库文档 packages/docs/get-started/how-to-register.md以邮箱注册为例逐步讲解从打开官网到注册成功并进入学习页面的完整操作流程同时结合仓库前后端源码剖析注册、登录背后 Logto 的实现原理、回调处理与鉴权细节帮助你既会用又看懂。支持哪些注册方式官方文档明确说明该网站目前提供了邮箱和Github注册您可随意选择一种方式即可两种方式均通过 Logto 统一完成前端登录入口、Token 换取、用户信息拉取走的是同一条链路只是身份提供商IdP不同邮箱Email注册使用邮箱地址 邮箱验证码完成身份确认无需设置密码属于无密码登录passwordless模式GitHub 注册跳转到 GitHub 授权页授权后由 GitHub 作为第三方身份源完成认证。在仓库中这一能力由前端插件 apps/client/plugins/logto.ts 注入 Logto SDK 实现其中明确声明了登录时向 Logto 申请的 scopescopes: [ UserScope.Email, UserScope.Phone, UserScope.CustomData, UserScope.Identities, UserScope.Organizations, ], resources: [runtimeConfig.public.backendEndpoint],也就是说登录成功后前端会拿到包含邮箱、手机号、自定义数据、身份源信息等在内的用户资料并获取访问后端 API 所需的资源访问令牌。邮箱注册完整流程8 步走通以下操作步骤以邮箱注册为例GitHub 方式类似只是授权页不同按官方文档整理并补充了每一步的界面要点。第 1 步打开官网首页浏览器打开 Earthworm 官网首页earthworm.cuixueshe.com。首页承载了课程介绍、用户评价、课程套餐等营销内容顶部导航栏右侧提供账号相关入口。第 2 步点击注册或登录按钮在顶部导航栏点击注册或登录按钮触发登录流程。前端对应实现位于 apps/client/services/auth.ts 的signIn方法它调用 Logto SDK 并携带配置好的重定向地址发起登录export async function signIn(callback?: string) { callback setSignInCallback(callback); logto.signIn(runtimeConfig.public.signInRedirectURI); }第 3 步跳转到 Logto 登录页点击 Create account点击后页面跳转到 Logto 托管的统一登录页。这里集成了多种登录方式在页面底部或 Tab 中找到Create account创建账号入口并点击切换到注册表单。界面截图可参考 packages/docs/public/register/register-page.png。第 4 步输入邮箱、同意隐私说明并提交在注册表单中输入你的邮箱地址勾选同意隐私说明/服务条款点击Create account提交注册申请。Logto 会校验邮箱格式与条款勾选状态随后向该邮箱发送一封包含验证码的邮件。界面截图可参考 packages/docs/public/register/input.png。第 5 步切换到验证码页面并检查邮箱提交后页面进入验证码输入阶段同时请前往你的邮箱收件箱注意检查垃圾邮件目录找到 Logto 发送的验证码邮件。界面截图可参考 packages/docs/public/register/verify-code.png。第 6 步输入邮箱验证码回到验证码页面将邮件中的验证码填入输入框。该验证码是一次性的且存在有效期请尽快输入。界面截图可参考 packages/docs/public/register/email.png。第 7 步确认登录弹窗输入验证码并提交后Logto 会弹出邮箱注册确认弹窗确认无误后点击Sign in即完成身份确认并登录。界面截图可参考 packages/docs/public/register/ensure.png。第 8 步注册成功开始学习之旅登录成功后页面会携带授权码回调到前端指定的回调地址见下文回调页面前端完成 Token 换取与用户信息拉取后即可正常使用网站的全部学习功能选择课程开始连词成句练习查看个人学习记录与排名使用听力模式、游戏模式等各类学习玩法。登录背后发生了什么Logto 实现原理注册登录并非简单的填个邮箱而已其背后由 Logto 与前后端代码协作完成。理解这条链路对你排查登录问题或为项目接入其他登录方式都很有帮助。前端插件初始化与认证服务封装插件初始化apps/client/plugins/logto.ts 在 Nuxt 应用启动时通过createLogto将 Logto Vue SDK 注册为全局插件。endpoint、appId、backendEndpoint等关键配置均来自运行时配置配置来源见 apps/client/nuxt.config.ts 第 45-55 行的runtimeConfig.public段全部由环境变量注入runtimeConfig: { public: { apiBase: process.env.API_BASE || , endpoint: process.env.LOGTO_ENDPOINT || , appId: process.env.LOGTO_APP_ID || , backendEndpoint: process.env.BACKEND_ENDPOINT || , signInRedirectURI: process.env.LOGTO_SIGN_IN_REDIRECT_URI || , signOutRedirectURI: process.env.LOGTO_SIGN_OUT_REDIRECT_URI || , helpDocsURL: process.env.HELP_DOCS_URL || , }, },认证服务封装apps/client/services/auth.ts 将 Logto SDK 的signIn、signOut、isAuthenticated、getAccessToken、fetchUserInfo等方法封装为应用可直接调用的函数。其中getToken()会以backendEndpoint为 resource 向 Logto 换取访问后端 API 的 access token。回调页面完成登录闭环邮箱验证通过后Logto 会重定向到配置的signInRedirectURI对应前端页面 apps/client/pages/callback.vue。该页面调用 Logto 的useHandleSignInCallback完成授权码交换随后通过 apps/client/api/user.ts 的fetchCurrentUser拉取当前用户并初始化 Pinia 用户状态userStore.initUser(res)判断是否为新用户userStore.isNewUser()新用户弹出设置用户名弹窗要求设置用户名至少 2 个字符只能包含字母、数字和下划线且首字符必须是字母或下划线正则^[A-Za-z_]\w*$最大 20 字符老用户则根据getSignInCallback()返回的sessionStorage中记录的来源地址默认/跳转回原页面若登录失败页面会弹出错误提示并引导清空缓存后重试见callback.vue中对error的watch。路由守卫未登录自动跳转apps/client/middleware/auth.ts 定义了全局路由中间件当访问受保护页面且isAuthenticated()为假时自动调用signIn()发起登录确保未登录用户无法进入学习等受保护页面。后端JWT 校验与用户识别登录态的最终验证在后端完成。API 服务NestJS中的 apps/api/src/guards/auth.guard.ts 实现了全局鉴权守卫使用createRemoteJWKSet(new URL(/oidc/jwks, process.env.LOGTO_ENDPOINT))拉取 Logto 的公钥集合用于验证 JWT 签名校验 JWT 时指定issuer为 Logto 的oidc端点、audience为BACKEND_ENDPOINT与前端申请 Token 时的 resource 严格对应校验通过后从payload.sub提取userId挂载到请求对象上供各业务模块使用同时支持UncheckAuth()与Permissions(...)装饰器用于标记免鉴权接口或校验 scope 权限。而 apps/api/src/logto/logto.service.ts 则负责服务端与 Logto 的机器对机器M2M通信通过client_credentials授权模式向 Logto 换取服务端访问令牌用于管理用户等后台操作。常见问题与排查建议登录失败/报错callback.vue会提示请清空缓存后重新尝试。可优先清除浏览器站点缓存与 Cookie 后重新发起登录验证码未收到检查垃圾邮件目录确认邮箱地址拼写无误必要时重新发送验证码登录后跳转不对getSignInCallback()从sessionStorage读取登录前记录的页面地址若为空则默认跳转首页新用户没有用户名注册成功后的首次登录会强制弹出设置用户名弹窗符合规则2-20 字符、字母数字下划线、首字符为字母或下划线后才能进入学习页面本地开发接入登录需要配置 apps/client/nuxt.config.ts 中的LOGTO_ENDPOINT、LOGTO_APP_ID、LOGTO_SIGN_IN_REDIRECT_URI等环境变量Logto 侧的完整接入步骤可参考仓库文档 packages/docs/contribution/config-logto.md。小结至此你已经可以使用邮箱或GitHub账号完成 Earthworm 的注册与登录理解注册流程中官网入口 → Logto 认证页 → 邮箱验证 → 回调页面 → 用户名设置的完整闭环掌握仓库前后端在 Logto 体系下的配置方式apps/client/plugins/logto.ts、apps/client/services/auth.ts、apps/api/src/guards/auth.guard.ts与 Token 校验原理为后续自行扩展登录方式或排查登录问题打下基础。注册完成后即可开始你的连词成句学习之旅配合听力模式、课程包与学习统计等功能持续提升英语能力。【免费下载链接】earthwormLearning English through the method of constructing sentences with conjunctions项目地址: https://gitcode.com/GitHub_Trending/ea/earthworm创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考