Penyiapan login eksternal Facebook di ASP.NET Core

Oleh Valeriy Novytskyy dan Rick Anderson

Tutorial dengan contoh kode ini menunjukkan cara memungkinkan pengguna Anda masuk dengan akun Facebook mereka menggunakan sampel ASP.NET proyek Core yang dibuat di halaman sebelumnya. Kita mulai dengan membuat ID Aplikasi Facebook dengan mengikuti langkah-langkah resmi.

Membuat aplikasi di Facebook

• Tambahkan paket NuGet Microsoft.AspNetCore.Authentication.Facebook ke proyek.

• Buka halaman aplikasi Pengembang Facebook dan masuk. Jika Anda belum memiliki akun Facebook, gunakan tautan Daftar untuk Facebook di halaman masuk untuk membuatnya. Setelah Anda memiliki akun Facebook, ikuti petunjuk untuk mendaftar sebagai Pengembang Facebook.

• Dari menu Aplikasi Saya pilih Buat Aplikasi. Formulir Buat aplikasi muncul.

• Pilih jenis aplikasi yang paling sesuai dengan proyek Anda. Untuk proyek ini, pilih Konsumen, lalu Berikutnya. ID Aplikasi baru dibuat.

• Isi formulir dan ketuk tombol Buat Aplikasi .

  

• Pada halaman Tambahkan Produk ke Aplikasi Anda , pilih Siapkan di kartu Masuk Facebook .

  

• Wizard Mulai Cepat diluncurkan dengan Pilih Platform sebagai halaman pertama. Lewati wizard untuk saat ini dengan mengklik tautan Masuk FacebookPengaturan di menu di kiri bawah:

  

• Halaman Pengaturan OAuth Klien ditampilkan:

  

