Advertisement
  1. Code
  2. Coding Fundamentals
  3. Rest API

WP REST API: Menyiapkan dan Menggunakan Autentikasi Dasar

Scroll to top
Read Time: 8 min
This post is part of a series called Introducing the WP REST API.
Introducing the WP REST API
WP REST API: Setting Up and Using OAuth 1.0a Authentication

() translation by (you can also view the original English article)

Di bagian pengantar dari seri ini, kita memiliki penyegaran cepat pada arsitektur REST dan bagaimana hal itu dapat membantu kita membuat aplikasi yang lebih baik. Kita kemudian menjelajahi sejarah API REST di WordPress dan memperkenalkan diri pada penambahan terbaru: plugin WP REST API. Kita menyiapkan lingkungan kerja dasar untuk menguji dengan plugin, termasuk pemasangan plugin dan klien HTTP untuk mengirim permintaan atau melihat respons server.

Di bagian saat ini dari seri, kita akan menyiapkan protokol otentikasi dasar di server untuk mengirim permintaan dikonfirmasi untuk melakukan berbagai tugas melalui API REST.

Untuk lebih spesifik, di bagian ini kita akan:

  • melihat berbagai metode autentikasi yang tersedia saat menggunakan plugin REST API
  • mengatur otentikasi dasar di server
  • kirim permintaan yang diautentikasi menggunakan Postman
  • mengirim permintaan dikonfirmasi menggunakan framework JavaScript
  • kirim permintaan dikonfirmasi menggunakan baris perintah
  • mengirim permintaan dikonfirmasi menggunakan WP HTTP API

Tetapi mari kita lihat dulu otentikasi itu sendiri.

Apa itu Otentikasi?

Dalam definisi yang paling mendasar, otentikasi adalah proses menentukan identitas seseorang.

Menurut Webopedia:

Proses mengidentifikasi individu, yang biasanya berdasarkan nama pengguna dan kata sandi. Dalam sistem keamanan, otentikasi berbeda dari otorisasi, yang merupakan proses memberikan akses individu ke objek sistem berdasarkan identitas mereka. Otentikasi hanya memastikan bahwa individu itu adalah siapa yang dia klaim, tetapi tidak mengatakan apa pun tentang hak akses individu.

Ketika berbicara tentang WP REST API, pengguna dengan hak istimewa yang cukup dapat melakukan berbagai tugas CRUD seperti membuat posting, mengambil semua pengguna situs atau mencabut hak-hak pengguna. Tetapi untuk semua tindakan ini seseorang harus membuktikan identitasnya ke server, dan di sanalah otentikasi memainkan perannya.

Tanpa otentikasi yang tepat, akan sangat mudah bagi seseorang dengan ambisi nakal untuk mengacaukan situs, sehingga otentikasi memberikan lapisan keamanan yang diperlukan untuk membatasi hak-hak pengguna dan tindakan yang dapat dilakukan.

Otentikasi Dengan WP REST API

WP REST API menyediakan tiga opsi untuk otentikasi, masing-masing ditujukan untuk tujuan tertentu. Opsi-opsi ini adalah:

  • otentikasi dasar
  • otentikasi OAuth
  • otentikasi cookie

Saat ini, cara asli untuk mengautentikasi dengan WordPress adalah otentikasi oleh cookie. Inilah bagaimana WordPress menentukan identitas pengguna dan tindakan apa yang dapat dilakukannya. Untuk menggunakan dua metode otentikasi lain yang tercantum di atas dengan WP REST API, kita perlu menginstal plugin masing-masing yang disediakan oleh tim WP REST API yang tersedia di GitHub. Mudah-mudahan, kedua metode ini juga akan dimasukkan dalam inti WordPress dengan plugin REST API itu sendiri.

Otentikasi dasar adalah jenis otentikasi HTTP yang paling dasar, di mana kredensial masuk dikirim bersama dengan header permintaan.

Cara Kerja Otentikasi Dasar

