如何在Angular应用中实现RingCentral嵌入式小部件自动登录？

核心思路 #

RingCentral Embeddable Widget支持通过postMessage API直接传入已有的accessToken和refreshToken，跳过默认登录流程实现自动登录。

步骤实现 #

1. 监听Widget就绪事件
   Widget为异步加载，需等待其初始化完成后才能发送登录指令，因此要监听rc-adapter-ready消息确认就绪状态。

2. 发送登录令牌消息
   确认Widget就绪后，通过postMessage向Widget的iframe传递包含accessToken、refreshToken和clientId的登录指令。

Angular组件示例代码 #

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-rc-widget-container',
  templateUrl: './rc-widget-container.component.html',
  styleUrls: ['./rc-widget-container.component.css']
})
export class RcWidgetContainerComponent implements OnInit {
  // 从后端获取的令牌及你的Client ID
  private accessToken = 'REPLACE_WITH_YOUR_ACCESS_TOKEN';
  private refreshToken = 'REPLACE_WITH_YOUR_REFRESH_TOKEN';
  private clientId = 'REPLACE_WITH_YOUR_CLIENT_ID';
  // 可选：指定环境，沙箱环境用https://platform.devtest.ringcentral.com
  private rcServer = 'https://platform.ringcentral.com';

  ngOnInit(): void {
    // 监听Widget就绪事件
    window.addEventListener('message', this.handleWidgetMessage.bind(this));
  }

  private handleWidgetMessage(event: MessageEvent): void {
    // 确认是Widget发出的就绪信号
    if (event.data.type === 'rc-adapter-ready') {
      this.sendLoginCommand();
    }
  }

  private sendLoginCommand(): void {
    // 获取Widget的iframe元素
    const rcWidgetIframe = document.querySelector('iframe[src*="ringcentral-embeddable"]') as HTMLIFrameElement;
    if (!rcWidgetIframe?.contentWindow) return;

    // 发送登录指令，限制目标域名提升安全性
    rcWidgetIframe.contentWindow.postMessage({
      type: 'rc-login-with-token',
      payload: {
        accessToken: this.accessToken,
        refreshToken: this.refreshToken,
        clientId: this.clientId,
        server: this.rcServer
      }
    }, 'https://apps.ringcentral.com');
  }
}

注意事项 #

• 令牌权限检查：确保后端获取的accessToken包含Widget所需权限（如Glip、RingOut、SMS等），否则部分功能无法正常使用。
• 安全性优化：禁止在代码中硬编码令牌，通过Angular服务从后端安全获取；postMessage指定目标域名，避免消息被无关页面接收。
• 令牌过期处理：Widget会自动使用refreshToken刷新过期的accessToken，无需额外处理，确保refreshToken有效且未过期即可。

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