Tutorial: Mengautentikasi dan mengotorisasi pengguna secara end-to-end di Azure App Service

Azure App Service menyediakan layanan hosting web yang sangat dapat diskalakan dan melakukan patch mandiri. Selain itu, App Service memiliki dukungan bawaan untuk autentikasi dan otorisasi pengguna. Tutorial ini menunjukkan cara mengamankan aplikasi Anda dengan autentikasi dan otorisasi App Service. Ini menggunakan aplikasi ASP.NET Core dengan Angular.js front end sebagai contoh. Autentikasi dan otorisasi App Service mendukung semua runtime bahasa, dan Anda dapat mempelajari cara menerapkannya ke bahasa pilihan Anda dengan mengikuti tutorial.

Azure App Service menyediakan layanan hosting web yang sangat dapat diskalakan dan melakukan patch mandiri menggunakan sistem operasi Linux. Selain itu, App Service memiliki dukungan bawaan untuk autentikasi dan otorisasi pengguna. Tutorial ini menunjukkan cara mengamankan aplikasi Anda dengan autentikasi dan otorisasi App Service. Ini menggunakan aplikasi ASP.NET Core dengan Angular.js front end sebagai contoh. Autentikasi dan otorisasi App Service mendukung semua runtime bahasa, dan Anda dapat mempelajari cara menerapkannya ke bahasa pilihan Anda dengan mengikuti tutorial.

Autentikasi dan otorisasi sederhana

Ini juga menunjukkan cara mengamankan aplikasi multi-tingkat, dengan mengakses API back-end yang aman atas nama pengguna terautentikasi, dari kode server dan dari kode browser.

Autentikasi dan otorisasi lanjutan

Ini hanya beberapa skenario autentikasi dan otorisasi yang mungkin dilakukan di App Service.

Berikut adalah daftar yang lebih lengkap tentang hal-hal yang Anda pelajari dalam tutorial:

  • Mengaktifkan autentikasi dan otorisasi bawaan
  • Mengamankan aplikasi terhadap permintaan yang tidak diautentikasi
  • Menggunakan Azure Active Directory sebagai penyedia identitas
  • Mengakses aplikasi jarak jauh atas nama pengguna yang masuk
  • Panggilan layanan-ke-layanan yang aman dengan autentikasi token
  • Menggunakan token akses dari kode server
  • Menggunakan token akses dari kode klien (browser)

Anda dapat mengikuti langkah-langkah dalam tutorial ini di macOS, Linux, Windows.

Jika Anda tidak memiliki Langganan Azure, buat Akun gratis Azure sebelum memulai.

Prasyarat

Untuk menyelesaikan tutorial ini:

Membuat aplikasi .NET Core lokal

Dalam langkah ini, Anda akan menyiapkan proyek .NET Core lokal. Anda menggunakan proyek yang sama untuk menyebarkan aplikasi API back-end dan aplikasi web front-end.

Buat kloning dan jalankan aplikasi sampel

  1. Jalankan perintah berikut untuk mengkloning repositori sampel dan menjalankannya.

    git clone https://github.com/Azure-Samples/dotnet-core-api
    cd dotnet-core-api
    dotnet run
    
  2. Arahkan ke http://localhost:5000 dan coba tambahkan, edit, dan hapus item tugas.

    ASP.NET Core API yang berjalan secara lokal

  3. Untuk menghentikan ASP.NET Core, tekan Ctrl+C di terminal.

  4. Pastikan cabang default adalah main.

    git branch -m main
    

    Tip

    Perubahan nama cabang tidak diperlukan oleh App Service. Namun, karena banyak repositori mengubah cabang defaultnya menjadi main, tutorial ini juga menampilkan cara menyebarkan repositori dari main. Untuk informasi selanjutnya, lihat Mengubah penyebaran cabang.

Menyebarkan aplikasi ke Azure

Dalam langkah ini, Anda akan menyebarkan proyek ke dua aplikasi App Service. Salah satunya adalah aplikasi front-end dan yang lainnya adalah aplikasi back-end.

Konfigurasi pengguna penyebaran

FTP dan Git lokal dapat disebarkan ke aplikasi web Azure dengan menggunakan pengguna penyebaran. Setelah mengonfigurasikan pengguna penyebaran, Anda dapat menggunakannya untuk semua penyebaran Azure Anda. Nama pengguna dan kata sandi penyebaran tingkat akun Anda berbeda dari info masuk langganan Azure Anda.

