Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. PHP

Membuat Twitter OAuth aplikasi

by
Length:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Dika Budiaji (you can also view the original English article)

OAuth bisa menjadi konsep yang sulit untuk kepala Anda di sekitar pada awalnya, tetapi dengan Twitter API sekarang membutuhkan itu, itu adalah sesuatu yang Anda butuhkan untuk memahami sebelum membuat aplikasi Twitter. Tutorial ini akan memperkenalkan Anda ke OAuth, dan memandu Anda melalui proses menciptakan aplikasi dasar.


Pengenalan

Dalam tutorial ini, kita akan membangun sebuah aplikasi sederhana yang memungkinkan pengguna untuk menerapkan efek yang berbeda untuk twitter avatar mereka. Untuk bekerja dengan Twitter API, kita harus menggunakan OAuth untuk otorisasi aplikasi kami untuk membuat request atas nama pengguna.

Flow aplikasi kami akan menjadi sesuatu seperti ini:

  1. Pengguna diminta untuk terhubung dengan Twitter.
  2. Pengguna disajikan daftar Tinjauan avatar untuk memilih.
  3. Berdasarkan pilihan, pengguna disajikan layar konfirmasi menampilkan asli dan baru avatar untuk perbandingan. Pengguna juga ditawarkan pilihan untuk mengirim tweet.
  4. Setelah pengguna memilih, app membuat dan upload avatar diubah ke Twiter dan halaman yang ditampilkan.

Setup

Untuk memulai, kita harus mengatur direktori source kami. Kami membutuhkan lib direktori untuk file PHP perpustakaan (class) kami, direktori tmp untuk menjaga file-file sementara (ini harus bisa writable oleh server), sebuah direktori css untuk stylesheet dan img direktori untuk gambar.

Berikut adalah directory tree Anda akan terlihat seperti:

  • Tutorial
    • css
    • img
    • lib
    • tmp (writable)

Mendaftar aplikasi Anda

Untuk menggunakan OAuth, Anda akan memerlukan apa yang disebut consumer key dan secret untuk mengidentifikasi aplikasi Anda. Untuk mendapatkan ini, Anda harus mendaftar aplikasi dengan Twitter dengan mengikuti langkah-langkah berikut.

Pergi ke halaman pendaftaran, log in jika diperlukan. Anda akan disambut oleh form yang digambarkan di bawah ini:

Mengisi form dengan rincian yang berkaitan dengan aplikasi Anda. Dalam kasus kami, jenis aplikasi Browser dan kita perlu untuk menetapkan default Callback URL. URL ini bisa apa saja selama ini adalah format berlaku. Kami akan mengganti callback dalam kode kita, sehingga tidak kritis bahwa itu adalah URL yang nyata. Jenis Default akses harus Read & Write untuk kenyamanan.

Setelah Anda mendaftar dan menyetujui syarat-syarat, Anda akan disajikan dengan informasi aplikasi baru Anda. Rincian penting yang kita butuhkan adalah Consumer Key dan Consumer Secret, yang seharusnya terlihat seperti ini:


Download tmhOAuth Perpustakaan

Kami akan membuat penggunaan perpustakaan untuk menangani semua rincian di balik membuat request OAuth. Dalam tutorial ini, kita akan menggunakan @themattharris' tmhOAuth Perpustakaan, yang mendukung meng-upload file.

  1. Download tmhOAuth dari GitHub
  2. Ekstrak tmhOAuth.php ke direktori lib yang kita buat sebelumnya

Otentikasi

Otentikasi dengan OAuth pada dasarnya adalah proses tiga langkah. Untuk yang lebih dalam kedalaman penjelasan, Lihat Halaman ini pada otentikasi di Twitter, tapi di sini adalah ringkasan:

  1. App memperoleh token request: langkah pertama adalah untuk aplikasi kami untuk mengidentifikasi itu sendiri ke Twitter (menggunakan consumer key nya) dan mendapatkan token request. Kita harus menyimpan token permintaan ini untuk nanti.
  2. Pengguna mengotorisasi app on Twitter: pengguna sekarang harus dikirim ke Twitter untuk memberi kami app akses ke account mereka. Setelah itu, pengguna akan dikirim kembali ke URL callback yang ditetapkan oleh app.
  3. App pertukaran request token untuk token akses: sekarang bahwa aplikasi kami telah disetujui, itu dapat bertukar token request  dari langkah 1 token akses. Setelah kita memiliki token access, aplikasi kami gratis untuk berinteraksi dengan Twitter API pada nama pengguna.

