如何在Laravel应用中实现可嵌入的自定义徽章组件

嘿，这个需求其实和DMCA徽章的思路完全一致，咱们一步步拆解，在Laravel里实现这个可嵌入的推广徽章功能：

首先需要一张表来记录用户的网站URL和徽章关联信息，比如创建一个badge_embeds表，执行以下迁移：

Schema::create('badge_embeds', function (Blueprint $table) {
    $table->id();
    $table->foreignId('user_id')->constrained()->onDelete('cascade');
    $table->string('website_url')->unique(); // 存储用户的网站域名/完整URL
    $table->string('verification_code')->nullable(); // 用于网站验证的唯一码
    $table->boolean('is_verified')->default(false); // 标记网站是否已验证
    $table->timestamps();
});

1. 生成用户专属的嵌入代码 #

用户在后台获取嵌入代码时，咱们要生成类似DMCA的代码片段，包含徽章链接、图片和脚本。可以写一个控制器方法：

public function getEmbedCode(Request $request)
{
    // 先确认用户已验证过网站
    $embed = $request->user()->badgeEmbeds()->where('is_verified', true)->firstOrFail();
    $badgeImageUrl = route('badge.image', $embed->id);
    $badgeLinkUrl = route('badge.redirect', $embed->id);
    $scriptUrl = route('badge.script', $embed->id);

    // 返回格式化的嵌入代码
    return response()->json([
        'code' => <<<HTML
<a href="$badgeLinkUrl" title="你的推广标语" class="your-custom-badge">
    <img src="$badgeImageUrl" alt="你的推广描述" />
</a>
<script src="$scriptUrl"></script>
HTML
    ]);
}

2. 徽章图片与跳转路由 #

• 图片路由：返回用户的推广徽章图片，同时可以做访问验证（比如检查请求来源是否是用户的验证网站）：

Route::get('/badge/image/{embedId}', [BadgeController::class, 'serveImage'])->name('badge.image');

// 控制器方法
public function serveImage($embedId)
{
    $embed = BadgeEmbed::findOrFail($embedId);
    // 验证请求来源是否属于用户已验证的网站
    $referer = request()->header('Referer');
    if ($referer && !str_contains($referer, parse_url($embed->website_url, PHP_URL_HOST))) {
        // 未授权访问返回默认占位图
        return response()->file(public_path('images/unauthorized-badge.png'));
    }
    // 返回正式徽章图片
    return response()->file(public_path('images/promotion-badge.png'));
}

• 跳转路由：处理徽章点击跳转，同时可以统计点击次数：

Route::get('/badge/redirect/{embedId}', [BadgeController::class, 'redirect'])->name('badge.redirect');

public function redirect($embedId)
{
    $embed = BadgeEmbed::findOrFail($embedId);
    // 记录点击次数（可以加个click_count字段自增）
    $embed->increment('click_count');
    // 跳转到你的推广目标页面
    return redirect()->to(config('app.promotion_target_url'));
}

3. 辅助脚本路由 #

脚本可以用来实现额外功能，比如统计展示次数、动态调整徽章样式：

Route::get('/badge/script/{embedId}', [BadgeController::class, 'serveScript'])->name('badge.script');

public function serveScript($embedId)
{
    $script = <<<JS
document.addEventListener('DOMContentLoaded', function() {
    // 统计徽章展示次数（发送请求到后端）
    fetch('/badge/track-impression/$embedId', { method: 'POST', mode: 'no-cors' });
    
    // 给徽章添加hover效果
    const badge = document.querySelector('.your-custom-badge');
    if (badge) {
        badge.style.cursor = 'pointer';
        badge.addEventListener('mouseover', () => badge.style.opacity = '0.9');
        badge.addEventListener('mouseout', () => badge.style.opacity = '1');
    }
});
JS;
    return response($script)->header('Content-Type', 'application/javascript');
}

必须确保用户拥有该网站的控制权，否则徽章会被滥用，两种常用验证方式：

1. Meta标签验证 #

• 给用户生成唯一验证码，让用户添加到网站的<head>中：<meta name="your-app-verification" content="{$embed->verification_code}">
• 后端验证逻辑：

public function verifyWebsite(Request $request)
{
    $embed = $request->user()->badgeEmbeds()->where('website_url', $request->website_url)->first();
    $client = new \GuzzleHttp\Client();
    try {
        $response = $client->get($embed->website_url);
        $html = (string)$response->getBody();
        // 检查meta标签是否存在且匹配
        if (str_contains($html, $embed->verification_code)) {
            $embed->update(['is_verified' => true]);
            return redirect()->back()->with('success', '网站验证成功！');
        }
    } catch (\Exception $e) {
        return redirect()->back()->with('error', '验证失败，请检查网站是否可访问');
    }
    return redirect()->back()->with('error', '未找到验证标签');
}

2. 文件验证 #

让用户下载一个包含唯一验证码的HTML文件，上传到网站根目录，后端访问该文件检查内容是否匹配，逻辑和Meta标签类似，只是检查的是文件内容。

在用户后台添加一个“获取推广徽章”的模块，展示嵌入代码并提供复制功能：

<div class="card">
    <div class="card-header">推广徽章嵌入代码</div>
    <div class="card-body">
        <textarea class="form-control" rows="5" readonly>{{ $embedCode }}</textarea>
        <button class="btn btn-primary mt-2" onclick="copyCode()">复制代码</button>
    </div>
</div>

<script>
function copyCode() {
    const textarea = document.querySelector('textarea');
    textarea.select();
    document.execCommand('copy');
    alert('代码已复制，可直接粘贴到你的网站中！');
}
</script>

• 缓存设置：给徽章图片和脚本添加缓存头，减少服务器压力，比如在返回响应时添加->header('Cache-Control', 'public, max-age=86400')
• HTTPS支持：确保所有资源链接都是HTTPS，避免用户网站出现混合内容警告
• 多样式选择：提供多种徽章样式，让用户选择，生成对应样式的嵌入代码
• 数据统计：在后台给用户展示徽章的展示次数、点击次数，提升用户体验

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