Untuk mengonfigurasikan pengguna penyebaran, jalankan perintah set pengguna penyebaran aplikasi web az di Azure Cloud Shell. Ganti <nama pengguna> serta <kata sandi> dengan nama pengguna dan kata sandi pengguna penyebaran.

  • Nama pengguna harus unik dalam Azure, dan untuk pendorongan Git lokal, tidak boleh berisi simbol '@'.
  • Kata sandi setidaknya harus delapan karakter, dengan dua dari tiga elemen berikut: huruf, angka, dan simbol.
az webapp deployment user set --user-name <username> --password <password>

Output JSON menunjukkan kata sandi sebagai null. Jika Anda mendapatkan kesalahan 'Conflict'. Details: 409, ubah nama pengguna. Jika Anda mendapatkan kesalahan 'Bad Request'. Details: 400, gunakan kata sandi yang lebih kuat.

Rekam nama pengguna dan kata sandi Anda untuk digunakan guna menyebarkan aplikasi web Anda.

Buat sumber daya Azure

Di Cloud Shell, jalankan perintah berikut untuk membuat dua aplikasi web Windows. Ganti <front-end-app-name> dan <back-end-app-name> dengan dua nama aplikasi unik secara global (karakter yang valid adalah a-z, 0-9, dan -). Untuk informasi lebih lanjut mengenai setiap perintah, lihat Menghosting RESTful API dengan CORS di Azure App Service.

az group create --name myAuthResourceGroup --location "West Europe"
az appservice plan create --name myAuthAppServicePlan --resource-group myAuthResourceGroup --sku FREE
az webapp create --resource-group myAuthResourceGroup --plan myAuthAppServicePlan --name <front-end-app-name> --deployment-local-git --query deploymentLocalGitUrl
az webapp create --resource-group myAuthResourceGroup --plan myAuthAppServicePlan --name <back-end-app-name> --deployment-local-git --query deploymentLocalGitUrl

Di Cloud Shell, jalankan perintah berikut untuk membuat dua aplikasi web Windows. Ganti <front-end-app-name> dan <back-end-app-name> dengan dua nama aplikasi unik secara global (karakter yang valid adalah a-z, 0-9, dan -). Untuk informasi selengkapnya tentang setiap perintah, lihat Membuat aplikasi .NET Core di Azure App Service.

az group create --name myAuthResourceGroup --location "West Europe"
az appservice plan create --name myAuthAppServicePlan --resource-group myAuthResourceGroup --sku FREE --is-linux
az webapp create --resource-group myAuthResourceGroup --plan myAuthAppServicePlan --name <front-end-app-name> --runtime "DOTNETCORE|3.1" --deployment-local-git --query deploymentLocalGitUrl
az webapp create --resource-group myAuthResourceGroup --plan myAuthAppServicePlan --name <back-end-app-name> --runtime "DOTNETCORE|3.1" --deployment-local-git --query deploymentLocalGitUrl

Catatan

Simpan URL jarak jauh Git untuk aplikasi front-end dan aplikasi back-end Anda, yang ditampilkan dalam output dari az webapp create.

Dorong ke Azure dari Git

  1. Karena Anda menyebarkan cabang main, Anda perlu menetapkan cabang penyebaran default untuk dua aplikasi App Service Anda ke main (lihat Mengubah penyebaran cabang). Di Azure Cloud Shell, tetapkan pengaturan aplikasi DEPLOYMENT_BRANCH dengan perintah az webapp config appsettings set.

    az webapp config appsettings set --name <front-end-app-name> --resource-group myAuthResourceGroup --settings DEPLOYMENT_BRANCH=main
    az webapp config appsettings set --name <back-end-app-name> --resource-group myAuthResourceGroup --settings DEPLOYMENT_BRANCH=main
    
  2. Kembali ke jendela terminal lokal, jalankan perintah Git berikut untuk disebarkan ke aplikasi back-end. Ganti <deploymentLocalGitUrl-of-back-end-app> dengan URL akses jarak jauh Git yang Anda simpan dari Buat sumber daya Azure. Ketika dimintai kredensial oleh Git Credential Manager, pastikan Anda memasukkan kredensial penyebaran Anda, bukan kredensial yang Anda gunakan untuk masuk ke portal Microsoft Azure.

    git remote add backend <deploymentLocalGitUrl-of-back-end-app>
    git push backend main
    
  3. Di jendela terminal lokal, jalankan perintah Git berikut untuk menyebarkan kode yang sama ke aplikasi front-end. Ganti <deploymentLocalGitUrl-of-front-end-app> dengan URL akses jarak jauh Git yang Anda simpan dari Buat sumber daya Azure.

    git remote add frontend <deploymentLocalGitUrl-of-front-end-app>
    git push frontend main
    