Jadi mari kita mulai dengan beberapa kode. Kami akan menangani semua tugas otentikasi kelas yang disebut TwitterApp. Mulai dengan kode berikut dalam file baru bernama lib/TwitterApp.php:

Di sini kami telah membuat tiga properti dan constructor yang sederhana. Properti $tmhOAuth akan menjadi sebuah objek tmhOAuth, yang akan digunakan di seluruh class. Properti $userdata akan mengadakan suatu objek yang berisi info tentang pengguna seperti nama pengguna Twitter dan status mereka. Properti $state terus melacak yang keadaan saat ini otentikasi.

Konstruktor hanya menerima sebuah objek tmhOAuth ke dan assign ke properti $tmhOAuth.


Langkah 1: Mendapatkan request Token

Berikut adalah metode untuk mendapatkan request token:

Untuk memahami bagian pertama, Anda perlu tahu tentang metode tmhOAuth::request(). Metode ini memungkinkan kita untuk membuat request HTTP diaktifkan OAuth, dan memiliki penggunaan berikut:

tmhOAuth::request ($method $url [$params [, $useauth [, $multipart]]])

  • string $method - request method untuk digunakan (GET, POST, dll.)
  • string $url - URL untuk mengakses
  • array $params (opsional) - array asosiatif parameter untuk menyertakan dalam request
  • bool $useauth (opsional, default true) - adalah otentikasi diperlukan?
  • bool $multipart (opsional, standar false) - Set ke true untuk upload file

Untuk $url parameter, kami membuat menggunakan metode tmhOAuth::url() untuk kerajinan URL berdasarkan metode API yang dipanggil:

