Övning – Använda signaturer för delad åtkomst för att delegera åtkomst till Azure Storage

10 minuter

Med Azure Storage kan du auktorisera åtkomst till filer med en delad nyckel, med en signatur för delad åtkomst (SAS) eller via Microsoft Entra-ID. Med en SAS kontrollerar du vad en klient kan göra med filerna och hur länge.

Ditt företags system för diagnostiska bilder kommer åt sina patientbilder internt via en delad nyckel. Du måste skapa ett API för att ge tredje part åtkomst till diagnostikbilder. Du skapar en testsida i webbappen för att se hur en SAS kan hjälpa dig att bevilja säker åtkomst till klienter från tredje part.

I den här övningen skapar du ett lagringskonto och laddar upp några exempel på patientbilder. Du distribuerar teamets befintliga webbapp och testar att den kan komma åt lagringen. Det sista steget är att lägga till C#- och JavaScript-kod för att skapa en SAS-token på begäran och därmed visa bilderna på ett säkert sätt.

Screenshot of your company's patient diagnostic image system showing three images.

Skapa ett lagringskonto och ladda upp bilder

Använd Azure Cloud Shell och ange följande kod för att skapa ett lagringskonto för patientbilder. Koden genererar ett lagringskontonamn.

export STORAGENAME=medicalrecords$RANDOM

az storage account create \
    --name $STORAGENAME \
    --access-tier hot \
    --kind StorageV2 \
    --resource-group "<rgn>[sandbox resource group name]</rgn>"

Skapa en container under lagringskontot för lagring av avbildningarna.

az storage container create \
    --name patient-images \
    --account-name $STORAGENAME \
    --public-access off

Klona teamets befintliga webbapp. Den här lagringsplatsen innehåller exempelbilder som används av ditt team för testning.
```
git clone https://github.com/MicrosoftDocs/mslearn-control-access-to-azure-storage-with-sas.git sas
```

Använd kommandot Azure CLI upload-batch för att ladda upp avbildningarna till ditt lagringskonto.

az storage blob upload-batch \
    --source sas \
    --destination patient-images \
    --account-name $STORAGENAME \
    --pattern *.jpg

Testa system för diagnostiska patientbilder

Öppna filen appsettings.json i kodredigeraren så att vi kan lägga till anslutningssträng för ditt lagringskonto.
```
code sas/appsettings.json
```

I Cloud Shell anger du följande kod för att hämta anslutningssträng till ditt lagringskonto.

az storage account show-connection-string --name $STORAGENAME

Du bör se ett svar i det här formatet:

{
  "connectionString": "DefaultEndpointsProtocol=https;EndpointSuffix=core.windows.net;AccountName=medicalrecords3215;AccountKey=UGLNuJWUBtodz+VbhhFcMwkzDpX49Wf7FxtuQDTOHhH+LpCtSQ2LBP0Ju8TQby5CeOt7DMYBgH45SX9yFwqPvA=="
}

Kopiera värdet connectionString, inklusive citattecknen.

I kodredigeraren ersätter du värdet "[connection string]" Anslut ionString med strängen som du kopierade.
Kopiera värdet för AccountName= i brödtexten i anslutningssträng.
Ersätt värdet för parametern AccountName med det kontonamnsvärde som du kopierade.
Kopiera värdet för AccountKey= i brödtexten i anslutningssträng (ta inte med citattecknet). Se till att inkludera == värdet i slutet av värdet.
Ersätt värdet för parametern AccountKey med det kontonyckelvärde som du kopierade.

Filen appsettings.json bör nu se ut ungefär så här:

{
  "Logging": {
    "LogLevel": {
      "Default": "Warning"
    }
  },
  "AllowedHosts": "*",
  "StorageAccount": {
    "ConnectionString": "DefaultEndpointsProtocol=https;AccountName=medicalrecords3215;AccountKey=UGLNuJWUBtodz+VbhhFcMwkzDpX49Wf7FxtuQDTOHhH+LpCtSQ2LBP0Ju8TQby5CeOt7DMYBgH45SX9yFwqPvA==;EndpointSuffix=core.windows.net",
    "Container" : "patient-images",
    "AccountName":"medicalrecords3215",
    "AccountKey":"UGLNuJWUBtodz+VbhhFcMwkzDpX49Wf7FxtuQDTOHhH+LpCtSQ2LBP0Ju8TQby5CeOt7DMYBgH45SX9yFwqPvA=="
  }  
}

Spara och stäng kodredigeraren genom att välja Ctrl+S och sedan ctrl +q.

Öppna en port så att du kan komma åt din webbapp när den körs i Cloud Shell.

curl -X POST http://localhost:8888/openPort/8000;

Det här kommandot returnerar en url där din app kan nås.

{"message":"Port 8000 is open","url":"https://gateway11.northeurope.console.azure.com/n/cc-4016c848/cc-4016c848/proxy/8000/"}

Kör appen.

cd sas
dotnet run

När appen har kompilerats visar Cloud Shell-konsolen information som liknar följande exempel.

Hosting environment: Development
Content root path: /home/<yourusername>/sas
Now listening on: https://localhost:8001
Now listening on: http://localhost:8000
Application started. Press Ctrl+C to shut down.

I en webbläsare klistrar du in url:en som returnerades av föregående cURL-kommando. Se till att du inkluderar snedstrecket (/) i slutet av adressen.

URL:en ska vara i det här formatet: https://gateway11.northeurope.console.azure.com/n/cc-4016c848/cc-4016c848/proxy/8000/.

