Alibaba Cloud SMS（ショートメッセージサービス）API接続ガイド：VueおよびSpring Bootをサポート
ユーザー登録やログイン認証、あるいは注文状況の通知に至るまで、SMSサービスは不可欠な存在です。
多くの初心者は、Alibaba Cloudの公式SMSドキュメントを読むと、AccessKeyや署名、テンプレート、SDKといった概念の数々に混乱してしまいがちです。さらに、公式のサンプルコードは往々にして冗長で、自分のフロントエンド／バックエンドプロジェクトにどう統合すればよいのか、すぐには見当がつかないものです。
今日は無駄話は抜きにして、いきなり実戦です。最も身近な“生きた文章のスタイル”でご案内します。
5分で阿里雲メールサービス (SMS) を走らせ、バックエンドSpring Bootコアロジックパッケージ、そしてフロントエンドVueの完全なカウントダウンが実現した。
コアインタラクションフロー
コードを書く前に、まず認証用SMSのクローズドループのロジックを頭の中でイメージしておきましょう。
プレーンテキスト
【Vueフロントエンド】 -- 1.携帯電話番号を入力して、クリックして送信 --> 【Spring Bootバックエンド】
▲ │
│ 2. 6桁のランダムな数字を生成する
│ 3. Redisに格納する（有効期限を5分に設定）
│ 4. Alibaba Cloud APIを呼び出して送信する
│ │
│ ▼
【ユーザーの携帯電話】＜─── 5. SMS認証コードを受信 ───── 【Alibaba Cloud SMSゲートウェイ】
第一ステップ: 阿里雲コンソールの開設と資格申請 (2分)
国内では詐欺防止の取り締まりが非常に厳しくなっているため、SMSサービスは
まず資格と署名を申請しなければならない
APIを直接呼び出すと、権限エラーが発生します。
1. サービスの開通
Alibaba Cloudコンソールにログインし、検索してください
「メールサービス」
、クリックして開通してください（開通は無料、送信は1件ごとに課金されます。お手軽に数十元のデータパッケージをご購入いただくことをおすすめします）。
2. SMS署名の申請（あなたは誰ですか）
Smsサービスコンソールに入り、左側で「国内メッセージ」をクリックします。
署名名：通常はあなたのウェブサイト名、アプリ名、または会社の略称（例：Geekブログ）です。
署名の出所：個人開発者の場合は、一般に「既に備え付けられたウェブサイト」または「実在するアプリケーション」を選択し、必要な書類を提出する必要があります
あなたのICP登録番号または応用スクリーンショット。
3. SMSテンプレートの申請（送信する内容）
「テンプレート管理」に切り替え $\rightarrow$ 「テンプレートを追加」します。
テンプレートタイプ: 「認証コード」を選択します。
テンプレート名: ログイン認証コードの場合。
テンプレートの内容：固定形式とし、変数は ${code} で表します。例えば、システムにログインしています。認証コードは :{ {code} で、5分以内に有効です。他人に漏らしてはいけません。
審査を提出して、通常10 ~ 30分で通過できます。承認後に取得したTemplateCode（例：SMS_1234567）を記録しておいてください。
ステップ2: バックエンドSpring Bootコアドッキング (3分)
古い旧バージョンのSDKは使わないでください。私たちは直ちにAlibaba Cloudの最新版を採用します。
V2.0
クラウドネイティブJava SDKは、コードがより合理化されています。
1. Mavenの依存関係を導入する
Spring Bootプロジェクトで
pom.xml
にalibaba cloud smsコアライブラリを導入しました:
XML
<依存関係>
<groupId>com.aliyun</groupId>
<artifactId>dysmsapi20170525</artifactId>
<Version> 3.0.0</version> </グリジェンス>
2. application.ymlに秘密鍵を設定する
前回話したRAM最小権限の原則を覚えていますか?阿里雲RAMコンソールにサブアカウントを作って、付与するだけです
0 dysmsfullaccess
(メール管理) 権限、一連のAK/SKを生成してここに記入します
ヤムル
Aliyun:
ショートメッセージサービス:
アクセスキーID：LTAI5tXXXXXXXXXXXX # サブアカウントのAK
アクセスキー秘密鍵：Pn7yXXXXXXXXXXXXXXXX # サブアカウントのSK
署名名：ギークブログ # 申請が承認された署名
テンプレートコード：SMS_1234567 # 承認されたテンプレートのID
3.パッケージショートメッセージ送信ツール類
サービスを一つ作成し、以下に私が簡潔化・最適化した実用的なコードをそのままコピーしてください。
ジャバ
import com.aliyun.dys
Msapi2017525.client;
Import com.Dysmsapi2017525.mo dels.SendSmsRequest;
Import com.Dysmsapi2017525.mo dels.SendSmsResponse;
import com.aliyun.teaopenapi.models.Config;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;
@ Service
public class SMSサービス {
@ Value("${aliyun.sms.access-key-id}")
Private String access keyid;
@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;
/**
* 認証コードのメールを送る
* @ Param phoneターゲット携帯電話番号
* @param codeランダムな認証コード
*/
Public boolean sendVerifyCode(String phone, String code) {
Try {
// 1. クライアントの設定を初期化する
Config config = new Config()
.Setaccessキーid (accessキーid)
.setAccessKeySecret(accessKeySecret);
// 固定されたsmsサービスアクセスポイント
Config.endpoint = "dysmsapi.aliyuncs.com";
Client client = newclient (config);
// 2.アセンブリ要求パラメータ
SendSmsRequest request = newsendsmsrequest ()
.SetPhoneNumbers (phone)
.SetSignName (signName)
.SetTemplateCode (templateCode)
// 変数は必ずJSON文字列形式に変換する必要があります
.SetTemplateParam ("{\" code \ ":\" code "\"}");
// 3.送信の実行
SendSmsResponse response = client.sendSms(request);
// 4.送信結果を判断する
If ("OK".equals(response.getBody().getCode())) {
Returtrue;
} Else {
System.ットウェー ("smsの送信に失敗しました。原因: "response.getBody().getMessage();
Returfalse;
}
} catch (Exception e) {
E.printStackTrace();
Returfalse;
}
}
}
4.コントローラ業務インターフェースの作成
Controller層でRedisを結合します (ここでは論理閉ループを示す代わりに擬似コードを使用します)
ジャバ
@ RestController
@ RequestM
アプリケーション（「/api/sms」）
public class SMSコントローラー {
@自動接続
プライベートなSmsService smsService;
@自動接続
private StringRedisTemplate redisTemplate; // Redisを注入
@PostMapping("/send")
public ResponseEntity<String> コード送信(@RequestParam String電話番号) {
// 1. 簡易な携帯電話番号の正規表現による検証
もしでなければ電話番号.matches("^(1[3-9]\\d{9})$")) {
return ResponseEntity.badRequest().body("電話番号の形式が正しくありません");
}
// 2. 不正送信防止機構：Redisをチェックし、60秒以内に重複送信がないことを確認する
if (Boolean.TRUE.equals(redisTemplate.hasKey("SMS_LIMIT:" + phone))) {
return ResponseEntity.status(HttpStatus.TOO_MANY_REQUESTS).body("送信頻度が高すぎます。しばらくしてから再度お試しください");
}
// 3. 6桁のランダムな認証コードを生成する
文字列コード = String.valueOf((int)((Math.random() * 91) * 100000));
// 4. Alibaba Cloudサービスを呼び出して送信する
boolean isSuccess = smsService.sendVerifyCode(電話番号, コード);
もしでなければ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);
Returresponseentity.ok (「認証コードの送信に成功しました」);
}
}
ステップ3: フロントエンドVueカウントダウンコンポーネント作成 (1分)
バックエンドが終わったので、フロントエンドはユーザーの「送信」ボタンを防ぐために、標準的な60秒カウントダウンをする必要があります。
ここは
Vue 3 (Composition API) Axios
例として、最も直感的なコードは次のとおりです
コードセグメント
<Template>
<Div class = "sms-box">
<Input type = "text" v-model = "phone" 応えホルダー = "携帯番号を入力してください" />
<Button: disabled = "isCounting" @ click = "handleSend">
{{IsCounting?'${countdown}秒後に再度取得します。
</Button>
</div>
</Template>
<Scriptセットアップ>
Import {ref} from 'vue';
Import axios from 'axos ';
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 (「正しい携帯電話番号を入力してください」);
Return;
}
試みる {
// バックエンドインタフェースの呼び出し
Const res = awa
Itaxios.post('/api/sms/send?phone =${ phone.value}');
Alert (res.data);
// アクティブカウントダウン
StartCountdown ();
} Catch (error) {
Alert (error.response?.data | | 'リクエスト失敗');
}
};
Const startCountdown = () => {
IsCounting.value = true;
Countdown.value = 60;
Timer = setInterval(() => {
Countdown.value --;
If (countdown.value <= 0) {
ClearInterval (timer);
IsCounting.value = false;
}
}, 1000);
};
</Script>
生産環境ピット回避ガイド (輸送・維持・血涙経験)
インターフェイスがハッカーに「メール爆撃」されたことに注意してください! インターフェイスがオンラインになると、ハッカーは自動スクリプトで数万個のランダムな携帯電話番号を持って、あなたの/api/sms/sendインターフェイスを要求します。一晩であなたの阿里雲口座の残高を全部差し引くことができます。鉄則防御: フロントエンドが60秒カウントダウンし、バックエンドがRedisでシングル携帯電話番号の60秒頻度を制限するほか、メールを送るインターフェイスに対して強制的に「グラフィック検証コード」または「マンマシンスライダー検証」を追加しなければなりません。パズルが成功した合法的な要求だけが、バックエンドはメールを送る。
阿里雲の「頻度制限」をトリガーした阿里雲メール公式には、1つの携帯電話番号が1分以内に1本、1時間以内に5本を超えない1日以内に10本を超えない。もしあなたが地元のテストで狂ったように自分にメールを送ったら、突然isv.Business _ limit_controlをエラーにして、慌てないで、コードが間違っているのではなく、あなたが阿里雲の公式に制限されて、明日自動的に開封されます。
この一連の前後のクローズドループが下りてきて、あなたのマイクロサービスアプリケーションは正式にコンプライアンス、安全なショートメッセージ通知能力を備えています。早く配置してみてください。