Telusuri aplikasi

Arahkan ke URL berikut di browser dan lihat berfungsinya kedua aplikasi.

http://<back-end-app-name>.azurewebsites.net
http://<front-end-app-name>.azurewebsites.net

Cuplikan layar Rest API Azure App Service di jendela browser, yang memperlihatkan aplikasi Daftar tugas.

Catatan

Jika aplikasi dimulai ulang, Anda mungkin telah melihat bahwa data baru telah dihapus. Perilaku ini berdasarkan desain karena aplikasi ASP.NET Core sampel menggunakan database dalam memori.

Memanggil API back-end dari front-end

Dalam langkah ini, Anda mengarahkan kode server aplikasi front-end untuk mengakses API back-end. Kemudian, Anda mengaktifkan akses terautentikasi dari front-end ke back-end.

Ubah kode front-end

  1. Di repositori lokal, buka Controllers/TodoController.cs. Di awal kelas TodoController, tambahkan baris berikut dan ganti <back-end-app-name> dengan nama aplikasi back-end Anda:

    private static readonly HttpClient _client = new HttpClient();
    private static readonly string _remoteUrl = "https://<back-end-app-name>.azurewebsites.net";
    
  2. Temukan metode yang didekorasi dengan [HttpGet] dan ganti kode di dalam kurung kurawal dengan:

    var data = await _client.GetStringAsync($"{_remoteUrl}/api/Todo");
    return JsonConvert.DeserializeObject<List<TodoItem>>(data);
    

    Baris pertama membuat panggilan GET /api/Todo ke aplikasi API back-end.

  3. Berikutnya, temukan metode yang didekorasi dengan [HttpGet("{id}")] dan ganti kode di dalam kurung kurawal dengan:

    var data = await _client.GetStringAsync($"{_remoteUrl}/api/Todo/{id}");
    return Content(data, "application/json");
    

    Baris pertama membuat panggilan GET /api/Todo/{id} ke aplikasi API back-end.

  4. Berikutnya, temukan metode yang didekorasi dengan [HttpPost] dan ganti kode di dalam kurung kurawal dengan:

    var response = await _client.PostAsJsonAsync($"{_remoteUrl}/api/Todo", todoItem);
    var data = await response.Content.ReadAsStringAsync();
    return Content(data, "application/json");
    

    Baris pertama membuat panggilan POST /api/Todo ke aplikasi API back-end.

  5. Berikutnya, temukan metode yang didekorasi dengan [HttpPut("{id}")] dan ganti kode di dalam kurung kurawal dengan:

    var res = await _client.PutAsJsonAsync($"{_remoteUrl}/api/Todo/{id}", todoItem);
    return new NoContentResult();
    

    Baris pertama membuat panggilan PUT /api/Todo/{id} ke aplikasi API back-end.

  6. Berikutnya, temukan metode yang didekorasi dengan [HttpDelete("{id}")] dan ganti kode di dalam kurung kurawal dengan:

    var res = await _client.DeleteAsync($"{_remoteUrl}/api/Todo/{id}");
    return new NoContentResult();
    

    Baris pertama membuat panggilan DELETE /api/Todo/{id} ke aplikasi API back-end.

  7. Simpan semua perubahan yang Anda lakukan. Di jendela terminal lokal, sebarkan perubahan Anda ke aplikasi front-end dengan perintah Git berikut:

    git add .
    git commit -m "call back-end API"
    git push frontend main
    

