Akses Facebook OAuth 2.0 untuk Situs Web

Proses otorisasi OAuth 2.0 yang digunakan oleh Facebook adalah "Authorization Code Grant". Mari kita perkenalkan cara mengimplementasikannya dan cara melakukan debug di Apidog.

Apa itu OAuth 2.0?

OAuth 2.0 adalah protokol otorisasi yang banyak digunakan yang memungkinkan akses pihak ketiga ke sumber daya yang dilindungi tanpa memerlukan kredensial pengguna. Ini melibatkan empat peran utama:

1. Pemilik Sumber Daya: Biasanya pengguna yang memiliki sumber daya yang dilindungi.
2. Klien: Aplikasi pihak ketiga yang mencari akses ke data pemilik sumber daya.
3. Server Otorisasi: Memvalidasi pemilik sumber daya dan memberikan otorisasi kepada klien.
4. Server Sumber Daya: Menyimpan dan mengelola sumber daya yang dilindungi, menyediakan API untuk akses.

Alur Otorisasi Umum

Protokol OAuth 2.0 mengimplementasikan otorisasi melalui berbagai alur otorisasi. Alur otorisasi umum meliputi:

• Authorization Code Grant: Klien mengarahkan pengguna ke server otorisasi. Setelah pengguna masuk dan memberikan izin, server otorisasi mengembalikan kode otorisasi ke klien. Klien kemudian menukar kode otorisasi bersama dengan kredensialnya untuk mendapatkan token akses.
• Authorization Code Grant with PKCE (Proof Key for Code Exchange): Mirip dengan alur kode otorisasi standar, tetapi klien meningkatkan keamanan dengan menggunakan PKCE (Proof Key for Code Exchange).
• Resource Owner Password Credentials Grant: Pemilik sumber daya langsung memberikan nama pengguna dan kata sandi mereka kepada klien. Klien kemudian menggunakan kredensial ini untuk meminta token akses dari server otorisasi.
• Client Credentials Grant: Klien langsung meminta token akses dari server otorisasi menggunakan kredensialnya sendiri. Alur ini cocok untuk kasus di mana klien itu sendiri membutuhkan akses ke sumber daya.
• Implicit Grant: Digunakan untuk mendapatkan token akses langsung dari klien dalam aplikasi berbasis browser. Alur ini biasanya digunakan untuk aplikasi frontend web.

Cara Menggunakan Facebook OAuth 2.0 untuk Login ke Situs Web Pihak Ketiga

Langkah 1: Buat aplikasi dan dapatkan client ID dan client secret

Pertama, Anda perlu membuka akun pengembang Facebook di https://developers.facebook.com. Setelah membukanya, buat aplikasi di dalamnya.

Setelah aplikasi berhasil dibuat, klik opsi [Pengaturan Aplikasi->Dasar]. Nomor aplikasi di sini adalah client ID (Client ID), dan kunci aplikasi adalah client secret (Client Secret). Kita akan membutuhkan kedua atribut ini nanti.

Langkah 2: Konfigurasikan alamat callback

Setelah aplikasi dibuat, Anda juga perlu mengatur "alamat callback" di panel kontrol, klik opsi [Panel Kontrol -> Sesuaikan aplikasi ini], lalu klik "Pengaturan Login Facebook" untuk masuk ke antarmuka konfigurasi.

Di item "URI Pengalihan OAuth yang Valid" pada antarmuka konfigurasi, isi alamat callback (Callback URL), yang merupakan alamat pengalihan. Biasanya ini adalah nama domain server Anda (Facebook mengharuskannya dimulai dengan https).

Jika Anda belum memilikinya, Anda dapat mengisinya terlebih dahulu, asalkan Anda memastikan bahwa nama domain dapat diakses. Setelah konfigurasi selesai, simpan.

Tujuan kita membutuhkan "alamat callback" adalah untuk mendapatkan kode otorisasi (code) pada bilah alamat. Umumnya, setelah mengisi nama pengguna dan kata sandi pada halaman login OAuth 2.0, itu akan dialihkan ke "alamat callback" dan dapat ditampilkan di bilah alamat.

Dapatkan kode otorisasi (code). Bilah alamat berikut digunakan untuk mendapatkan nilai kode secara manual:

Setelah informasi di atas dikonfigurasi, kita secara resmi memasuki proses utama otorisasi OAuth 2.0.

Langkah 3: Dapatkan token akses

Ketika langkah pertama dan kedua di atas sudah siap, kita dapat mengajukan permohonan untuk token akses (Token). Kami akan mendemonstrasikan langkah ini melalui Apidog.

Apidog adalah alat debugging dan manajemen API yang sangat baik, Anda bisa mendapatkan token akses Token langsung di Apidog. Jika Anda belum menginstal Apidog, unduh sekarang!

1. Buat Permintaan HTTP Setelah membuat proyek HTTP di Apidog, buka, lalu buat permintaan di proyek, pilih opsi "Edit Dokumen -> Auth -> OAuth 2.0".

2. Konfigurasikan Client ID, Client Secret, dan Callback URL Mode otorisasi default yang dipilih pada halaman OAuth 2.0 di Apidog adalah Authorization Code, karena Facebook OAuth 2.0 juga menggunakan Authorization Code. Jadi, Anda tidak perlu beralih di sini.

