Alibaba Cloud SMS Service (SMS)API Access Tutorial: รองรับ Vue SpringBoot

เมฆ 2026-05-28 阅读 11

ไม่ว่าจะเป็นการลงทะเบียนผู้ใช้การตรวจสอบการเข้าสู่ระบบหรือการแจ้งเตือนสถานะการสั่งซื้อจำเป็นต้องใช้บริการ SMS เท่านั้น

มือใหม่หลายคนดูเอกสาร SMS อย่างเป็นทางการของ Alibaba Cloud และพวกเขามักจะสับสนกับแนวคิดของ AccessKey ลายเซ็นเทมเพลตและ SDK นอกจากนี้โค้ดตัวอย่างอย่างเป็นทางการมักจะเขียนขึ้นและพวกเขาไม่รู้ว่าจะรวมเข้ากับโปรเจ็กต์ส่วนหน้าและส่วนหลังได้อย่างไร

อย่าพูดเรื่องไร้สาระวันนี้ไปที่การต่อสู้จริงโดยตรงพาคุณไปใช้ "รูปแบบการเขียนในชีวิตจริง" ที่เรียบง่ายที่สุด

เรียกใช้บริการ Alibaba Cloud SMS (SMS) ใน5นาทีตั้งแต่การกำหนดค่าพื้นหลังไปจนถึงแพ็คเกจลอจิกหลักของ Spring Boot ส่วนหลังไปจนถึงการนับถอยหลังแบบเต็มของ Vue ส่วนหน้า

กระบวนการโต้ตอบหลัก

ก่อนที่จะเขียนโค้ดให้สร้างตรรกะวงปิดของ SMS รหัสยืนยัน:

ข้อความธรรมดา

[Vue front-end] ── 1.ป้อนหมายเลขโทรศัพท์ของคุณแล้วคลิกส่ง ──> [Spring Boot back-end]

▲│

│ 2.สร้างตัวเลขสุ่ม6หลัก

│ 3.ฝาก Redis (การตั้งค่าหมดอายุ5นาที)

│ 4.โทรหา Alibaba Cloud API เพื่อส่ง

│ │

│▼

[โทรศัพท์มือถือของผู้ใช้] <─── 5.ได้รับรหัสยืนยันทาง SMS ───── [Alibaba Cloud SMS Gateway]

ขั้นตอนที่1: การเปิดคอนโซล Alibaba Cloud และการสมัครคุณสมบัติ (2นาที)

เนื่องจากการกำกับดูแลการต่อต้านการฉ้อโกงในประเทศที่เข้มงวดมากบริการ SMS

ต้องขอคุณสมบัติและลายเซ็นก่อน

, โทรไปที่ API โดยตรงเพื่อรายงานข้อผิดพลาดของสิทธิ์

1.เปิดบริการ

ลงชื่อเข้าใช้ Alibaba Cloud Console ค้นหา

"บริการ SMS"

, คลิกเพื่อเปิดใช้งาน (เปิดใช้งานฟรี, ส่งค่าธรรมเนียมการหักเงินตามกฎขอแนะนำให้ซื้อแพ็คเกจราคาหลายสิบดอลลาร์)

2.สมัครลายเซ็น SMS (คุณเป็นใคร)

เข้าสู่คอนโซลบริการ SMS และคลิก "ข่าวในประเทศ" $ \ rightarrow $ "การจัดการลายเซ็น" $ \ rightarrow $ "เพิ่มลายเซ็น" ทางด้านซ้าย

ชื่อลายเซ็น: โดยปกติจะเป็นชื่อเว็บไซต์ชื่อ APP หรือตัวย่อบริษัทของคุณ (เช่นบล็อก Geek)

แหล่งที่มาของลายเซ็น: นักพัฒนาแต่ละรายมักเลือก "เว็บไซต์ที่ลงทะเบียน" หรือ "แอปพลิเคชันจริง" ซึ่งจำเป็นต้องให้

หมายเลขบันทึก ICP ของคุณหรือภาพหน้าจอของแอป