Periksa perubahan yang Anda lakukan

  1. Arahkan ke http://<front-end-app-name>.azurewebsites.net dan tambahkan beberapa item, seperti from front end 1 dan from front end 2.

  2. Arahkan ke http://<back-end-app-name>.azurewebsites.net untuk melihat item yang ditambahkan dari aplikasi front-end. Selain itu, tambahkan beberapa item, seperti from back end 1 dan from back end 2, lalu refresh aplikasi front-end untuk melihat apakah perubahan diterapkan.

    Cuplikan layar Sampel Rest API Azure App Service di jendela browser, yang memperlihatkan aplikasi Daftar tugas dengan item yang ditambahkan dari aplikasi front-end.

Mengonfigurasi autentikasi

Dalam langkah ini, Anda mengaktifkan autentikasi dan otorisasi untuk dua aplikasi. Anda juga mengonfigurasi aplikasi front-end untuk menghasilkan token akses yang dapat Anda gunakan untuk melakukan panggilan terautentikasi ke aplikasi back-end.

Anda menggunakan Azure Active Directory sebagai penyedia identitas. Untuk informasi selengkapnya, lihat Mengonfigurasi autentikasi Azure Active Directory untuk aplikasi App Services Anda.

Aktifkan autentikasi dan otorisasi untuk aplikasi back-end

  1. Pada menu portal Microsoft Azure, pilih Grup sumber daya atau cari dan pilih Grup sumber daya dari halaman mana pun.

  2. Di Grup sumber saya, temukan dan pilih grup sumber daya Anda. Di Gambaran umum, pilih halaman manajemen aplikasi back-end Anda.

    Cuplikan layar jendela Grup sumber daya, memperlihatkan Gambaran Umum untuk contoh grup sumber daya dan halaman manajemen aplikasi back-end yang dipilih.

  3. Di menu sebelah kiri aplikasi back-end Anda, pilih Autentikasi, lalu klik Tambahkan penyedia identitas.

  4. Di halaman Tambahkan penyedia identitas, pilih Microsoft sebagai Penyedia identitas untuk masuk ke identitas Microsoft dan Azure AD.

  5. Terima pengaturan default dan pilih OK.

    Cuplikan layar menu sebelah kiri aplikasi back-end menampilkan Autentikasi/Otorisasi dan pengaturan yang dipilih di menu kanan.

  6. Halaman Autentikasi terbuka. Salin ID Klien dari aplikasi Azure AD ke notepad. Anda memerlukan nilai ini nanti.

    Cuplikan layar jendela Pengaturan Azure Active Directory menampilkan Aplikasi Azure AD, dan jendela Aplikasi Azure AD menampilkan ID Klien untuk disalin.

Jika Anda berhenti di sini, Anda memiliki aplikasi mandiri yang sudah diamankan oleh autentikasi dan otorisasi App Service. Bagian yang tersisa menunjukkan kepada Anda cara mengamankan solusi multi-aplikasi dengan "mengalirkan" pengguna terautentikasi dari front end ke back end.

Aktifkan autentikasi dan otorisasi untuk aplikasi front-end

Ikuti langkah yang sama untuk aplikasi front-end, tetapi lewati langkah terakhir. Anda tidak memerlukan ID klien untuk aplikasi front-end. Namun, tetap di halaman Autentikasi untuk aplikasi front-end karena Anda akan menggunakannya di langkah berikutnya.

Jika Anda ingin, arahkan ke http://<front-end-app-name>.azurewebsites.net. Tindakan tersebut akan mengarahkan Anda ke halaman masuk yang aman. Setelah masuk, Anda masih tidak dapat mengakses data dari aplikasi back-end, karena aplikasi back-end kini memerlukan masuk Azure Active Directory dari aplikasi front-end. Anda perlu melakukan tiga hal berikut:

  • Memberikan akses front-end ke back-end
  • Mengonfigurasi App Service untuk mengembalikan token yang dapat digunakan
  • Menggunakan token dalam kode Anda

Tip

Jika Anda mengalami kesalahan dan mengonfigurasi ulang pengaturan autentikasi/otorisasi aplikasi, token dalam toko token mungkin tidak diregenerasi dari pengaturan baru. Untuk memastikan token diregenerasi, Anda harus keluar dan masuk kembali ke aplikasi Anda. Cara mudah untuk melakukannya adalah dengan menggunakan browser Anda dalam mode privat, serta menutup dan membuka kembali browser dalam mode privat setelah mengubah pengaturan di aplikasi Anda.

Berikan akses aplikasi front-end ke back end

