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 個人實踐的經驗分享，可關注公衆号！