3.สมัครแม่แบบ SMS (สิ่งที่คุณส่ง)

สลับไปที่ "ผู้ดูแลระบบแม่แบบ" $ \ rightarrow $ "เพิ่มแม่แบบ"

ประเภทเทมเพลต: เลือก "รหัสยืนยัน"

ชื่อเทมเพลต: เช่นรหัสยืนยันการเข้าสู่ระบบ

เนื้อหาเทมเพลต: รูปแบบคงที่ตัวแปรจะแสดงเป็น ${code} ตัวอย่างเช่น: คุณกำลังเข้าสู่ระบบรหัสยืนยันคือ ${code} ซึ่งใช้ได้ภายใน5นาทีโปรดอย่าเปิดเผยให้ผู้อื่นทราบ

ส่งเพื่อตรวจสอบโดยปกติ10 ~ ผ่านไปใน30นาทีโปรดจำไว้ว่าหลังจากผ่าน TemplateCode (เช่น SMS_1234567)

ขั้นตอนที่2: การเชื่อมต่อแกนแบ็คเอนด์ Spring Boot (3นาที)

อย่าใช้ SDK รุ่นเก่าเราใช้ Alibaba Cloud รุ่นล่าสุดโดยตรง

V2.0

Cloud Native Java SDK รหัสมีความคล่องตัวมากขึ้น

1.แนะนำการพึ่งพา Maven

โครงการ Spring Boot ของคุณ

พ็อม.เอ็กซ์เอ็มแอล

แนะนำไลบรารีหลักของ Alibaba Cloud SMS:

เอ็กซ์เอ็มแอล

<ความพึ่งพิง>

<GroupId> com.aliyun</groupId>

<ArtifactId> dysmsapi20170525</artifactId>

2.กำหนดค่าคีย์ใน application.yml

จำหลักการสิทธิ์ขั้นต่ำของ RAM ที่เราพูดถึงในฉบับที่แล้วได้หรือไม่? ไปที่คอนโซล Alibaba Cloud RAM เพื่อสร้างบัญชีย่อยให้เท่านั้น

AliyunDysmsFullAccess

(การจัดการ SMS) สิทธิ์ในการสร้างชุดของ AK/SK กรอกที่นี่:

ยามล

Aliyun:

Sms:

Access-key-id: LTAI5tXXXXXXXXXXXX # บัญชีย่อย AK

Access-key-secret: Pn7yXXXXXXXXXXXXXXXX # บัญชีย่อย SK

Sign-name: Geek Blog # ลายเซ็นที่คุณสมัคร

Template-code: SMS_1234567 # ID แม่แบบที่คุณสมัครผ่าน

3.แพคเกจเครื่องมือส่ง SMS

สร้างบริการและคัดลอกรหัสสินค้าแห้งบริสุทธิ์ที่ฉันปรับปรุงและปรับให้เหมาะสมสำหรับคุณโดยตรง:

จาวา

Import com.aliyun.dys

Msapi20170525.Client;

Import com.aliyun.dysmsapi20170525.mo dels.SendSmsRequest;

Import com.aliyun.dysmsapi20170525.mo dels.SendSmsResponse;

Import com.aliyun.teaopenapi.mo dels.Config;

Import org.springframework .beans.factory.annotation.Value;

Import org.springframework.stereotype.Service;

@Service