Kini setelah Anda mengaktifkan autentikasi dan otorisasi ke kedua aplikasi Anda, masing-masing didukung oleh aplikasi AD. Dalam langkah ini, Anda memberikan izin aplikasi front-end untuk mengakses back-end atas nama pengguna. (Secara teknis, Anda memberikan izin pada aplikasi AD front-end untuk mengakses aplikasi AD back-end atas nama pengguna.)

  1. Di halaman Autentikasi aplikasi front-end, pilih nama aplikasi front-end Anda di bawah Penyedia identitas. Pendaftaran aplikasi ini secara otomatis dibuat untuk Anda. Pilih Izin API di menu sebelah kiri.

  2. Pilih Tambahkan izin, kemudian pilih My APIs><back-end-app-name>.

  3. Di halaman Minta izin API untuk aplikasi back-end, pilih Izin yang didelegasikan dan user_impersonation, lalu pilih Tambahkan izin.

    Cuplikan layar halaman izin API Permintaan menampilkan izin Terdelegasi, user_impersonation, dan tombol Tambahkan izin dipilih.

Mengonfigurasi App Service untuk mengembalikan token akses yang dapat digunakan

Aplikasi front-end kini memiliki izin yang diperlukan untuk mengakses aplikasi back-end sebagai pengguna yang masuk. Dalam langkah ini, Anda mengonfigurasi autentikasi dan otorisasi App Service untuk memberi token akses yang dapat digunakan untuk mengakses back-end. Untuk langkah ini, Anda memerlukan ID klien back-end, yang Anda salin dari Aktifkan autentikasi dan otorisasi untuk aplikasi back-end.

Di Cloud Shell, jalankan perintah berikut pada aplikasi ujung depan untuk menambahkan parameter scope ke pengaturan autentikasi identityProviders.azureActiveDirectory.login.loginParameters. Ganti <front-end-app-name> dan <back-end-client-id>.

authSettings=$(az webapp auth show -g myAuthResourceGroup -n <front-end-app-name>)
authSettings=$(echo "$authSettings" | jq '.properties' | jq '.identityProviders.azureActiveDirectory.login += {"loginParameters":["scope=openid profile email offline_access api://<back-end-client-id>/user_impersonation"]}')
az webapp auth set --resource-group myAuthResourceGroup --name <front-end-app-name> --body "$authSettings"

Perintah tersebut menambahkan properti loginParameters secara efektif dengan cakupan kustom tambahan. Berikut adalah penjelasan tentang cakupan yang diminta:

  • openid, profile, dan email diminta oleh App Service secara default. Untuk mengetahui informasinya, lihat Cakupan OpenID Connect.
  • api://<back-end-client-id>/user_impersonation adalah API yang terbuka dalam pendaftaran aplikasi back-end Anda. Ini adalah cakupan yang memberi Anda token JWT yang mencakup aplikasi back-end sebagai pemirsa token.
  • offline_access disertakan di sini untuk kenyamanan (jika Anda ingin merefresh token).

Tip

  • Untuk menampilkan cakupan api://<back-end-client-id>/user_impersonation di portal Azure, buka halaman Autentikasi untuk aplikasi back-end, klik tautan di bawah Penyedia identitas, lalu klik Ekspos API di menu sebelah kiri.
  • Untuk mengonfigurasi cakupan yang diperlukan menggunakan antarmuka web sebagai gantinya, lihat langkah Microsoft di Refresh token autentikasi.
  • Beberapa cakupan memerlukan persetujuan admin atau pengguna. Persyaratan ini menyebabkan halaman permintaan persetujuan ditampilkan ketika pengguna masuk ke aplikasi front-end di browser. Untuk menghindari halaman persetujuan ini, tambahkan pendaftaran aplikasi front end sebagai aplikasi klien resmi di halaman Tampilkan API dengan mengeklik Tambahkan aplikasi klien dan berikan ID klien pendaftaran aplikasi front end.

Catatan

Untuk aplikasi Linux, Ada persyaratan sementara guna mengonfigurasi pengaturan versi untuk pendaftaran aplikasi back-end. Di Azure Cloud Shell, konfigurasikan pengaturan versi dengan perintah berikut. Pastikan untuk mengganti <back-end-client-id> dengan ID klien back end Anda.

