javascript - 如何使用 token 而不是 azure 连接字符串进行 blob 存储访问

Question

我想实现一个功能，将录制的音频 blob 数据上传到前端的 azure blob 存储(react.js)。 我有 azure 的存储连接字符串，但我不希望我的连接字符串在前端公开。 有没有什么方法可以定义后端API来从azure凭证生成 token (有过期时间)，以便我可以在前端使用它？ 我需要 Azure 帐户的其他设置吗？

诗。与此类似。 对于azure语音认知sdk，有一个API可以使用语音区域和语音 key 发行 token 。 https://{SPEECH_REGION}.api.cognitive.microsoft.com/sts/v1.0/issueToken

我尝试使用 sas token ，但它似乎非常复杂。

Answer 1

How can I use a token instead of Azure connection string for blob storage access

是的，您可以创建后端 API 来为您的 Azure Blob 存储帐户生成 SAS token 。这样，您就可以在服务器端保证连接字符串和帐户 key 的安全，并且只向前端公开 SAS token 。

您可以使用以下代码从后端使用 sas token 上传音频文件。

首先，创建一个后端目录来生成sas-token。

mkdir backend 
cd backend

封装:

  npm install express
  npm install @azure/storage-blob
  

server.js

const express = require('express');
const app = express();
const cors = require('cors');
const { BlobServiceClient, StorageSharedKeyCredential, generateAccountSASQueryParameters, AccountSASPermissions, AccountSASServices, AccountSASResourceTypes, SASProtocol } = require('@azure/storage-blob');

const accountName = 'your-account-name';
const accountKey = 'your-account-key';

const sharedKeyCredential = new StorageSharedKeyCredential(accountName, accountKey);
const blobServiceClient = new BlobServiceClient(`https://${accountName}.blob.core.windows.net`);

app.use(express.json());
app.use(cors({ origin: 'http://localhost:3001' }));

app.get('/generate-sas-token', async (req, res) => {
  const { blobName } = req.query;


  const sasOptions = {
    expiresOn: new Date(Date.now() + 3600 * 1000), // Expires in 1 hour
    permissions: AccountSASPermissions.parse('racwd'),
    services: AccountSASServices.parse('bf').toString(), // Blobs only
    resourceTypes: AccountSASResourceTypes.parse('sco').toString(), // Service, Container, and Object
    protocol: SASProtocol.HttpsAndHttp
  };

  const sasToken = generateAccountSASQueryParameters(sasOptions, sharedKeyCredential).toString();
  res.json({ sasToken });
  console.log(sasToken);
});

const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

通过在 backend 目录中运行以下命令来启动后端 API:

node server.js

现在前端使用React应用程序。

封装:

npm install axios

AudioUploader.js

import React, { useState } from 'react';
import axios from 'axios';


function AudioUploader() {
  const [selectedFile, setSelectedFile] = useState(null);
  const [sasToken, setSasToken] = useState('');
  const [uploadStatus, setUploadStatus] = useState('');

  const handleFileChange = (event) => {
    setSelectedFile(event.target.files[0]);
  };

  const generateSasToken = async () => {
    try {
      const response = await axios.get(`/generate-sas-token?blobName=${selectedFile.name}`);
      setSasToken(response.data.sasToken);
    } catch (error) {
      console.error('Error generating SAS token:', error);
    }
  };

  const uploadAudio = async () => {
    if (!sasToken || !selectedFile) {
      console.error('SAS token or file not selected.');
      return;
    }

    const blobUrl = `https://<Your-storage>.blob.core.windows.net/<container-name>/${selectedFile.name}?${sasToken}`;
    const headers ={'x-ms-blob-type': 'BlockBlob'};
    try {
      await axios.put(blobUrl, selectedFile,{headers});
      setUploadStatus('Upload successful!');
    } catch (error) {
      console.error('Error uploading audio:', error);
      setUploadStatus('Upload failed.');
    }
  };

  return (
    <div>
      <h2>Audio Uploader</h2>
      <input type="file" onChange={handleFileChange} />
      <button onClick={generateSasToken}>Generate SAS Token</button>
      {sasToken && (
        <div>
          <button onClick={uploadAudio}>Upload Audio</button>
        </div>
      )}
      {uploadStatus && <p>{uploadStatus}</p>}
    </div>
  );
}

export default AudioUploader;

输出:

浏览器:

门户:

这是我的 GitHub使用 JavaScript 通过后端 API 将音频文件上传到 Azure Blob 存储的链接。