Membuat Alur Login Secara Manual

Untuk login berbasis browser untuk web atau aplikasi desktop tanpa menggunakan SDK kami, seperti dalam tampilan web untuk aplikasi desktop asli (contoh: Windows 8), atau alur login menggunakan kode sisi server sepenuhnya, Anda dapat membuat alur Login untuk Anda sendiri dengan menggunakan pengalihan browser. Panduan ini akan memandu Anda melalui setiap langkah alur login dan menunjukkan cara menerapkan setiap langkah tanpa menggunakan SDK kami:

Untuk menggunakan Facebook Login di aplikasi desktop, Anda harus dapat menyematkan browser web (terkadang disebut tampilan web) di dalam aplikasi untuk melakukan proses login.

Memeriksa Status Login

Aplikasi yang menggunakan SDK kami dapat memeriksa apakah seseorang telah login menggunakan fungsi bawaan. Semua aplikasi lain harus membuat cara penyimpanan mereka sendiri ketika seseorang telah login, dan ketika indikator itu tidak ada, lanjutkan dengan asumsi bahwa mereka keluar. Jika seseorang keluar, maka aplikasi Anda harus mengarahkannya ke dialog Login pada waktu yang tepat, misalnya, jika dia mengeklik tombol Login.

Membuat Orang Login

Apakah seseorang tidak masuk ke aplikasi Anda atau tidak masuk ke Facebook, Anda dapat menggunakan dialog Login untuk meminta mereka melakukan keduanya. Jika mereka tidak masuk ke Facebook, mereka akan diminta untuk masuk dan kemudian masuk ke aplikasi Anda. Ini terdeteksi secara otomatis, jadi Anda tidak perlu melakukan apa pun ekstra untuk mengaktifkan perilaku ini.


Menjalankan Dialog Login dan Mengatur URL Pengalihan

Aplikasi Anda harus memulai pengalihan ke endpoint yang akan menampilkan dialog login:

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

Endpoint ini memiliki parameter wajib berikut:

  • client_id. ID aplikasi Anda, ada di dasbor aplikasi Anda.
  • redirect_uri. URL yang Anda ingin mengarahkan orang kembali masuk. URL ini akan menangkap tanggapan dari Dialog Login. Jika Anda menggunakan ini dalam tampilan web dalam aplikasi desktop, ini harus diatur ke https://www.facebook.com/connect/login_success.html. Anda dapat mengonfirmasi bahwa URL ini diatur untuk aplikasi Anda di Dasbor Aplikasi. Di bawah Produk di menu navigasi sebelah kiri Dasbor Aplikasi, klik Facebook Login, lalu klik Pengaturan. Verifikasikan URI pengalihan OAuth yang valid di bagian Pengaturan OAuth Klien.
  • state. Nilai string yang dibuat oleh aplikasi Anda untuk mempertahankan status antara permintaan dan panggilan balik. Parameter ini harus digunakan untuk mencegah Pemalsuan Permintaan Lintas Situs dan akan diteruskan kembali kepada Anda, tidak berubah, di URI pengalihan Anda.

Contoh: jika permintaan login Anda seperti:

https://www.facebook.com/v21.0/dialog/oauth?
  client_id={app-id}
  &redirect_uri={"https://www.domain.com/login"}
  &state={"{st=state123abc,ds=123456789}"}

maka URI pengalihan ulang Anda akan dipanggil dengan ini:

https://www.domain.com/login?state="{st=state123abc,ds=123456789}"
    

Pengaturan ini juga memiliki parameter opsional berikut:

  • response_type. Menentukan apakah tanggapan yang disertakan saat pengalihan kembali ke aplikasi terjadi di parameter atau fragmen URL. Lihat bagian Mengonfirnasi Identitas untuk memilih jenis yang harus digunakan aplikasi Anda. Bisa salah satu dari:
    • code. Data tanggapan disertakan sebagai parameter URL dan berisi parameter code (string terenkripsi unik untuk setiap permintaan login). Ini adalah perilaku default jika parameter ini tidak ditentukan. Ini paling berguna ketika server akan menangani token.
    • token. Data tanggapan disertakan sebagai fragmen URL dan berisi token akses. Aplikasi desktop harus menggunakan pengaturan ini untuk response_type. Ini paling berguna ketika klien akan menangani token.
    • code%20token. Data tanggapan disertakan sebagai fragmen URL dan berisi token akses dan parameter code.
    • granted_scopes. Mengembalikan daftar semua Izin yang dipisahkan koma, dan diberikan ke aplikasi oleh pengguna pada saat login. Bisa digabungkan dengan nilai response_type lainnya. Saat digabungkan dengan token, data tanggapan disertakan sebagai fragmen URL, jika tidak disertakan sebagai parameter URL.
  • scope. Daftar Izin yang dipisahkan koma atau spasi untuk diminta dari orang yang menggunakan aplikasi Anda.
