Bagikan melalui

Layanan Autentikasi Eksternal dengan ASP.NET Web API (C#)

Untuk pengembangan aplikasi web baru, kami merekomendasikan API Minimal

Sebaiknya gunakan opsi autentikasi aman yang paling aman. Untuk aplikasi .NET yang disebarkan ke Azure, lihat:

Azure Key Vault dan .NET Aspire menyediakan cara paling aman untuk menyimpan dan mengambil rahasia. Azure Key Vault adalah layanan cloud yang melindungi kunci enkripsi dan rahasia seperti sertifikat, string koneksi, dan kata sandi. Untuk .NET Aspire, lihat komunikasi aman antara host dan integrasi klien.

Hindari Pemberian Kredensial Kata Sandi Pemilik Sumber Daya karena:

  • Mengekspos kata sandi pengguna ke klien.
  • Adalah risiko keamanan yang signifikan.
  • Hanya boleh digunakan ketika alur autentikasi lain tidak dimungkinkan.

Saat aplikasi disebarkan ke server pengujian, variabel lingkungan dapat digunakan untuk mengatur string koneksi ke server database pengujian. Variabel lingkungan umumnya disimpan dalam teks biasa dan tidak terenkripsi. Jika mesin atau proses disusupi, variabel lingkungan dapat diakses oleh pihak yang tidak tepercaya. Sebaiknya jangan gunakan variabel lingkungan untuk menyimpan string koneksi produksi karena ini bukan pendekatan yang paling aman.

Panduan data konfigurasi:

  • Jangan pernah menyimpan kata sandi atau data sensitif lainnya dalam kode penyedia konfigurasi atau dalam file konfigurasi teks biasa.
  • Jangan gunakan rahasia produksi di lingkungan pengembangan atau pengujian.
  • Tentukan rahasia di luar proyek sehingga tidak dapat diterapkan secara tidak sengaja ke repositori kode sumber.

Visual Studio 2017 dan ASP.NET 4.7.2 memperluas opsi keamanan untuk Single Page Applications (SPA) dan Web API untuk mengintegrasikan layanan dengan layanan autentikasi eksternal, yang mencakup beberapa layanan autentikasi OAuth/OpenID dan media sosial: Akun Microsoft, Twitter, Facebook, dan Google.

Dalam Petunjuk Langkah demi Langkah ini

Prasyarat

Untuk mengikuti contoh dalam panduan ini, Anda harus memiliki hal berikut:

Menggunakan Layanan Autentikasi Eksternal

Banyaknya layanan autentikasi eksternal yang saat ini tersedia untuk pengembang web membantu mengurangi waktu pengembangan saat membuat aplikasi web baru. Pengguna web biasanya memiliki beberapa akun yang ada untuk layanan web populer dan situs web media sosial, oleh karena itu ketika aplikasi web menerapkan layanan autentikasi dari layanan web eksternal atau situs web media sosial, itu menghemat waktu pengembangan yang akan dihabiskan untuk membuat implementasi autentikasi. Menggunakan layanan autentikasi eksternal akan menghemat pengguna akhir agar tidak perlu membuat akun lain untuk aplikasi web Anda, dan juga karena harus mengingat nama pengguna dan kata sandi lain.

Di masa lalu, pengembang telah memiliki dua pilihan: membuat implementasi autentikasi mereka sendiri, atau mempelajari cara mengintegrasikan layanan autentikasi eksternal ke dalam aplikasi mereka. Pada tingkat yang paling dasar, diagram berikut mengilustrasikan alur permintaan sederhana untuk agen pengguna (browser web) yang meminta informasi dari aplikasi web yang dikonfigurasi untuk menggunakan layanan autentikasi eksternal:

Ilustrasi alur permintaan sederhana untuk agen pengguna

Dalam diagram sebelumnya, agen pengguna (atau browser web dalam contoh ini) membuat permintaan ke aplikasi web, yang mengalihkan browser web ke layanan autentikasi eksternal. Agen pengguna mengirimkan kredensialnya ke layanan autentikasi eksternal, dan jika agen pengguna telah berhasil diautentikasi, layanan autentikasi eksternal akan mengalihkan agen pengguna ke aplikasi web asli dengan beberapa bentuk token yang akan dikirim agen pengguna ke aplikasi web. Aplikasi web akan menggunakan token untuk memverifikasi bahwa agen pengguna telah berhasil diautentikasi oleh layanan autentikasi eksternal, dan aplikasi web dapat menggunakan token untuk mengumpulkan informasi lebih lanjut tentang agen pengguna. Setelah aplikasi selesai memproses informasi agen pengguna, aplikasi web akan mengembalikan respons yang sesuai ke agen pengguna berdasarkan pengaturan otorisasinya.

Dalam contoh kedua ini, agen pengguna bernegosiasi dengan aplikasi web dan server otorisasi eksternal, dan aplikasi web melakukan komunikasi tambahan dengan server otorisasi eksternal untuk mengambil informasi tambahan tentang agen pengguna:

Ilustrasi agen pengguna yang bernegosiasi dengan aplikasi web

Visual Studio 2017 dan ASP.NET 4.7.2 membuat integrasi dengan layanan autentikasi eksternal lebih mudah bagi pengembang dengan menyediakan integrasi bawaan untuk layanan autentikasi berikut:

  • Facebook
  • Google
  • Akun Microsoft (akun WINDOWS Live ID)
  • Twitter

Contoh dalam panduan ini akan menunjukkan cara mengonfigurasi setiap layanan autentikasi eksternal yang didukung dengan menggunakan templat Aplikasi Web ASP.NET baru yang dikirim dengan Visual Studio 2017.

Nota

Jika perlu, Anda mungkin perlu menambahkan FQDN ke pengaturan untuk layanan autentikasi eksternal Anda. Persyaratan ini didasarkan pada batasan keamanan untuk beberapa layanan autentikasi eksternal yang memerlukan FQDN di pengaturan aplikasi Anda agar sesuai dengan FQDN yang digunakan oleh klien Anda. (Langkah-langkah untuk ini akan sangat bervariasi untuk setiap layanan autentikasi eksternal; Anda harus berkonsultasi dengan dokumentasi untuk setiap layanan autentikasi eksternal untuk melihat apakah ini diperlukan dan cara mengonfigurasi pengaturan ini.) Jika Anda perlu mengonfigurasi IIS Express untuk menggunakan FQDN untuk menguji lingkungan ini, lihat bagian Mengonfigurasi IIS Express untuk menggunakan Nama Domain yang Sepenuhnya Memenuhi Syarat nanti di panduan ini.

Membuat Contoh Aplikasi Web

Langkah-langkah berikut akan mengarahkan Anda melalui pembuatan aplikasi sampel dengan menggunakan templat Aplikasi Web ASP.NET, dan Anda akan menggunakan aplikasi sampel ini untuk setiap layanan autentikasi eksternal nanti dalam panduan ini.

Mulai Visual Studio 2017 dan pilih Proyek Baru dari halaman Mulai. Atau, dari menu File, pilih Baru dan kemudian Project.

Saat kotak dialog Proyek Baru ditampilkan, pilih Terinstal dan perluas Visual C#. Di bawahVisual C#, pilih Web. Dalam daftar templat proyek, pilih ASP.NET Web Application (.Net Framework). Masukkan nama untuk proyek Anda dan klik OK.

Kotak Dialog Proyek Baru Gambar

Saat Proyek ASP.NET Baru ditampilkan, pilih templat Aplikasi Halaman Tunggal dan klik Buat Proyek.

Gambar pemilihan templat Gambar

Tunggu saat Visual Studio 2017 membuat proyek Anda.

Setelah Visual Studio 2017 selesai membuat proyek Anda, buka file Startup.Auth.cs yang terletak di folder App_Start.

Ketika Anda pertama kali membuat proyek, tidak ada layanan autentikasi eksternal yang diaktifkan dalam file Startup.Auth.cs; berikut ini menggambarkan apa yang mungkin menyerupai kode Anda, dengan bagian yang disorot di mana Anda akan mengaktifkan layanan autentikasi eksternal dan pengaturan yang relevan untuk menggunakan Akun Microsoft, Twitter, Facebook, atau autentikasi Google dengan aplikasi ASP.NET Anda:

using System;
using Microsoft.AspNet.Identity;
using Microsoft.AspNet.Identity.EntityFramework;
using Microsoft.AspNet.Identity.Owin;
using Microsoft.Owin;
using Microsoft.Owin.Security.Cookies;
using Microsoft.Owin.Security.DataProtection;
using Microsoft.Owin.Security.Google;
using Microsoft.Owin.Security.OAuth;
using Owin;
using WebApplication1.Models;
using WebApplication1.Providers;

namespace WebApplication1
{
    public partial class Startup
    {
        // Enable the application to use OAuthAuthorization. You can then secure your Web APIs
        static Startup()
        {
            PublicClientId = "web";

            OAuthOptions = new OAuthAuthorizationServerOptions
            {
                TokenEndpointPath = new PathString("/Token"),
                AuthorizeEndpointPath = new PathString("/Account/Authorize"),
                Provider = new ApplicationOAuthProvider(PublicClientId),
                AccessTokenExpireTimeSpan = TimeSpan.FromDays(14),
                AllowInsecureHttp = true
            };
        }

        public static OAuthAuthorizationServerOptions OAuthOptions { get; private set; }

        public static string PublicClientId { get; private set; }

        // For more information on configuring authentication, please visit https://go.microsoft.com/fwlink/?LinkId=301864
        public void ConfigureAuth(IAppBuilder app)
        {
            // Configure the db context, user manager and signin manager to use a single instance per request
            app.CreatePerOwinContext(ApplicationDbContext.Create);
            app.CreatePerOwinContext<ApplicationUserManager>(ApplicationUserManager.Create);
            app.CreatePerOwinContext<ApplicationSignInManager>(ApplicationSignInManager.Create);

            // Enable the application to use a cookie to store information for the signed in user
            app.UseCookieAuthentication(new CookieAuthenticationOptions
            {
                AuthenticationType = DefaultAuthenticationTypes.ApplicationCookie,
                LoginPath = new PathString("/Account/Login"),
                Provider = new CookieAuthenticationProvider
                {
                    // Enables the application to validate the security stamp when the user logs in.
                    // This is a security feature which is used when you change a password or add an external login to your account.  
                    OnValidateIdentity = SecurityStampValidator.OnValidateIdentity<ApplicationUserManager, ApplicationUser>(
                        validateInterval: TimeSpan.FromMinutes(20),
                        regenerateIdentity: (manager, user) => user.GenerateUserIdentityAsync(manager))
                }
            });
            // Use a cookie to temporarily store information about a user logging in with a third party login provider
            app.UseExternalSignInCookie(DefaultAuthenticationTypes.ExternalCookie);

            // Enables the application to temporarily store user information when they are verifying the second factor in the two-factor authentication process.
            app.UseTwoFactorSignInCookie(DefaultAuthenticationTypes.TwoFactorCookie, TimeSpan.FromMinutes(5));

            // Enables the application to remember the second login verification factor such as phone or email.
            // Once you check this option, your second step of verification during the login process will be remembered on the device where you logged in from.
            // This is similar to the RememberMe option when you log in.
            app.UseTwoFactorRememberBrowserCookie(DefaultAuthenticationTypes.TwoFactorRememberBrowserCookie);

            // Enable the application to use bearer tokens to authenticate users
            app.UseOAuthBearerTokens(OAuthOptions);

            // Uncomment the following lines to enable logging in with third party login providers
            //app.UseMicrosoftAccountAuthentication(
            //    clientId: "",
            //    clientSecret: "");

            //app.UseTwitterAuthentication(
            //    consumerKey: "",
            //    consumerSecret: "");

            //app.UseFacebookAuthentication(
            //    appId: "",
            //    appSecret: "");

            //app.UseGoogleAuthentication(new GoogleOAuth2AuthenticationOptions()
            //{
            //    ClientId = "",
            //    ClientSecret = ""
            //});
        }
    }
}

Ketika Anda menekan F5 untuk membangun dan men-debug aplikasi web Anda, itu akan menampilkan layar masuk di mana Anda akan melihat bahwa tidak ada layanan autentikasi eksternal yang telah ditentukan.

Gambar layar masuk Gambar

Di bagian berikut, Anda akan mempelajari cara mengaktifkan setiap layanan autentikasi eksternal yang disediakan dengan ASP.NET di Visual Studio 2017.

Mengaktifkan autentikasi Facebook

Menggunakan autentikasi Facebook mengharuskan Anda membuat akun pengembang Facebook, dan proyek Anda akan memerlukan ID aplikasi dan kunci rahasia dari Facebook agar berfungsi. Untuk informasi tentang membuat akun pengembang Facebook dan mendapatkan ID aplikasi dan kunci rahasia Anda, lihat https://go.microsoft.com/fwlink/?LinkID=252166.

Setelah Anda mendapatkan ID aplikasi dan kunci rahasia, gunakan langkah-langkah berikut untuk mengaktifkan autentikasi Facebook untuk aplikasi web Anda:

  1. Saat proyek Anda terbuka di Visual Studio 2017, buka file Startup.Auth.cs.

  2. Temukan bagian autentikasi Facebook dari kode:

    // Uncomment the following lines to enable logging in with third party login providers
//app.UseMicrosoftAccountAuthentication(
//    clientId: "",
//    clientSecret: "");

//app.UseTwitterAuthentication(
//    consumerKey: "",
//    consumerSecret: "");

//app.UseFacebookAuthentication(
//    appId: "",
//    appSecret: "");

//app.UseGoogleAuthentication(new GoogleOAuth2AuthenticationOptions()
//{
//    ClientId = "",
//    ClientSecret = ""
//});

  3. Hapus karakter "//" untuk membatalkan komentar baris kode yang disorot, lalu tambahkan ID aplikasi dan kunci rahasia Anda. Setelah menambahkan parameter tersebut, Anda dapat mengkombinasi ulang proyek Anda:

    // Uncomment the following lines to enable logging in with third party login providers
//app.UseMicrosoftAccountAuthentication(
//    clientId: "",
//    clientSecret: "");

//app.UseTwitterAuthentication(
//   consumerKey: "",
//   consumerSecret: "");

//app.UseFacebookAuthentication(
//   appId: "426f62526f636b73",
//   appSecret: "");

//app.UseGoogleAuthentication();

  4. Saat Anda menekan F5 untuk membuka aplikasi web di browser web, Anda akan melihat bahwa Facebook telah didefinisikan sebagai layanan autentikasi eksternal:

    Gambar Facebook terdefinisi

  5. Saat Anda mengklik tombol Facebook, browser Anda akan dialihkan ke halaman masuk Facebook:

    Halaman login Facebook Gambar

  6. Setelah Anda memasukkan kredensial Facebook dan mengklik Masuk, browser web Anda akan dialihkan kembali ke aplikasi web Anda, yang akan meminta Nama pengguna yang ingin Anda kaitkan dengan akun Facebook Anda:

    Gambar aplikasi web Gambar

  7. Setelah Anda memasukkan nama pengguna dan mengklik tombol Daftar , aplikasi web Anda akan menampilkan halaman beranda default untuk akun Facebook Anda:

    gambar menampilkan halaman beranda Facebook default

Mengaktifkan Autentikasi Google

Menggunakan autentikasi Google mengharuskan Anda membuat akun pengembang Google, dan proyek Anda akan memerlukan ID aplikasi dan kunci rahasia dari Google agar berfungsi. Untuk informasi tentang membuat akun pengembang Google dan mendapatkan ID aplikasi dan kunci rahasia Anda, lihat https://developers.google.com.

Untuk mengaktifkan autentikasi Google untuk aplikasi web Anda, gunakan langkah-langkah berikut:

  1. Saat proyek Anda terbuka di Visual Studio 2017, buka file Startup.Auth.cs.

  2. Temukan bagian autentikasi Google dari kode:

    // Uncomment the following lines to enable logging in with third party login providers
//app.UseMicrosoftAccountAuthentication(
//    clientId: "",
//    clientSecret: "");

//app.UseTwitterAuthentication(
//    consumerKey: "",
//    consumerSecret: "");

//app.UseFacebookAuthentication(
//    appId: "",
//    appSecret: "");

//app.UseGoogleAuthentication(new GoogleOAuth2AuthenticationOptions()
//{
//    ClientId = "",
//    ClientSecret = ""
//});

  3. Hapus karakter "//" untuk membatalkan komentar baris kode yang disorot, lalu tambahkan ID aplikasi dan kunci rahasia Anda. Setelah menambahkan parameter tersebut, Anda dapat mengkombinasi ulang proyek Anda:

    // Uncomment the following lines to enable logging in with third party login providers
//app.UseMicrosoftAccountAuthentication(
//    clientId: "",
//    clientSecret: "");

//app.UseTwitterAuthentication(
//   consumerKey: "",
//   consumerSecret: "");

//app.UseFacebookAuthentication(
//   appId: "",
//   appSecret: "");

app.UseGoogleAuthentication(new GoogleOAuth2AuthenticationOptions()
{
    ClientId = "477522346600.apps.googleusercontent.com",
    ClientSecret = "gobkdpbocikdfbnfahjladnetpdkvmic"
});

  4. Saat Anda menekan F5 untuk membuka aplikasi web di browser web, Anda akan melihat bahwa Google telah didefinisikan sebagai layanan autentikasi eksternal:

    Gambar Google telah ditentukan

  5. Saat Anda mengeklik tombol Google, browser Anda akan dialihkan ke halaman login Google:

    Halaman login Google Gambar

  6. Setelah memasukkan info masuk Google dan mengeklik Masuk, Google akan meminta Anda untuk memverifikasi bahwa aplikasi web Anda memiliki izin untuk mengakses akun Google Anda:

    Gambar izin Google Gambar

  7. Saat Anda mengklik Terima, browser web Anda akan dialihkan kembali ke aplikasi web Anda, yang akan meminta nama pengguna yang ingin Anda kaitkan dengan akun Google Anda:

    Gambar prompt aplikasi web untuk mengaitkan nama pengguna

  8. Setelah memasukkan nama pengguna dan mengklik tombol Daftar, aplikasi web Anda akan menampilkan halaman beranda default untuk akun Google Anda:

    Halaman beranda default Google Gambar

Mengaktifkan Autentikasi Microsoft

Autentikasi Microsoft mengharuskan Anda membuat akun pengembang, dan memerlukan ID klien dan rahasia klien untuk berfungsi. Untuk informasi tentang membuat akun pengembang Microsoft dan mendapatkan ID klien dan rahasia klien Anda, lihat https://go.microsoft.com/fwlink/?LinkID=144070.

Setelah Anda mendapatkan kunci konsumen dan rahasia konsumen, gunakan langkah-langkah berikut untuk mengaktifkan autentikasi Microsoft untuk aplikasi web Anda:

  1. Saat proyek Anda terbuka di Visual Studio 2017, buka file Startup.Auth.cs.

  2. Temukan segmen kode autentikasi Microsoft:

    // Uncomment the following lines to enable logging in with third party login providers
//app.UseMicrosoftAccountAuthentication(
//    clientId: "",
//    clientSecret: "");

//app.UseTwitterAuthentication(
//   consumerKey: "",
//   consumerSecret: "");

//app.UseFacebookAuthentication(
//   appId: "",
//   appSecret: "");

//app.UseGoogleAuthentication(new GoogleOAuth2AuthenticationOptions()
//{
//    ClientId = "",
//    ClientSecret = ""
//});

  3. Hapus karakter "//" untuk membatalkan komentar baris kode yang disorot, lalu tambahkan ID klien dan rahasia klien Anda. Setelah menambahkan parameter tersebut, Anda dapat mengkombinasi ulang proyek Anda:

    // Uncomment the following lines to enable logging in with third party login providers
app.UseMicrosoftAccountAuthentication(
    clientId: "426f62526f636b73",
    clientSecret: "57686f6120447564652c2049495320526f636b73");

//app.UseTwitterAuthentication(
//   consumerKey: "",
//   consumerSecret: "");

//app.UseFacebookAuthentication(
//   appId: "",
//   appSecret: "");

//app.UseGoogleAuthentication(new GoogleOAuth2AuthenticationOptions()
//{
//    ClientId = "",
//    ClientSecret = ""
//});

  4. Saat Anda menekan F5 untuk membuka aplikasi web di browser web, Anda akan melihat bahwa Microsoft telah didefinisikan sebagai layanan autentikasi eksternal:

    Gambar Microsoft yang telah ditentukan

  5. Saat Anda mengklik tombol Microsoft, browser Anda akan dialihkan ke halaman masuk Microsoft:

    Gambar halaman masuk Microsoft Gambar

  6. Setelah Memasukkan kredensial Microsoft dan mengklik Masuk, Anda akan diminta untuk memverifikasi bahwa aplikasi web Anda memiliki izin untuk mengakses akun Microsoft Anda:

    Gambar izin Microsoft Gambar

  7. Saat Anda mengklik Ya, browser web Anda akan dialihkan kembali ke aplikasi web Anda, yang akan meminta Nama pengguna yang ingin Anda kaitkan dengan akun Microsoft Anda:

    Gambar akun Google untuk mengaitkan Gambar

  8. Setelah Anda memasukkan nama pengguna dan mengklik tombol Daftar , aplikasi web Anda akan menampilkan halaman beranda default untuk akun Microsoft Anda:

    Gambar beranda Microsoft default Gambar

Mengaktifkan Autentikasi Twitter

Autentikasi Twitter mengharuskan Anda membuat akun pengembang, dan memerlukan kunci konsumen dan rahasia konsumen untuk berfungsi. Untuk informasi tentang membuat akun pengembang Twitter dan mendapatkan kunci konsumen dan rahasia konsumen Anda, lihat https://go.microsoft.com/fwlink/?LinkID=252166.

Setelah Anda mendapatkan kunci konsumen dan rahasia konsumen, gunakan langkah-langkah berikut untuk mengaktifkan autentikasi Twitter untuk aplikasi web Anda:

  1. Saat proyek Anda terbuka di Visual Studio 2017, buka file Startup.Auth.cs.

  2. Temukan bagian autentikasi Twitter dari kode:

    // Uncomment the following lines to enable logging in with third party login providers
//app.UseMicrosoftAccountAuthentication(
//    clientId: "",
//    clientSecret: "");

//app.UseTwitterAuthentication(
//   consumerKey: "",
//   consumerSecret: "");

//app.UseFacebookAuthentication(
//   appId: "",
//   appSecret: "");

//app.UseGoogleAuthentication(new GoogleOAuth2AuthenticationOptions()
//{
//    ClientId = "",
//    ClientSecret = ""
//});

  3. Hapus karakter "//" untuk membatalkan komentar baris kode yang disorot, lalu tambahkan kunci konsumen dan rahasia konsumen Anda. Setelah menambahkan parameter tersebut, Anda dapat mengkombinasi ulang proyek Anda:

    // Uncomment the following lines to enable logging in with third party login providers
//app.UseMicrosoftAccountAuthentication(
//    clientId: "",
//    clientSecret: "");

app.UseTwitterAuthentication(
   consumerKey: "426f62526f636b73",
   consumerSecret: "57686f6120447564652c2049495320526f636b73");

//app.UseFacebookAuthentication(
//   appId: "",
//   appSecret: "");

//app.UseGoogleAuthentication(new GoogleOAuth2AuthenticationOptions()
//{
//    ClientId = "",
//    ClientSecret = ""
//});

  4. Saat Anda menekan F5 untuk membuka aplikasi web di browser web, Anda akan melihat bahwa Twitter telah didefinisikan sebagai layanan autentikasi eksternal:

    Gambar Twitter yang didefinisikan

  5. Saat Anda mengklik tombol Twitter , browser Anda akan dialihkan ke halaman masuk Twitter:

    Gambar halaman masuk Twitter Gambar

  6. Setelah Anda memasukkan kredensial Twitter dan mengklik Otorisasi aplikasi, browser web Anda akan dialihkan kembali ke aplikasi web Anda, yang akan meminta Nama pengguna yang ingin Anda kaitkan dengan akun Twitter Anda:

    Gambar akun Twitter untuk dikaitkan di aplikasi web

  7. Setelah Anda memasukkan nama pengguna dan mengklik tombol Pendaftaran , aplikasi web Anda akan menampilkan halaman beranda default untuk akun Twitter Anda:

    Gambar beranda Twitter default Gambar

Informasi Tambahan

Untuk informasi tambahan tentang membuat aplikasi yang menggunakan OAuth dan OpenID, lihat URL berikut:

Menggabungkan Layanan Autentikasi Eksternal

Untuk fleksibilitas yang lebih besar, Anda dapat menentukan beberapa layanan autentikasi eksternal secara bersamaan - ini memungkinkan pengguna aplikasi web Anda untuk menggunakan akun dari salah satu layanan autentikasi eksternal yang diaktifkan:

Gambar beberapa layanan autentikasi eksternal Gambar

Mengonfigurasi IIS Express untuk menggunakan nama domain yang sepenuhnya memenuhi syarat

Beberapa penyedia autentikasi eksternal tidak mendukung pengujian aplikasi Anda dengan menggunakan alamat HTTP seperti http://localhost:port/. Untuk mengatasi masalah ini, Anda dapat menambahkan pemetaan Nama Domain yang Sepenuhnya Memenuhi Syarat (FQDN) statis ke file HOSTS Anda dan mengonfigurasi opsi proyek Anda di Visual Studio 2017 untuk menggunakan FQDN untuk pengujian/penelusuran kesalahan. Untuk melakukannya, gunakan langkah-langkah berikut:

  • Tambahkan FQDN statis yang memetakan file HOSTS Anda:

    1. Buka prompt perintah yang ditingkatkan di Windows.

    2. Ketik perintah berikut:

      notepad %WinDir%\system32\drivers\etc\hosts

    3. Tambahkan entri seperti berikut ini ke file HOSTS:

      127.0.0.1 www.wingtiptoys.com

    4. Simpan dan tutup file HOSTS Anda.

  • Konfigurasikan proyek Visual Studio Anda untuk menggunakan FQDN:

    1. Saat proyek Anda terbuka di Visual Studio 2017, klik menu Project, lalu pilih properti proyek Anda. Misalnya, Anda dapat memilih WebApplication1 Properti.
    2. Pilih tab Web.
    3. Masukkan FQDN Anda untuk url proyek . Misalnya, Anda akan memasukkan http://www.wingtiptoys.com jika itu adalah pemetaan FQDN yang Anda tambahkan ke file HOSTS Anda.

  • Konfigurasikan IIS Express untuk menggunakan FQDN untuk aplikasi Anda:

    1. Buka prompt perintah yang ditingkatkan di Windows.

    2. Ketik perintah berikut untuk mengubah ke folder IIS Express Anda:

      cd /d "%ProgramFiles%\IIS Express"

    3. Ketik perintah berikut untuk menambahkan FQDN ke aplikasi Anda:

      appcmd.exe mengatur konfigurasi -section:system.applicationHost/sites /+"[name='WebApplication1'].bindings. [protocol='http',bindingInformation='*:80:www.wingtiptoys.com']" /commit:apphost

    Di mana WebApplication1 adalah nama proyek Anda dan bindingInformation berisi nomor port dan FQDN yang ingin Anda gunakan untuk pengujian Anda.

Cara Mendapatkan Pengaturan Aplikasi Anda untuk Autentikasi Microsoft

Menautkan aplikasi ke Windows Live untuk Autentikasi Microsoft adalah proses sederhana. Jika Anda belum menautkan aplikasi ke Windows Live, Anda bisa menggunakan langkah-langkah berikut:

  1. Telusuri ke https://go.microsoft.com/fwlink/?LinkID=144070 dan masukkan nama dan kata sandi akun Microsoft Anda saat diminta, lalu klik Masuk:

  2. Pilih Tambahkan aplikasi dan masukkan nama aplikasi Anda saat diminta, lalu klik Buat:

    Gambar untuk menambahkan aplikasi

  3. Pilih aplikasi Anda di bawah Nama dan halaman properti aplikasinya muncul.

  4. Masukkan domain pengalihan untuk aplikasi Anda. Salin ID Aplikasi dan, di bawahRahasia Aplikasi , pilih Buat Kata Sandi. Salin kata sandi yang muncul. ID aplikasi dan kata sandi adalah ID klien dan rahasia klien Anda. Pilih Ok lalu Simpan.

    Gambar informasi domain pengalihan Gambar

Opsional: Nonaktifkan Pendaftaran Lokal

Fungsionalitas pendaftaran lokal ASP.NET saat ini tidak mencegah program otomatis (bot) membuat akun anggota; misalnya, dengan menggunakan teknologi pencegahan dan validasi bot seperti CAPTCHA. Karena itu, Anda harus menghapus formulir masuk lokal dan tautan pendaftaran di halaman masuk. Untuk melakukannya, buka halaman _Login.cshtml di proyek Anda, lalu komentari baris untuk panel masuk lokal dan tautan pendaftaran. Halaman yang dihasilkan akan terlihat seperti sampel kode berikut:

<!-- ko with: login -->
<hgroup class="title">
    <h1>Log in</h1>
</hgroup>
<div class="row-fluid">
    @*<section class="span7">
        <form>
            <fieldset class="form-horizontal">
                <legend>Use a local account to log in.</legend>
                <ul class="text-error" data-bind="foreach: errors">
                    <li data-bind="text: $data"></li>
                </ul>
                <div class="control-group">
                    <label for="UserName" class="control-label">User name</label>
                    <div class="controls">
                        <input type="text" name="UserName" data-bind="value: userName, hasFocus: true" />
                        <span class="text-error" data-bind="visible: userName.hasError, text: userName.errorMessage"></span>
                    </div>
                </div>
                <div class="control-group">
                    <label for="Password" class="control-label">Password</label>
                    <div class="controls">
                        <input type="password" name="Password" data-bind="value: password" />
                        <span class="text-error" data-bind="visible: password.hasError, text: password.errorMessage"></span>
                    </div>
                </div>
                <div class="control-group">
                    <div class="controls">
                        <label class="checkbox">
                            <input type="checkbox" name="RememberMe" data-bind="checked: rememberMe" />
                            <label for="RememberMe">Remember me?</label>
                        </label>
                    </div>
                </div>
                <div class="form-actions no-color">
                    <button type="submit" class="btn" data-bind="click: login, disable: loggingIn">Log in</button>
                </div>
                <p><a href="#" data-bind="click: register">Register</a> if you don't have a local account.</p>
            </fieldset>
        </form>
    </section>*@
    <section class="span5">
        <h2>Log in using another service</h2>
        <div data-bind="visible: loadingExternalLogin">Loading...</div>
        <div data-bind="visible: !loadingExternalLogin()">
            <div class="message-info" data-bind="visible: !hasExternalLogin()">
                <p>
                    There are no external authentication services configured. See <a href="https://go.microsoft.com/fwlink/?LinkId=252166">this article</a>
                    for details on setting up this ASP.NET application to support logging in via external services.
                </p>
            </div>
            <form data-bind="visible: hasExternalLogin">
                <fieldset class="form-horizontal">
                    <legend>Use another service to log in.</legend>
                    <p data-bind="foreach: externalLoginProviders">
                        <button type="submit" class="btn" data-bind="text: name, attr: { title: 'Log in using your ' + name() + ' account' }, click: login"></button>
                    </p>
                </fieldset>
            </form>
        </div>
    </section>
</div>
<!-- /ko -->

Setelah panel masuk lokal dan tautan pendaftaran dinonaktifkan, halaman masuk Anda hanya akan menampilkan penyedia autentikasi eksternal yang telah Anda aktifkan:

Gambar hanya untuk login penyedia eksternal