Bagikan melalui


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

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

Dalam Panduan ini

Prasyarat

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

Menggunakan Layanan Autentikasi Eksternal

Kelimpahan 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 menyelamatkan pengguna akhir dari keharuan 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 mendasar, 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.

Catatan

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 dalam 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 membawa Anda membuat 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 lalu Proyek.

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

Gambar kotak dialog Proyek Baru

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

Gambar pilihan templat

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

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 kode autentikasi Facebook:

    // 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 mengolah 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 yang ditentukan

  5. Saat Anda mengklik tombol Facebook , browser Anda akan diarahkan ke halaman login Facebook:

    Gambar halaman masuk Facebook

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

    Gambar aplikasi web

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

    Gambar yang menampilkan beranda Facebook default

Mengaktifkan Autentikasi Google

Menggunakan autentikasi Google mengharuskan Anda membuat akun developer Google, dan proyek Anda akan memerlukan ID aplikasi dan kunci rahasia dari Google agar berfungsi. Untuk informasi tentang membuat akun developer 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 kode autentikasi Google:

    // 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 mengolah 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:

    Gambar halaman login Google

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

    Gambar izin Google

  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 permintaan aplikasi web untuk nama pengguna untuk mengaitkan

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

    Gambar beranda default Google

Mengaktifkan Autentikasi Microsoft

Autentikasi Microsoft mengharuskan Anda membuat akun pengembang, dan memerlukan ID klien dan rahasia klien agar 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 bagian 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 mengolah 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 Klik yang ditentukan Microsoft

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

    Gambar halaman masuk Microsoft

  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

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

    Gambar akun Google untuk mengaitkan

  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

Mengaktifkan Autentikasi Twitter

Autentikasi Twitter mengharuskan Anda membuat akun pengembang, dan memerlukan kunci konsumen dan rahasia konsumen agar 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 Anda, 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 mengolah 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 ditentukan

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

    Gambar halaman masuk Twitter

  6. Setelah Anda memasukkan kredensial Twitter Anda dan mengklik Otorisasi aplikasi, browser web Anda akan dialihkan kembali ke aplikasi web Anda, yang akan meminta Anda untuk 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 Daftar , aplikasi web Anda akan menampilkan halaman beranda default untuk akun Twitter Anda:

    Gambar beranda Twitter default

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

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 Proyek , lalu pilih properti proyek Anda. Misalnya, Anda dapat memilih WebApplication1 Properties.
    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 set config -section:system.applicationHost/sites /+"[name='WebApplication1'].bindings. [protocol='http',bindingInformation='*:80:www.wingtiptoys.com']" /commit:apphost

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

Cara Mendapatkan Pengaturan Aplikasi 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 https://go.microsoft.com/fwlink/?LinkID=144070 dan masukkan nama akun dan kata sandi Microsoft Anda saat diminta, lalu klik Masuk:

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

    Gambar tambahkan 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 bawah Rahasia 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

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 penyedia eksternal hanya masuk