Dalam otentikasi dasar, klien meminta URL yang memerlukan otentikasi. Server meminta klien (atau agen pengguna) untuk mengotentikasi sendiri dengan mengirimkan kode 401-Not Authorised. Klien, sebagai imbalannya, mengirim kembali permintaan yang sama tetapi dengan kredensial masuk sebagai string berenkode base64 dalam format username:password. String ini dikirim di bidang header Authorization sebagai berikut:

1
Authorization: Basic {base64_encode(username:password)}

Jadi jika nama pengguna adalah tutsplus dan kata sandi adalah 123456, kolom header berikut akan dikirim dengan permintaan:

1
Authorization: Basic dHV0c3BsdXM6MTIzNDU2

Karena string enkode base64 dapat dengan mudah didekodekan, metode ini sangat tidak aman untuk digunakan pada jaringan terbuka. Oleh karena itu metode ini hanya boleh digunakan untuk keperluan debugging dan pengembangan ketika koneksi antara server dan klien dipercaya.

Memasang Plugin

Seperti disebutkan di atas, plugin tersedia di GitHub dari tim WP REST API. Jadi yang perlu kita lakukan adalah mengkloningnya di direktori plugins kita dan mengaktifkannya.

Kepala ke direktori /wp-content/plugins/ Anda dan klon plugin yang Anda mungkin perlu hak sudo untuk menjalankan perintah. Untuk melakukannya, lakukan hal berikut:

1
$ sudo git clone https://github.com/WP-API/Basic-Auth.git

Terminal akan meminta kata sandi Anda. Masukkan kata sandi Anda dan biarkan repositori dikloning ke dalam direktori.

Setelah mengkloning plugin, aktifkan dengan masuk ke Admin WP Anda. Metode otentikasi HTTP dasar sekarang dapat digunakan dengan plugin REST API.

Mengirim Permintaan yang Di Autentikasi Menggunakan Postman

Sebagian besar klien HTTP mendukung pengiriman permintaan menggunakan metode autentikasi dasar secara bawaan, demikian pula Postman untuk Chrome. Untuk mengirim permintaan yang diautentikasi, buka tab Authorization di bawah bilah alamat:

Authorization TabAuthorization TabAuthorization Tab

Sekarang pilih Basic Auth dari menu drop-down. Anda akan diminta untuk memasukkan nama pengguna dan kata sandi Anda. Setelah memasukkan kredensial Anda, klik tombol Update request.

Basic AuthenticationBasic AuthenticationBasic Authentication

Setelah memperbarui opsi autentikasi, Anda akan melihat perubahan di tab Headers, dan sekarang menyertakan bidang header yang berisi string nama pengguna dan sandi yang dikodekan:

Authorization HeaderAuthorization HeaderAuthorization Header

Itu semua tentang cara kita menyiapkan autentikasi dasar dengan Postman. Sekarang Anda dapat mengirim permintaan pengujian seperti menghapus postingan, yang membutuhkan autentikasi:

1
DELETE http://dev-server/wp-json/wp/v2/posts/52

Di mana dev-server adalah jalur ke server pengembangan Anda.

Jika semua berjalan dengan baik, server akan mengembalikan kode status 200 OK, menunjukkan bahwa posting dengan id 52 telah dihapus:

Post createdPost createdPost created

Jangan khawatir tentang permintaan yang kita buat di sini—kita akan membahasnya lebih detail di bagian bagian selanjutnya dari seri ini.

Mengirim Permintaan yang Di Autentikasi Dari Baris Perintah

Kita dapat menggunakan baris perintah untuk mengirim permintaan yang diautentikasi menggunakan metode ini. Pertimbangkan ekuivalen curl berikut dari permintaan di atas:

1
curl --request DELETE -I --user  admin:password http://dev-server/wp-json/wp/v2/posts/52

Tanggapan berikut akan dikirim oleh server, menunjukkan bahwa semuanya baik-baik saja:

