通过浏览器调用Google Vision API，从Firestore中存储的文件中检测文档文本

Question

从浏览器(React with Firebase auth(到Google Vision API的API调用，以获取存储在Firestore数据库中的.pdf文件的内容。结果应该以.json的形式存储在Firestore中。已创建一个服务帐户，该帐户具有系统范围的访问权限。预期的响应如下：

{
"name": "projects/usable-auth-library/operations/1efec2285bd442df"
}

我得到的回复是403，这表明身份验证过程中出现了问题。在Firestore中，没有创建带有文本内容的.json。

调用的函数如下所示：

const test = () => {
fetch("https://vision.googleapis.com/v1/files:asyncBatchAnnotate", {
method: "post",
requests: [
{
inputConfig: {
gcsSource: {
uri: "gs://XXXX.appspot.com/images/XXXX.pdf"
},
mimeType: "application/pdf"
},
features: [
{
type: "DOCUMENT_TEXT_DETECTION"
}
],
outputConfig: {
gcsDestination: {
uri: "gs://XXXX.appspot.com/images/output"
},
batchSize: 1
}
}
]
}).then(res => console.log(res))

知道我做错了什么吗？或者是否有一个React库可以开箱即用地处理该过程，或者有一个更详细的分步指南来对API进行此类客户端调用？我看了一下npm包@googlecloud/vision，但这似乎还不适用于客户端。

Answer 1

您可以在这里找到关于如何将api与curl一起使用的示例。

curl -X POST 
-H "Authorization: Bearer "$(gcloud auth application-default print-access-token) 
-H "Content-Type: application/json; charset=utf-8" 
https://vision.googleapis.com/v1/images:annotate -d @request.json

因此，您应该使用您的服务帐户来签署jwt令牌，并从谷歌云接收访问令牌。然后，您应该在post请求中使用您的访问令牌。

您的应用程序准备通过使用进行授权的API调用服务帐户的凭据，用于从OAuth 2.0身份验证服务器。

最后，您的应用程序可以使用访问令牌调用GoogleAPI。

将OAuth 2.0用于服务器到服务器应用程序

请按照Firebase Authenticate REST请求获取如何使用node.js 生成访问令牌的示例

Answer 2

服务帐户只需要访问与您交互的GCS存储桶。不过，您似乎没有使用您的服务帐户。

通常，你的前端不会有服务帐户或api密钥，因为有人可能会窃取/使用你的服务帐户/api密钥，你必须支付费用。最好从后端调用Vision API。