Ory Kratos 为用户认证与管理系统。本文将动手实现浏览器（React+AntD）的完整流程，实际了解下它的 API 。
代码: https://github.com/ikuokuo/start-ory-kratos
go-swagger 查看：
docker-compose 运行：
运行了官方 Quickstart 例子，可以访问 http://127.0.0.1:4455/dashboard 体验。
pgAdmin 打开（DB 信息见 <code>quickstart-postgres.yml</code>）：
查看表：
设置环境变量可以覆盖。以 <code>_</code> 表示层级，如 <code>SELFSERVICE_FLOWS_SETTINGS_UI_URL=<value></code> 覆盖 <code>selfservice.flows.settings.ui_url</code>。
Registration
Login
Logout
User Settings
Account Recovery
Address Verification
User-Facing Error
2FA / MFA
Ory Kratos
Public API (port 4433)
Admin API (port 4434)
Postgres DB (port 5432)
Browser Return URL (port 3000)
MailSlurper: a development SMTP server
Server UI (port 4436)
ory-kratos/config/kratos.yml: 配置文件
ory-kratos/config/identity.schema.json: 认证 JSON 模式
ory-kratos/start.yml： Docker Compose 文件
如果想运行官方 Self-Service UI 例子，那么：
之后，访问 http://127.0.0.1:3000/ 体验。在 <code>Register new account</code> / <code>Reset password</code> 时，可访问虚拟 SMTP 服务 http://127.0.0.1:4436 接收邮件。
React + Ant Design
访问 http://localhost:3000/ ，可见 React 欢迎页。
修改 <code>src/App.tsx</code>，引入 antd 组件：
修改 <code>src/App.css</code>，引入 antd 样式：
可见 antd 蓝色按钮组件。
后缀 <code>css</code> 改为 <code>scss</code> ，<code>tsx</code> 里的 <code>import</code> 也改下。
于 <code>pages</code> 目录下实现如下页面 UI：
APIs:
<code>GET</code> <code>/self-service/registration/browser</code>: 初始化注册流程
<code>GET</code> <code>/self-service/registration/flows</code>: 获取注册流程
<code>POST</code> <code>/self-service/registration</code>: 提交注册流程
页面加载后的处理流程：
流程信息 <code>this.state.flow</code>，如下：
之后，依据流程信息创建表单：
其中表单 <code>onFinish</code> 里处理提交：
<code>GET</code> <code>/self-service/login/browser</code>: 初始化登录流程
<code>GET</code> <code>/self-service/login/flows</code>: 获取登录流程
<code>POST</code> <code>/self-service/login</code>: 提交登录流程
与注册流程一样。
登录后，可通过 <code>whoami</code> 获取授权信息：
<code>GET</code> <code>/sessions/whoami</code>: 获取授权信息
<code>Dashboard</code> 页展示了授权信息：
<code>GET</code> <code>/self-service/verification/browser</code>: 初始化验证流程
<code>GET</code> <code>/self-service/verification/flows</code>: 获取验证流程
<code>POST</code> <code>/self-service/verification</code>: 提交验证流程
<code>GET</code> <code>/self-service/recovery/browser</code>: 初始化恢复流程
<code>GET</code> <code>/self-service/recovery/flows</code>: 获取恢复流程
<code>POST</code> <code>/self-service/recovery</code>: 提交恢复流程
<code>GET</code> <code>/self-service/settings/browser</code>: 初始化设置流程
<code>GET</code> <code>/self-service/settings/flows</code>: 获取设置流程
<code>POST</code> <code>/self-service/settings</code>: 完成设置流程
但要注意的是，依据流程信息创建表单时，请区分 <code>group</code> 构建多个表单：
<code>GET</code> <code>/self-service/logout/browser</code>: 创建登出 URL
<code>POST</code> <code>/self-service/logout</code>: 完成登出流程
页面加载后创建登出 URL ，
之后，页面加上登出按钮：
ORY Kratos ExpressJS Self-Service UI Reference
Kratos React Example
GoCoding 个人实践的经验分享，可关注公众号！