如何为Shopware 6插件配置页添加验证API密钥的按钮？

当然可以实现，以下是具体步骤：

1. 配置页面添加按钮元素 #

编辑插件的src/Resources/config/config.xml，在API密钥输入框下方添加按钮组件：

<card>
    <title>API配置</title>
    <component name="sw-text-field" v-model="config.apiKey">
        <label>API密钥</label>
    </component>
    <component name="sw-button" @click="validateApiKey" variant="primary" style="margin-top: 10px;">
        <label>验证API密钥</label>
    </component>
</card>

直接使用Shopware内置的sw-button组件，绑定点击事件validateApiKey。

2. 实现前端验证逻辑 #

创建或编辑插件的前端配置模块文件src/Resources/app/administration/src/module/my-plugin/config/index.js，通过组件重写扩展系统配置页面的逻辑：

import template from './my-plugin-config.html.twig';

Shopware.Component.override('sw-system-config', {
    template,

    methods: {
        validateApiKey() {
            const apiKey = this.config.apiKey;
            
            // 先检查密钥是否为空
            if (!apiKey.trim()) {
                this.createNotificationError({
                    title: '验证失败',
                    message: '请先输入API密钥'
                });
                return;
            }

            // 调用外部API验证
            fetch('https://your-external-api-domain.com/validate-key', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-API-Key': apiKey
                }
            })
            .then(response => {
                if (!response.ok) throw new Error('请求失败');
                return response.json();
            })
            .then(result => {
                if (result.valid) {
                    this.createNotificationSuccess({
                        title: '验证成功',
                        message: 'API密钥有效'
                    });
                } else {
                    this.createNotificationError({
                        title: '验证失败',
                        message: 'API密钥无效'
                    });
                }
            })
            .catch(error => {
                this.createNotificationError({
                    title: '验证出错',
                    message: `请求异常：${error.message}`
                });
            });
        }
    }
});

使用Shopware内置的通知组件createNotificationSuccess/Error给用户反馈结果。

3. 处理跨域问题（可选） #

如果外部API未配置CORS，前端直接请求会触发跨域错误，此时需要在Shopware后端创建代理路由：

3.1 编写后端控制器 #

创建src/Controller/ApiValidationController.php：

<?php

namespace YourPluginNamespace\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;
use GuzzleHttp\Client;

/**
 * @Route("/api/v{version}/your-plugin/validate-api-key")
 */
class ApiValidationController extends AbstractController
{
    /**
     * @Route("", methods={"POST"})
     */
    public function validate(Request $request): Response
    {
        $apiKey = $request->headers->get('X-API-Key');
        
        if (empty($apiKey)) {
            return $this->json(['valid' => false], Response::HTTP_BAD_REQUEST);
        }

        try {
            $client = new Client();
            $response = $client->post('https://your-external-api-domain.com/validate-key', [
                'headers' => ['X-API-Key' => $apiKey]
            ]);
            
            $data = json_decode($response->getBody()->getContents(), true);
            return $this->json($data);
        } catch (\Exception $e) {
            return $this->json(['valid' => false, 'error' => $e->getMessage()], Response::HTTP_INTERNAL_SERVER_ERROR);
        }
    }
}

3.2 注册路由 #

在src/Resources/config/routes.xml中添加路由引用：

<?xml version="1.0" encoding="UTF-8" ?>
<routes xmlns="http://symfony.com/schema/routing"
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:schemaLocation="http://symfony.com/schema/routing https://symfony.com/schema/routing/routing-1.0.xsd">

    <import resource="@YourPluginNamespace/Controller/ApiValidationController.php" type="annotation"/>
</routes>

3.3 修改前端请求地址 #

将前端fetch的URL改为后端代理路由：

fetch('/api/v1/your-plugin/validate-api-key', { ... })

4. 清理缓存并测试 #

执行Shopware缓存清理命令：

bin/console cache:clear
bin/console assets:install

之后进入Shopware后台的插件配置页面，即可看到验证按钮，输入API密钥后点击即可验证有效性。

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