Masuk Menggunakan Situs Eksternal di Situs Halaman Web (Razor) ASP.NET

oleh Tom FitzMacken

Artikel ini menjelaskan cara masuk ke situs ASP.NET Web Pages (Razor) Anda menggunakan Facebook, Google, Twitter, Yahoo, dan situs lainnya — yaitu, cara mendukung OAuth dan OpenID di situs Anda.

Yang akan Anda pelajari:

• Cara mengaktifkan masuk dari situs lain saat Anda menggunakan templat Situs WebMatrix Starter.

Ini adalah fitur ASP.NET yang diperkenalkan dalam artikel:

• Pembantu OAuthWebSecurity .

Versi perangkat lunak yang digunakan dalam tutorial

• Halaman Web ASP.NET (Razor) 2
• WebMatrix 3

ASP.NET Web Pages mencakup dukungan untuk penyedia OAuth dan OpenID . Dengan menggunakan penyedia ini, Anda dapat mengizinkan pengguna masuk ke situs Anda menggunakan kredensial yang ada dari Facebook, Twitter, Microsoft, dan Google. Misalnya, untuk masuk menggunakan akun Facebook, pengguna hanya dapat memilih ikon Facebook, yang mengalihkan mereka ke halaman login Facebook tempat mereka memasukkan informasi pengguna mereka. Mereka kemudian dapat mengaitkan login Facebook dengan akun mereka di situs Anda. Peningkatan terkait fitur keanggotaan Halaman Web adalah pengguna dapat mengaitkan beberapa login (termasuk login dari situs jejaring sosial) dengan satu akun di situs web Anda.

Gambar ini memperlihatkan halaman Masuk dari templat Situs Pemula , di mana pengguna dapat memilih ikon Facebook, Twitter, Google, atau Microsoft untuk mengaktifkan masuk dengan akun eksternal:

Anda dapat mengaktifkan keanggotaan OAuth dan OpenID dengan menghapus beberapa baris kode dalam templat Situs Pemula . Metode dan properti yang Anda gunakan untuk bekerja dengan penyedia OAuth dan OpenID ada di WebMatrix.Security.OAuthWebSecurity kelas . Templat Situs Pemula menyertakan infrastruktur keanggotaan lengkap, lengkap dengan halaman masuk, database keanggotaan, dan semua kode yang Anda butuhkan untuk memungkinkan pengguna masuk ke situs Anda menggunakan kredensial lokal atau yang berasal dari situs lain.

Bagian ini menyediakan contoh cara mengizinkan pengguna masuk dari situs eksternal ke situs yang didasarkan pada templat Situs Pemula . Setelah membuat situs pemula, Anda melakukan ini (detailnya berikut):

• Untuk situs yang menggunakan penyedia OAuth (Facebook, Twitter, dan Microsoft), Anda membuat aplikasi di situs eksternal. Ini memberi Anda kunci aplikasi yang akan Anda butuhkan untuk memanggil fitur masuk untuk situs-situs tersebut.

• Untuk situs yang menggunakan penyedia OpenID (Google), Anda tidak perlu membuat aplikasi. Untuk semua situs ini, Anda harus memiliki akun untuk masuk dan membuat aplikasi pengembang.

  Catatan

  Aplikasi Microsoft hanya menerima URL langsung untuk situs web yang berfungsi, sehingga Anda tidak dapat menggunakan URL situs web lokal untuk menguji login.

• Edit beberapa file di situs web Anda untuk menentukan penyedia autentikasi yang sesuai dan mengirimkan login ke situs yang ingin Anda gunakan.

Artikel ini menyediakan instruksi terpisah untuk tugas-tugas berikut:

• Mengaktifkan login Google
• Mengaktifkan login Facebook
• Mengaktifkan login Twitter

Mengaktifkan Login Google

1. Buat atau buka situs Halaman Web ASP.NET yang didasarkan pada templat Situs Pemula WebMatrix.

