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.
Ahora que puede conectarse al servidor de FHIR y publicar datos, está preparado para 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 redirección de la aplicación cliente o vuelva y actualice el URI de redirección con el nuevo nombre.
Una vez que la aplicación web esté disponible, haga clic en 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 abrirá el Editor de App Service. Seleccione con el botón derecho en el espacio gris en Explorar y cree un archivo denominado index.html.
Se incluye el código que puede introducir en index.html. Deberá actualizar los siguientes elementos:
- clientId: actualícelo con el identificador de la aplicación cliente. Este identificador será el mismo identificador que extrajo 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, ha probado el acceso y ha creado una pequeña aplicación web. Consulte las características admitidas de Azure API for FHIR como paso siguiente.
FHIR® es una marca registrada de HL7 y se usa con su permiso.