使用react和php api进行双因素注册

在处理api时，什么是进行双因素注册的正确方法

1） 在前端有一个表单-电子邮件和电话-向api发送数据的方法

2） 我有一个API，通过电子邮件和电话注册用户，生成代码并通过手机短信发送

---

问题-什么是正确的方式来检查手机正面的短信代码？（发送代码作为注册表看起来不太安全的响应）

我认为流程应该是（或多或少）：

用户收到代码

client:
- user enters the code and hits submit
- sends entered code to the server

server:
- using the session or the DB, validates the code
- then, and only then, you auth the user

你说得对-永远不要在前端验证身份验证

前端的基本代码应如下所示：

class TwoFactorAuth extends React.Component {
    state = { stage: 1 };

    onSubmitStageOne = (data) => {
        // goes to /
        submit(data).then(() => {
            this.setState({ stage: 2 });
        });
    }

    onSubmitStageTwo = (data) => {
        // goes to /auth
        authenticate(data).then(() => {
            // success
        }).catch(() => {
            // wrong code, try again
        });
    }

    renderStageOne() {
        return (
            <form onSubmit={this.onSubmitStageOne}>
                <input name="email" />
                <input name="phone" />
            </form>
        )
    }

    renderStageTwo() {
        return (
            <form onSubmit={this.onSubmitStageTwo}>
                <input name="code" />
            </form>
        )
    }

    render() {
        return this.state.stage === 1 ? 
            this.renderStageOne() : 
            this.renderStageTwo(); 
    }
}

这里我使用的是

express

和

express会话

。我将让您编写

generate2FACode

和

emailorsmuser

编辑：哎哟，你在标题中说了PHP API-类似的逻辑，只是用PHP而不是Node/Express

class TwoFactorAuth extends React.Component {
    state = { stage: 1 };

    onSubmitStageOne = (data) => {
        // goes to /
        submit(data).then(() => {
            this.setState({ stage: 2 });
        });
    }

    onSubmitStageTwo = (data) => {
        // goes to /auth
        authenticate(data).then(() => {
            // success
        }).catch(() => {
            // wrong code, try again
        });
    }

    renderStageOne() {
        return (
            <form onSubmit={this.onSubmitStageOne}>
                <input name="email" />
                <input name="phone" />
            </form>
        )
    }

    renderStageTwo() {
        return (
            <form onSubmit={this.onSubmitStageTwo}>
                <input name="code" />
            </form>
        )
    }

    render() {
        return this.state.stage === 1 ? 
            this.renderStageOne() : 
            this.renderStageTwo(); 
    }
}

router.post("/", (req, res) => {
    const code = utils.generate2FACode();
    request.session["code"] = code;

    utils.emailOrSMSUser(code);

    res.sendStatus(200);
});

router.post("/auth", (req, res) => {
    const code = req.session["code"];
    if (code === req.body.code) {
        req.session["signedIn"] = true; // simplified for demonstration
        res.sendStatus(200);
    } else {
        res.sendStatus(401);
    }
});