Next.js实现阿里云手机短信验证服务

最新推荐文章于 2024-08-21 17:41:51 发布

CheddarGG

最新推荐文章于 2024-08-21 17:41:51 发布

阅读量582

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/cheddargg/article/details/129481376

版权

本文详细介绍了如何利用Next.js的前端框架结合React Hooks来创建一个登录模板，并集成阿里云的手机短信验证服务。在前端部分，通过daisyUI搭建登录界面并添加获取验证码按钮；接着在React中设置变量userPhone并实现调用后端API的逻辑。后端部分则简述了使用Edge Function实现验证服务，虽然异常处理有待改进。

摘要由CSDN通过智能技术生成

1. 前端 - HTML部分

用daisyUI搭建一个登录模版，加上“获取验证码”按钮

        <div>
            <div className="hero min-h-screen bg-base-200">
                <div className="hero-content flex-col lg:flex-row-reverse">
                    <div className="text-center lg:text-left">
                        <h1 className="text-5xl font-bold">Login now!</h1>
                        <p className="py-6">Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.</p>
                    </div>
                    <div className="card flex-shrink-0 w-full max-w-sm shadow-2xl bg-base-100">
                        <div className="card-body">
                            <div className="form-control">
                                <label className="label">
                                    <span className="label-text">中国 +86</span>
                                </label>
                                <div className="input-group">
                                    <input type="tel" placeholder="请输入手机号" onChange={(e) => {setUserPhone(e.target.value); }} className="input input-bordered" />
                                    <button className="btn btn-secondary" onClick={handleGetVerifyCode}>获取验证码
                                    </button>
                                </div>
                                <h2>Phone Number: {userPhone}</h2>
                            </div>
                            <div className="form-control mt-2">
                                <input type="text" placeholder="请输入验证码" className="input input-bordered