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 FaceBook Pengaturan di menu di kiri bawah:

  

• Halaman Pengaturan OAuth Klien disajikan:

  

• 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.

Catatan

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 kelas yang FacebookOptions diwariskanRemoteAuthenticationOptions.CallbackPath.

• Pilih Simpan Perubahan.

• Pilih tautan Pengaturan> Basic di navigasi kiri.

• Catat anda 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 Authentication:Facebook:AppId rahasia 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 hierarkis variabel lingkungan di semua platform. __, garis bawah ganda:

• Didukung oleh semua platform. Misalnya, pemisah : tidak didukung oleh Bash, tetapi __ didukung.
• Secara otomatis diganti dengan :

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) beban mengatur DefaultScheme properti. Kelebihan AddAuthentication(IServiceCollection, Action<AuthenticationOptions>) beban memungkinkan konfigurasi opsi autentikasi, yang dapat digunakan untuk menyiapkan skema autentikasi default untuk tujuan yang berbeda. Panggilan berikutnya untuk AddAuthentication mengambil alih properti yang dikonfigurasi AuthenticationOptions 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 mengatur ke AccessDeniedPath"/AccessDeniedPathInfo":

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

Kami merekomendasikan halaman berisi AccessDeniedPath 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 dengan server proxy dan memuat penyeimbang.

Beberapa penyedia autentikasi

Saat aplikasi memerlukan beberapa penyedia, rantai metode ekstensi penyedia di belakang AddAuthentication:

services.AddAuthentication()
    .AddMicrosoftAccount(microsoftOptions => { ... })
    .AddGoogle(googleOptions => { ... })
    .AddTwitter(twitterOptions => { ... })
    .AddFacebook(facebookOptions => { ... });

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.

Pemecahan Masalah

• ASP.NET Core 2.x saja: Jika Identity tidak dikonfigurasi dengan memanggil services.AddIdentity , ConfigureServicesmencoba 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 mendapatkan operasi database gagal saat memproses kesalahan permintaan . Ketuk Terapkan Migrasi untuk membuat database dan refresh untuk melanjutkan kesalahan.

Langkah berikutnya

• 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 pengaturan aplikasi dan Authentication:Facebook:AppSecret sebagai di portal Azure. Sistem konfigurasi disiapkan untuk membaca kunci dari variabel lingkungan.