useSMS

简化 App 的短信发送操作。

getCaptchaCode

获取图形验证码，会返回图形验证码的图片地址，可以用于 img 标签的图片显示。

TIP

所有短信发送操作都要提交图形验证码的答案，需要调用该接口获取图形验证码让用户输入答案。

Supported Platforms:

Browser

Electron

App

Server

Scriptlet

Type Declarations

declare function getCaptchaCode(): Promise<{
  /**
   * 图形验证码的图片 URL
   */
  imgUrl: string

  /**
   * 请求图形验证码时的随机字符串
   * @tips 调用 `sendCode` 方法时需要传递过去
   */
  randomStr: string
}>

Example:

vue

<template>
  <img :src="captchaCode" alt="图形验证码" />
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useSMS } from '@lunarxyz/core'

const { getCaptchaCode } = useSMS()
const captchaCode = ref<string>('')

onMounted(async () => {
  captchaCode.value = await getCaptchaCode()
})
</script>

sendCode

发送短信验证码。

Supported Platforms:

Browser

Electron

App

Server

Scriptlet

Type Declarations

/**
 * 发送验证码
 */
declare function sendCode(options: SendCodeOptions): Promise<SendCodeResult>

/**
 * 短信发送选项
 */
interface SendCodeOptions {
  /**
   * 短信类型
   */
  type: 'login' | 'register'

  /**
   * 手机号码
   */
  phoneNumber: string

  /**
   * 图形验证码的答案
   * @tips 一般是让用户计算图形验证码的答案后填写
   */
  answer: string

  /**
   * 请求图形验证码时的随机字符串
   * @tips 可以通过 `getCaptchaCode` 方法获取
   */
  randomStr: string
}

/**
 * 短信发送状态和失败消息
 */
interface SendCodeResult {
  /**
   * 发送请求是否成功
   */
  isOk: boolean

  /**
   * 接口返回的消息内容
   */
  msg: string

  /**
   * 登录短信如果响应 `{"code":0,"msg":"手机号未注册","data":"regist"}`
   * 代表当前手机号未注册，并且已下发的是注册短信，需要走注册流程
   */
  data?: 'regist'
}

Example:

vue

<template>
  <input type="text" v-model="phoneNumber" placeholder="手机号" />
  <input type="text" v-model="answer" placeholder="图形验证码" />
  <img :src="captchaCode" alt="图形验证码" />
  <button @click="handleSendCode">发送短信</button>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useSMS } from '@lunarxyz/core'

const { getCaptchaCode, sendCode } = useSMS()
const phoneNumber = ref<string>('')
const captchaCode = ref<string>('')
const answer = ref<string>('')
const randomStr = ref<string>('')

async function handleSendCode() {
  const { isOk, msg } = await sendCode({
    type: 'login',
    phoneNumber: phoneNumber.value,
    answer: answer.value,
    randomStr: randomStr.value,
  })
  console.log({ isOk, msg })
}

onMounted(async () => {
  const res = await getCaptchaCode()
  captchaCode.value = res.imgUrl
  randomStr.value = res.randomStr
})
</script>

useSMS #

getCaptchaCode #

sendCode #

useSMS

getCaptchaCode

sendCode