Om du uppmanas att logga in uppdaterar du webbläsarfönstret. Lamna Healthcare Patient Diagnostic Image System visas.
Välj Hämta alla patienter för att visa en lista över alla bilder i lagringskontot.

Lägg till kod för att skapa en SAS

Stoppa webbappen i Cloud Shell genom att välja Ctrl+C.
Nu ska vi förbättra klassen PatientRecordController för att skapa en SAS på begäran och returnera den till klientdelen av webbappen.
Ange följande kod för att öppna filen PatientRecordController.cs i kodredigeraren.
```
code Controllers/PatientRecordController.cs
```

Lägg till följande kod längst ned i klassen under GET PatientRecord/patient-nnnnnn metoden .

// GET PatientRecord/patient-nnnnnn/secure
[HttpGet("{Name}/{secure}")]
public PatientRecord Get(string name, string flag)
{
    BlobClient blob = _container.GetBlobClient(name);
    return new PatientRecord { name=blob.Name, imageURI=blob.Uri.AbsoluteUri, sasToken=GetBlobSas(blob) };
}

Den här metoden returnerar den begärda patientbilden med en SAS som kan användas för att komma åt den.

Lägg till en metod som skapar SAS för blobben.

// Build a SAS token for the given blob
private string GetBlobSas(BlobClient blob)
{
    // Create a user SAS that only allows reading for a minute
    BlobSasBuilder sas = new BlobSasBuilder 
    {
        BlobContainerName = blob.BlobContainerName,
        BlobName = blob.Name,
        Resource = "b",
        ExpiresOn = DateTimeOffset.UtcNow.AddMinutes(1)
    };
    // Allow read access
    sas.SetPermissions(BlobSasPermissions.Read);

    // Use the shared key to access the blob
    var storageSharedKeyCredential = new StorageSharedKeyCredential(
        _iconfiguration.GetValue<string>("StorageAccount:AccountName"),
        _iconfiguration.GetValue<string>("StorageAccount:AccountKey")
    );

    return '?' + sas.ToSasQueryParameters(storageSharedKeyCredential).ToString();
}

Den här metoden använder det skickade BlobClient objektet för att skapa en BlobSasBuilder för att generera en SAS som är skrivskyddad och upphör att gälla om en minut.

Spara filen genom att välja Ctrl+S och sedan avsluta redigeraren genom att välja Ctrl+Q.

Lägga till kod för att använda SAS

Nu ska vi lägga till kod på webbsidan för att begära SAS för avbildningen.

Ange följande kommando för att redigera sidan external.cshtml .
```
code Pages/external.cshtml
```

I slutet av filen går du till klicklyssnaren för och ändrar $.get raden för #btn-submitatt lägga + '/secure'till :

$('#btn-submit').click(function(){
    $('#result').empty();
    $.get('api/PatientRecords/' + $('#patientID').val() + '/secure', function (data) {
        var imageURL = data.imageURI + $('#sasKey').val();
        $('#result').html('<img id="patientScan" class="alert alert-success" src="' + imageURL + '" alt="patient scan" onerror="this.classList.remove(\'alert-success\'); this.classList.add(\'alert-danger\')"//>');
    }, 'json');
});

#btn-submit Lägg till följande kod längst ned i filen ovanför taggen </script> under klicklyssningsfunktionen:
```
$('#btn-getKey').click(function(){
    $.get('api/PatientRecords/' + $('#patientID').val() + '/secure', function (data) {
        $('#sasKey').val(data.sasToken);
    }, 'json');
});
```
Den här jQuery-koden lägger till en klicka-lyssnare på knappen btn-getKey. Koden kör ett Ajax-anrop till den nya säkra URL:en för den angivna bildfilen. När det returneras fylls rutan för nyckelinmatning med SAS.
Spara ändringarna genom att välja Ctrl+S och sedan avsluta redigeraren genom att välja Ctrl+Q.

Testa ändringarna

Kör den uppdaterade appen.
```
dotnet run
```
Uppdatera fliken för webbplatsen i webbläsaren. Välj Get all patients (Hämta alla patienter) och kopiera sedan ett av bildfilsnamnen.
I menyn längst upp på webbsidan väljer du Externa företag.
Klistra in filnamnet i fältet Patient image filename (Namn på patientbildfil).
Välj View scan (Visa skanning). Patientgenomsökningsbilden är inte tillgänglig eftersom du inte har skapat en SAS.

Kommentar

Om du visar konsolen i webbläsaren ser du att webbservern returnerade ett 404-felmeddelande.
Välj Get Key (Hämta nyckel), som ska fylla i fältet Key (Nyckel) med en SAS.
Välj View scan (Visa skanning). Patientens diagnostikbild ska visas.
I webbläsaren högerklickar du på bilden och kopierar bildadressen.

Öppna en ny webbläsarflik, klistra in den kopierade avbildningsadressen i adressfältet och tryck på Retur. Om det har gått längre än en minut sedan du skapade SAS bör du se ett felmeddelande. Om det har gått mindre än en minut bör bilden visas.

Kommentar

Du kan behöva uppdatera sidan.

<Error>
    <Code>AuthenticationFailed</Code>
    <Message>Server failed to authenticate the request. Make sure the value of Authorization header is formed correctly, including the signature.
    RequestId:03eda893-f01e-0028-2d73-c5c947000000
    Time:2021-01-07T16:02:55.3752851Z</Message>
    <AuthenticationErrorDetail>Signed expiry time [Tue, 07 Jan 2021 16:02:00 GMT] must be after signed start time [Tue, 07 Jan 2021 16:02:55 GMT]</AuthenticationErrorDetail>
</Error>