Catatan
Akses ke halaman ini memerlukan otorisasi. Anda dapat mencoba masuk atau mengubah direktori.
Akses ke halaman ini memerlukan otorisasi. Anda dapat mencoba mengubah direktori.
oleh Tom FitzMacken
Tutorial ini menunjukkan kepada Anda cara membuat aplikasi web ASP.NET MVC 4 yang memungkinkan pengguna untuk masuk dengan kredensial dari penyedia eksternal, seperti Facebook, Twitter, Microsoft, atau Google, lalu mengintegrasikan beberapa fungsi dari penyedia tersebut ke dalam aplikasi web Anda. Untuk kesederhanaan, tutorial ini berfokus pada bekerja dengan kredensial dari Facebook.
Untuk menggunakan kredensial eksternal dalam aplikasi web ASP.NET MVC 5, lihat Membuat Aplikasi MVC 5 ASP.NET dengan Facebook dan Google OAuth2 dan Masuk OpenID.
Mengaktifkan kredensial ini di situs web Anda memberikan keuntungan yang signifikan karena jutaan pengguna sudah memiliki akun dengan penyedia eksternal ini. Pengguna ini mungkin lebih cenderung mendaftar ke situs Anda jika mereka tidak perlu membuat dan mengingat sekumpulan kredensial baru. Selain itu, setelah pengguna masuk melalui salah satu penyedia ini, Anda dapat menggabungkan operasi sosial dari penyedia.
Apa yang akan Anda bangun
Ada dua tujuan utama dalam tutorial ini:
- Aktifkan pengguna untuk masuk dengan kredensial dari penyedia OAuth.
- Ambil informasi akun dari penyedia dan integrasikan informasi tersebut dengan pendaftaran akun untuk situs Anda.
Meskipun contoh dalam tutorial ini berfokus pada penggunaan Facebook sebagai penyedia autentikasi, Anda dapat memodifikasi kode untuk menggunakan salah satu penyedia. Langkah-langkah untuk mengimplementasikan penyedia apa pun sangat mirip dengan langkah-langkah yang akan Anda lihat dalam tutorial ini. Anda hanya akan melihat perbedaan signifikan saat melakukan panggilan langsung ke set API penyedia.
Prasyarat
Atau
- Microsoft Visual Studio 2010 SP1 atau Visual Web Developer Express 2010 SP1
- ASP.NET MVC 4
Selain itu, topik ini mengasumsikan Anda memiliki pengetahuan dasar tentang ASP.NET MVC dan Visual Studio. Jika Anda memerlukan pengenalan ASP.NET MVC 4, lihat Pengantar ASP.NET MVC 4.
Membuat proyek
Di Visual Studio, buat Aplikasi Web ASP.NET MVC 4 baru, dan beri nama "OAuthMVC". Anda dapat menargetkan .NET Framework 4.5 atau 4.
Di jendela Proyek New ASP.NET MVC 4, pilih Aplikasi Internet dan biarkan Razor sebagai mesin tampilan.
Mengaktifkan penyedia
Saat Anda membuat aplikasi web MVC 4 dengan templat Aplikasi Internet, proyek dibuat dengan file bernama AuthConfig.cs di folder App_Start.
File AuthConfig berisi kode untuk mendaftarkan klien untuk penyedia autentikasi eksternal. Secara default, kode ini dikomentari, sehingga tidak ada penyedia eksternal yang diaktifkan.
public static class AuthConfig
{
public static void RegisterAuth()
{
// To let users of this site log in using their accounts from other sites such as Microsoft, Facebook, and Twitter,
// you must update this site. For more information visit https://go.microsoft.com/fwlink/?LinkID=252166
//OAuthWebSecurity.RegisterMicrosoftClient(
// clientId: "",
// clientSecret: "");
//OAuthWebSecurity.RegisterTwitterClient(
// consumerKey: "",
// consumerSecret: "");
//OAuthWebSecurity.RegisterFacebookClient(
// appId: "",
// appSecret: "");
//OAuthWebSecurity.RegisterGoogleClient();
}
}
Anda harus membatalkan komentar kode ini untuk menggunakan klien autentikasi eksternal. Anda menghapus komentar hanya penyedia yang ingin Anda sertakan di situs Anda. Untuk tutorial ini, Anda hanya akan mengaktifkan kredensial Facebook.
public static class AuthConfig
{
public static void RegisterAuth()
{
//OAuthWebSecurity.RegisterMicrosoftClient(
// clientId: "",
// clientSecret: "");
//OAuthWebSecurity.RegisterTwitterClient(
// consumerKey: "",
// consumerSecret: "");
OAuthWebSecurity.RegisterFacebookClient(
appId: "",
appSecret: "");
//OAuthWebSecurity.RegisterGoogleClient();
}
}
Perhatikan dalam contoh di atas bahwa metode menyertakan string kosong untuk parameter pendaftaran. Jika Anda mencoba menjalankan aplikasi sekarang, aplikasi melemparkan pengecualian argumen karena string kosong tidak diizinkan untuk parameter. Untuk menyediakan nilai yang valid, Anda harus mendaftarkan situs web Anda dengan penyedia eksternal, seperti yang ditunjukkan di bagian berikutnya.
Mendaftar dengan penyedia eksternal
Untuk mengautentikasi pengguna dengan kredensial dari penyedia eksternal, Anda harus mendaftarkan situs web Anda dengan penyedia. Saat mendaftarkan situs, Anda akan menerima parameter (seperti kunci atau id, dan rahasia) untuk disertakan saat mendaftarkan klien. Anda harus memiliki akun dengan penyedia yang ingin Anda gunakan.
Tutorial ini tidak menunjukkan semua langkah yang harus Anda lakukan untuk mendaftar dengan penyedia ini. Langkah-langkahnya biasanya tidak sulit. Agar berhasil mendaftarkan situs Anda, ikuti instruksi yang disediakan di situs tersebut. Untuk mulai mendaftarkan situs Anda, lihat situs pengembang untuk:
Saat mendaftarkan situs Anda dengan Facebook, Anda dapat menyediakan "localhost" untuk domain situs dan "http://localhost/" untuk URL, seperti yang ditunjukkan pada gambar di bawah ini. Menggunakan localhost berfungsi dengan sebagian besar penyedia, tetapi saat ini tidak berfungsi dengan penyedia Microsoft. Untuk penyedia Microsoft, Anda harus menyertakan URL situs web yang valid.
Pada gambar sebelumnya, nilai untuk id aplikasi, rahasia aplikasi, dan email kontak telah dihapus. Ketika Anda benar-benar mendaftarkan situs Anda, nilai-nilai tersebut akan ada. Anda akan ingin mencatat nilai untuk id aplikasi dan rahasia aplikasi karena Anda akan menambahkannya ke aplikasi Anda.
Membuat pengguna uji
Jika Anda tidak keberatan menggunakan akun Facebook yang ada untuk menguji situs Anda, Anda dapat melewati bagian ini.
Anda dapat dengan mudah membuat pengguna uji untuk aplikasi Anda dalam halaman manajemen aplikasi Facebook. Anda dapat menggunakan akun pengujian ini untuk masuk ke situs Anda. Anda membuat pengguna uji dengan mengklik tautan Peran di panel navigasi kiri dan mengklik tautan Buat .
Situs Facebook secara otomatis membuat jumlah akun pengujian yang Anda minta.
Menambahkan id aplikasi dan rahasia dari penyedia
Sekarang setelah Anda menerima id dan rahasia dari Facebook, kembali ke file AuthConfig dan tambahkan sebagai nilai parameter. Nilai yang ditunjukkan di bawah ini bukan nilai nyata.
public static class AuthConfig
{
public static void RegisterAuth()
{
//OAuthWebSecurity.RegisterMicrosoftClient(
// clientId: "",
// clientSecret: "");
//OAuthWebSecurity.RegisterTwitterClient(
// consumerKey: "",
// consumerSecret: "");
//OAuthWebSecurity.RegisterFacebookClient(
// appId: "",
// appSecret: "");
//OAuthWebSecurity.RegisterGoogleClient();
}
}
Masuk dengan kredensial eksternal
Itu saja yang harus Anda lakukan untuk mengaktifkan kredensial eksternal di situs Anda. Jalankan aplikasi Anda dan klik tautan masuk di sudut kanan atas. Templat ini secara otomatis mengenali bahwa Anda telah mendaftarkan Facebook sebagai penyedia dan menyertakan tombol untuk penyedia. Jika Anda mendaftarkan beberapa penyedia, tombol untuk masing-masing penyedia disertakan secara otomatis.
Tutorial ini tidak mencakup cara menyesuaikan tombol masuk untuk penyedia eksternal. Untuk informasi tersebut, lihat Menyesuaikan UI masuk saat menggunakan OAuth/OpenID.
Klik tombol Facebook untuk masuk dengan kredensial Facebook. Saat Anda memilih salah satu penyedia eksternal, Anda diarahkan ke situs tersebut dan diminta oleh layanan tersebut untuk masuk.
Gambar berikut menunjukkan layar masuk untuk Facebook. Ini mencatat bahwa Anda menggunakan akun Facebook Anda untuk masuk ke situs bernama oauthmvcexample.
Setelah masuk dengan kredensial Facebook, halaman memberi tahu pengguna bahwa situs akan memiliki akses ke informasi dasar.
Setelah memilih Buka Aplikasi, pengguna harus mendaftar untuk situs tersebut. Gambar berikut menunjukkan halaman pendaftaran setelah pengguna masuk dengan kredensial Facebook. Nama pengguna biasanya telah diisi sebelumnya dengan nama dari penyedia.
Klik Daftar untuk menyelesaikan pendaftaran. Tutup browser.
Anda bisa melihat bahwa akun baru telah ditambahkan ke database Anda. Di Server Explorer, buka database DefaultConnection dan buka folder Tabel .
Klik kanan tabel UserProfile dan pilih Perlihatkan Data Tabel.
Anda akan melihat akun baru yang Anda tambahkan. Lihat data dalam tabel webpage_OAuthMembership . Anda akan melihat lebih banyak data yang terkait dengan penyedia eksternal untuk akun yang baru saja Anda tambahkan.
Jika Anda hanya ingin mengaktifkan autentikasi eksternal, Anda selesai. Namun, Anda dapat mengintegrasikan informasi lebih lanjut dari penyedia ke dalam proses pendaftaran pengguna baru, seperti yang ditunjukkan di bagian berikut.
Membuat model untuk informasi pengguna tambahan
Seperti yang Anda perhatikan di bagian sebelumnya, Anda tidak perlu mengambil informasi tambahan apa pun agar pendaftaran akun bawaan berfungsi. Namun, sebagian besar penyedia eksternal meneruskan kembali informasi tambahan tentang pengguna. Bagian berikut ini memperlihatkan cara menyimpan informasi tersebut dan menyimpannya ke database. Secara khusus, Anda akan mempertahankan nilai untuk nama lengkap pengguna, URI halaman web pribadi pengguna, dan nilai yang menunjukkan apakah Facebook telah memverifikasi akun tersebut.
Anda akan menggunakan Migrasi Pertama Kode untuk menambahkan tabel untuk menyimpan informasi pengguna tambahan. Anda menambahkan tabel ke database yang sudah ada, jadi Anda harus terlebih dahulu membuat rekam jepret database saat ini. Dengan membuat rekam jepret database saat ini, Anda nantinya dapat membuat migrasi yang hanya berisi tabel baru. Untuk membuat rekam jepret database saat ini:
- Buka Konsol Manajer Paket
- Jalankan perintah enable-migrations
- Jalankan perintah add-migration initial –IgnoreChanges
- Jalankan perintah update-database
Sekarang, Anda akan menambahkan properti baru. Di folder Model, buka file AccountModels.cs, dan temukan kelas RegisterExternalLoginModel. Kelas RegisterExternalLoginModel menyimpan nilai yang kembali dari penyedia autentikasi. Tambahkan properti bernama FullName dan Link, seperti yang disorot di bawah ini.
public class RegisterExternalLoginModel
{
[Required]
[Display(Name = "User name")]
public string UserName { get; set; }
public string ExternalLoginData { get; set; }
[Display(Name = "Full name")]
public string FullName { get; set; }
[Display(Name = "Personal page link")]
public string Link { get; set; }
}
Juga di AccountModels.cs, tambahkan kelas baru yang disebut ExtraUserInformation. Kelas ini mewakili tabel baru yang akan dibuat dalam database.
[Table("ExtraUserInformation")]
public class ExternalUserInformation
{
public int Id { get; set; }
public int UserId { get; set; }
public string FullName { get; set; }
public string Link { get; set; }
public bool? Verified { get; set; }
}
Di kelas UsersContext, tambahkan kode yang disorot di bawah ini untuk membuat properti DbSet untuk kelas baru.
public class UsersContext : DbContext
{
public UsersContext()
: base("DefaultConnection")
{
}
public DbSet<UserProfile> UserProfiles { get; set; }
public DbSet<ExternalUserInformation> ExternalUsers { get; set; }
}
Anda sekarang siap untuk membuat tabel baru. Buka Konsol Pengelola Paket lagi dan kali ini:
- Jalankan perintah add-migration AddExtraUserInformation
- Jalankan perintah update-database
Tabel baru sekarang ada dalam database.
Mengambil data tambahan
Ada dua cara untuk mengambil data pengguna tambahan. Cara pertama adalah menyimpan data pengguna yang diteruskan kembali, secara default, selama permintaan autentikasi. Cara kedua adalah dengan secara khusus memanggil API penyedia dan meminta informasi lebih lanjut. Nilai untuk FullName dan Link secara otomatis diteruskan kembali oleh Facebook. Nilai yang menunjukkan apakah Facebook telah memverifikasi akun diambil melalui panggilan ke API Facebook. Pertama, Anda akan mengisi nilai untuk FullName dan Link, lalu nanti, Anda akan mendapatkan nilai terverifikasi.
Untuk mengambil data pengguna tambahan, buka file AccountController.cs di folder Pengontrol .
File ini berisi logika untuk pengelogan, pendaftaran, dan pengelolaan akun. Secara khusus, perhatikan metode yang disebut ExternalLoginCallback dan ExternalLoginConfirmation. Dalam metode ini, Anda dapat menambahkan kode untuk menyesuaikan operasi masuk eksternal untuk aplikasi Anda. Baris pertama metode ExternalLoginCallback berisi:
AuthenticationResult result = OAuthWebSecurity.VerifyAuthentication(
Url.Action("ExternalLoginCallback", new { ReturnUrl = returnUrl }));
Data pengguna tambahan diteruskan kembali di properti ExtraData objek AuthenticationResult yang dikembalikan dari metode VerifyAuthentication . Klien Facebook berisi nilai berikut di properti ExtraData :
- id
- name
- Link
- jenis kelamin
- accesstoken
Penyedia lain akan memiliki data yang serupa tetapi sedikit berbeda di properti ExtraData.
Jika pengguna baru menggunakan situs Anda, Anda akan mengambil beberapa data tambahan dan meneruskan data tersebut ke tampilan konfirmasi. Blok kode terakhir dalam metode ini hanya dijalankan jika pengguna baru di situs Anda. Ganti baris berikut:
return View("ExternalLoginConfirmation", new RegisterExternalLoginModel
{
UserName = result.UserName,
ExternalLoginData = loginData
});
Dengan baris ini:
return View("ExternalLoginConfirmation", new RegisterExternalLoginModel
{
UserName = result.UserName,
ExternalLoginData = loginData,
FullName = result.ExtraData["name"],
Link = result.ExtraData["link"]
});
Perubahan ini hanya mencakup nilai untuk properti FullName dan Link.
Dalam metode ExternalLoginConfirmation , ubah kode seperti yang disorot di bawah ini untuk menyimpan informasi pengguna tambahan.
if (user == null)
{
// Insert name into the profile table
UserProfile newUser = db.UserProfiles.Add(new UserProfile { UserName = model.UserName });
db.SaveChanges();
db.ExternalUsers.Add(new ExternalUserInformation
{
UserId = newUser.UserId,
FullName = model.FullName,
Link = model.Link
});
db.SaveChanges();
OAuthWebSecurity.CreateOrUpdateAccount(provider, providerUserId, model.UserName);
OAuthWebSecurity.Login(provider, providerUserId, createPersistentCookie: false);
return RedirectToLocal(returnUrl);
}
else
{
ModelState.AddModelError("UserName", "User name already exists. Please enter a different user name.");
}
Menyesuaikan tampilan
Data pengguna tambahan yang Anda ambil dari penyedia akan ditampilkan di halaman pendaftaran.
Di folderAkunTampilan/, buka ExternalLoginConfirmation.cshtml. Di bawah bidang yang ada untuk nama pengguna, tambahkan bidang untuk FullName, Link, dan PictureLink.
<li>
@Html.LabelFor(m => m.FullName)
@Html.TextBoxFor(m => m.FullName)
</li>
<li>
@Html.LabelFor(m => m.Link)
@Html.TextBoxFor(m => m.Link)
</li>
Anda sekarang hampir siap untuk menjalankan aplikasi dan mendaftarkan pengguna baru dengan informasi tambahan yang disimpan. Anda harus memiliki akun yang belum terdaftar di situs. Anda dapat menggunakan akun pengujian yang berbeda, atau menghapus baris di tabel UserProfile dan webpages_OAuthMembership untuk akun yang ingin Anda gunakan kembali. Dengan menghapus baris tersebut, Anda akan memastikan bahwa akun terdaftar lagi.
Jalankan aplikasi dan daftarkan pengguna baru. Perhatikan bahwa kali ini halaman konfirmasi berisi lebih banyak nilai.
Setelah menyelesaikan pendaftaran, tutup browser. Lihat di database untuk melihat nilai baru dalam tabel ExtraUserInformation .
Menginstal paket NuGet untuk API Facebook
Facebook menyediakan API yang dapat Anda panggil untuk melakukan operasi. Anda dapat memanggil API Facebook baik dengan mengarahkan pengiriman permintaan HTTP, atau dengan menggunakan menginstal paket NuGet yang memfasilitasi pengiriman permintaan tersebut. Menggunakan paket NuGet ditampilkan dalam tutorial ini, tetapi menginstal paket NuGet tidak penting. Tutorial ini menunjukkan cara menggunakan paket C# SDK Facebook. Ada paket NuGet lain yang membantu memanggil API Facebook.
Dari jendela Kelola Paket NuGet , pilih paket Facebook C# SDK.
Anda akan menggunakan Facebook C# SDK untuk memanggil operasi yang memerlukan token akses untuk pengguna. Bagian berikutnya menunjukkan cara mendapatkan token akses.
Mengambil token akses
Sebagian besar penyedia eksternal meneruskan kembali token akses setelah kredensial pengguna diverifikasi. Token akses ini sangat penting karena memungkinkan Anda untuk memanggil operasi yang hanya tersedia untuk pengguna yang diautentikasi. Oleh karena itu, mengambil dan menyimpan token akses sangat penting ketika Anda ingin memberikan lebih banyak fungsionalitas.
Bergantung pada penyedia eksternal, token akses mungkin hanya berlaku untuk waktu yang terbatas. Untuk memastikan bahwa Anda memiliki token akses yang valid, Anda akan mengambilnya setiap kali pengguna masuk, dan menyimpannya sebagai nilai sesi daripada menyimpannya ke database.
Dalam metode ExternalLoginCallback , token akses juga diteruskan kembali di properti ExtraData objek AuthenticationResult . Tambahkan kode yang disorot ke ExternalLoginCallback untuk menyimpan token akses di objek Sesi . Kode ini dijalankan setiap kali pengguna masuk dengan akun Facebook.
[AllowAnonymous]
public ActionResult ExternalLoginCallback(string returnUrl)
{
AuthenticationResult result = OAuthWebSecurity.VerifyAuthentication(
Url.Action("ExternalLoginCallback", new { ReturnUrl = returnUrl }));
if (!result.IsSuccessful)
{
return RedirectToAction("ExternalLoginFailure");
}
if (result.ExtraData.Keys.Contains("accesstoken"))
{
Session["facebooktoken"] = result.ExtraData["accesstoken"];
}
if (OAuthWebSecurity.Login(
result.Provider,
result.ProviderUserId,
createPersistentCookie: false))
{
return RedirectToLocal(returnUrl);
}
if (User.Identity.IsAuthenticated)
{
// If the current user is logged in add the new account
OAuthWebSecurity.CreateOrUpdateAccount(
result.Provider,
result.ProviderUserId,
User.Identity.Name);
return RedirectToLocal(returnUrl);
}
else
{
// User is new, ask for their desired membership name
string loginData = OAuthWebSecurity.SerializeProviderUserId(
result.Provider,
result.ProviderUserId);
ViewBag.ProviderDisplayName =
OAuthWebSecurity.GetOAuthClientData(result.Provider).DisplayName;
ViewBag.ReturnUrl = returnUrl;
return View("ExternalLoginConfirmation", new RegisterExternalLoginModel
{
UserName = result.UserName,
ExternalLoginData = loginData,
FullName = result.ExtraData["name"],
Link = result.ExtraData["link"]
});
}
}
Meskipun contoh ini mengambil token akses dari Facebook, Anda dapat mengambil token akses dari penyedia eksternal mana pun melalui kunci yang sama bernama "accesstoken".
Pengelogan nonaktif
Metode LogOff default mengeluarkan pengguna dari aplikasi Anda, tetapi tidak mengeluarkan pengguna dari penyedia eksternal. Untuk mengeluarkan pengguna dari Facebook, dan mencegah token bertahan setelah pengguna keluar, Anda dapat menambahkan kode yang disorot berikut ke metode LogOff di AccountController.
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult LogOff()
{
WebSecurity.Logout();
if (Session["facebooktoken"] != null)
{
var fb = new Facebook.FacebookClient();
string accessToken = Session["facebooktoken"] as string;
var logoutUrl = fb.GetLogoutUrl(new { access_token = accessToken, next = "http://localhost:39852/" });
Session.RemoveAll();
return Redirect(logoutUrl.AbsoluteUri);
}
return RedirectToAction("Index", "Home");
}
Nilai yang next Anda berikan dalam parameter adalah URL yang akan digunakan setelah pengguna keluar dari Facebook. Ketika menguji di komputer lokal Anda, Anda akan memberikan nomor port yang benar untuk situs lokal Anda. Dalam produksi, Anda akan menyediakan halaman default, seperti contoso.com.
Mengambil informasi pengguna yang memerlukan token akses
Sekarang setelah Anda menyimpan token akses dan menginstal paket Facebook C# SDK, Anda dapat menggunakannya bersama-sama untuk meminta informasi pengguna tambahan dari Facebook. Dalam metode ExternalLoginConfirmation , buat instans kelas FacebookClient dengan meneruskan nilai token akses. Minta nilai properti terverifikasi untuk pengguna saat ini yang diautentikasi. Properti terverifikasi menunjukkan apakah Facebook telah memvalidasi akun melalui beberapa cara lain, seperti mengirim pesan ke ponsel. Simpan nilai ini dalam database.
if (user == null)
{
// Insert name into the profile table
UserProfile newUser = db.UserProfiles.Add(new UserProfile { UserName = model.UserName });
db.SaveChanges();
bool facebookVerified;
var client = new Facebook.FacebookClient(Session["facebooktoken"].ToString());
dynamic response = client.Get("me", new { fields = "verified" });
if (response.ContainsKey("verified"))
{
facebookVerified = response["verified"];
}
else
{
facebookVerified = false;
}
db.ExternalUsers.Add(new ExternalUserInformation
{
UserId = newUser.UserId,
FullName = model.FullName,
Link = model.Link,
Verified = facebookVerified
});
db.SaveChanges();
OAuthWebSecurity.CreateOrUpdateAccount(provider, providerUserId, model.UserName);
OAuthWebSecurity.Login(provider, providerUserId, createPersistentCookie: false);
return RedirectToLocal(returnUrl);
}
Anda akan kembali perlu menghapus rekaman dalam database untuk pengguna, atau menggunakan akun Facebook yang berbeda.
Jalankan aplikasi, dan daftarkan pengguna baru. Lihat tabel ExtraUserInformation untuk melihat nilai untuk properti Terverifikasi.
Kesimpulan
Dalam tutorial ini, Anda membuat situs yang terintegrasi dengan Facebook untuk autentikasi pengguna dan data pendaftaran. Anda mempelajari tentang perilaku default yang disiapkan untuk aplikasi web MVC 4, dan cara menyesuaikan perilaku default tersebut.