构建一个漂亮的跨平台登录 / 注册能有多难？

[logto]

原文地址

开场

作为开发者，你一般如何在 app 中构建用户登录 / 注册？回到 20 年前，大部分答案应该是「从头开始」。这件事曾很简单：

• 使用 FrontPage 2000 绘制用户名和密码输入控件与提交按钮。
• 使用语言内置的 Session 将用户会话存储在内存中。
• 关于安全？ MD5 就是答案。

上面的都没听过？那么很遗憾，你错过了软件开发的「好时光」。😁 如今，开发者在构建登录注册时会面临一系列挑战：

🤦 等一下，等一下。所有这些都只是关于用户登录 / 注册？没有它们，我甚至无法开始「真正的业务」？ UI 逻辑看起来很复杂，我是不是还需要 PM 和设计师？答案是：对也不对。容我解释一番：

• 对，因为：
  • 你不仅要构建一个「登录 UI 」，还要构建一个统一的用户身份体系，并支持多种登录方式和身份来源。
  • 当你或你的公司成长到一定规模，或者想要一个优雅且安全的身份用户体验时，你会发现这些东西是必要且基本的。你会很庆幸（或者很后悔没有去）从第一天开始考虑这些事情。
• 不对，因为在现实生活中这些是几个月的工作；且通常情况下，在项目开始并不需要上述所有功能或特性：例如只从 iOS 应用开始，并且将社交登录作为唯一的登录方式。但是将来在以下状态中进行重构将引发巨大的痛苦：
  • 应用积攒了大量用户数据。
  • 你在开发一个新应用并希望复用同一个用户身份体系。

假设你正在构建一个 all-in-one 的工作台应用（例如 Notion ），嘿，以上任意一件事是否和业务相关呢？

Life is short

我喜欢编码，我能准确地感受到「在项目早期的就停滞不切」那种糟糕的心情。如果你是独立开发者，你还会发现登录和身份这件事在不断重复：几乎每个应用程序都需要它。

我尝试过的

• Keycloak 功能全面，但对我来说有点「老派」并远远不到开箱即用的程度。
• Ory 看起来很酷。但是它没有可配置的跨平台 UI 。
• Supertokens 是一颗冉冉升起的新星，但它必须注入到后端服务中。
• Auth0 是该领域中一个成熟的大型 SaaS ，但我很难弄清楚如何将 UI 设置成我想要的样子，例如将社交登录作为主要登录方式。

所以，现在是「让我们做点什么」的时间了。

我构建的

伴随着「我为什么要再次处理这个问题？」的项目，我开始和几个开发者朋友一起构建开源项目 Logto。现在我可以自豪地说，Logto 会处理好之前提到的大部分事情。:-)

Logto

帮助你在几分钟内建立登录、auth 和用户身份体系。它提供基于 OIDC 的身份服务，并支持用户名、手机号、邮件和社交登录。还有适用于网页和原生应用的一整套 UI 。

Talk is cheap. 让我通过一个真实的例子来告诉你它是多么简单。

注：篇幅所限，在此就不完全展开所有配置过程了。总结一句话：点点鼠标，几行代码。详细教程可以 阅读原文 或者在 项目文档 网站查看。

在应用中集成 Logto

通过 开始上手 教程启动 Logto 后，按照集成指南，只需要四个简单的步骤就能将 Logto SDK 与你的应用集成。Logto 还会生成可用的代码片段，可以直接复制和测试。没有什么困难和特别的。

自定义登录体验

下图是登录体验的配置界面：可以将品牌颜色和 Logo URL 换成你的；如果需要，还可以启用深色模式或添加标语；右侧还有实时预览可供查看。这一切都会在全平台生效，也就是说不管是桌面网页、移动网页还是原生应用，都可以拥有相同的登录 / 注册体验。

总结

至此，我们已经通过集成 Logto 消除了大多数令人头疼的问题：

• 「用户界面」实现带有用户名和密码的网页登录 / 注册界面。
• 「跨平台」跨桌面网页、移动网页和原生应用的统一登录体验。
• 「身份服务」使用 Logto 服务作为身份的枢纽。
• 「安全」 Logto 采取了许多开放标准，并有内部安全策略。

Logto 还内置了对其他文章中未涵盖功能的支持：

• 手机 / 邮件动态验证码登录
• 社交登录（微信、支付宝、GitHub 等）
• iOS / Android 应用集成
• API 保护等

并即将推出这些功能：

• 忘记密码流程
• Machine-to-machine 应用
• 更多连接器和 SDK

所以构建一个漂亮的跨平台登录 / 注册并没有你想象的那么难，对吧？😊

最后，我们希望这篇文章能对你有所帮助。如果对 Logto 的感兴趣，请前往我们的 GitHub repo 继续旅程，并随时和我们交流～

[placeholder]

README 没中文，等一个开源贡献

[huyi23]

然后项目垮了，用户无法登陆了（逃）

[Ayanokouji]

可以画一下架构图吗？使用的话更偏向将 logto 隐藏起来，当中间件使用，不直接暴露给前端

[demonzoo]

@placeholder 虽然 README 没中文，但是文档有中文

[czyt]

数据库能支持其他的么

[logto]

@Ayanokouji #3 这样的需求推荐 Ory 下面的产品哈
@czyt #5 暂时没有计划呢