AspNetExternalLogin

Note: Fitur ini memerlukan basic MVC dari AspNetIdentity. Apabila belum dibuat bisa follow tutorial berikut: https://www.notion.so/Configure-Identity-Library-for-Login-Register-System-9e58271693694834b78af256bd3a9247

Buat Google API terlebih dahulu melalui halaman https://console.cloud.google.com/apis/library
Pada navigation menu, pilih APIs & Services, kemudian pilih Enabled APIs & services
Pilih Create Project
Beri nama project sesuai kebutuhan. Pada contoh ini akan diberikan nama "AspNetTrialGoogleLogin". Lalu pilih create.
Untuk mulai membuat kode authentication, pilih OAuth consent screen pada menu APIs & Services. Pilh external pada User Type, kemudian klik create.
Isikan kolom App name dan User support email. Pada kali ini, App name akan diisi "AspLoginWithGoogle" dan email akan diisi email saya sendiri.
Isikan email pada kolom Developer contact information sebagai email kontak. Pada contoh ini akan diisi email saya sendiri. Setelah itu klik Save and Continue.
Pada proses kedua dan ketiga (scopes dan test users), tidak ada data yang perlu ditambahkan, sehingga bisa langsung klik Save and continue.
Berikut summary dari data yang telah dibuat. Apabila memerlukan perubahan, bisa klik tombol edit.
Kemudian klik back to dashboard apabila data telah benar.
Setelah kembali ke dashboard, klik pada menu Credentials untuk membuat kode ClientID dan ClientSecret
Klik pada menu +Create Credentials, kemudian pilih OAuth Client ID
Pilih Web Application pada Application Type, dan isikan nama pada kolom name. Dalam contoh ini akan diberikan nama AspGoogleLoginClient
Isikan URI localhost project pada bagian Authorized Redirect URL, kemudian tambahkan /signin-google sebagai link redirect untuk login. Kemudian klik Create.
Selanjutnya akan muncul kotak dialog yang berisi ClientID dan ClientSecret. Copy - paste kedua kode tersebut agar bisa langsung digunakan pada program.
Pada VS Code, tambahkan packages Microsoft.AspNetCore.Authentication.Google melalui project explorer.
Pada Program.cs, tambahkan beberapa baris line code sebagai berikut:

//Line code untuk menambahkan external login google
builder.Services.AddAuthentication().AddGoogle(googleOptions =>
{
    googleOptions.ClientId = "Isikan code ClientID";
    googleOptions.ClientSecret = "Isikan code ClientSecret";
});

//Line code untuk setting cookie

app.UseCookiePolicy(new CookiePolicyOptions()
{
    MinimumSameSitePolicy = SameSiteMode.Lax
});

Note: terdapat metode lainnya yang bisa digunakan untuk mengisi ClientId dan ClientSecret, salah satunya adalah mengisinya pada appsettings.json. Pada percobaan kali ini akan diisikan secara langsung tanpa melalui appsettings.json.
17. Buka file Areas > Identity > Pages > Account > ExternalLogin.cshtml.cs kemudian masukan property tambahan yang diperlukan tabel AspNetUsers apabila ada. Dalam hal ini, terdapat 3 tambahan property yaitu EmployeeId, FirstName, dan LastName. Tambahkan property tersebut pada class InputModel

Kemudian tambahkan line code pada class OnPostConfirmationAsync:

18. Selanjutnya buka file Areas > Identity > Pages > Account > ExternalLogin.cshtml
19. Masukan code cshtml untuk menampilkan form pengisian EmployeeId, FirstName, dan LastName pada halaman web (bisa skip apabila tidak ada properti tambahan pada AspNetUser)
20. Jalankan program dengan perintah dotnet run/dotnet watch 21. Berikut tampilan halaman awal apabila berhasil menambahkan fitur external login
Klik tombol google di bawah label 'Use another service to log in', maka akan otomatis direct menuju google login. Dalam contoh ini akan digunakan email pribadi saya.

Apabila berhasil memilih akun google yang akan digunakan, maka akan direct secara otomatis menuju halaman register untuk mebuat akun. Apabila akun telah terdaftar maka akan otomatis menuju ke halaman utama. Masukan properti tambahan lainnya yang diperlukan.

Klik register dan lakukan konfirmasi email. Apabila email telah dikonfirmasi kemudian lakukan proses login ulang menggunakan google. Apabila akun telah terdaftar maka akan otomatis ter-direct menuju halaman utama/index.

22. Done.