1
HTTP/1.1 200 OK
2
Date: Fri, 28 Aug 2015 20:02:43 GMT
3
Server: Apache/2.4.6 (CentOS) PHP/5.6.12
4
X-Powered-By: PHP/5.6.12
5
Set-Cookie: PHPSESSID=k0rg6mcbsie7ufvoav219lqre0; path=/
6
Expires: Thu, 19 Nov 1981 08:52:00 GMT
7
Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0
8
Pragma: no-cache
9
X-Content-Type-Options: nosniff
10
Link: <http://localserver/wordpress-api/demo-post-28/>; rel="alternate"; type=text/html
11
Allow: GET, POST, PUT, PATCH, DELETE
12
Transfer-Encoding: chunked
13
Content-Type: application/json; charset=UTF-8

Opsi --request menentukan metode permintaan yang akan digunakan, yang dalam kasus kita adalah DELETE. Anda juga dapat menggunakan -X sebagai alternatif untuk opsi --request.

Opsi -I hanya mengambil header HTTP yang dikirim oleh server. Alternatif untuk -I adalah opsi --head.

Mengirim Permintaan yang Diautentikasi Menggunakan JavaScript

Jika Anda menggunakan framework client-side JavaScript, seperti jQuery, untuk berinteraksi dari jarak jauh dengan situs WordPress yang mengaktifkan API WP, Anda dapat mengirim header otorisasi dalam permintaan AJAX. Pertimbangkan permintaan DELETE berikut yang dikirim melalui jQuery.ajax() metode:

1
$.ajax({
2
    url: 'http://dev-server/wp-json/wp/v2/posts/52',
3
  method: 'DELETE',
4
	crossDomain: true,
5
	beforeSend: function ( xhr ) {
6
    	xhr.setRequestHeader( 'Authorization', 'Basic ' + Base64.encode( 'username:password' ) );
7
	},
8
	success: function( data, txtStatus, xhr ) {
9
		console.log( data );
10
		console.log( xhr.status );
11
	}
12
});

Dimana Base64 adalah objek yang digunakan untuk encoding dan decoding string base64. Ini didefinisikan sebagai berikut, sebelum jQuery.ajax() di atas dipanggil:

