V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
logto
V2EX  ›  程序员

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

  •  
  •   logto ·
    logto-io · 2022-08-28 23:06:25 +08:00 · 2625 次点击
    这是一个创建于 829 天前的主题,其中的信息可能已经有所发展或是发生改变。

    原文地址

    开场

    作为开发者,你一般如何在 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 还会生成可用的代码片段,可以直接复制和测试。没有什么困难和特别的。

    集成 Logto

    自定义登录体验

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

    登录配置

    总结

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

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

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

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

    并即将推出这些功能:

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

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

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

    6 条回复    2022-08-31 18:43:03 +08:00
    placeholder
        1
    placeholder  
       2022-08-29 00:24:50 +08:00
    README 没中文,等一个开源贡献
    huyi23
        2
    huyi23  
       2022-08-29 00:44:25 +08:00
    然后项目垮了,用户无法登陆了(逃)
    Ayanokouji
        3
    Ayanokouji  
       2022-08-29 13:02:36 +08:00
    可以画一下架构图吗?使用的话更偏向将 logto 隐藏起来,当中间件使用,不直接暴露给前端
    demonzoo
        4
    demonzoo  
       2022-08-29 21:15:40 +08:00
    @placeholder 虽然 README 没中文,但是文档有中文
    czyt
        5
    czyt  
       2022-08-31 13:51:05 +08:00
    数据库能支持其他的么
    logto
        6
    logto  
    OP
       2022-08-31 18:43:03 +08:00
    @Ayanokouji #3 这样的需求推荐 Ory 下面的产品哈
    @czyt #5 暂时没有计划呢
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1063 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 19:20 · PVG 03:20 · LAX 11:20 · JFK 14:20
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.