Ory Kratos 用户认证

Ory Kratos 为用户认证与管理系统。本文将动手实现浏览器（React+AntD）的完整流程，实际了解下它的 API 。

• 代码: https://github.com/ikuokuo/start-ory-kratos

了解 Kratos

获取代码

git clone -b v0.7.0-alpha.1 --depth 1 https://github.com/ory/kratos.git

查看 API

go-swagger 查看：

cd kratos
swagger serve -F=swagger ./spec/swagger.json

运行服务

docker-compose 运行：

cd kratos
docker-compose -f quickstart.yml -f quickstart-postgres.yml -f quickstart-standalone.yml up --build --force-recreate
# If you have SELinux, run: -f quickstart-selinux.yml

运行了官方 Quickstart 例子，可以访问 http://127.0.0.1:4455/dashboard 体验。

查看 DB

pgAdmin 打开（DB 信息见 quickstart-postgres.yml）：

查看表：

查看配置

cd kratos
cat contrib/quickstart/kratos/email-password/kratos.yml

设置环境变量可以覆盖。以 _ 表示层级，如 SELFSERVICE_FLOWS_SETTINGS_UI_URL=<value> 覆盖 selfservice.flows.settings.ui_url。

Self-Service 流程

• Registration
• Login
• Logout
• User Settings
• Account Recovery
• Address Verification
• User-Facing Error
• 2FA / MFA

浏览器流程

客户端流程

动手配置：Kratos 服务

• 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 文件

运行服务

cd ory-kratos
docker-compose -f start.yml up --build --force-recreate

如果想运行官方 Self-Service UI 例子，那么：

docker-compose -f start.yml -f start-ui-node.yml up --build --force-recreate

之后，访问 http://127.0.0.1:3000/ 体验。在 Register new account / Reset password 时，可访问虚拟 SMTP 服务 http://127.0.0.1:4436 接收邮件。

动手实现：浏览器流程

React + Ant Design

新建 React 应用

yarn create react-app my-web --template typescript
cd my-web
yarn start

访问 http://localhost:3000/ ，可见 React 欢迎页。

引入 AntD

yarn add antd

修改 src/App.tsx，引入 antd 组件：

import React, { Component } from 'react'
import { Button } from 'antd';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <Button type="primary">Button</Button>
        </header>
      </div>
    );
  }
}

export default App;

修改 src/App.css，引入 antd 样式：

@import '~antd/dist/antd.css';