Untuk Aplikasi Windows 8

Jika Anda sedang membuat Login untuk aplikasi Windows, Anda dapat menggunakan Pengidentifikasi Keamanan Paket sebagai redirect_uri Anda. Picu Dialog Login menggunakan WebAuthenticationBroker.AuthenticateAsync dan gunakan endpoint Dialog Login sebagai URI permintaan. Inilah contoh di JavaScript:

var requestUri = new Windows.Foundation.Uri(
  "https://www.facebook.com/v21.0/dialog/oauth?
    client_id={app-id}
    &display=popup
    &response_type=token
    &redirect_uri=ms-app://{package-security-identifier}");

Windows.Security.Authentication.Web.WebAuthenticationBroker.authenticateAsync(
  options,
  requestUri)
  .done(function (result) {
    // Handle the response from the Login Dialog
  }
);

Ini akan mengembalikan aliran kontrol kembali ke aplikasi Anda dengan token akses saat berhasil, atau kesalahan saat gagal.

Menangani Tanggapan Dialog Login

Pada titik ini dalam alur login, orang tersebut akan melihat dialog Login dan akan memiliki pilihan apakah akan membatalkan atau membiarkan aplikasi mengakses datanya.

Jika orang yang menggunakan aplikasi memilih OK pada dialog Login, mereka memberikan akses ke profil publik, daftar teman, dan Izin tambahan yang diminta aplikasi Anda.

Dalam semua kasus, browser kembali ke aplikasi, dan menyertakan data tanggapan yang menunjukkan apakah seseorang terhubung atau dibatalkan. Saat aplikasi Anda menggunakan metode pengalihan seperti di atas, redirect_uri tempat kembalinya aplikasi Anda akan ditambahi parameter atau fragmen URL (sesuai response_type yang dipilih), yang harus dicatat.

Karena berbagai kombinasi bahasa kode yang dapat digunakan di aplikasi web, panduan kami tidak menunjukkan contoh spesifik. Namun sebagian besar bahasa modern akan mampu parsing URL, sebagai berikut:

JavaScript sisi klien dapat menangkap fragmen URL (contoh: jQuery BBQ), sedangkan parameter URL dapat ditangkap oleh kode sisi klien dan sisi server (contoh: $_GET di PHP, jQuery.deparam di jQuery BBQ, querystring.parse di Node.js, atau urlparse di Python). Microsoft memberikan panduan dan kode contoh untuk aplikasi Windows 8 yang terhubung ke "penyedia online" - dalam hal ini, Facebook.

Saat menggunakan aplikasi desktop dan masuk, Facebook mengarahkan orang ke redirect_uri yang disebutkan di atas dan menempatkan token akses bersama dengan beberapa metadata lain (seperti waktu kedaluwarsa token) di fragmen URI:

https://www.facebook.com/connect/login_success.html#
    access_token=ACCESS_TOKEN...

Aplikasi Anda perlu mendeteksi pengalihan ini dan kemudian membaca token akses dari URI menggunakan mekanisme yang disediakan oleh OS dan kerangka kerja pengembangan yang Anda gunakan. Anda kemudian dapat langsung melompat ke langkah Menginspeksi token akses.


Login Dibatalkan

Jika orang yang menggunakan aplikasi Anda tidak menerima dialog Login dan mengeklik Batalkan, mereka akan dialihkan ke yang berikut:

YOUR_REDIRECT_URI?
 error_reason=user_denied
 &error=access_denied
 &error_description=Permissions+error.

Lihat Menangani Izin yang Belum Ada untuk selengkapnya tentang apa yang harus dilakukan aplikasi ketika orang menolak untuk login.

Mengonfirmasi Identitas

Karena alur pengalihan ini melibatkan browser yang dialihkan ke URL di aplikasi Anda dari dialog Login, traffic dapat langsung mengakses URL ini dengan fragmen atau parameter buatan. Jika aplikasi Anda menganggap ini adalah parameter yang valid, data buatan akan digunakan oleh aplikasi Anda untuk tujuan yang berpotensi berbahaya. Akibatnya, aplikasi Anda harus mengonfirmasi bahwa orang yang menggunakan aplikasi tersebut adalah orang yang sama dengan data tanggapan Anda sebelum membuat token akses untuk mereka. Konfirmasi identitas dilakukan dengan cara yang berbeda tergantung pada response_type yang diterima di atas:

  • Saat code diterima, harus ditukar dengan token akses menggunakan endpoint. Panggilan harus server ke server, karena melibatkan rahasia aplikasi Anda. (Rahasia aplikasi Anda tidak boleh berakhir di kode klien.)
  • Saat token diterima, perlu diverifikasi. Anda harus membuat panggilan API ke endpoint inspeksi yang akan menunjukkan untuk siapa token itu dibuat dan oleh aplikasi mana. Karena panggilan API ini memerlukan penggunaan token akses aplikasi, jangan pernah melakukan panggilan ini dari klien. Sebagai gantinya, lakukan panggilan ini dari server tempat Anda dapat menyimpan rahasia aplikasi dengan aman.
  • Saat kedua code dan token diterima, kedua langkah harus dilakukan.

Perhatikan bahwa Anda juga dapat membuat parameter state Anda sendiri dan menggunakannya dengan permintaan login Anda untuk menyediakan perlindungan CSRF.

Menukarkan Kode dengan Token Akses

Untuk mendapatkan token akses, buat permintaan HTTP GET ke endpoint OAuth berikut:

GET https://graph.facebook.com/v21.0/oauth/access_token?
   client_id={app-id}
   &redirect_uri={redirect-uri}
   &client_secret={app-secret}
   &code={code-parameter}

Endpoint ini memiliki beberapa parameter wajib:

  • client_id. ID aplikasi Anda
  • redirect_uri. Argumen ini diperlukan dan harus sama dengan request_uri asli yang Anda gunakan saat memulai proses login OAuth.
  • client_secret. Rahasia aplikasi unik Anda, ditampilkan di Dasbor Aplikasi. Jangan pernah menyertakan rahasia aplikasi ini dalam kode sisi klien atau dalam binari yang dapat didekompilasi. Sangat penting untuk menjaga kerahasiaan sepenuhnya karena ini adalah inti dari keamanan aplikasi Anda dan semua orang yang menggunakannya.
  • code. Parameter yang diterima dari pengalihan Dialog Login di atas.

Catatan: Dari v2.3 dan seterusnya, endpoint ini akan mengembalikan tanggapan JSON yang tepat. Jika panggilan Anda tidak menentukan versinya, default-nya adalah versi paling lama yang tersedia.

Tanggapan

Tanggapan yang akan Anda terima dari endpoint ini akan dikembalikan dalam format JSON dan, jika berhasil:

{
  "access_token": {access-token}, 
  "token_type": {type},
  "expires_in":  {seconds-til-expiration}
}

Jika tidak berhasil, Anda akan menerima pesan kesalahan penjelasan.

Menginspeksi Token Akses

Terlepas dari aplikasi Anda menggunakan code atau token sebagai response_type dari dialog Login atau tidak, aplikasi pasti menerima token akses. Anda dapat melakukan pemeriksaan otomatis pada token ini menggunakan endpoint Graph API:

GET graph.facebook.com/debug_token?
     input_token={token-to-inspect}
     &access_token={app-token-or-admin-token}

Endpoint ini mengambil parameter berikut:

  • input_token. Token yang harus Anda periksa.
  • access_tokenToken akses aplikasi atau token akses untuk developer aplikasi.

Tanggapan panggilan API adalah array JSON yang berisi data tentang token yang diperiksa. Contoh:

{
    "data": {
        "app_id": 138483919580948, 
        "type": "USER",
        "application": "Social Cafe", 
        "expires_at": 1352419328, 
        "is_valid": true, 
        "issued_at": 1347235328, 
        "metadata": {
            "sso": "iphone-safari"
        }, 
        "scopes": [
            "email", 
            "publish_actions"
        ], 
        "user_id": "1207059"
    }
}

Kolom app_id dan user_id membantu aplikasi Anda memverifikasi bahwa token akses valid untuk orang tersebut dan untuk aplikasi Anda. Untuk deskripsi lengkap kolom lainnya, lihat Mendapatkan Info tentang panduan Token Akses.

Memeriksa Izin

Edge /me/permissions dapat dipanggil untuk mengambil daftar izin yang telah diberikan atau ditolak oleh pengguna tertentu. Aplikasi Anda dapat menggunakan ini untuk memeriksa izin mana yang diminta yang tidak dapat digunakan untuk pengguna tertentu.

Meminta kembali Izin yang Ditolak

Dengan Facebook Login, orang dapat menolak membagikan izin dengan aplikasi Anda. Dialog Login berisi layar yang terlihat seperti ini:

Izin public_profile selalu diwajibkan dan berwarna abu-abu karena izin ini tidak dapat dinonaktifkan.

Namun jika seseorang tidak mencentang user_likes (Suka) dalam contoh ini, dengan mencentang /me/permissions yang izinnya sudah diberikan akan menghasilkan:

{
  "data":
    [
      {
        "permission":"public_profile",
        "status":"granted"
      },
      {
        "permission":"user_likes",
        "status":"declined"
      }
    ]
}

Perhatikan bahwa user_likes sudah ditolak, dan bukan diberikan.

Boleh-boleh saja meminta ulang seseorang untuk memberikan izin aplikasi Anda yang telah mereka tolak. Anda seharusnya memiliki layar edukasi tentang mengapa mereka sebaiknya memberikan izin kepada Anda, kemudian meminta ulang. Tetapi jika Anda meminta Login Dialog seperti sebelumnya, aplikasi tidak akan meminta izin tersebut.

Ini karena setelah seseorang menolak izin, Dialog Login tidak akan meminta ulang orang tersebut kecuali Anda secara tegas memberitahukan dialog bahwa Anda meminta ulang izin yang ditolak.

Lakukan ini dengan menambahkan parameter auth_type=rerequest ke URL Dialog Login:

https://www.facebook.com/v21.0/dialog/oauth?
    client_id={app-id}
    &redirect_uri={redirect-uri}
    &auth_type=rerequest
    scope=email
   

Dengan menggunakan ini, Dialog Login akan meminta kembali izin yang ditolak.

Menyimpan Token Akses dan Status Login

Pada titik ini dalam alur, Anda memiliki seseorang yang diautentikasi dan login. Aplikasi Anda siap melakukan panggilan API atas namanya. Sebelum melakukannya, itu harus menyimpan token akses dan status login orang yang menggunakan aplikasi.

Menyimpan Token Akses

Setelah aplikasi Anda menerima token akses dari langkah sebelumnya, token harus disimpan sehingga tersedia untuk semua bagian aplikasi saat membuat panggilan API. Tidak ada proses khusus di sini, namun secara umum jika Anda membuat aplikasi web, sebaiknya tambahkan token sebagai variabel sesi untuk mengidentifikasi sesi browser tersebut dengan orang tertentu, jika Anda membuat desktop atau aplikasi seluler native, maka Anda harus menggunakan penyimpanan data yang tersedia untuk aplikasi Anda. Selain itu, aplikasi harus menyimpan token dalam database bersama dengan user_id untuk mengidentifikasinya.

Lihat catatan kami tentang ukuran token akses di dokumen token akses.

Melacak status login

Sekali lagi, aplikasi Anda harus menyimpan status login seseorang, yang membantu menghindari keharusan melakukan panggilan tambahan ke dialog Login. Apa pun prosedur yang Anda pilih, ubah pemeriksaan status login untuk memperhitungkannya.

Mengeluarkan Orang

Anda dapat mengeluarkan orang dari aplikasi Anda dengan membatalkan indikator status login apa pun yang Anda tambahkan, contoh: menghapus sesi yang menunjukkan seseorang masuk. Anda juga harus menghapus token akses yang disimpan.

Mengeluarkan seseorang tidak sama dengan mencabut izin masuk (menghapus autentikasi yang diberikan sebelumnya), yang dapat dilakukan secara terpisah. Karena itu, maka buat aplikasi Anda sehingga tidak otomatis memaksa orang yang sudah keluar kembali ke dialog Login.

Mendeteksi saat orang menghapus aplikasi

Orang-orang dapat menghapus aplikasi melalui Facebook.com tanpa berinteraksi dengan aplikasi itu sendiri. Untuk membantu aplikasi mendeteksi ketika ini terjadi, kami mengizinkan mereka untuk memberikan URL panggilan balik yang dicabut otorisasinya yang akan di-ping setiap kali ini terjadi.

Anda dapat mengaktifkan panggilan balik yang dicabut otorisasinya melalui Dasbor Aplikasi.

Menanggapi Permintaan untuk Menghapus Data Pengguna

Orang dapat meminta aplikasi untuk menghapus semua informasi tentang mereka yang diterima dari Facebook. Untuk menanggapi permintaan ini, lihat Panggilan Balik Permintaan Penghapusan Data.