• Masukkan URI pengembangan Anda dengan /signin-facebook ditambahkan ke bidang URI Pengalihan OAuth Yang Valid (misalnya: https://localhost:44320/signin-facebook). Autentikasi Facebook yang dikonfigurasi nanti dalam tutorial ini akan secara otomatis menangani permintaan di rute /signin-facebook untuk menerapkan alur OAuth.

Nota

URI /signin-facebook ditetapkan sebagai panggilan balik default penyedia autentikasi Facebook. Anda dapat mengubah URI panggilan balik default saat mengonfigurasi middleware autentikasi Facebook melalui properti RemoteAuthenticationOptions.CallbackPath yang diwariskan dari kelas FacebookOptions.

• Pilih Simpan Perubahan.

• Pilih tautan Pengaturan>Dasar di navigasi kiri.

• Buat catatan mengenai App ID dan App Secret. Anda akan menambahkan keduanya ke dalam aplikasi ASP.NET Core Anda di bagian berikutnya:

• Saat menyebarkan situs, Anda perlu mengunjungi kembali halaman penyiapan Login Facebook , dan mendaftarkan URI publik baru.

Menyimpan ID dan rahasia aplikasi Facebook

Simpan pengaturan sensitif seperti ID aplikasi Facebook dan nilai rahasia dengan Secret Manager. Untuk sampel ini, gunakan langkah-langkah berikut:

1. Inisialisasi proyek untuk penyimpanan rahasia per instruksi di Aktifkan penyimpanan rahasia.

2. Simpan pengaturan sensitif di penyimpanan rahasia lokal dengan kunci rahasia Authentication:Facebook:AppId dan Authentication:Facebook:AppSecret:

   dotnet user-secrets set "Authentication:Facebook:AppId" "<app-id>"
   dotnet user-secrets set "Authentication:Facebook:AppSecret" "<app-secret>"
   

Pemisah : tidak berfungsi dengan kunci hierarki variabel lingkungan di semua platform. Contohnya, pemisah : tidak dapat digunakan oleh Bash. Garis bawah ganda, __, adalah:

• Didukung oleh semua platform.
• Digantikan secara otomatis oleh titik dua, :.

Mengonfigurasi Autentikasi Facebook

Tambahkan layanan Autentikasi ke Program:

var builder = WebApplication.CreateBuilder(args);
var services = builder.Services;
var configuration = builder.Configuration;

services.AddAuthentication().AddFacebook(facebookOptions =>
    {
        facebookOptions.AppId = configuration["Authentication:Facebook:AppId"];
        facebookOptions.AppSecret = configuration["Authentication:Facebook:AppSecret"];
    });

Kelebihan AddAuthentication(IServiceCollection, String) mengatur properti DefaultScheme. Kelebihan AddAuthentication(IServiceCollection, Action<AuthenticationOptions>) memungkinkan konfigurasi opsi autentikasi, yang dapat digunakan untuk menyiapkan skema autentikasi default untuk tujuan yang berbeda. Panggilan berikutnya untuk AddAuthentication menggantikan properti AuthenticationOptions yang telah dikonfigurasi sebelumnya.

AuthenticationBuilder metode ekstensi yang mendaftarkan handler autentikasi hanya dapat dipanggil sekali per skema autentikasi. Ada kelebihan beban yang memungkinkan konfigurasi properti skema, nama skema, dan nama tampilan.

Masuk dengan Facebook

• Jalankan aplikasi dan pilih Masuk.
• Di bawah Gunakan layanan lain untuk masuk, pilih Facebook.
• Anda diarahkan ke Facebook untuk autentikasi.
• Masukkan kredensial Facebook Anda.
• Anda dialihkan kembali ke situs tempat Anda dapat mengatur email.

Anda sekarang masuk menggunakan kredensial Facebook Anda:

Bereaksi terhadap pembatalan otorisasi masuk eksternal

AccessDeniedPath dapat memberikan jalur pengalihan ke agen pengguna saat pengguna tidak menyetujui permintaan otorisasi yang diminta.

Kode berikut menetapkan AccessDeniedPath ke "/AccessDeniedPathInfo":

services.AddAuthentication().AddFacebook(options =>
{
    options.AppId = Configuration["Authentication:Facebook:AppId"];
    options.AppSecret = Configuration["Authentication:Facebook:AppSecret"];
    options.AccessDeniedPath = "/AccessDeniedPathInfo";
});

Kami merekomendasikan agar AccessDeniedPath halaman tersebut berisi informasi berikut:

• Autentikasi jarak jauh dibatalkan.
• Aplikasi ini memerlukan autentikasi.
• Untuk mencoba masuk lagi, pilih tautan Masuk.

Uji AccessDeniedPath

• Navigasi ke facebook.com
• Jika Anda masuk, Anda harus keluar.
• Jalankan aplikasi dan pilih Masuk Facebook.
• Pilih Jangan sekarang. Anda diarahkan ke halaman yang ditentukan AccessDeniedPath .

Meneruskan informasi permintaan dengan proksi atau penyeimbang beban

Jika aplikasi disebarkan di belakang server proksi atau penyeimbang beban, beberapa informasi permintaan asli mungkin diteruskan ke aplikasi di header permintaan. Informasi ini biasanya mencakup skema permintaan aman (https), host, dan alamat IP klien. Aplikasi tidak secara otomatis membaca header permintaan ini untuk menemukan dan menggunakan informasi permintaan asli.

Skema ini digunakan dalam pembuatan tautan yang memengaruhi alur autentikasi dengan penyedia eksternal. Kehilangan skema aman (https) akan menyebabkan aplikasi menghasilkan URL pengalihan tidak aman yang salah.

Pakai Forwarded Headers Middleware guna menyediakan informasi permintaan asli untuk aplikasi untuk pemrosesan permintaan.

Untuk informasi selengkapnya, lihat Mengonfigurasi ASP.NET Core untuk bekerja sama dengan server proxy dan penyeimbang beban.

Untuk informasi selengkapnya tentang opsi konfigurasi yang didukung oleh autentikasi Facebook, lihat FacebookOptions referensi API. Opsi konfigurasi dapat digunakan untuk:

• Minta informasi yang berbeda tentang pengguna.
• Tambahkan argumen string kueri untuk mengkustomisasi pengalaman masuk.

Penyelesaian Masalah

• hanya ASP.NET Core 2.x: Jika Identity tidak dikonfigurasi dengan memanggil services.AddIdentity di ConfigureServices, upaya untuk mengautentikasi akan menghasilkan ArgumentException: Opsi 'SignInScheme' harus disediakan. Templat proyek yang digunakan dalam tutorial ini memastikan bahwa ini dilakukan.
• Jika database situs belum dibuat dengan menerapkan migrasi awal, Anda akan mendapatkan kesalahan Operasi database gagal saat memproses permintaan. Ketuk Terapkan Migrasi untuk membuat database dan silakan refresh untuk melanjutkan setelah kesalahan.

Langkah selanjutnya

• Artikel ini memperlihatkan cara mengautentikasi dengan Facebook. Anda dapat mengikuti pendekatan serupa untuk mengautentikasi dengan penyedia lain yang tercantum di halaman sebelumnya.

• Setelah menerbitkan situs web ke aplikasi web Azure, Anda harus mengatur ulang AppSecret di portal pengembang Facebook.

• Atur Authentication:Facebook:AppId dan Authentication:Facebook:AppSecret sebagai pengaturan aplikasi di portal Microsoft Azure. Sistem konfigurasi disiapkan untuk membaca kunci dari variabel lingkungan.

Sumber daya tambahan

Beberapa penyedia autentikasi