Bagikan melalui

Menulis aplikasi web Azure untuk membaca data FHIR di Azure API untuk FHIR

  • Artikel

Sekarang setelah Anda dapat terhubung ke server FHIR dan data POST, Anda siap untuk menulis aplikasi web yang akan membaca data FHIR. Dalam langkah terakhir tutorial ini, kita akan berjalan melalui penulisan dan mengakses aplikasi web.

Membuat aplikasi web

Di Azure, pilih Buat sumber daya dan pilih Aplikasi Web. Pastikan untuk memberi nama aplikasi web Anda apa pun yang Anda tentukan dalam URI pengalihan untuk aplikasi klien Anda atau kembali dan perbarui URI pengalihan dengan nama baru.

Membuat Aplikasi Web

Setelah aplikasi web tersedia, Buka sumber daya. Pilih editor App Service (Pratinjau) di bawah Alat Pengembangan di sebelah kanan lalu pilih Buka. Memilih Buka akan membuka Editor App Service. Pilih kanan di ruang abu-abu di bawah Jelajahi dan buat file baru yang disebut index.html.

Disertakan adalah kode yang dapat Anda masukkan ke dalamindex.html. Anda harus memperbarui item berikut:

  • clientId - Perbarui dengan ID aplikasi klien Anda. ID ini akan menjadi ID yang sama dengan yang Anda tarik saat mengambil token Anda
  • authority - Perbarui dengan ID penyewa Azure AD Anda
  • FHIRendpoint - Perbarui FHIRendpoint untuk memiliki nama layanan FHIR Anda
  • cakupan - Perbarui untuk mencerminkan URL lengkap untuk audiens Anda

<!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>

Dari sini, Anda dapat kembali ke sumber daya aplikasi web Anda dan membuka URL yang ditemukan di halaman Gambaran Umum. Masuk untuk melihat pasien James Tiberious Kirk yang anda buat sebelumnya.

Langkah berikutnya

Anda telah berhasil menyebarkan Azure API untuk FHIR, mendaftarkan aplikasi klien publik, menguji akses, dan membuat aplikasi web kecil. Lihat Azure API untuk fitur yang didukung FHIR sebagai langkah berikutnya.

Fitur yang Didukung

FHIR® adalah merek dagang terdaftar HL7 dan digunakan dengan izin HL7.