Selanjutnya, temukan Client ID dan Callback URL di bagian bawah halaman, dan isi Client ID, Client Secret, dan Callback URL yang dikonfigurasi yang diperoleh dari layanan Facebook OAuth 2.0. Parameter spesifiknya adalah konfigurasi yang disebutkan di "Langkah 1, Langkah 2" di atas.

3. Konfigurasikan URL Permintaan Kode Otorisasi Menurut dokumentasi resmi Facebook, selama autentikasi OAuth 2.0, URL permintaan kode otorisasi adalah: https://www.facebook.com/v19.0/dialog/oauth

Cukup isi URL permintaan kode otorisasi ini ke dalam Auth URL. URL ini dapat dipahami sebagai halaman otorisasi login. Ini membuka halaman ini (dalam bentuk jendela di sisi klien) saat memverifikasi status login untuk pertama kalinya, meminta Anda untuk memasukkan nama pengguna dan kata sandi Anda.

Biasanya, saat membuat halaman otorisasi login secara manual, parameter tambahan diperlukan di URL otorisasi, seperti:

https://www.facebook.com/v19.0/dialog/oauth?
  client_id={app-id}
  &redirect_uri={redirect-uri}
  &state={state-param}

Catatan: Kelanjutan parameter seharusnya tidak memiliki jeda baris secara normal.

Namun, di Apidog, parameter tambahan setelah URL dasar umumnya tidak diperlukan. Hanya jalur sebelum tanda tanya "?" yang diperlukan karena parameter wajib lainnya dikonfigurasi secara terpisah dalam opsi lain. Tentu saja, jika Anda ingin menyertakan beberapa parameter kueri, Anda juga dapat menambahkannya dengan mengklik ikon di sebelah kotak input ini:

Kita juga dapat memperluas opsi "Lainnya" dan mengisi nilai untuk parameter yang perlu diisi, seperti mengisi "Scope" dengan izin yang diperlukan "public_profile". Izin "public_profile" di Facebook memungkinkan aplikasi untuk membaca bidang profil publik default dari node pengguna, dan izin ini secara otomatis diberikan kepada semua aplikasi.

Dalam opsi "State", isi "state", yang untuk mencegah pemalsuan permintaan lintas situs. Platform pihak ketiga biasanya mengharuskan ini diisi, jadi kita umumnya mengisinya, jika tidak, mungkin ada kesalahan saat mendapatkan token akses.

4. Konfigurasikan URL Permintaan Token Akses Menurut dokumentasi resmi Facebook, untuk mendapatkan token akses, URL yang diminta adalah: https://graph.facebook.com/v19.0/oauth/access_token

Cukup isi alamat ini ke dalam bidang input URL Token Akses. Demikian pula, parameter lain telah dikonfigurasi secara terpisah di bidang input lain, jadi mereka tidak perlu dimasukkan dalam URL.

5. Dapatkan Token Akses Setelah semua item konfigurasi yang disebutkan di atas diatur, Anda dapat mengklik tombol "Dapatkan Token" untuk mendapatkan token akses.

Setelah mengklik, jika ini adalah login pertama Anda, sebuah jendela akan muncul meminta otorisasi Anda, di mana Anda perlu memasukkan nama pengguna dan kata sandi akun Facebook Anda. Jika Anda masuk dari perangkat baru, Anda mungkin juga memerlukan email Anda untuk verifikasi tambahan.

Setelah memasukkan nama pengguna dan kata sandi Anda, Anda akan diminta untuk mengonfirmasi otorisasi.

Klik konfirmasi untuk menyelesaikan otorisasi. Setelah diotorisasi, token akses akan secara otomatis diperoleh dan ditampilkan di halaman. Pada saat yang sama, informasi lain yang dikembalikan oleh Facebook juga akan diuraikan.

Langkah 4: Akses Sumber Daya Terbuka Berdasarkan Token Dengan token akses (Token), Anda sekarang dapat menggunakannya untuk mengakses sumber daya terbuka Facebook. Anda dapat melihat jenis sumber daya terbuka apa yang tersedia di Facebook Graph API.

Misalnya, API berikut mengambil ID dan nama pengguna. Jika antarmuka Anda tidak mengembalikan apa pun, Anda mungkin perlu memeriksa apakah Anda memiliki izin yang diperlukan, seperti yang disebutkan di Bagian 3 dari "Langkah 3", cukup konfigurasikan di Scope. https://graph.facebook.com/v12.0/me?fields=id,name

Saat mengirim permintaan, Apidog akan secara otomatis melampirkan token ke header Authorization dan mengirimkannya ditambahkan ke "Bearer".

Jika Anda ingin membawa token di URL, Anda juga dapat memodifikasi "Tambahkan Lokasi" token dalam opsi konfigurasi di halaman, dan pilih "Query Params".

Ringkasan

OAuth 2.0 adalah protokol otorisasi standar terbuka yang memungkinkan aplikasi pihak ketiga untuk mengakses sumber daya yang dilindungi dengan aman. Proses otorisasi kode otorisasi adalah metode otorisasi umum dan digunakan oleh Facebook.

Selama implementasi, Anda perlu membuat aplikasi, mengonfigurasi alamat callback, mendapatkan token akses, dan menggunakan Apidog untuk debugging. Setelah mendapatkan token akses, Anda dapat menggunakan token untuk memanggil sumber daya terbuka Facebook.