如何在Angular中集成Copyleaks SDK实现双文本域查重？

• 直接适配官方JS SDK到TypeScript
  Copyleaks的NodeJS SDK完全可以在TypeScript环境中使用，无需额外修改核心逻辑，仅需调整语法适配TS规范。比如将官方JS示例改写为TS版本：

  import * as Copyleaks from 'copyleaks-api';
  
  async function checkTextPlagiarism(text: string) {
    // 登录获取授权令牌
    const authToken = await Copyleaks.loginAsync('你的邮箱', '你的API密钥');
    // 创建文本查重任务（sandbox为true时是测试模式，不消耗正式额度）
    const scanId = await Copyleaks.createByTextAsync(authToken, text, { sandbox: true });
    // 轮询等待查重完成
    let scanResult = await Copyleaks.getResultsAsync(authToken, scanId);
    while (!scanResult.completed) {
      await new Promise(resolve => setTimeout(resolve, 2000));
      scanResult = await Copyleaks.getResultsAsync(authToken, scanId);
    }
    return scanResult;
  }
  

  ⚠️ 重要提示：绝对不要在Angular前端代码中硬编码API密钥，必须通过后端代理发起请求，防止密钥泄露。

• 添加TypeScript类型支持
  可以安装第三方类型声明包获得完整的TS语法提示：

  npm install @types/copyleaks-api --save-dev
  

  安装后，编辑器会自动识别SDK的类型定义，无需手动编写类型声明。

• Angular项目的具体实现要点

  1. 封装查重服务
     把查重逻辑封装为Angular服务，避免组件代码臃肿：

     // copyleaks.service.ts
     import { Injectable } from '@angular/core';
     import * as Copyleaks from 'copyleaks-api';
     
     @Injectable({ providedIn: 'root' })
     export class CopyleaksService {
       // 生产环境建议从后端接口获取授权信息，不要硬编码
       private readonly authEmail = '你的邮箱';
       private readonly authApiKey = '你的API密钥';
     
       async scanTextContent(text: string): Promise<any> {
         try {
           const token = await Copyleaks.loginAsync(this.authEmail, this.authApiKey);
           const scanId = await Copyleaks.createByTextAsync(token, text, { sandbox: true });
           // 轮询获取最终结果
           let result;
           do {
             await new Promise(resolve => setTimeout(resolve, 3000));
             result = await Copyleaks.getResultsAsync(token, scanId);
           } while (!result.completed);
           return result;
         } catch (error) {
           console.error('查重请求失败:', error);
           throw error;
         }
       }
     }
     

  2. 组件中调用服务
     在表单组件中绑定按钮点击事件，调用查重服务并处理状态：

     // text-check.component.ts
     import { Component } from '@angular/core';
     import { CopyleaksService } from './copyleaks.service';
     
     @Component({
       selector: 'app-text-check',
       templateUrl: './text-check.component.html'
     })
     export class TextCheckComponent {
       text1 = '';
       text2 = '';
       isScanning = false;
     
       constructor(private copyleaksService: CopyleaksService) {}
     
       async handleScanText1() {
         this.isScanning = true;
         try {
           const result = await this.copyleaksService.scanTextContent(this.text1);
           // 处理查重结果，比如展示重复率、来源链接等
           console.log('文本1查重结果:', result);
         } finally {
           this.isScanning = false;
         }
       }
     
       async handleScanText2() {
         this.isScanning = true;
         try {
           const result = await this.copyleaksService.scanTextContent(this.text2);
           console.log('文本2查重结果:', result);
         } finally {
           this.isScanning = false;
         }
       }
     }
     

  3. 前端模板绑定
     在HTML模板中关联文本域和按钮：

     <!-- text-check.component.html -->
     <div class="text-group">
       <textarea [(ngModel)]="text1" placeholder="输入需要查重的文本1"></textarea>
       <button (click)="handleScanText1()" [disabled]="isScanning">
         {{ isScanning ? '查重中...' : '查重文本1' }}
       </button>
     </div>
     
     <div class="text-group">
       <textarea [(ngModel)]="text2" placeholder="输入需要查重的文本2"></textarea>
       <button (click)="handleScanText2()" [disabled]="isScanning">
         {{ isScanning ? '查重中...' : '查重文本2' }}
       </button>
     </div>
     

• 额外参考方向

  • 查看Copyleaks npm包的源码，JS文件的逻辑可以直接对应TS写法，大部分JS语法在TS中兼容。
  • 搜索GitHub上的开源项目，参考其他开发者在Angular中集成Copyleaks的实践，重点关注跨域处理、后端代理的实现。

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