Backstage前端插件如何无需后端API获取已登录用户签名令牌？

无需依赖后端插件API，直接通过@backstage/core-plugin-api提供的IdentityApi即可获取签名令牌，具体操作如下：

• 通过useApi(identityApiRef)拿到身份API实例后，调用其getIdToken()方法，该方法会返回当前用户的ID Token——也就是Authorization请求头中使用的Bearer签名令牌。
• 注意getIdToken()是异步方法，需要配合async/await使用，同时要处理用户未登录时可能返回undefined或抛出错误的情况。

代码示例 #

import { useApi } from '@backstage/core-plugin-api';
import { identityApiRef } from '@backstage/core-plugin-api';
import { useEffect, useState } from 'react';

const MyPluginComponent = () => {
  const identityApi = useApi(identityApiRef);
  const [idToken, setIdToken] = useState<string | undefined>();

  useEffect(() => {
    const fetchToken = async () => {
      try {
        const token = await identityApi.getIdToken();
        setIdToken(token);
        // 此处可使用令牌执行后续操作，比如调用外部需要身份验证的API
      } catch (error) {
        console.error('获取ID令牌失败:', error);
      }
    };

    fetchToken();
  }, [identityApi]);

  return (
    <div>
      {idToken ? (
        <p>用户签名令牌：{idToken}</p>
      ) : (
        <p>未获取到令牌或用户未登录</p>
      )}
    </div>
  );
};

export default MyPluginComponent;

补充说明 #

• getIdToken()返回的令牌就是Backstage用于身份验证的签名令牌，和Authorization请求头中的Bearer令牌完全一致；
• 若想获取Cookie中的会话令牌，由于Backstage的会话Cookie通常设置为HttpOnly，前端出于安全限制无法直接读取，这种场景下建议使用ID Token满足业务需求；
• 调用该方法前请确保用户已完成登录，未登录状态下会抛出错误或返回undefined，建议添加必要的错误处理逻辑。

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