2. Buka halaman _AppStart.cshtml dan hapus komentar baris kode berikut.

   OAuthWebSecurity.RegisterGoogleClient();
   

Menguji login Google

1. Jalankan halaman default.cshtml situs Anda dan pilih tombol Masuk .

2. Pada halaman Login , di bagian Gunakan layanan lain untuk masuk , pilih tombol kirim Google atau Yahoo . Contoh ini menggunakan login Google.

   Halaman web mengalihkan permintaan ke halaman login Google.

   

3. Masukkan kredensial untuk akun Google yang sudah ada.

4. Jika Google menanyakan apakah Anda ingin mengizinkan Localhost menggunakan informasi dari akun, klik Izinkan.

   Kode ini menggunakan token Google untuk mengautentikasi pengguna, lalu kembali ke halaman ini di situs web Anda. Halaman ini memungkinkan pengguna mengaitkan login Google mereka dengan akun yang ada di situs web Anda, atau mereka dapat mendaftarkan akun baru di situs Anda untuk mengaitkan login eksternal.

   

5. Pilih tombol Kaitkan . Browser kembali ke halaman beranda aplikasi Anda.

Mengaktifkan Login Facebook

1. Buka situs pengembang Facebook (masuk jika Anda belum masuk).

2. Pilih tombol Buat Aplikasi Baru , lalu ikuti perintah untuk memberi nama dan membuat aplikasi baru.

3. Di bagian Pilih bagaimana aplikasi Anda akan diintegrasikan dengan Facebook, pilih bagian Situs Web .

