阿里云短信服务与微信小程序对接进行注册

一、首先需要阿里云官网开通短信服务，然后记录下以下关键字段【accessKeyId】，【accessKeySecret】，【短信签名】，【模板CODE】

二、进入官方开发指南下载SDKDemo

做好以上准备工作后就开始准备撸码了

下载好的SDK包应该包含以下文件

api_demo(短信服务API接口调用DEMO工程)
api_sdk(短信服务API接口依赖的SDK)
msg_demo(短信回执消息的DEMO)
msg_sdk(短信回执消息的SDK)

我们只需要前面两个api开头的文件就行了。后面的暂时不用，可以删掉。

先把最重要的api_sdk文件夹随便放到一个服务器的路径下（方便调用）

然后我们就需要修改api_demo文件目录下的SmsDemo.php文件了

<?phpini_set("display_errors", "on");
//自动加载api_adk
require_once $_SERVER['DOCUMENT_ROOT'].'/api_sdk/vendor/autoload.php';use Aliyun\Core\Config;
use Aliyun\Core\Profile\DefaultProfile;
use Aliyun\Core\DefaultAcsClient;
use Aliyun\Api\Sms\Request\V20170525\SendSmsRequest;
use Aliyun\Api\Sms\Request\V20170525\SendBatchSmsRequest;
use Aliyun\Api\Sms\Request\V20170525\QuerySendDetailsRequest;// 加载区域结点配置
Config::load();/*** Class SmsDemo** 这是短信服务API产品的DEMO程序，直接执行此文件即可体验短信服务产品API功能* (只需要将AK替换成开通了云通信-短信服务产品功能的AK即可)* 备注:Demo工程编码采用UTF-8*/
class SmsDemo
{static $acsClient = null;/*** 取得AcsClient** @return DefaultAcsClient*/public static function getAcsClient() {//产品名称:云通信短信服务API产品,开发者无需替换$product = "Dysmsapi";//产品域名,开发者无需替换$domain = "dysmsapi.aliyuncs.com";// TODO 此处需要替换成开发者自己的AK (https://ak-console.aliyun.com/)$accessKeyId = "xxxxxxxxxxxxx"; // AccessKeyId$accessKeySecret = "xxxxxxxxxx"; // AccessKeySecret// 暂时不支持多Region$region = "cn-hangzhou";// 服务结点$endPointName = "cn-hangzhou";if(static::$acsClient == null) {//初始化acsClient,暂不支持region化$profile = DefaultProfile::getProfile($region, $accessKeyId, $accessKeySecret);// 增加服务结点DefaultProfile::addEndpoint($endPointName, $region, $product, $domain);// 初始化AcsClient用于发起请求static::$acsClient = new DefaultAcsClient($profile);}return static::$acsClient;}/*** 发送短信* @return stdClass*/public static function sendSms($mobile,$sendCode) {// 初始化SendSmsRequest实例用于设置发送短信的参数$request = new SendSmsRequest();//可选-启用https协议//$request->setProtocol("https");// 必填，设置短信接收号码$request->setPhoneNumbers($mobile);// 必填，设置签名名称，应严格按"签名名称"填写，请参考: https://dysms.console.aliyun.com/dysms.htm#/develop/sign$request->setSignName("优维网络");// 必填，设置模板CODE，应严格按"模板CODE"填写, 请参考: https://dysms.console.aliyun.com/dysms.htm#/develop/template$request->setTemplateCode("SMS_20019xxxx");// 可选，设置模板参数, 假如模板中存在变量需要替换则为必填项$request->setTemplateParam(json_encode(array(  // 短信模板中字段的值"code"=>$sendCode['code'],"product"=>"dsd"), JSON_UNESCAPED_UNICODE));// 可选，设置流水号$request->setOutId("yourOutId");// 选填，上行短信扩展码（扩展码字段控制在7位或以下，无特殊需求用户请忽略此字段）$request->setSmsUpExtendCode("1234567");// 发起访问请求$acsResponse = static::getAcsClient()->getAcsResponse($request);}
}

修改好api文件后，我们就需要创建一个php文件处理小程序传入的值和调用api了

<?php
//引入刚才修改好的SmsDemo.php文件
require_once "SmsDemo.php";
//实例化类
$sms = new SmsDemo();
//接收小程序传入的电话号码
$mobile = $_POST['mobile'];
//生产验证码
$code = rand(1000,9999);
$sendCode = array("code"=>$code);
//调用刚才更改的SmsDemo类中的发送验证码方法
$res = $sms->sendSms($mobile,$sendCode);
//给小程序返回生成的验证码
$res['phone_code']= $code;
$res['mobile']= $mobile;
echo json_encode($res);

至此服务器端就写完了，下面是小程序的代码

首先上wxml文件代码

<!--pages/register/register.wxml-->
<view class="mobile-container"><view class='row'><input class='line' type='text' placeholder='用户名' confirm-type='确认' bindinput='userChange'></input></view><view class='row'><input class='line' type='password' placeholder='请输入您的密码' confirm-type='确认' bindinput='passwordChange'></input></view><view class='row'><input class='line' type='password' placeholder='再次确认密码' confirm-type='确认' bindinput='confirmPassword'></input></view><view class='row'><input class='line' type='email' placeholder='邮箱' confirm-type='确认' bindinput='bindEmail'></input></view><view class='row'><input class='line' type='number' placeholder='手机号' confirm-type='确认' bindinput='mobileChange'></input></view><view class='row'><input class='code-input' type='number' placeholder='验证码' confirm-type='确认' bindinput='codeChange'></input><button class='code-btn' bindtap="sendCode" disabled='{{sendDisabled}}'>{{codeText}}</button></view><view class='row'><button class='submit' bindtap="bindRegister" type='primary'>提交</button></view>
</view>

wxss代码：

/* pages/register/register.wxss */
.mobile-container {height: 100%;display: flex;flex-direction: column;box-sizing: border-box;padding: 0 40rpx;font-size: 28rpx;}input {border-bottom: 1px solid #E5E5E5;height: 80rpx;}.row {display: flex;height: 80rpx;margin: 20rpx 0;}.row .line {flex: 5;}.row .code-input {flex: 5;}.row .code-btn {flex: 2;font-size: 24rpx;text-align: center;line-height: 60rpx;}.row .submit {width: 100%;border-radius: 20rpx;height: 90rpx;line-height: 60rpx;font-size: 35rpx;}

最重要的js代码：

// pages/register/register.js
var app = getApp()
var url = "https://www.ailaiyun.com/api_demo/"
Page({/*** 页面的初始数据*/data: {//用户名user_name:'',//密码password:'',//确认密码confirm_password:'',//邮箱email:'',//用户输入的手机号mobile: '',//用户输入的验证码code: '',//服务器返回的验证码res_code: '',//用来控制获取验证码倒计时按钮的时效性sendDisabled: false,forbiddenTime: 0,codeText: '获取验证码'},/*** 用户名输入*/userChange:function(e){var that = this;that.setData({user_name: e.detail.value});},/*** 密码输入*/passwordChange:function(e){var that = this;that.setData({password: e.detail.value});},/*** 密码确认输入*/confirmPassword:function(e){var that = this;that.setData({confirm_password: e.detail.value});},/*** 邮箱输入*/bindEmail: function (e) {var that = this;that.setData({email: e.detail.value});
},/*** 手机号输入*/mobileChange: function (e) {var that = this;that.setData({mobile: e.detail.value});},/*** 验证码输入*/codeChange: function (e) {var that = this;that.setData({code: e.detail.value});},/*** 获取验证码*/sendCode: function () {var that = this;let mobile = that.data.mobile;if (!mobile) {wx.showToast({title: '请输入手机号',icon: 'none'})return;}if (!that.mobileValid(mobile)) {wx.showToast({title: '请输入正确的手机号',icon: 'none'})return;}wx.request({url: url + 'SendCode.php',data: {mobile: mobile},method: 'POST',header: { "Content-Type": "application/x-www-form-urlencoded" },success: function (res) {console.log(res.data);let data = res.data;that.setData({sendDisabled: true,res_code: data.phone_code,});that.reflashTime(90);}})},/*** 提交注册*/bindRegister: function () {var that = thislet mobile = that.data.mobile;let user_name = that.data.user_name;let password = that.data.password;let confirm_password = that.data.confirm_password;let code = that.data.code;let res_code = that.data.res_code;let email = that.data.email;if (!user_name) {wx.showToast({title: '请输入用户名',icon: 'none'})return;}if (!password) {wx.showToast({title: '请输入密码',icon: 'none'})return;}if (!confirm_password) {wx.showToast({title: '您必须再次输入密码',icon: 'none'})return;}if (password != confirm_password) {wx.showToast({title: '两次输入密码不一致',icon: 'none'})return;}if (!email) {wx.showToast({title: '请输入您的邮箱',icon: 'none'})return;}if (!that.emailValid(email)) {wx.showToast({title: '请输入正确的邮箱地址',icon: 'none'})return;}if (!mobile) {wx.showToast({title: '请输入手机号',icon: 'none'})return;}if (!code) {wx.showToast({title: '请输入验证码',icon: 'none'})return;}if (code == res_code) {var openid = wx.getStorageSync('openid');//将手机号添加入用户信息表中wx.request({url: url + 'addUserPhone.php',data: {user_name: that.data.user_name,password: that.data.password,mobile: that.data.mobile,email: that.data.email},method: 'POST',header: { "Content-Type": "application/x-www-form-urlencoded" },success: function (res) {console.log(res);//提示用户wx.showToast({title: '注册成功',icon: 'success',success: function () {setTimeout(function () {wx.navigateTo({url: '../login/login',});}, 1000);}});}})} else {wx.showToast({title: '验证码错误！',icon:'none'})return;}},/*** 刷新验证码重新获取时间*/reflashTime(time) {var that = this;let index = setInterval(function () {time -= 1;if (time <= 0) {that.setData({forbiddenTime: 0,sendDisabled: false,codeText: '获取验证码'});index = null;} else {that.setData({forbiddenTime: time,codeText: '重新获取' + time + 'S'});}}, 1000);},/*** 邮箱校验*/emailValid(email) {var reMail = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;if (!reMail.test(email)) {return false;} else {return true;}
},/*** 手机号校验*/mobileValid(mobile) {var rePhone = /^[1][3,4,5,7,8][0-9]{9}$/;if (!rePhone.test(mobile)) {return false;} else {return true;}},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var that = this},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

到这里已经能实现调用阿里云的短信功能进行发送短信验证了

点击【提交】按钮我这里简单写个addUserPhone.php文件测试能接收到小程序的值。后面的处理我就不详述了。

<?php
$mobile = $_POST['mobile'];
$user_name = $_POST['user_name'];
$password= $_POST["password"];
$email= $_POST["email"];
}
echo json_encode($mobile.$user_name.$password.$email);

原文地址：https://www.ailaiyun.com/%e9%98%bf%e9%87%8c%e4%ba%91%e7%9f%ad%e4%bf%a1%e6%9c%8d%e5%8a%a1%e4%b8%8e%e5%be%ae%e4%bf%a1%e5%b0%8f%e7%a8%8b%e5%ba%8f%e5%af%b9%e6%8e%a5%e8%bf%9b%e8%a1%8c%e6%b3%a8%e5%86%8c.html

阿里云短信服务与微信小程序对接进行注册相关推荐

Zabbix 3.4.3 使用阿里云短信服务进行报警
一.阿里云短信服务有时候微信报警或者邮寄报警我们可能会有遗忘,今天我主要介绍使用阿里云的短信服务进行短信报警. 1.1.首先开通阿里云短信服务 1.2 创建签名签名用途选择:公众号或小程序的全称或 ...
微信小程序云开发，使用阿里云短信服务，搜索员工生日定期发送短信。
相关API文档地址: 阿里云短信服务API文档地址小程序云开发云函数正则匹配API文档地址小程序云开发云函数定时触发器 1.登录阿里云,购买短信服务并添加签名和模板 2., 登录阿里云,鼠标放在右 ...
使用阿里云短信服务API实现短信验证码以及短信服务通知
使用阿里云短信服务API实现短信验证码以及短信服务通知前言一 .短信调用简要说明二 .官方不带签名原生态测试demo 调用结果如下三 .以上为不带模板和签名的API调用结果下面加入签名和模板 ...
SpringBoot-短信验证码-快速入门Demo(含redis)（手把手教你开通阿里云短信服务到写出个最终代码来）
B站小狂神-此博客的内容就是看了这个视频的总结(博主自己写的哦~并非转载) 视频链接-[狂神说]通俗易懂的阿里云短信业务实战教程(露脸) 您是否还在为别人的项目有短信功能自己的却没有? 您是否还在为自 ...
阿里云短信服务（申请与代码）
目前阿里云短信签名审核更加严格了,如果不通过请转至<腾讯云短信申请与代码>,腾讯云简单易通过记录申请短信服务签名的坑短信服务签名申请注意事项: 自2020年12月17日开始,阿里云短信 ...
阿里云短信服务初次试用
阿里云短信服务简单使用提前声明,本人只是简单的试用了一下,终究还是止步于阿里复杂的业务逻辑(与开发无关,api还是很简单的),不仅又想起当年试用阿里的服务器时的场景,以及前几天阿里云出问题的新闻.. ...
阿里云短信服务的使用方法
本人个人博客地址https://www.lightingsui.com 介绍最近由于项目的业务需要,想使用验证码登录系统,所以要找一个短信平台,第一目标就是阿里云的短信服务平台,说实话,之前在阿里云 ...
对接阿里云短信服务（附视频教程）
阿里云短信服务文档使用指引: https://help.aliyun.com/document_detail/59210.html B站视频教程链接: https://www.bilibili.com ...
Java实现短信验证码(阿里云短信服务)
前言: 很多时候我们做的项目都需要上图这样的验证码来帮助我们完成更好的功能,比如:什么登录注册,忘记密码需要发送手机验证码之类的啊...下面分享我今天通过阿里云短信服务实现的短信验证码,操作都很简单, ...

阿里云短信服务与微信小程序对接进行注册

阿里云短信服务与微信小程序对接进行注册相关推荐

最新文章

热门文章