白帽工坊：邮件系统实现思路-CSDN博客

本文链接：https://blog.csdn.net/zhao9585/article/details/147894294

白帽工坊：邮件系统实现思路-实现邮箱验证功能

1. 功能概述

本教程将介绍如何在Spring Boot项目中实现邮箱验证功能。该功能主要用于用户注册时验证邮箱的真实性，提高系统安全性。主要功能包括：

发送验证邮件
生成验证链接
验证邮箱有效性
美观的邮件模板

2. 后端实现

2.1 添加依赖

在pom.xml中添加邮件相关依赖：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-mail</artifactId>
</dependency>

2.2 配置邮件服务

在application.properties或application.yml中添加邮件配置：

spring:
  mail:
    host: smtp.qq.com
    port: 587
    username: your-email@qq.com
    password: your-email-password
    properties:
      mail:
        smtp:
          auth: true
          starttls:
            enable: true
            required: true

2.3 实现邮件服务

创建EmailService.java：

@Service
public class EmailService {
    @Autowired
    private JavaMailSender mailSender;

    @Value("${frontend.url}")
    private String frontend;

    public void sendVerificationEmail(String to, String token) {
        try {
            MimeMessage message = mailSender.createMimeMessage();
            MimeMessageHelper helper = new MimeMessageHelper(message, true, "UTF-8");

            // 设置发件人信息
            helper.setFrom("your-email@qq.com", "Your Company Name");
            helper.setTo(to);
            helper.setSubject("邮箱验证 - 安全确认");

            // 构建HTML格式的邮件内容
            String verificationLink = frontend + token;
            String htmlContent = """
            <!DOCTYPE html>
            <html>
            <head>
                <meta charset="UTF-8">
                <style>
                    body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; }
                    .container { max-width: 600px; margin: 0 auto; padding: 20px; }
                    .header { text-align: center; padding: 20px 0; }
                    .content { background: #f9f9f9; padding: 20px; border-radius: 5px; }
                    .button { 
                        display: inline-block;
                        padding: 12px 24px;
                        background-color: #4CAF50;
                        color: white;
                        text-decoration: none;
                        border-radius: 4px;
                        margin: 20px 0;
                    }
                    .warning { 
                        background-color: #fff3cd;
                        border: 1px solid #ffeeba;
                        color: #856404;
                        padding: 10px;
                        border-radius: 4px;
                        margin: 10px 0;
                    }
                </style>
            </head>
            <body>
                <div class="container">
                    <div class="header">
                        <h2>邮箱验证</h2>
                    </div>
                    
                    <div class="content">
                        <h3>尊敬的会员：</h3>
                        <p>感谢您注册！为了确保您的账户安全，请验证您的邮箱地址。</p>
                        
                        <div style="text-align: center;">
                            <a href="%s" class="button">验证邮箱地址</a>
                        </div>
                        
                        <p>或者复制以下链接到浏览器地址栏：</p>
                        <p style="word-break: break-all;">%s</p>
                        
                        <div class="warning">
                            <strong>安全提示：</strong>
                            <ul>
                                <li>此链接有效期为24小时</li>
                                <li>请勿将验证链接分享给他人</li>
                                <li>如非本人操作，请忽略此邮件</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </body>
            </html>
            """.replace("%s", verificationLink);

            helper.setText(htmlContent, true);
            mailSender.send(message);

        } catch (Exception e) {
            throw new RuntimeException("发送验证邮件失败", e);
        }
    }
}

3. 前端实现

3.1 邮箱验证组件

创建VerifyEmail.vue组件：

<template>
  <div class="verify-email-container">
    <div class="background-animation"></div>
    <div class="content-wrapper">
      <div class="logo-section">
        <img src="@/assets/logo/logo/信息.png" alt="Logo" class="logo" />
        <h1 class="site-name">白帽工坊-网络攻防安全学习平台</h1>
      </div>
      
      <el-card class="verify-card glass-effect">
        <template #header>
          <div class="card-header">
            <el-icon :size="24"><Message /></el-icon>
            <span>邮箱验证</span>
          </div>
        </template>

        <div class="verify-content">
          <div v-if="verifying" class="verifying">
            <el-icon class="loading-icon" :size="32"><Loading /></el-icon>
            <p class="status-text">正在验证邮箱，请稍候...</p>
          </div>

          <div v-else-if="verificationSuccess" class="success">
            <el-icon class="success-icon" :size="32"><CircleCheck /></el-icon>
            <h2 class="status-title">验证成功！</h2>
            <p class="status-text">您的邮箱已验证成功</p>
            <el-button type="primary" @click="goToProfile" class="action-button">返回个人中心</el-button>
          </div>

          <div v-else-if="verificationError" class="error">
            <el-icon class="error-icon" :size="32"><CircleClose /></el-icon>
            <h2 class="status-title">验证失败</h2>
            <p class="status-text error-message">{{ errorMessage }}</p>
            <el-button type="primary" @click="goToProfile" class="action-button">返回个人中心</el-button>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Message, Loading, CircleCheck, CircleClose } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'
import ToUrl from '@/api/api'
import store from '@/store'

const route = useRoute()
const router = useRouter()

const verifying = ref(true)
const verificationSuccess = ref(false)
const verificationError = ref(false)
const errorMessage = ref('')

const verifyEmail = async () => {
  const token = route.query.token
  if (!token) {
    verificationError.value = true
    errorMessage.value = '无效的验证链接'
    verifying.value = false
    return
  }

  try {
    await axios.post(ToUrl.url + '/user/verify-email', {
      token: token
    }, {
      headers: {
        'Authorization': `Bearer ${store.state.token}`
      }
    })
    
    verificationSuccess.value = true
    ElMessage.success('邮箱验证成功')
  } catch (error) {
    verificationError.value = true
    errorMessage.value = error.response?.data?.message || '验证失败，请重试'
    ElMessage.error(errorMessage.value)
  } finally {
    verifying.value = false
  }
}

const goToProfile = () => {
  router.push('/root/mine')
}

onMounted(() => {
  verifyEmail()
})
</script>

<style scoped>
.verify-email-container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.background-animation {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  animation: gradientBG 15s ease infinite;
  z-index: 0;
}

.content-wrapper {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.verify-card {
  width: 100%;
  max-width: 500px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
}

.verify-content {
  padding: 30px;
  text-align: center;
}

.verifying,
.success,
.error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.loading-icon {
  animation: rotate 1s linear infinite;
  color: #ffffff;
}

.success-icon {
  color: #67C23A;
}

.error-icon {
  color: #F56C6C;
}

.status-title {
  margin: 0;
  color: #ffffff;
  font-size: 24px;
  font-weight: 600;
}

.status-text {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  line-height: 1.5;
}

.error-message {
  color: #F56C6C;
  font-weight: 500;
}

.action-button {
  margin-top: 20px;
  min-width: 120px;
  background: rgba(255, 255, 255, 0.2);
}
</style>

3.2 路由配置

在router/index.js中添加路由：

import { createRouter, createWebHistory } from 'vue-router'
import VerifyEmail from '@/components/emailverify/VerifyEmail.vue'

const routes = [
  {
    path: '/verify-email',
    name: 'VerifyEmail',
    component: VerifyEmail
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

3.3 界面展示

邮箱验证界面：

4. 使用说明

4.1 发送验证邮件

在需要发送验证邮件的地方注入EmailService并调用：

@Autowired
private EmailService emailService;

// 生成验证token
String token = generateVerificationToken();
// 发送验证邮件
emailService.sendVerificationEmail(userEmail, token);