4. Isi bidang URL Situs dengan URL situs Anda (misalnya, http://www.example.com). Bidang Domain bersifat opsional; Anda dapat menggunakan ini untuk menyediakan autentikasi untuk seluruh domain (seperti example.com).

   Catatan

   Jika Anda menjalankan situs di komputer lokal Anda dengan URL seperti http://localhost:12345 (di mana nomor tersebut adalah nomor port lokal), Anda dapat menambahkan nilai ini ke bidang URL Situs untuk menguji situs Anda. Namun, setiap kali nomor port situs lokal Anda berubah, Anda harus memperbarui bidang URL Situs aplikasi Anda.

5. Pilih tombol Simpan Perubahan .

6. Pilih lagi tab Aplikasi , lalu lihat halaman mulai untuk aplikasi Anda.

7. Salin nilai ID Aplikasi dan Rahasia Aplikasi untuk aplikasi Anda dan tempelkan ke dalam file teks sementara. Anda akan meneruskan nilai-nilai ini ke penyedia Facebook dalam kode situs web Anda.

8. Keluar dari situs pengembang Facebook.

Sekarang Anda membuat perubahan pada dua halaman di situs web Anda sehingga pengguna akan dapat masuk ke situs menggunakan akun Facebook mereka.

1. Buat atau buka situs Halaman Web ASP.NET yang didasarkan pada templat Situs Pemula WebMatrix.

2. Buka halaman _AppStart.cshtml dan batalkan komentar kode untuk penyedia OAuth Facebook. Blok kode yang tidak berkomentar terlihat seperti berikut ini:

   OAuthWebSecurity.RegisterFacebookClient(
           appId: "",
           appSecret: "");
   

3. Salin nilai ID Aplikasi dari aplikasi Facebook sebagai nilai appId parameter (di dalam tanda kutip).

4. Salin nilai Rahasia Aplikasi dari aplikasi Facebook sebagai appSecret nilai parameter.

5. Simpan dan tutup file.

Menguji login Facebook

1. Jalankan halaman default.cshtml situs dan pilih tombol Masuk .

2. Pada halaman Masuk , di bagian Gunakan layanan lain untuk masuk , pilih ikon Facebook .

   Halaman web mengalihkan permintaan ke halaman masuk Facebook.

   

3. Masuk ke akun Facebook.

   Kode ini menggunakan token Facebook untuk mengautentikasi Anda lalu kembali ke halaman tempat Anda dapat mengaitkan login Facebook anda dengan login situs Anda. Nama pengguna atau alamat email Anda diisi ke bidang Email pada formulir.

   

4. Pilih tombol Kaitkan .

   Browser kembali ke halaman beranda dan Anda masuk.

Mengaktifkan Masuk Twitter

1. Telusuri ke situs pengembang Twitter.

2. Pilih tautan Buat Aplikasi lalu masuk ke situs.

3. Pada formulir Buat Aplikasi , isi bidang Nama dan Deskripsi .

4. Di bidang WebSite , masukkan URL situs Anda (misalnya, http://www.example.com).

   Catatan

   Jika Anda menguji situs Anda secara lokal (menggunakan URL seperti http://localhost:12345), Twitter mungkin tidak menerima URL. Namun, Anda mungkin dapat menggunakan alamat IP loopback lokal (misalnya http://127.0.0.1:12345). Ini menyederhanakan proses pengujian aplikasi Anda secara lokal. Namun, setiap kali nomor port situs lokal Anda berubah, Anda harus memperbarui bidang WebSite aplikasi Anda.

5. Di bidang URL Panggilan Balik , masukkan URL untuk halaman di situs web Anda yang ingin dikembalikan pengguna setelah masuk ke Twitter. Misalnya, untuk mengirim pengguna ke halaman beranda Situs Pemula (yang akan mengenali status masuk mereka), masukkan URL yang sama dengan yang Anda masukkan di bidang WebSite .

6. Terima persyaratan dan pilih tombol Buat aplikasi Twitter Anda .

7. Pada halaman arahan Aplikasi Saya , pilih aplikasi yang Anda buat.

8. Pada tab Detail , gulir ke bawah dan pilih tombol Buat Token Akses Saya .

9. Pada tab Detail , salin nilai Kunci Konsumen dan Rahasia Konsumen untuk aplikasi Anda dan tempelkan ke dalam file teks sementara. Anda akan meneruskan nilai-nilai ini ke penyedia Twitter di kode situs web Anda.

10. Keluar dari situs Twitter.

Sekarang Anda membuat perubahan pada dua halaman di situs web Anda sehingga pengguna akan dapat masuk ke situs menggunakan akun Twitter mereka.

1. Buat atau buka situs halaman web ASP.NET yang didasarkan pada templat Situs Pemula WebMatrix.

2. Buka halaman _AppStart.cshtml dan batalkan komentar kode untuk penyedia OAuth Twitter. Blok kode yang tidak berkomentar terlihat seperti ini:

   OAuthWebSecurity.RegisterTwitterClient(
           consumerKey: "",
           consumerSecret: "");
   

3. Salin nilai Kunci Konsumen dari aplikasi Twitter sebagai nilai consumerKey parameter (di dalam tanda kutip).

4. Salin nilai Rahasia Konsumen dari aplikasi Twitter sebagai nilai consumerSecret parameter .

5. Simpan dan tutup file.

Menguji login Twitter

1. Jalankan halaman default.cshtml situs Anda dan pilih tombol Masuk .

2. Pada halaman Masuk , di bagian Gunakan layanan lain untuk masuk , pilih ikon Twitter .

   Halaman web mengalihkan permintaan ke halaman masuk Twitter untuk aplikasi yang Anda buat.

   

3. Masuk ke akun Twitter.

4. Kode ini menggunakan token Twitter untuk mengautentikasi pengguna dan kemudian mengembalikan Anda ke halaman di mana Anda dapat mengaitkan login Anda dengan akun situs web Anda. Nama atau alamat email Anda diisi ke dalam bidang Email pada formulir.

   

5. Pilih tombol Kaitkan .

   Browser kembali ke halaman beranda dan Anda masuk.

Sumber Daya Tambahan

• Menyesuaikan Perilaku Site-Wide
• Menambahkan Keamanan dan Keanggotaan ke Situs Halaman Web ASP.NET