node.js+uniapp(vue),阿里云短信验证码

发布于:2024-07-04 ⋅ 阅读:(165) ⋅ 点赞:(0)

reg.vue:

思路是:前端调用获取验证码的接口 ==> 后端生成验证码返回给前端 ==> 前端渲染验证码

<template>  
  <div>  
    <input class="sl-input" v-model="phone" type="tel" maxlength="11" placeholder="手机号" />  
    <button @click="sendSms">短信注册</button>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      phone: ''  
    };  
  },  
  methods: {  
    sendSms() {  
      
      console.log('电话号:', this.phone);  
      uni.request({  
        url: 'http://localhost:3000/valisms', // 你的后端服务地址  
        method: 'POST',  
        data: {  
          phoneNumbers: this.phone  
        },  
        success: (res) => {  
          if (res.data.success) {  
            console.log('短信发送成功:', res.data.response);  
            uni.showToast({  
              title: '短信发送成功',  
              icon: 'success'  
            });  
          } else {  
            console.log('短信发送失败:', res.data.message);  
            uni.showToast({  
              title: '短信发送失败',  
              icon: 'none'  
            });  
          }  
        },  
        fail: (err) => {  
          console.error('发送请求失败:', err);  
          uni.showToast({  
            title: '请求失败',  
            icon: 'none'  
          });  
        }  
      });  
    },  
   
  }  
};  
</script>  
  
<style>  
  
</style>

client.js:

地址:短信服务_云产品主页-阿里云OpenAPI开发者门户 (aliyun.com)

'use strict';
// This file is auto-generated, don't edit it
// 依赖的模块可通过下载工程中的模块依赖文件或右上角的获取 SDK 依赖信息查看
const Dysmsapi20170525 = require('@alicloud/dysmsapi20170525');
const OpenApi = require('@alicloud/openapi-client');
const Console = require('@alicloud/tea-console');
const Util = require('@alicloud/tea-util');
const Tea = require('@alicloud/tea-typescript');

class Client {
          static createClient() {
            // 工程代码泄露可能会导致 AccessKey 泄露,并威胁账号下所有资源的安全性。以下代码示例仅供参考。
            // 建议使用更安全的 STS 方式,更多鉴权访问方式请参见:https://help.aliyun.com/document_detail/378664.html。
            let config = new OpenApi.Config({
              // 必填,请确保代码运行环境设置了环境变量 ALIBABA_CLOUD_ACCESS_KEY_ID。
              accessKeyId: 'xxxx',
              // 必填,请确保代码运行环境设置了环境变量 ALIBABA_CLOUD_ACCESS_KEY_SECRET。
              accessKeySecret: 'xxxxxx',
            });
            // Endpoint 请参考 https://api.aliyun.com/product/Dysmsapi
            config.endpoint = `dysmsapi.aliyuncs.com`;
            return new Dysmsapi20170525.default(config);
          }

     static async sendSms(phoneNumbers, code) {
        let client = Client.createClient();
        console.log('验证码是:',code);
        let sendSmsRequest = new Dysmsapi20170525.SendSmsRequest({
          signName: 'xxx', // 替换为你的短信签名名称
          templateCode: 'xxxx', // 替换为你的短信模板 CODE
          phoneNumbers: phoneNumbers,
          templateParam: JSON.stringify({ code:code }),
        });
        let runtime = new Util.RuntimeOptions({});
            try {
              let response = await client.sendSmsWithOptions(sendSmsRequest, runtime);
              return response;
            } catch (error) {
             console.error('错误的原因是:',error);
            }
        }
 

}


module.exports = Client;
Client.sendSms(process.argv.slice(2));

server.js :

// server.js
const express = require('express');
const bodyParser = require('body-parser');
const Client  = require('./client');

const app = express();
const port = 3000;

app.use(bodyParser.json());

app.post('/valisms', async (req, res) => {
  const { phoneNumbers} = req.body;
  console.log('电话号:',phoneNumbers);
  const code = Math.floor(100000 + Math.random() * 900000).toString();  
  console.log('验证码是:',code);
  try {
    const response = await Client.sendSms(phoneNumbers, code);
    res.json({ success: true, message: '短信发送成功', response });
  } catch (error) {
    console.error('短信发送失败的具体原因:', error);
    res.status(500).json({ success: false, message: '短信发送失败' });
  }
});

app.listen(port, () => {
  console.log(`Server running on http://localhost:${port}`);
});

 三个文件搞定,要使用nod命令启动server,如进入相对应的路径执行:node server.js


网站公告

今日签到

点亮在社区的每一天
去签到