1
var Base64={_keyStr:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",encode:function(e){var t="";var n,r,i,s,o,u,a;var f=0;e=Base64._utf8_encode(e);while(f<e.length){n=e.charCodeAt(f++);r=e.charCodeAt(f++);i=e.charCodeAt(f++);s=n>>2;o=(n&3)<<4|r>>4;u=(r&15)<<2|i>>6;a=i&63;if(isNaN(r)){u=a=64}else if(isNaN(i)){a=64}t=t+this._keyStr.charAt(s)+this._keyStr.charAt(o)+this._keyStr.charAt(u)+this._keyStr.charAt(a)}return t},decode:function(e){var t="";var n,r,i;var s,o,u,a;var f=0;e=e.replace(/[^A-Za-z0-9\+\/\=]/g,"");while(f<e.length){s=this._keyStr.indexOf(e.charAt(f++));o=this._keyStr.indexOf(e.charAt(f++));u=this._keyStr.indexOf(e.charAt(f++));a=this._keyStr.indexOf(e.charAt(f++));n=s<<2|o>>4;r=(o&15)<<4|u>>2;i=(u&3)<<6|a;t=t+String.fromCharCode(n);if(u!=64){t=t+String.fromCharCode(r)}if(a!=64){t=t+String.fromCharCode(i)}}t=Base64._utf8_decode(t);return t},_utf8_encode:function(e){e=e.replace(/\r\n/g,"\n");var t="";for(var n=0;n<e.length;n++){var r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r)}else if(r>127&&r<2048){t+=String.fromCharCode(r>>6|192);t+=String.fromCharCode(r&63|128)}else{t+=String.fromCharCode(r>>12|224);t+=String.fromCharCode(r>>6&63|128);t+=String.fromCharCode(r&63|128)}}return t},_utf8_decode:function(e){var t="";var n=0;var r=c1=c2=0;while(n<e.length){r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r);n++}else if(r>191&&r<224){c2=e.charCodeAt(n+1);t+=String.fromCharCode((r&31)<<6|c2&63);n+=2}else{c2=e.charCodeAt(n+1);c3=e.charCodeAt(n+2);t+=String.fromCharCode((r&15)<<12|(c2&63)<<6|c3&63);n+=3}}return t}};

Saya menemukannya di StackOverflow, dan ini adalah cara lintas browser mengenkode dan mendekode string base64 di JavaScript.

Dalam permintaan di atas, kita mengatur header Authorization menggunakan metode setRequestHeader() dari objek xhr yang dilewatkan sebagai argumen ke metode beforeSend().

Selain permintaan di atas, header Access-Control-Allow-Headers harus mengizinkan bidang Authorization di server. Ini dapat diaktifkan dengan menambahkan baris kode berikut di file WordPress .htaccess Anda:

1
Header always set Access-Control-Allow-Headers Authorization Header always set

Permintaan di atas, ketika selesai, akan menampilkan respons di konsol browser Anda seperti yang ditunjukkan pada gambar di bawah ini:

Server responseServer responseServer response

kode respon status 200 yang dikembalikan oleh server menunjukkan bahwa posting dengan id 52 telah berhasil dihapus.

Mengirim Permintaan yang Di Autentikasi Menggunakan WP HTTP API

Jika Anda berinteraksi dari jarak jauh dengan situs WordPress lain dari instalasi WordPress Anda, cara yang paling tepat untuk mengirim permintaan HTTP adalah WP HTTP API.

Pertimbangkan kode berikut yang mengirim permintaan DELETE ke instalasi WordPress lain dengan WP REST API dan otentikasi dasar diaktifkan:

1
$wp_request_headers = array(
2
    'Authorization' => 'Basic ' . base64_encode( 'username:password' )
3
);
4
5
$wp_request_url = 'http://localserver/wordpress-api/wp-json/wp/v2/posts/52';
6
7
$wp_delete_post_response = wp_remote_request(
8
	$wp_request_url,
9
	array(
10
		'method'	=> 'DELETE',
11
		'headers' 	=> $wp_request_headers
12
	)
13
);
14
15
echo wp_remote_retrieve_response_code( $wp_delete_post_response ) . ' ' . wp_remote_retrieve_response_message( $wp_delete_post_response );

Di sini kita menggunakan fungsi wp_remote_request() yang menerima dua argumen:

  • $url: URL permintaan
  • $args: array argumen tambahan yang harus dilewati

$method yang didefinisikan dalam array $args adalah DELETE, dan itu harus selalu ditulis dalam huruf besar. Array $header mengambil pasangan nilai kunci dari semua bidang header yang akan diteruskan dengan permintaan. Kita telah melewati kunci Authorization dengan username dan string kata sandi yang dienkode base64 sebagai nilainya.

Respon akan disimpan di variabel$wp_delete_post_response, yang dapat digunakan dengan fungsi wp_remote_retrieve_response_code() dan wp_remote_retrieve_response_message() . Kedua fungsi ini berfungsi sebagai pembantu dalam WP HTTP API, dan mereka mengekstrak kode status dan pesan status dari responsnya masing-masing.

Jika posting berhasil dihapus oleh permintaan di atas, teks berikut akan digema:

1
200 OK

Itu semua tentang metode otentikasi dasar yang didukung oleh WP REST API. Kita akan menggunakan metode otentikasi yang sama di bagian masa depan kita untuk mengambil, membuat, atau memodifikasi data karena kesederhanaannya, kecuali disebutkan sebaliknya.

Kesimpulan

Di bagian saat ini dari seri, kita melihat secara dekat pada metode otentikasi HTTP dasar yang didukung oleh WP REST API. Namun, seharusnya tidak digunakan dalam lingkungan produksi langsung karena fakta bahwa string enkode base64 dapat dengan mudah didekodekan dan kredensial Anda mungkin jatuh ke tangan yang salah.

Setelah berhasil mengatur dan menguji metode otentikasi dasar HTTP, kita siap untuk melangkah lebih jauh dan menyiapkan cara autentikasi yang lebih canggih—metode OAuth 1.0a. Kita akan melakukannya di bagian selanjutnya dari seri ini, jadi nantikan terus!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.