Angular connects to Azure storage account through Spring boot service API

In regular web architecture, angular (front end), spring boot (api service), and backend data storage service work to together to handle the client request. 

For azure deployment, one common task is connecting spring boot project to azure data storage and database service (sql or no sql). As spring boot project is just a regular java project, so the way how to access azure service from java sdk applies to the spring boot project. The below steps describe how to connect spring boot app (i.e. java sdk project) to azure storage account service.

(Note, spring-azure-starter-storage or azure-storage-spring-boot-starter has been deprecated by Microsoft, so do not use it anymore)  

1. add below azure-storage-blob dependency module in spring boot pom file

    <!-- https://mvnrepository.com/artifact/com.azure/azure-storage-blob -->

    <dependency>

        <groupId>com.azure</groupId>

        <artifactId>azure-storage-blob</artifactId>

        <version>12.7.0</version>

    </dependency>

2. in Azure storage account settings, select the container's items and be sure the access level is set to private (no anonymous access), so that those blob can only be accessed by spring boot project. You can verify this by accessing the blob url from browser, and you should get a resource not found error. Copy the access key and container name for later use.

3. azure-storage-blob provides few helper classes to access the data from azure container account, please refer https://docs.microsoft.com/en-us/azure/storage/blobs/storage-quickstart-blobs-java

for more details.

In constructor, create a containerClient instanceas below

    public StorageService(){

        this.blobServiceClient = new BlobServiceClientBuilder().connectionString(connecString).buildClient();

        this.blobContainerClient = this.blobServiceClient.getBlobContainerClient(containerName);

    }

3.1 upload a file to container

In RestController class, create a method to handle client side angular web app's http request

    @PostMapping("/storages")

    public void createBlob(@RequestBody Map<String, Object> inputData) throws IOException {

        String name = (String) inputData.get("name");

        String data = (String) inputData.get("data");

        service.uploadBlob(name, data);

    }

Create a java function in service class to upload a blob on BlobClient object as below

    public void uploadBlob(String name, String strData) throws IOException {

        BlobClient blobClient = this.blobContainerClient.getBlobClient(name);

        InputStream targetStream = new ByteArrayInputStream(strData.getBytes());

        blobClient.upload(targetStream, targetStream.available(), true);

    }

From client side angular app, a xhr http request will be sent to spring boot app when user

clicks a button on html page:

  onCreateStorage() {

      const data = {

        name: this.nameField.value,

        data: this.dataField.value,

      };

      this.http.post(this.serviceUrl + '/storages/', data).subscribe((resp) => {

        this.resultField.setValue(resp);

      });

    }

In similar way, the other operations (like download, delete etc) can also be implemented.