Bagikan melalui

Membuat Aplikasi MVC 5 ASP.NET dengan Facebook, Twitter, LinkedIn, dan Masuk Google OAuth2 (C#)

oleh Rick Anderson

Tutorial ini menunjukkan kepada Anda cara membuat aplikasi web ASP.NET MVC 5 yang memungkinkan pengguna untuk masuk menggunakan OAuth 2.0 dengan kredensial dari penyedia autentikasi eksternal, seperti Facebook, Twitter, LinkedIn, Microsoft, atau Google. Untuk kesederhanaan, tutorial ini berfokus pada bekerja dengan kredensial dari Facebook dan Google.

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.

Lihat juga ASP.NET aplikasi MVC 5 dengan SMS dan autentikasi Two-Factor email.

Tutorial ini juga menunjukkan cara menambahkan data profil untuk pengguna, dan cara menggunakan API Keanggotaan untuk menambahkan peran. Tutorial ini ditulis oleh Rick Anderson (Silakan ikuti saya di Twitter: @RickAndMSFT ).

Memulai

Mulailah dengan menginstal dan menjalankan Visual Studio Express 2013 untuk Web atau Visual Studio 2013. Instal Visual Studio 2013 Update 3 atau yang lebih tinggi.

Catatan

Anda harus menginstal Visual Studio 2013 Update 3 atau yang lebih tinggi untuk menggunakan Google OAuth 2 dan untuk men-debug secara lokal tanpa peringatan SSL.

Klik Proyek Baru dari halaman Mulai , atau Anda bisa menggunakan menu dan pilih File, lalu Proyek Baru.

Cuplikan layar yang memperlihatkan halaman Visual Studio Start.

Membuat aplikasi pertama Anda

Klik Proyek Baru, lalu pilih Visual C# di sebelah kiri, lalu Web lalu pilih ASP.NET Aplikasi Web. Beri nama proyek Anda "MvcAuth" lalu klik OK.

Cuplikan layar yang memperlihatkan halaman menu Proyek Baru Visual Studio. M v c Auth dimasukkan pada bidang teks Nama.

Dalam dialog Proyek ASP.NET Baru , klik MVC. Jika Autentikasi bukan Akun Pengguna Individual, klik tombol Ubah Autentikasi dan pilih Akun Pengguna Individual. Dengan memeriksa Host di cloud, aplikasi akan sangat mudah dihosting di Azure.

Cuplikan layar yang memperlihatkan kotak dialog Proyek NET titik S P Baru. Tombol Ubah Autentikasi dan Host di kotak centang cloud disorot.

Jika Anda memilih Host di cloud, selesaikan dialog konfigurasi.

Cuplikan layar yang memperlihatkan kotak dialog Konfigurasi situs web Microsoft Azure. Contoh kata sandi database dimasukkan.

Menggunakan NuGet untuk memperbarui ke middleware OWIN terbaru

Gunakan manajer paket NuGet untuk memperbarui middleware OWIN. Pilih Updates di menu sebelah kiri. Anda dapat mengklik tombol Perbarui Semua atau Anda hanya dapat mencari paket OWIN (ditunjukkan pada gambar berikutnya):

Cuplikan layar yang memperlihatkan kotak dialog Kelola Paket GET Nu. Bilah Updates dan tombol Perbarui Semua disorot.

Pada gambar di bawah ini, hanya paket OWIN yang ditampilkan:

Cuplikan layar yang memperlihatkan kotak dialog Kelola Paket GET Nu. Bilah Updates dan bilah Pencarian dengan OWN yang dimasukkan di dalamnya disorot.

Dari Package Manager Console (PMC), Anda dapat memasukkan Update-Package perintah , yang akan memperbarui semua paket.

Tekan F5 atau Ctrl+F5 untuk menjalankan aplikasi. Pada gambar di bawah ini, nomor port adalah 1234. Saat menjalankan aplikasi, Anda akan melihat nomor port yang berbeda.

Bergantung pada ukuran jendela browser, Anda mungkin perlu mengklik ikon navigasi untuk melihat tautan Beranda, Tentang, Kontak, Daftar, dan Masuk .

Cuplikan layar yang memperlihatkan halaman Beranda MY A S P dot NET. Ikon Navigasi disorot.
Cuplikan layar yang memperlihatkan halaman Beranda MY A S P dot NET. Ikon Navigasi disorot dan dipilih, memperlihatkan menu dropdown dengan tautan navigasi.

Menyiapkan SSL di Proyek

Untuk terhubung ke penyedia autentikasi seperti Google dan Facebook, Anda harus menyiapkan IIS-Express untuk menggunakan SSL. Penting untuk terus menggunakan SSL setelah masuk dan tidak kembali ke HTTP, cookie login Anda sama rahasianya dengan nama pengguna dan kata sandi Anda, dan tanpa menggunakan SSL Anda mengirimkannya dalam teks yang jelas di seluruh kabel. Selain itu, Anda sudah meluangkan waktu untuk melakukan jabat tangan dan mengamankan saluran (yang merupakan sebagian besar dari apa yang membuat HTTPS lebih lambat dari HTTP) sebelum alur MVC dijalankan, jadi mengalihkan kembali ke HTTP setelah Anda masuk tidak akan membuat permintaan saat ini atau permintaan di masa mendatang jauh lebih cepat.

  1. Di Penjelajah Solusi, klik proyek MvcAuth.

  2. Tekan tombol F4 untuk menampilkan properti proyek. Atau, dari menu Tampilan Anda dapat memilih Jendela Properti.

  3. Ubah SSL Diaktifkan ke True.

    Cuplikan layar yang memperlihatkan Penjelajah Solusi Properti Proyek untuk Proyek Autentikasi M v c. S S L Diaktifkan True dan S S L U R L disorot.

  4. Salin URL SSL (yang akan menjadi https://localhost:44300/ kecuali Anda telah membuat proyek SSL lainnya).

  5. Di Penjelajah Solusi, klik kanan proyek MvcAuth dan pilih Properti.

  6. Pilih tab Web , lalu tempelkan URL SSL ke dalam kotak Url Proyek . Simpan file (Ctl+S). Anda akan memerlukan URL ini untuk mengonfigurasi aplikasi autentikasi Facebook dan Google.

    Cuplikan layar yang memperlihatkan halaman properti proyek M v c Auth. Tab Web di menu sebelah kiri dan S S S L U R L yang ditempelkan dalam kotak Project U R L disorot.

  7. Tambahkan atribut RequireHttps ke Home pengontrol untuk mengharuskan semua permintaan harus menggunakan HTTPS. Pendekatan yang lebih aman adalah menambahkan filter RequireHttps ke aplikasi. Lihat bagian "Lindungi Aplikasi dengan SSL dan Atribut Otorisasi" dalam tutorial saya Membuat aplikasi MVC ASP.NET dengan auth dan SQL DB dan menyebarkan ke Azure App Service. Sebagian pengontrol Rumah ditunjukkan di bawah ini.

    [RequireHttps]
public class HomeController : Controller
{
   public ActionResult Index()
   {
      return View();
   }

  8. Klik CTRL + F5 untuk menjalankan aplikasi. Jika Anda telah menginstal sertifikat di masa lalu, Anda dapat melewati sisa bagian ini dan melompat ke Membuat aplikasi Google untuk OAuth 2 dan menghubungkan aplikasi ke proyek, jika tidak, ikuti instruksi untuk mempercayai sertifikat yang ditandatangani sendiri yang telah dibuat oleh IIS Express.

    Cuplikan layar yang memperlihatkan kotak dialog Visual Studio yang meminta pengguna untuk memilih apakah akan mempercayai sertifikat I S Express S L atau tidak.

  9. Baca dialog Peringatan Keamanan lalu klik Ya jika Anda ingin menginstal sertifikat yang mewakili localhost.

    Cuplikan layar yang memperlihatkan kotak dialog Peringatan Keamanan Visual Studio yang meminta pengguna untuk memilih apakah akan menginstal sertifikasi atau tidak.

  10. IE memperlihatkan halaman Beranda dan tidak ada peringatan SSL.

    Cuplikan layar yang memperlihatkan halaman Beranda MY A S P dot NET tanpa peringatan S S L.

  11. Google Chrome juga menerima sertifikat dan akan menampilkan konten HTTPS tanpa peringatan. Firefox menggunakan penyimpanan sertifikatnya sendiri, sehingga akan menampilkan peringatan. Untuk aplikasi kami, Anda dapat dengan aman mengklik Saya Memahami Risiko.

    Cuplikan layar yang memperlihatkan aplikasi My A S P dot NET yang berjalan di Firefox. Halaman peringatan Koneksi Tidak Tepercaya menanyakan kepada pengguna apakah akan menerima aplikasi dan melanjutkan atau tidak.

Membuat aplikasi Google untuk OAuth 2 dan menghubungkan aplikasi ke proyek

Peringatan

Untuk petunjuk Google OAuth saat ini, lihat Mengonfigurasi autentikasi Google di ASP.NET Core.

  1. Buka Konsol Pengembang Google.

  2. Jika Anda belum membuat proyek sebelumnya, pilih Kredensial di tab kiri, lalu pilih Buat.

  3. Di tab sebelah kiri, klik Kredensial.

  4. Klik Buat kredensial lalu ID klien OAuth.

    1. Dalam dialog Buat ID Klien , pertahankan aplikasi Web default untuk jenis aplikasi.
    2. Atur asal JavaScript resmi ke URL SSL yang Anda gunakan di atas (https://localhost:44300/ kecuali Anda telah membuat proyek SSL lainnya)
    3. Atur URI pengalihan resmi ke:
      https://localhost:44300/signin-google

  5. Klik item menu layar Persetujuan OAuth, lalu atur alamat email dan nama produk Anda. Ketika Anda telah menyelesaikan formulir, klik Simpan.

  6. Klik item menu Pustaka, telusuri Google+ API, klik lalu tekan Aktifkan.

    Cuplikan layar menampilkan daftar hasil pencarian. Hasil pencarian Google plus A P I disorot.

    Gambar di bawah ini menunjukkan API yang diaktifkan.

    Cuplikan layar yang menampilkan daftar halaman Konsol Pengembang Google yang mengaktifkan A P I. A P I ditampilkan sebagai diaktifkan ketika tombol ON hijau muncul di sampingnya.

  7. Dari Google API API Manager, kunjungi tab Kredensial untuk mendapatkan ID Klien. Unduh untuk menyimpan file JSON dengan rahasia aplikasi. Salin dan tempel ClientId dan ClientSecret ke dalam metode yang UseGoogleAuthentication ditemukan dalam file Startup.Auth.cs di folder App_Start . Nilai ClientId dan ClientSecret yang ditunjukkan di bawah ini adalah sampel dan tidak berfungsi.

    public void ConfigureAuth(IAppBuilder app)
{
    // Configure the db context and user manager to use a single instance per request
    app.CreatePerOwinContext(ApplicationDbContext.Create);
    app.CreatePerOwinContext<ApplicationUserManager>(ApplicationUserManager.Create);

    // Enable the application to use a cookie to store information for the signed in user
    // and to use a cookie to temporarily store information about a user logging in with a third party login provider
    // Configure the sign in cookie
    app.UseCookieAuthentication(new CookieAuthenticationOptions
    {
        AuthenticationType = DefaultAuthenticationTypes.ApplicationCookie,
        LoginPath = new PathString("/Account/Login"),
        Provider = new CookieAuthenticationProvider
        {
            OnValidateIdentity = SecurityStampValidator.OnValidateIdentity<ApplicationUserManager, ApplicationUser>(
                validateInterval: TimeSpan.FromMinutes(30),
                regenerateIdentity: (manager, user) => user.GenerateUserIdentityAsync(manager))
        }
    });
    
    app.UseExternalSignInCookie(DefaultAuthenticationTypes.ExternalCookie);

    // Uncomment the following lines to enable logging in with third party login providers
    //app.UseMicrosoftAccountAuthentication(
    //    clientId: "",
    //    clientSecret: "");

    //app.UseTwitterAuthentication(
    //   consumerKey: "",
    //   consumerSecret: "");

    //app.UseFacebookAuthentication(
    //   appId: "",
    //   appSecret: "");

    app.UseGoogleAuthentication(
         clientId: "000-000.apps.googleusercontent.com",
         clientSecret: "00000000000");
}

    Peringatan

    Keamanan - Jangan pernah menyimpan data sensitif dalam kode sumber Anda. Akun dan kredensial ditambahkan ke kode di atas untuk menjaga sampel tetap sederhana. Lihat Praktik terbaik untuk menyebarkan kata sandi dan data sensitif lainnya ke ASP.NET dan Azure App Service.

  8. Tekan CTRL+F5 untuk membangun dan menjalankan aplikasi. Klik tautan Masuk .

    Cuplikan layar yang memperlihatkan halaman Beranda MY A S P dot NET. Tombol Navigasi dan tautan Masuk disorot.

  9. Di bawah Gunakan layanan lain untuk masuk, klik Google.

    Cuplikan layar yang memperlihatkan halaman Masuk MY A S P dot NET. Tombol Gunakan layanan lain untuk masuk dan Google disorot.

    Catatan

    Jika Anda melewatkan salah satu langkah di atas, Anda akan mendapatkan kesalahan HTTP 401. Centang ulang langkah-langkah Anda di atas. Jika Anda melewatkan pengaturan yang diperlukan (misalnya nama produk), tambahkan item yang hilang dan simpan; dibutuhkan beberapa menit agar autentikasi berfungsi.

  10. Anda akan diarahkan ke situs Google tempat Anda akan memasukkan kredensial Anda.

    Cuplikan layar yang menampilkan halaman masuk Akun Google. Info masuk sampel dimasukkan di bidang teks.

  11. Setelah memasukkan kredensial, Anda akan diminta untuk memberikan izin ke aplikasi web yang baru saja Anda buat:

    Cuplikan layar yang menampilkan halaman Permintaan Izin Akun Google, meminta pengguna untuk membatalkan atau menerima akses offline ke aplikasi web.

  12. Klik Terima. Anda sekarang akan diarahkan kembali ke halaman Daftar aplikasi MvcAuth tempat Anda dapat mendaftarkan akun Google Anda. Anda memiliki opsi untuk mengubah nama pendaftaran email lokal yang digunakan untuk akun Gmail Anda, tetapi umumnya Anda ingin menyimpan alias email default (yaitu, yang Anda gunakan untuk autentikasi). Klik Daftar.

    Cuplikan layar yang memperlihatkan halaman Aplikasi Pendaftaran NET dot My A S P. Contoh akun Google dimasukkan di bidang teks email.

Membuat aplikasi di Facebook dan menghubungkan aplikasi ke proyek

Peringatan

Untuk petunjuk autentikasi Facebook OAuth2 saat ini, lihat Mengonfigurasi autentikasi Facebook

Memeriksa Data Keanggotaan Menggunakan Server Explorer

Di menu Tampilan , klik Penjelajah Server.

Cuplikan layar yang memperlihatkan menu dropdown Visual Studio VIEW, tempat Server Explorer disorot.

Perluas DefaultConnection (MvcAuth), perluas Tabel, klik kanan AspNetUsers dan klik Perlihatkan Data Tabel.

Cuplikan layar yang memperlihatkan opsi menu Service Explorer. Tab Koneksi Data, Koneksi Default M v c Auth, dan Tabel diperluas.

data tabel aspnetusers

Menambahkan Data Profil ke Kelas Pengguna

Di bagian ini Anda akan menambahkan tanggal lahir dan kota asal ke data pengguna selama pendaftaran, seperti yang ditunjukkan pada gambar berikut.

reg dengan kota asal dan Bday

Buka file Models\IdentityModels.cs dan tambahkan tanggal lahir dan properti kota asal:

public class ApplicationUser : IdentityUser
{
    public string HomeTown { get; set; }
    public System.DateTime? BirthDate { get; set; }
    public async Task<ClaimsIdentity> GenerateUserIdentityAsync(UserManager<ApplicationUser> manager)
    {
        // Note the authenticationType must match the one defined in CookieAuthenticationOptions.AuthenticationType
        var userIdentity = await manager.CreateIdentityAsync(this, DefaultAuthenticationTypes.ApplicationCookie);
        // Add custom user claims here
        return userIdentity;
    }
}

Buka file Models\AccountViewModels.cs dan tanggal lahir yang ditetapkan dan properti kota asal di ExternalLoginConfirmationViewModel.

public class ExternalLoginConfirmationViewModel
{
    [Required]
    [EmailAddress]
    [Display(Name = "Email")]
    public string Email { get; set; }

    public string HomeTown { get; set; }
    public System.DateTime? BirthDate { get; set; }
}

Buka file Controllers\AccountController.cs dan tambahkan kode untuk tanggal lahir dan kota asal dalam metode tindakan seperti yang ExternalLoginConfirmation ditunjukkan:

[HttpPost]
[AllowAnonymous]
[ValidateAntiForgeryToken]
public async Task<ActionResult> ExternalLoginConfirmation(ExternalLoginConfirmationViewModel model, string returnUrl)
{
    if (User.Identity.IsAuthenticated)
    {
        return RedirectToAction("Manage");
    }

    if (ModelState.IsValid)
    {
        // Get the information about the user from the external login provider
        var info = await AuthenticationManager.GetExternalLoginInfoAsync();
        if (info == null)
        {
            return View("ExternalLoginFailure");
        }
        var user = new ApplicationUser() 
        {
            UserName = model.Email, Email = model.Email,
            BirthDate = model.BirthDate,
            HomeTown  = model.HomeTown
        
        };
        IdentityResult result = await UserManager.CreateAsync(user);
        if (result.Succeeded)
        {
            result = await UserManager.AddLoginAsync(user.Id, info.Login);
            if (result.Succeeded)
            {
                await SignInAsync(user, isPersistent: false);
                
                // For more information on how to enable account confirmation and password reset please visit https://go.microsoft.com/fwlink/?LinkID=320771
                // Send an email with this link
                // string code = await UserManager.GenerateEmailConfirmationTokenAsync(user.Id);
                // var callbackUrl = Url.Action("ConfirmEmail", "Account", new { userId = user.Id, code = code }, protocol: Request.Url.Scheme);
                // SendEmail(user.Email, callbackUrl, "Confirm your account", "Please confirm your account by clicking this link");
                
                return RedirectToLocal(returnUrl);
            }
        }
        AddErrors(result);
    }

    ViewBag.ReturnUrl = returnUrl;
    return View(model);
}

Tambahkan tanggal lahir dan kota asal ke file Views\Account\ExternalLoginConfirmation.cshtml :

@model MvcAuth.Models.ExternalLoginConfirmationViewModel
@{
    ViewBag.Title = "Register";
}
<h2>@ViewBag.Title.</h2>
<h3>Associate your @ViewBag.LoginProvider account.</h3>

@using (Html.BeginForm("ExternalLoginConfirmation", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
    @Html.AntiForgeryToken()

    <h4>Association Form</h4>
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <p class="text-info">
        You've successfully authenticated with <strong>@ViewBag.LoginProvider</strong>.
            Please enter a user name for this site below and click the Register button to finish
            logging in.
    </p>
    <div class="form-group">
        @Html.LabelFor(m => m.Email, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.Email, new { @class = "form-control" })
            @Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.HomeTown, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.HomeTown, new { @class = "form-control" })
            @Html.ValidationMessageFor(m => m.HomeTown)
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.BirthDate, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.BirthDate, new { @class = "form-control" })
            @Html.ValidationMessageFor(m => m.BirthDate)
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" class="btn btn-default" value="Register" />
        </div>
    </div>
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

Hapus database keanggotaan sehingga Anda dapat kembali mendaftarkan akun Facebook dengan aplikasi Anda dan memverifikasi bahwa Anda dapat menambahkan tanggal lahir baru dan informasi profil kota asal.

Dari Penjelajah Solusi, klik ikon Perlihatkan Semua File, lalu klik kanan Add_Data\aspnet-MvcAuth-dateStamp.mdf<> dan klik Hapus.

Cuplikan layar yang memperlihatkan halaman Penjelajah Solusi. Ikon Perlihatkan Semua File dan database keanggotaan M v c Auth disorot.

Dari menu Alat , klik NuGet Package Manger, lalu klik Package Manager Console (PMC). Masukkan perintah berikut di PMC.

  1. Enable-Migrations
  2. Add-Migration Init
  3. Update-Database

Jalankan aplikasi dan gunakan FaceBook dan Google untuk masuk dan mendaftarkan beberapa pengguna.

Memeriksa Data Keanggotaan

Di menu Tampilan , klik Penjelajah Server.

Cuplikan layar yang memperlihatkan menu dropdown Visual Studio VIEW. Opsi Service Explorer disorot.

Klik kanan AspNetUsers dan klik Perlihatkan Data Tabel.

Cuplikan layar yang memperlihatkan opsi menu Penjelajah Server. A s p Net Users dan opsi Tampilkan Data Tabel disorot.

Bidang HomeTown dan BirthDate ditunjukkan di bawah ini.

Cuplikan layar yang memperlihatkan data tabel A s p Net Users. Data tabel memperlihatkan bidang I D, Kota Asal, Tanggal Lahir, Email, dan Email Dikonfirmasi.

Keluar dari Aplikasi Anda dan Masuk Dengan Akun Lain

Jika Anda masuk ke aplikasi Anda dengan Facebook, lalu keluar dan mencoba masuk lagi dengan akun Facebook yang berbeda (menggunakan browser yang sama), Anda akan segera masuk ke akun Facebook sebelumnya yang Anda gunakan. Untuk menggunakan akun lain, Anda perlu menavigasi ke Facebook dan keluar di Facebook. Aturan yang sama berlaku untuk penyedia autentikasi pihak ke-3 lainnya. Atau, Anda dapat masuk dengan akun lain dengan menggunakan browser yang berbeda.

Langkah berikutnya

Ikuti tutorial saya Membuat aplikasi MVC ASP.NET dengan auth dan SQL DB dan sebarkan ke Azure App Service, yang melanjutkan tutorial ini dan menunjukkan hal-hal berikut:

  1. Cara menyebarkan aplikasi Anda ke Azure.
  2. Cara mengamankan aplikasi Anda dengan peran.
  3. Cara mengamankan aplikasi Anda dengan filter RequireHttps dan Authorize .
  4. Cara menggunakan API keanggotaan untuk menambahkan pengguna dan peran.

Untuk penjelasan yang baik tentang cara kerja Layanan Autentikasi Eksternal ASP.NET, lihat Layanan Autentikasi Eksternal Robert McMurray. Artikel Robert juga menjelaskan secara rinci dalam mengaktifkan autentikasi Microsoft dan Twitter. Tutorial EF/MVC Tom Dykstra yang sangat baik menunjukkan cara bekerja dengan Kerangka Kerja Entitas.