求助：用AWS ID及API Key将Amazon Pinpoint与Angular集成实现PC推送通知

一、需安装的核心工具与模块 #

• AWS SDK for JavaScript v3：AWS官方提供的服务集成库，包含Pinpoint相关API，适配Angular项目
  • 安装命令：npm install @aws-sdk/client-pinpoint @aws-sdk/credential-providers
• Angular Service Worker：PC端浏览器推送依赖Service Worker实现消息接收，Angular官方配套工具
  • 安装命令：ng add @angular/pwa

二、集成步骤说明 #

1. 配置AWS凭证与项目信息 #

在Angular环境配置文件（如src/environments/environment.ts）中添加相关配置：

export const environment = {
  production: false,
  aws: {
    accessKeyId: '你的AWS ID',
    secretAccessKey: '你的API Key',
    region: '你的Pinpoint项目所属区域（例如us-east-1）',
    pinpointAppId: '你的Pinpoint项目ID'
  }
};

2. 封装Pinpoint服务 #

创建Angular服务封装Pinpoint API调用，示例pinpoint.service.ts：

import { Injectable } from '@angular/core';
import { PinpointClient, SendMessagesCommand } from '@aws-sdk/client-pinpoint';
import { fromEnv } from '@aws-sdk/credential-providers';
import { environment } from '../environments/environment';

@Injectable({ providedIn: 'root' })
export class PinpointService {
  private pinpointClient: PinpointClient;

  constructor() {
    this.pinpointClient = new PinpointClient({
      credentials: fromEnv(),
      region: environment.aws.region
    });
  }

  async sendPushNotification(deviceToken: string, title: string, content: string) {
    const params = {
      ApplicationId: environment.aws.pinpointAppId,
      MessageRequest: {
        Addresses: {
          [deviceToken]: {
            ChannelType: 'GCM' // Chrome/Firefox等浏览器使用GCM/FCM通道
          }
        },
        MessageConfiguration: {
          GCMMessage: {
            Title: title,
            Body: content,
            Sound: 'default'
          }
        }
      }
    };
    const command = new SendMessagesCommand(params);
    return this.pinpointClient.send(command);
  }
}

3. 实现浏览器推送订阅与令牌获取 #

借助Angular Service Worker，在组件中请求用户推送权限并获取设备令牌：

import { Component, OnInit } from '@angular/core';
import { SwPush } from '@angular/service-worker';
import { PinpointService } from './pinpoint.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  readonly VAPID_PUBLIC_KEY = '你的VAPID公钥（从推送服务提供商或Pinpoint配置中获取）';

  constructor(private swPush: SwPush, private pinpointService: PinpointService) {}

  ngOnInit() {
    this.swPush.requestSubscription({
      serverPublicKey: this.VAPID_PUBLIC_KEY
    }).then(subscription => {
      // 将subscription.endpoint作为设备令牌传入Pinpoint发送接口
      this.pinpointService.sendPushNotification(subscription.endpoint, '测试标题', '测试推送内容');
    }).catch(err => console.error('推送订阅失败', err));
  }
}

4. Pinpoint后台配置 #

• 在AWS Pinpoint控制台创建项目，配置Web Push通道（需关联Firebase Cloud Messaging或直接配置Web Push）
• 确保你的IAM用户（对应AWS ID和API Key）拥有mobiletargeting:SendMessages等必要权限

三、关键注意事项 #

• PC端浏览器推送依赖Web Push API，主流浏览器（Chrome、Firefox等）均支持，需用户授权推送权限
• 生产环境中，AWS凭证建议通过环境变量注入，避免硬编码在代码中
• VAPID密钥对需在推送服务提供商或Pinpoint后台生成，用于加密推送消息

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