id=$(az ad app show --id <back-end-client-id> --query id --output tsv)
az rest --method PATCH --url https://graph.microsoft.com/v1.0/applications/$id --body "{'api':{'requestedAccessTokenVersion':2}}" 

Aplikasi Anda kini telah dikonfigurasi. Front-end sekarang siap untuk mengakses back-end dengan token akses yang tepat.

Untuk informasi tentang cara mengonfigurasi token akses untuk penyedia lain, lihat Merefresh token penyedia identitas.

Panggil API dengan aman dari kode server

Dalam langkah ini, Anda mengaktifkan kode server yang sebelumnya dimodifikasi untuk melakukan panggilan terautentikasi ke API back-end.

Aplikasi front-end Anda kini memiliki izin yang diperlukan, juga menambahkan ID klien back-end ke parameter login. Oleh karena itu, aplikasi dapat memperoleh token akses untuk autentikasi dengan aplikasi back-end. App Service memberikan token ini ke kode server Anda dengan menyuntikkan header X-MS-TOKEN-AAD-ACCESS-TOKEN ke setiap permintaan terautentikasi (lihat Mengambil token dalam kode aplikasi).

Catatan

Header ini disuntikkan untuk semua bahasa yang didukung. Anda mengaksesnya menggunakan pola standar untuk setiap bahasa.

  1. Di repositori lokal, buka lagi Controllers/TodoController.cs. Di bawah konstruktor TodoController(TodoContext context), tambahkan kode berikut:

    public override void OnActionExecuting(ActionExecutingContext context)
    {
        base.OnActionExecuting(context);
    
        _client.DefaultRequestHeaders.Accept.Clear();
        _client.DefaultRequestHeaders.Authorization =
            new AuthenticationHeaderValue("Bearer", Request.Headers["X-MS-TOKEN-AAD-ACCESS-TOKEN"]);
    }
    

    Kode ini menambahkan header HTTP standar Authorization: Bearer <access-token> ke semua panggilan API jarak jauh. Dalam alur eksekusi permintaan ASP.NET Core MVC, OnActionExecuting dijalankan tepat sebelum tindakan masing-masing, sehingga setiap panggilan API keluar Anda kini menyajikan token akses.

  2. Simpan semua perubahan yang Anda lakukan. Di jendela terminal lokal, sebarkan perubahan Anda ke aplikasi front-end dengan perintah Git berikut:

    git add .
    git commit -m "add authorization header for server code"
    git push frontend main
    
  3. Masuk lagi ke https://<front-end-app-name>.azurewebsites.net. Di halaman perjanjian penggunaan data pengguna, klik Terima.

    Sekarang Anda dapat membuat, membaca, memperbarui, dan menghapus data dari aplikasi back-end seperti sebelumnya. Satu-satunya perbedaan adalah bahwa kedua aplikasi kini diamankan oleh autentikasi dan otorisasi App Service, termasuk panggilan layanan ke layanan.

Selamat! Kode server Anda kini mengakses data back-end atas nama pengguna terautentikasi.

Memanggil API dengan aman dari kode browser

Dalam langkah ini, Anda mengarahkan aplikasi Angular.js front-end ke API back-end. Dengan cara ini, Anda mempelajari cara mengambil token akses dan melakukan panggilan API ke aplikasi back-end dengannya.

Sementara kode server memiliki akses ke header permintaan, kode klien dapat mengakses GET /.auth/me untuk mendapatkan token akses yang sama (lihat Mengambil token dalam kode aplikasi).

Tip

Bagian ini menggunakan metode HTTP standar untuk menunjukkan panggilan HTTP yang aman. Namun, Anda dapat menggunakan Pustaka Autentikasi Microsoft untuk JavaScript untuk membantu menyederhanakan pola aplikasi Angular.js.

Konfigurasikan CORS

Di Cloud Shell, aktifkan CORS ke URL klien Anda menggunakan perintah az webapp cors add. Ganti tempat penampung <back-end-app-name> dan <front-end-app-name>.

az webapp cors add --resource-group myAuthResourceGroup --name <back-end-app-name> --allowed-origins 'https://<front-end-app-name>.azurewebsites.net'

Langkah ini tidak terkait dengan autentikasi dan otorisasi. Namun, Anda memerlukannya agar browser Anda mengizinkan panggilan API lintas domain dari aplikasi Angular.js Anda. Untuk informasi selengkapnya, lihat Menambahkan fungsionalitas CORS.

