基于Shopify GraphQL API的6位数一次性验证码登录实现问询

核心实现思路 #

整个流程分为两步：

1. 收集客户邮箱后，调用Shopify GraphQL接口发送6位一次性验证码到客户邮箱
2. 客户输入验证码后，调用验证接口，校验通过后获取客户登录凭证（access token），以此维持登录状态

1. 发送一次性验证码到客户邮箱 #

使用customerSendOtp mutation触发验证码发送，该接口会验证邮箱是否对应店铺已存在的客户，若存在则发送6位验证码至目标邮箱。

请求示例 #

mutation customerSendOtp($email: String!) {
  customerSendOtp(email: $email) {
    customerUserErrors {
      code
      message
    }
  }
}

变量参数 #

• email: 客户注册时使用的邮箱地址

处理逻辑 #

• 若返回的customerUserErrors为空，说明验证码已成功发送
• 常见错误：NOT_FOUND（邮箱未对应任何客户）、TOO_MANY_REQUESTS（发送频率超限）

2. 验证验证码并完成登录 #

使用customerAccessTokenCreateWithOtp mutation验证客户输入的验证码，校验通过后返回customerAccessToken，该token是后续客户身份验证的核心凭证。

请求示例 #

mutation customerAccessTokenCreateWithOtp($email: String!, $otp: String!) {
  customerAccessTokenCreateWithOtp(email: $email, otp: $otp) {
    customerAccessToken {
      accessToken
      expiresAt
    }
    customerUserErrors {
      code
      message
    }
  }
}

变量参数 #

• email: 客户邮箱（需和发送验证码时的邮箱一致）
• otp: 客户输入的6位一次性验证码

处理逻辑 #

• 若customerAccessToken存在，说明登录成功，将accessToken存储到安全位置（如HttpOnly Cookie）
• 常见错误：INVALID_OTP（验证码错误）、EXPIRED_OTP（验证码过期）、NOT_FOUND（邮箱未对应客户）

最佳实践 #

• 频率限制：Shopify对验证码发送请求有频率限制，前端需添加防抖或提示，避免客户频繁触发请求
• 安全存储：customerAccessToken需存储在HttpOnly、Secure的Cookie中，禁止存放在localStorage，防止XSS攻击
• 错误反馈：给客户明确的错误提示，比如“验证码已过期，请重新获取”“验证码错误，请检查后输入”
• 会话续期：customerAccessToken有过期时间（默认1小时），可在过期前调用customerAccessTokenRenew mutation续期
• 后端代理：公网部署的应用需通过后端代理发送GraphQL请求，避免直接在前端暴露Storefront API密钥
• 邮箱校验：前端先校验邮箱格式，减少无效请求

内容的提问来源于stack exchange，提问作者Wassef Hassine