从 Azure blob 检索图像时出错 - Angular

Question

我正在尝试从 Azure blob 中检索图像，但我收到了包含以下消息的 403 响应，

“403 服务器无法验证请求。确保授权标头的值正确形成，包括签名。”

以下是我用来检索图像的代码

public getBase64Image(): Observable<string>{
    return this.http.get(environment.receiptLogoUrl, { responseType: 'blob' })
      .pipe(
        switchMap((blob: Blob) => {
          return new Observable<string>((observer) => {
            const reader = new FileReader();
            reader.readAsBinaryString(blob);
            reader.onloadend = () => {
              const base64data = btoa(reader.result as string);
              observer.next(`data:image/png;base64,${base64data}`);
              observer.complete();
            };
          });
        })
      );
  }

应该如何解决这个问题？

Answer 1

错误说身份验证失败，因此您需要对请求进行身份验证。以下是为 Azure blob 提供身份验证的两种主要方式：

1. 使用账户访问密钥
2. 使用活动目录 (AD)

首先检查 Azure 门户以查看当前设置的身份验证方法。然后按照有关如何使用该方法进行身份验证的适当说明进行操作。这里有更多细节：

https://learn.microsoft.com/en-us/azure/storage/blobs/authorize-data-operations-portal#navigate-to-blobs-in-the-azure-portal

如果你正在使用 AD、AAD、MSA，使用 google/facebook/linkedin/MS 等登录，有一个 Angular 库可以帮助解决这个问题：

https://learn.microsoft.com/en-us/azure/active-directory-b2c/configure-authentication-sample-angular-spa-app