Javascript 如何使用令牌而不是天蓝色连接字符串进行 blob 存储访问

如何为Blob使用令牌而不是Azure连接字符串 存储访问

可以，您可以创建后端API来为您的Azure Blob存储帐户生成SAS令牌.这样，您可以在服务器端保护您的连接字符串和帐户密钥的安全，并且只向前端公开SAS令牌.

您可以使用以下代码从后端使用SAS令牌上传音频文件.

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

mkdir backend 
cd backend

Package:个个

  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

现在前端使用的是Reaction应用程序.

Package:个个

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;

Output:

Browser:个

Portal:个

这是我的GitHub链接，可以通过后端API使用Java脚本将音频文件上传到Azure BLOB存储.