Écrire une application web Azure pour lire des données FHIR dans l’API Azure pour FHIR
Maintenant que vous êtes en mesure de vous connecter à votre serveur FHIR et à vos données POST, vous êtes prêt à écrire une application web qui lit les données FHIR. Dans cette dernière étape du tutoriel, nous allons parcourir l’écriture et l’accès à l’application web.
Créer l’application web
Dans Azure, sélectionnez Créer une ressource et Application web. Veillez à attribuer à l’application web le nom que vous avez spécifié dans l’URI de redirection pour votre application cliente, ou revenez en arrière et mettez à jour l’URI de redirection avec le nouveau nom.
Une fois l’application web disponible, choisissez Accéder à la ressource. Sélectionnez Éditeur App Service (Préversion) sous Outils de développement à droite, puis sélectionnez Accéder. Cela a pour effet d’ouvrir l’Éditeur App Service. Sélectionnez à droite dans l’espace gris sous Explorer et créez un fichier appelé index.html.
Le code que vous pouvez entrer dans index.htmlest inclus. Vous devez mettre à jour les éléments suivants :
- clientId – À mettre à jour avec l’ID de votre application cliente. Cet ID est le même que celui que vous avez extrait au moment de récupérer votre jeton
- authority – À mettre à jour avec votre ID de locataire Azure AD
- FHIRendpoint – À mettre à jour avec le nom de votre service FHIR
- scopes – À mettre à jour pour faire apparaître l’URL complète de votre audience
<!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>
À partir de là, vous pouvez revenir à votre ressource d’application web et ouvrir l’URL figurant dans la page Vue d’ensemble. Connectez-vous pour voir le patient James Tiberious Kirk que vous avez créé précédemment.
Étapes suivantes
Vous avez correctement déployé l’API Azure pour FHIR, inscrit une application cliente publique, testé l’accès et créé une petite application web. Découvrez maintenant les fonctionnalités prises en charge par l’API Azure pour FHIR.
FHIR® est une marque déposée de HL7 utilisé avec l’autorisation de HL7.