Penyiapan login eksternal Google di ASP.NET Core

Oleh Valeriy Novytskyy, Rick Anderson, dan Sharaf Abacery

Tutorial ini menunjukkan cara mengaktifkan pengguna masuk akun dengan akun Google menggunakan proyek sampel ASP.NET Core yang dibuat di Menggunakan penyedia login eksternal dengan Identity di ASP.NET Core. Ikuti panduan resmi Google di Masuk dengan Google untuk Web: Penyiapan untuk membuat ID klien Google API.

Membuat aplikasi di Google

• Arahkan ke halaman Google API & Services di platform Google Cloud.
• Jika tidak ada proyek, buat proyek baru dengan memilih tombol Buat Proyek . Untuk memilih proyek yang berbeda dari proyek yang ada yang dimuat, pilih tombol proyek yang dimuat di sudut kiri atas UI, diikuti oleh proyek. Untuk menambahkan proyek baru, pilih tombol proyek yang dimuat di sudut kiri atas UI, diikuti oleh tombol Proyek baru .
• Saat membuat proyek baru:
  • Masukkan Nama proyek.
  • Secara opsional, pilih Organisasi untuk proyek.
  • Pilih tombol Create.

Setelah membuat proyek, halaman Dasbor proyek dimuat, di mana dimungkinkan untuk mengonfigurasi proyek.

Buka tab Kredensial untuk membuat klien OAuth.

Prasyarat untuk membuat kredensial adalah mengonfigurasi layar persetujuan OAuth. Jika persetujuan tidak dikonfigurasi, ada permintaan untuk mengonfigurasi layar persetujuan.

• Pilih Layar konfigurasikan persetujuan atau pilih layar persetujuan OAuth di bar samping.
• Di layar persetujuan OAuth, pilih Mulai.
• Atur Nama aplikasi dan Email dukungan pengguna.
• Atur jenis audiens ke Eksternal.
• Tambahkan informasi Kontak dengan memasukkan alamat email kontak.
• Setujui persyaratannya.
• Pilih Buat.

Buat kredensial klien untuk aplikasi dengan membuka item menu bilah sisi Klien :

• Pilih tombol Buat klien .
• Pilih Aplikasi web sebagai Jenis aplikasi.
• Masukkan Nama untuk klien.
• Tambahkan URI pengalihan resmi. Untuk pengujian lokal, gunakan alamat https://localhost:{PORT}/signin-google default, di mana {PORT} placeholder adalah port aplikasi.
• Pilih tombol Buat untuk membuat klien.
• Simpan ID Klien dan rahasia Klien, yang digunakan nanti dalam konfigurasi aplikasi ASP.NET.

Nota

Segmen URI /signin-google ditetapkan sebagai panggilan balik default penyedia autentikasi Google. Anda dapat mengubah URI panggilan balik default saat mengonfigurasi middleware autentikasi Google melalui properti RemoteAuthenticationOptions.CallbackPath yang diwariskan dari kelas GoogleOptions.

Saat menyebarkan aplikasi, pilih salah satu dari berikut:

• Perbarui URI pengalihan aplikasi di Google Console ke URI pengalihan yang didistribusikan aplikasi.
• Buat pendaftaran Google API baru di Google Console untuk aplikasi produksi dengan URI pengalihan produksinya.

Menyimpan ID dan rahasia klien Google

Simpan pengaturan sensitif, seperti ID klien Google dan nilai rahasia, dengan Secret Manager. Untuk sampel ini, ikuti langkah-langkah berikut:

1. Inisialisasi proyek untuk penyimpanan rahasia sesuai dengan instruksi dalam Penyimpanan rahasia aplikasi yang aman dalam pengembangan di ASP.NET Core.

2. Simpan pengaturan sensitif di penyimpanan rahasia lokal dengan kunci rahasia Authentication:Google:ClientId (nilai: {CLIENT ID} tempat penampung) dan kunci rahasia Authentication:Google:ClientSecret (nilai: {CLIENT SECRET} tempat penampung):

   dotnet user-secrets set "Authentication:Google:ClientId" "{CLIENT ID}"
   dotnet user-secrets set "Authentication:Google:ClientSecret" "{CLIENT 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, :.

Mengelola kredensial dan penggunaan API di Konsol API.

Mengonfigurasi autentikasi Google

Tambahkan layanan autentikasi ke Program file:

services.AddAuthentication().AddGoogle(googleOptions =>
{
    googleOptions.ClientId = configuration["Authentication:Google:ClientId"];
    googleOptions.ClientSecret = configuration["Authentication:Google:ClientSecret"];
});

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 Google

• Jalankan aplikasi dan pilih Masuk.
• Di bawah Gunakan layanan lain untuk masuk, pilih Google.
• Browser dialihkan ke Google untuk autentikasi.
• Pilih akun Google untuk masuk atau memasukkan info masuk Google.
• Jika ini pertama kalinya masuk, ada permintaan untuk mengizinkan aplikasi mengakses informasi akun Google.
• Browser dialihkan kembali ke aplikasi, di mana dimungkinkan untuk mengatur email.

Pengguna sekarang masuk menggunakan kredensial Google.

Pemecahan masalah

• Jika proses masuk tidak berfungsi tanpa menerima kesalahan apa pun, beralihlah ke mode pengembangan untuk membuat aplikasi dan pendaftaran Google lebih mudah di-debug.
• Jika database situs belum dibuat dengan menerapkan migrasi awal, kesalahan berikut terjadi: Operasi database gagal saat memproses permintaan. Pilih Terapkan Migrasi untuk membuat database dan segarkan halaman untuk melanjutkan setelah kesalahan.
• Untuk informasi tentang kesalahan HTTP 500 setelah berhasil mengautentikasi permintaan oleh penyedia OAuth 2.0, seperti Google, dan informasi tentang cara menerapkan autentikasi eksternal dengan Google untuk React dan aplikasi SPA lainnya, lihat Middleware tidak menangani rute 'signin-google' setelah autentikasi berhasil di Autentikasi Login Eksternal Asp.Net Core Web Api (dotnet/AspNetCore.Docs #14169).

Langkah berikutnya

• Artikel ini menunjukkan autentikasi dengan Google. Untuk informasi tentang mengautentikasi dengan penyedia eksternal lainnya, lihat Menggunakan penyedia login eksternal dengan Identity di ASP.NET Core.
• Setelah aplikasi disebarkan ke Azure, reset ClientSecret di konsol Google API.
• Atur Authentication:Google:ClientId dan Authentication:Google:ClientSecret sebagai pengaturan aplikasi di portal Azure. Sistem konfigurasi disiapkan untuk membaca kunci dari variabel lingkungan.

Sumber daya tambahan

Beberapa penyedia autentikasi