Escritura de una aplicación web de Azure para leer datos de FHIR en Azure API for FHIR
Importante
Azure API for FHIR se retirará el 30 de septiembre de 2026. Siga las estrategias de migración para realizar la transición a servicio FHIR® de Azure Health Data Services en esa fecha. Debido a la retirada de Azure API for FHIR, no se permitirán nuevas implementaciones a partir del 1 de abril de 2025. El servicio FHIR de Azure Health Data Services es la versión evolucionada de la API de Azure para FHIR que permite a los clientes administrar FHIR, DICOM y los servicios de tecnologías médicas con integraciones en otros servicios de Azure.
Una vez que se pueda conectar al servidor de FHIR® y publicar datos, ya puede escribir una aplicación web que leerá datos de FHIR. En este paso final del tutorial, se explicarán la escritura y el acceso a la aplicación web.
Creación de una aplicación web
En Azure, seleccione Crear un recurso y, luego, Aplicación web. Asegúrese de asignar un nombre a la aplicación web especificada en el URI de redireccionamiento de la aplicación cliente, o bien vuelva y actualice el URI de redireccionamiento con el nuevo nombre.
Una vez que la aplicación web esté disponible, seleccione Ir al recurso. Seleccione Editor de App Service (versión preliminar) en Herramientas de desarrollo a la derecha y, a continuación, Ir. Al seleccionar Ir, se abre el Editor de App Service. Seleccione con el botón derecho en el espacio gris en Explorar y cree un archivo denominado index.html.
A continuación se muestra el código que puede escribir en index.html. Deberá actualizar los siguientes elementos.
- clientId: actualícelo con el identificador de la aplicación cliente. Este id. será el mismo que ha extraído al recuperar el token
- authority: actualice con su id. de inquilino de Microsoft Entra
- FHIRendpoint: actualice FHIRendpoint para que tenga el nombre del servicio de FHIR.
- scopes: actualícelo para que refleje la dirección URL completa de la audiencia.
<!DOCTYPE html>
<html>
<head>
<title>FHIR Patient browser sample app</title>
<script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.0/js/msal.js"></script>
</head>
<body>
<div class="leftContainer">
<p id="WelcomeMessage">Welcome to the FHIR Patient browsing sample Application</p>
<button id="SignIn" onclick="signIn()">Sign In</button>
</div>
<div id="patientTable">
</div>
<script>
var msalConfig = {
auth: {
clientId: '<CLIENT-ID>',
authority: "https://login.microsoftonline.com/<AZURE-AD-TENANT-ID>"
},
cache: {
cacheLocation: "localStorage",
storeAuthStateInCookie: true
}
}
var FHIRConfig = {
FHIRendpoint: "https://<FHIR-SERVER-NAME>.azurehealthcareapis.com"
}
var requestObj = {
scopes: ["https://<FHIR-SERVER-NAME>.azurehealthcareapis.com/user_impersonation"]
}
function authRedirectCallBack(error, response) {
if (error) {
console.log(error);
} else {
if (response.tokenType === "access_token") {
callFHIRServer(FHIRConfig.FHIRendpoint + '/Patient', 'GET', null, response.accessToken, FHIRCallback);
}
}
}
var myMSALObj = new Msal.UserAgentApplication(msalConfig);
myMSALObj.handleRedirectCallback(authRedirectCallBack);
function signIn() {
myMSALObj.loginPopup(requestObj).then(function (loginResponse) {
showWelcomeMessage();
acquireTokenPopupAndCallFHIRServer();
}).catch(function (error) {
console.log(error);
})
}
function showWelcomeMessage() {
var divWelcome = document.getElementById('WelcomeMessage');
divWelcome.innerHTML = "Welcome " + myMSALObj.getAccount().userName + " to FHIR Patient Browsing App";
var loginbutton = document.getElementById('SignIn');
loginbutton.innerHTML = 'Sign Out';
loginbutton.setAttribute('onclick', 'signOut()')
}
function signOut() {
myMSALObj.logout();
}
function acquireTokenPopupAndCallFHIRServer() {
myMSALObj.acquireTokenSilent(requestObj).then(function (tokenResponse) {
callFHIRServer(FHIRConfig.FHIRendpoint + '/Patient', 'GET', null, tokenResponse.accessToken, FHIRCallback);
}).catch(function (error) {
console.log(error);
if (requiresInteraction(error.errorCode)) {
myMSALObj.acquireTokenPopup(requestObj).then(function (tokenResponse) {
callFHIRServer(FHIRConfig.FHIRendpoint + '/Patient', 'GET', null, tokenResponse.accessToken, FHIRCallback);
}).catch(function (error) {
console.log(error);
})
}
});
}
function callFHIRServer(theUrl, method, message, accessToken, callBack) {
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200)
callBack(JSON.parse(this.responseText));
}
xmlHttp.open(method, theUrl, true);
xmlHttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xmlHttp.setRequestHeader('Authorization', 'Bearer ' + accessToken);
xmlHttp.send(message);
}
function FHIRCallback(data) {
patientListHtml = '<ol>';
data.entry.forEach(function(e) {
patientListHtml += '<li>' + e.resource.name[0].family + ', ' + e.resource.name[0].given + ' (' + e.resource.id + ')';
});
patientListHtml += '</ol>';
document.getElementById("patientTable").innerHTML = patientListHtml;
}
</script>
</body>
</html>
Desde aquí, puede volver al recurso de la aplicación web y abrir la dirección URL que se encuentra en la página de información general. Inicie sesión para ver al paciente James Tiberious Kirk que ha creado anteriormente.
Pasos siguientes
Ha implementado correctamente Azure API for FHIR, ha registrado una aplicación cliente pública y ha creado una pequeña aplicación web. Como paso siguiente, consulte las características admitidas de Azure API for FHIR.
Nota:
FHIR® es una marca registrada de HL7 y se usa con su permiso.