Arahkan aplikasi Angular.js ke API back-end

  1. Di repositori lokal, buka wwwroot/index.html.

  2. Di Baris 51, atur variabel apiEndpoint ke URL HTTPS dari aplikasi back-end Anda (https://<back-end-app-name>.azurewebsites.net). Ganti <back-end-app-name> dengan nama aplikasi Anda di App Service.

  3. Di repositori lokal, buka wwwroot/app/scripts/todoListSvc.js dan lihat apiEndpoint didahulukan untuk semua panggilan API. Aplikasi Angular.js Anda kini memanggil API back-end.

Tambahkan token akses ke panggilan API

  1. Di wwwroot/app/scripts/todoListSvc.js, di atas daftar panggilan API (di atas baris getItems : function(){), tambahkan fungsi berikut ke daftar:

    setAuth: function (token) {
        $http.defaults.headers.common['Authorization'] = 'Bearer ' + token;
    },
    

    Fungsi ini dipanggil untuk mengatur header Authorization default dengan token akses. Anda akan memerlukannya pada langkah berikutnya.

  2. Di repositori lokal, buka wwwroot/app/scripts/app.js dan cari kode berikut:

    $routeProvider.when("/Home", {
        controller: "todoListCtrl",
        templateUrl: "/App/Views/TodoList.html",
    }).otherwise({ redirectTo: "/Home" });
    
  3. Ganti seluruh blok kode dengan kode berikut:

    $routeProvider.when("/Home", {
        controller: "todoListCtrl",
        templateUrl: "/App/Views/TodoList.html",
        resolve: {
            token: ['$http', 'todoListSvc', function ($http, todoListSvc) {
                return $http.get('/.auth/me').then(function (response) {
                    todoListSvc.setAuth(response.data[0].access_token);
                    return response.data[0].access_token;
                });
            }]
        },
    }).otherwise({ redirectTo: "/Home" });
    

    Perubahan baru menambahkan pemetaan resolve yang memanggil /.auth/me dan mengatur token akses. Hal ini memastikan Anda memiliki token akses sebelum memulai pengontrol todoListCtrl. Dengan cara ini, semua panggilan API oleh pengontrol akan mencakupkan token.

Sebarkan pembaruan dan pengujian

  1. Simpan semua perubahan yang Anda lakukan. Di jendela terminal lokal, sebarkan perubahan Anda ke aplikasi front-end dengan perintah Git berikut:

    git add .
    git commit -m "add authorization header for Angular"
    git push frontend main
    
  2. Arahkan lagi ke https://<front-end-app-name>.azurewebsites.net. Sekarang Anda dapat membuat, membaca, memperbarui, dan menghapus data dari aplikasi back-end langsung di aplikasi Angular.js.

Selamat! Kode server Anda kini mengakses data back-end atas nama pengguna terautentikasi.

Ketika token akses kedaluwarsa

Token akses Anda kedaluwarsa setelah beberapa waktu. Untuk informasi tentang cara merefresh token akses Anda tanpa mengharuskan pengguna untuk melakukan otorisasi ulang dengan aplikasi Anda, lihat Merefresh token penyedia identitas.

Membersihkan sumber daya

Dalam langkah-langkah sebelumnya, Anda membuat sumber daya Azure dalam grup sumber daya. Jika Anda tidak ingin membutuhkan sumber daya ini di masa mendatang, hapus grup sumber daya dengan menjalankan perintah berikut ini di Cloud Shell:

az group delete --name myAuthResourceGroup

Perintah ini mungkin perlu waktu satu menit untuk dijalankan.

Langkah berikutnya

Apa yang Anda pelajari:

  • Mengaktifkan autentikasi dan otorisasi bawaan
  • Mengamankan aplikasi terhadap permintaan yang tidak diautentikasi
  • Menggunakan Azure Active Directory sebagai penyedia identitas
  • Mengakses aplikasi jarak jauh atas nama pengguna yang masuk
  • Panggilan layanan-ke-layanan yang aman dengan autentikasi token
  • Menggunakan token akses dari kode server
  • Menggunakan token akses dari kode klien (browser)

Lanjutkan ke tutorial berikutnya untuk mempelajari cara memetakan nama DNS kustom ke aplikasi Anda.