tmhOAuth::url ($request [, $format])

  • string $request - metode api (tanpa ekstensi)
  • string $format (opsional, default ' json ")-respon yang dikehendaki format (JSON, XML, dll.)

Sekarang bahwa Anda sudah familiar dengan metode tersebut, kita harus membuat request POST metode API oauth/request_token. Ini akan kembali OAuth data dalam format khusus, jadi kita perlu untuk mengatur format menjadi kosong ketika kita menggunakan metode tmhOAuth::url(). Kita juga perlu untuk memasukan variabel yang disebut oauth_callback, yang mana pengguna akan mengembalikan setelah otorisasi di Twitter. Kami akan menggunakan metode tmhOAuth::php_self() untuk merujuk ke Halaman ini. Berikut adalah kode lagi:

Sekali kita melakukan request, respon disimpan sebagai array dalam properti tmhOAuth::response, dengan potongan key data berikut :

  • code - kode Respon HTTP
  • response - data aktual yang dikembalikan
  • headers - respon header

Jadi bagian selanjutnya dari kode kami memeriksa kode respon (200 berarti sukses), dan kemudian menempatkan oauth_token dan oauth_token_secret yang kami terima ke dalam variabel sesi karena kita akan membutuhkannya nanti. Ini diekstrak dari data respon yang menggunakan tmhOAuth::extract_params() metode, yang mengembalikan array data yang terkandung dalam respon. Kami juga mengatur variabel sesi authstate sinyal bahwa kita berada pada tahap berikutnya otentikasi. Berikut adalah kode:

Setelah selesai, kita sekarang harus mengarahkan pengguna ke URL oauth/authorize, termasuk oauth_token dalam GET parameter. Berikut adalah kode lagi:


Langkah 2: Mendapatkan akses Token

Berikut adalah metode untuk bertukar token request kami untuk token akses:

Hal pertama yang kita lakukan adalah mengatur user_token dan user_secret dalam array tmhOAuth::config untuk token request kami memperoleh sebelumnya.

Bagian selanjutnya adalah di mana kita membuat request POST untuk oauth/access_token. Kami memasukan oauth_verifier yang kami terima dalam variabel mendapatkan sebagai parameter dalam permintaan ini.

Twitter akan merespon dengan token akses dan secret, yang kita akan perlu untuk disimpan untuk setiap request nanti. Jadi berikutnya sepotong kode mengambil ini dan menyimpan masing-masing dalam cookie, kemudian menetapkan state ke 2.

Redirect pada akhir untuk menghapus parameter URL yang ditinggalkan oleh Twitter yang ada, dan memungkinkan cookie yang diterapkan.


Langkah 3: Memverifikasi Token akses

Dengan kami token akses yang diperoleh, kita harus memeriksa untuk memastikan hal ini berlaku. Berikut adalah metode untuk melakukannya:

Kode ini harus cukup akrab dengan sekarang. Semua yang kita lakukan di sini adalah mengatur user_token dan user_secret dan membuat sebuah GET request untuk 1/account/verify_credentials. Jika Twitter merespon dengan kode 200, maka token akses sah.

Detail lain untuk dicatat adalah bahwa ini adalah dimana kita mengisi properti $userdata dengan data yang dikembalikan oleh request Twitter ini. Data ini dalam JSON format, jadi kami menggunakan json_decode() untuk mengkonversi ke obyek PHP. Berikut adalah baris lagi:


Langkah 4: Mengikat semuanya bersama-sama

Dengan kami OAuth komponen di yang sudah ada, saatnya untuk mengikat semuanya bersama-sama. Kita perlu metode menghadapi publik untuk memungkinkan kode klien kami untuk memulai proses otentikasi, dan di sini adalah:

Sebagian besar metode auth() yang harusnya jelas. Berdasarkan state, itu mengeksekusi metode yang tepat untuk tahap otentikasi. Jika state adalah 1, oauth_verifier mendapatkan variabel harus ada, jadi metode juga memeriksa itu.

Kita sekarang harus membuat metode publik untuk mengetahui jika kami dikonfirmasi. Metode isAuthed() ini mengembalikan true jika keadaan 2:

Kami juga dapat menggunakan metode untuk menghapus pengguna otentikasi. Metode endSession() ini menetapkan keadaan ke 0 dan menghapus cookie yang mengandung token akses:


Inisialisasi

Sekarang kita perlu menambahkan beberapa hal untuk metode __construct() kami untuk mencari tahu yang menyatakan otentikasi aplikasi ini di atas inisialisasi. Juga, karena kode kita menggunakan variabel session, kita harus memastikan sesi dimulai dengan kode ini:

Ini bagian berikutnya adalah mana kita menentukan state. state dimulai pada 0; Jika ada cookie ditetapkan berisi token akses, state dianggap 2; gagal itu, negara diatur ke variabel session authstate jika ada. Berikut adalah kode:

Jika keadaan 1, yang berarti kita berada dalam proses otentikasi. Sehingga kita dapat pergi ke depan dan melanjutkan proses saat ini:

Jika state 2, kami harus memverifikasi token akses. Jika otentikasi gagal, kode ini membersihkan cookie dan me-reset state:

Inilah konstruktor baru dengan perubahan yang dibuat:


Mengirim Tweet

Sekarang bahwa semua kode otorisasi lengkap, kita dapat menambahkan beberapa fungsi umum class kami. Berikut adalah metode untuk mengirim tweet melalui Twitter API:

sendTweet() metode menerima string, membatasi untuk 140 karakter, dan kemudian mengirimkan request POST 1/statuses/update. Pola ini harus cukup akrab dengan sekarang.


Full TwitterApp Class


Aplikasi kami

Sekarang bahwa kita memiliki class yang menangani semua tugas-tugas OAuth, kita sekarang dapat menambah itu dengan fungsi khusus untuk aplikasi kita. Ini termasuk kemampuan untuk mendapatkan, mengubah dan menetapkan pengguna avatar.

Kita akan extend class TwitterApp dengan class TwitterAvatars. Mulai dengan kode berikut dalam file baru bernama lib/TwitterAvatars.php:

Seperti yang Anda lihat, class yang diperpanjang memasukan $path properti untuk menunjuk ke mana file sementara gambar akan pergi, properti $filters memegang array filter gambar dan konstruktor tambahan dengan parameter untuk mengatur path. Karena kita override konstruktor asli, kita harus secara eksplisit memanggil constructor induk dengan parent::__construct().

Sekarang kita dapat mulai menambahkan metode kami.


Men-download

Jelas, kami akan memerlukan kemampuan untuk men-download gambar untuk memanipulasi mereka. Di sini adalah metode download() generik yang menerima URL dan mengembalikan data di lokasi tersebut. Metode membuat cURL basic request.


Menemukan URL

Sekarang bahwa kita dapat men-download file, kita perlu menemukan lokasi file yang kita butuhkan. Ada dua gambar yang berbeda kami tertarik, standar ukuran thumbnail dan gambar berukuran penuh asli. Jadi, kita akan menciptakan sebuah metode untuk mendapatkan setiap URL.

Untuk mendapatkan standar ukuran thumbnail, kami akan memanggil users/profile_image/: screen_name API metode yang menanggapi dengan redirect ulang 302 gambar avatar user tertentu. Ini berarti URL akan ditemukan di header lokasi. Berikut adalah metode:

Perhatikan bahwa kita membuat sebuah GET request dengan tmhOAuth, memasukan parameter screen_name dan size, kemudian kembali isi dari Location header.

Ada tidak ada metode API untuk mendapatkan image ukuran penuh, sehingga untuk metode kami berikutnya kami akan menipu sedikit dan mengedit URL. Data pengguna berisi bidang profile_image_url yang mengarah pada sesuatu seperti avatar_normal.jpg, dan gambar asli dapat ditemukan di avatar.jpg tanpa akhiran. Jadi metode mendapatkan URL, menghilangkan akhiran ukuran dan kembali URL yang telah dimodifikasi:


Membaca gambar

Sekarang bahwa kita dapat mencari dan men-download gambar, kita perlu cara untuk membacanya. Kita akan menggunakan GD library untuk memanipulasi gambar, sehingga metode ini akan mengkonversi data gambar mentah menjadi sumber gambar GD.

Untuk menggambarkan apa yang terjadi di atas:

  1. Data gambar dikonversi menjadi resource GD yang menggunakan fungsi imagecreatefromstring().
  2. Dimensi gambar yang direkam menggunakan imagesx() dan imagesy().
  3. Gambar kosong warna benar baru dengan dimensi yang sama dibuat menggunakan imagecreatetruecolor().
  4. Gambar asli disalin ke gambar baru yang menggunakan fungsi imagecopy(). Hasil ini dalam versi benar warna gambar asli terlepas dari modus warna asli.
  5. Sumber gambar aslinya dihancurkan dengan menggunakan imagedestroy() dan menghandel untuk gambar baru dikembalikan.

Menyimpan gambar

Sekarang bahwa kita dapat men-download gambar dan menciptakan sumber daya GD, kita membutuhkan sebuah metode untuk menyimpan gambar ke sistem file. Berikut adalah metode yang menyimpan gambar disediakan sebagai PNG file dengan nama tertentu menggunakan imagepng():


Menghasilkan Previews

Sekarang bahwa kita memiliki semua potongan bahwa kekuatan aplikasi kami, kita dapat mulai menempatkan mereka bersama-sama. Dalam flow aplikasi kami, kami akan memberikan pengguna pilihan preview untuk memilih dari. Berikut adalah metode untuk menghasilkan preview-Preview:

Hal pertama yang kita lakukan adalah periksa bahwa pengguna diotentikasi dan kemudian ambil nama pengguna untuk menggunakan kemudian dalam nama file.

Kemudian kita download gambar pengguna menggunakan metode getImageURL() dan download() yang kami telah menciptakan. Data ini akan digunakan berulang kali untuk setiap pratinjau sehingga kita simpan dalam variabel $data.

Berikutnya, kita menyimpan salinan dimodifikasi dengan akhiran _orig. Ini adalah untuk perbandingan visual kemudian.

Bagian terakhir dari metode adalah dimana kita loop melalui filter gambar yang tercantum dalam properti $filters, menghasilkan gambar untuk tiap filter. Dalam setiap iterasi, kita membuat gambar dan menerapkan fungsi imagefilter(), yang menerima salah satu konstanta yang kami telah terdaftar dalam $filters array. Maka untuk setiap gambar yang kita simpan, kami menambahkan path ke array asosiatif (menggunakan nama filter sebagai key) yang metode ini mengemballikan di akhir.

Bagian selanjutnya dari flow aplikasi kami meminta pengguna untuk mengkonfirmasi pilihan mereka, jadi kita perlu cara untuk mencari preview tertentu. Berikut adalah metode sederhana untuk mendapatkan path ke gambar berdasarkan pilihan yang dimasukan sebagai parameter, defaulting ke gambar asli:


Mengubah Avatar

Tahap akhir flow aplikasi kami adalah benar-benar mengubah avatar pengguna. Pertama kita perlu sebuah metode untuk mendapatkan image ukuran penuh dan menerapkan filter tertentu untuk itu. Berikut ini adalah:

Itu seharusnya mudah untuk mengikuti karena hal ini sangat mirip dengan metode generatePreviews(). Ini menerima parameter untuk menentukan sebuah gambar filter dan memeriksa bahwa itu ada. Kemudian download gambar asli dan berlaku filter untuk itu, mengembalikan pada gambar yang dihasilkan sebagai nilai kembalian.

Sekarang kita perlu metode yang benar-benar mengirim gambar yang dihasilkan untuk Twitter, memperbarui pengguna avatar. Metode ini memanggil metode processImage() untuk membuat gambar dan upload ke Twitter melalui metode API 1/account/update_profile_image:

Bagian yang rumit di sini adalah request POST sebenarnya tmhOAuth, yang merupakan multipart request yang mengandung data gambar mentah. Untuk melakukan ini, kita harus menetapkan parameter terakhir metode tmhOAuth::request() menjadi true, dan memasukan variable image dalam format khusus:

@[path_to_image]; type = [mime_type]; filename = [file_name]

Sebagai contoh, jika kita ingin meng-upload tmp/username_grayscale_full.png, nilai akan @tmp/username_grayscale_full.png;type=image/png;filename=username_grayscale_full.png.

Di sini adalah bagian dari kode lagi:


Membersihkan

Efek samping dari semua manipulasi file ini adalah banyak file-file sementara yang tertinggal. Berikut adalah metode untuk membersihkan direktori sementara:

Ini hanya loop melalui PNG file, menghapus file-lebih dari 12 jam. Juga memeriksa berapa lama sudah sejak kami memeriksa menggunakan stempel waktu di berkas .last_check, memungkinkan kita untuk membatasi memeriksa satu per jam. Dengan cara ini kita dapat memanggil metode ini pada setiap request tanpa membuang-buang sumber daya.

Catatan: Kami membuat penggunaan fungsi glob() dalam PHP, yang adalah cara mudah untuk mendapatkan array file pattern.


Full TwitterAvatars Class


Front End

Kami memiliki komponen semua aplikasi bersama-sama, jadi sekarang semua yang kita butuhkan adalah interface pengguna. Semua kode di sini akan masuk ke file index.php di direktori root. Kita akan mulai dengan termasuk Perpustakaan dan pengaturan konfigurasi:

Catatan: Pastikan untuk menggantikan CONSUMER_KEY dan CONSUMER_SECRET dengan punya anda sendiri.

Kami akan menempatkan kode kita dalam try-catch blok sehingga kami dapat menangani kesalahan, menetapkan pesan mereka ke variabel $error.

Dalam blok try block kita dapat mulai menulis kode kita, mulai dengan inisialisasi objek TwitterAvatars yang disebut $ta dengan object tmhOAuthyang dikonfigurasi:

Kita dapat membersihkan file lama sementara saat ini:

Selanjutnya kami memeriksa apakah pengguna diotentikasi atau, gagal, jika pengguna telah meminta otentikasi, dalam hal kita mulai proses dengan memanggil metode auth():

Jika pengguna diotentikasi, kita perlu memeriksa jika pilihan telah dipilih, sebaliknya kita akan menghasilkan Preview:

Jika opsi ini dipilih, kita perlu untuk mendapatkan path untuk gambar lama dan baru untuk menampilkan:

Akhirnya, kami memeriksa apakah pengguna telah mengkonfirmasi pilihan mereka dan menerapkan perubahan. Kami juga mengirim tweet jika diminta dan menetapkan variabel $success ke true:

Berikut adalah apa yang kita miliki sejauh ini:


HTML

Setelah kode PHP yang kami akan menampilkan HTML yang sesuai, yang dimulai dengan template ini, yang menetapkan judul dan judul utama:

Berikut adalah dimana kami menampilkan sebuah form dengan input gambar untuk setiap preview:

Berikut adalah halaman sukses:

Berikut adalah halaman konfirmasi, di mana kita menunjukkan perbandingan dan menawarkan kesempatan untuk membatalkan:

Dicatat bahwa formulir konfirmasi termasuk filter yang dipilih dalam bidang tersembunyi.

Jika ada kesalahan, kami menunjukkan ini:

Tampilan default adalah tombol "Connect to Twitter" sebagai masukan gambar (download salah satu gambar dari bagian bawah halaman ini ke direktori img):

Inilah bagian HTML lengkap:


CSS

Berikut adalah beberapa dasar CSS untuk membuat antarmuka terlihat bagus, disimpan dalam css/style.css:


Hasil

Berikut adalah video yang merinci bagaimana aplikasi selesai kita harus:


Kesimpulan

Jika Anda telah mengikuti tutorial ini semua jalan melalui itu, Anda harus memiliki pemahaman yang cukup baik tentang OAuth dan apa yang dibutuhkan untuk menciptakan sebuah aplikasi Twitter web sederhana. Menggunakan Twitter API mudah setelah Anda memahami konsep-konsep dasar - terutama jika Anda menggunakan perpustakaan seperti tmhOAuth untuk menangani hal kecil.

Contoh sederhana yang kita buat dalam tutorial ini dapat dengan mudah dimodifikasi atau menambah untuk melakukan sesuatu. Jadi jika Anda memiliki ide bagus untuk sebuah aplikasi Twitter baru yang keren, merasa bebas untuk menggunakan ini sebagai dasar.

Terima kasih untuk membaca. Jika Anda memiliki pertanyaan atau komentar tentang tutorial ini, silahkan post!

Advertisement
Advertisement
Advertisement
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.