Public class SmsService {

@Value("${aliyun.sms. access-key-id}")

Private String accessKeyId;

@Value("${aliyun.sms. access-key-secret}")

Private String accessKeySecret;

@Value("${aliyun.sms.sign-name}")

Private String signName;

@Value("${aliyun.sms.template-code}")

Private String templateCode;

/**

* ส่ง SMS รหัสยืนยัน

* @Param phone หมายเลขโทรศัพท์เป้าหมาย

* @Param code รหัสยืนยันแบบสุ่ม

Public boolean sendVerifyCode(String phone, String code) {

ลอง {

// 1.เริ่มต้นไคลเอนต์การกำหนดค่า

Config config = new Config()

.SetAccessKeyId (accessKeyId)

.SetAccessKeySecret (accessKeySecret);

// จุดเชื่อมต่อบริการ SMS คงที่

Config.endpoint = "dysmsapi.aliyuncs.com";

Client client = new Client(config);

// 2.ประกอบพารามิเตอร์การร้องขอ

SendSmsRequest request = new SendSmsRequest()

.SetPhoneNumbers (โทรศัพท์)

.SetSignName (signName)

.SetTemplateCode (templateCode)

// ตัวแปรจะต้องถูกแปลงเป็นรูปแบบสตริง JSON

.SetTemplateParam ("{\" code \ ":\" "code" \ "}");

// 3.ดำเนินการส่ง

SendSmsResponse response = client.sendSms(request);

// 4.ตัดสินผลการส่ง

If ("OK" .equals(response.getBody().getCode())) {

Return true;

} Else {

System.err.println("ส่ง SMS ล้มเหลวเหตุผล:" response.getBody().getMessage()));

กลับ false;

}

} จับ (Exception e) {

E.printStackTrace ();

กลับ false;

}

4.เขียนอินเตอร์เฟซทางธุรกิจ Controller

ในชั้น Controller ให้รวม Redis ของคุณ (ที่นี่ใช้รหัสเทียมแทนการแสดงตรรกะวงปิด):

จาวา

@RestController

@ RequestM

Apping ("/api/sms")

Public class SmsController {

@Autowired

Private SmsService smsService;

@Autowired

Private StringRedisTemplate redisTemplate; // ฉีด Redis

@PostMapping("/send")

Public ResponseEntity<String> sendCode(@RequestParam String phone) {

// 1.การตรวจสอบหมายเลขโทรศัพท์มือถือแบบง่าย

If (! Phone.matches ("^ 1[3-9]\\ d{9}$")) {

Return ResponseEntity.badRequest().body("รูปแบบหมายเลขโทรศัพท์ไม่ถูกต้อง");

}

// 2.กลไกป้องกันแปรง: ตรวจสอบ Redis เพื่อตรวจสอบว่าไม่มีการส่งซ้ำภายใน60วินาที

If (Boolean.TRUE.equals(redisTemplate.hasKey("SMS_LIMIT:" โทรศัพท์)) {

Return ResponseEntity.status(HttpStatus. TOO_MANY_REQUESTS).body("ส่งบ่อยเกินไปโปรดลองอีกครั้งในภายหลัง");

}

// 3.สร้างรหัสยืนยันตัวเลขสุ่ม6หลัก

String code = String.valueOf((int)((Math.random() * 9 1) * 100000));

// 4.โทรหาบริการ Alibaba Cloud เพื่อส่ง

Boolean isSuccess = smsService.sendVerifyCode (โทรศัพท์รหัส);

If (! IsSuccess) {

Return ResponseEntity.status(500).body("ส่ง SMS ล้มเหลวโปรดติดต่อผู้ดูแลระบบ");

}

// 5.ฝาก Redis กำหนดระยะเวลาการใช้งาน5นาทีตั้งค่าหนึ่ง

ขีดจำกัดการป้องกันแปรง60วินาที

RedisTemplate.opsForValue ().set("SMS_CODE:" phone, code, 5, TimeUnit.MINUTES);

RedisTemplate. opsForValue().set("SMS_LIMIT:" phone, "1", 60, TimeUnit.SECONDS);

Return ResponseEntity.ok("ส่งรหัสยืนยันสำเร็จ");

}

ขั้นตอนที่3: คอมโพเนนต์นับถอยหลัง Vue เขียน (1นาที)

แบ็คเอนด์เสร็จแล้วเราต้องการป้องกันไม่ให้ผู้ใช้คลิกปุ่ม "ส่ง" ที่ส่วนหน้าเราต้องทำการนับถอยหลัง60วินาทีมาตรฐาน

ที่นี่

Vue 3 (Composition API) Axios

ตัวอย่างเช่นป้อนรหัสที่ใช้งานง่ายที่สุดโดยตรง:

ส่วนรหัส

<Button: disabled = "isCounting" @ click = "handleSend">

{{IsCounting? '$ {Countdown} รับอีกครั้งในไม่กี่วินาที': 'รับรหัสยืนยัน' }}

</Button>

</div>

</Template>

Import {ref} from 'vue';

Import axios from 'axios';

Const phone = ref('');

Const countdown = ref(60);

Const isCounting = ref(false);

Let timer = null;

Const handleSend = async () => {

ถ้าไม่ใช่ /^ 1[3-9]\ d{9}$/.test(phone.value)) {

Alert ('โปรดป้อนหมายเลขโทรศัพท์มือถือที่ถูกต้อง');

กลับ;

}

ลอง {

// เรียกอินเทอร์เฟซแบ็คเอนด์

Const res = awa

It axios.post('/api/sms/send? โทรศัพท์ = ${phone.value}');

Alert (res.data);

// เปิดใช้งานนับถอยหลัง

StartCountdown ();

} Catch (error) {

Alert (error.response?. Data || 'คำขอล้มเหลว');

}

};

Const startCountdown = () => {

IsCounting.value = จริง;

Countdown.value = 60;

Timer = setInterval(() => {

Countdown. value --;

If (countdown. value <= 0) {

ClearInterval (timer);

IsCounting.value = false;

}

}, 1000);

};

</Script>

คู่มือการหลีกเลี่ยงหลุมในสภาพแวดล้อมการผลิต (ประสบการณ์การดำเนินงานและการบำรุงรักษาเลือดและน้ำตา)

ระวังอินเทอร์เฟซถูกแฮกเกอร์ "ระเบิดข้อความ"! ทันทีที่อินเทอร์เฟซออนไลน์แฮกเกอร์จะใช้สคริปต์อัตโนมัติเพื่อขออินเทอร์เฟซ/api/sms/send ของคุณด้วยหมายเลขโทรศัพท์มือถือแบบสุ่มนับหมื่นคุณสามารถหักยอดคงเหลือในบัญชี Alibaba Cloud ของคุณได้ในคืนเดียวการป้องกันกฎหมายเหล็ก: นอกเหนือจากการนับถอยหลัง60วินาทีที่ส่วนหน้าและการใช้ Redis เพื่อจำกัดความถี่60วินาทีของหมายเลขโทรศัพท์มือถือเดียวในส่วนหลังสำหรับอินเทอร์เฟซสำหรับการส่งข้อความสั้นคุณต้องเพิ่ม "รหัสยืนยันกราฟิก" หรือ "การตรวจสอบแถบเลื่อนของเครื่องจักร" เฉพาะเมื่อปริศนาประสบความสำเร็จตามคำขอทางกฎหมายที่ด้านหลังจะส่งข้อความ

ทำให้เกิดข้อผิดพลาดในการรายงาน "การจำกัดความถี่" ของ Alibaba Cloud Alibaba Cloud SMS มาพร้อมกับชุดกลไกการควบคุมการไหลและการป้องกันการรูด (หมายเลขโทรศัพท์มือถือเดียวไม่เกิน1หมายเลขภายใน1นาทีไม่เกิน5หมายเลขภายใน1ชั่วโมงและไม่เกิน10หมายเลขใน1วัน). หากคุณส่งข้อความถึงตัวเองอย่างบ้าคลั่งในระหว่างการทดสอบในพื้นที่จู่ๆคุณก็รายงานข้อผิดพลาด isv. BUSINESS_LIMIT_CONTROL อย่าตกใจไม่ใช่ว่ารหัสไม่ถูกต้องแต่คุณถูกจำกัดโดย Alibaba Cloud อย่างเป็นทางการและจะปลดบล็อกโดยอัตโนมัติในวันพรุ่งนี้

เมื่อชุดของลูปปิดด้านหน้าและด้านหลังนี้ลงแอปพลิเคชันไมโครเซอร์วิสของคุณจะมีความสามารถในการแจ้งเตือนข้อความสั้นที่สอดคล้องและปลอดภัยอย่างเป็นทางการรีบปรับใช้และลอง!