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

Membangun Startup Anda dengan PHP: Penyederhanaan Onramp dengan OAuth

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Building Your Startup With PHP.
Building Your Startup With PHP: Email Commands
Building Your Startup: Exporting iCal Files into Calendar Events

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Final product image
What You'll Be Creating

Tutorial ini adalah bagian dari serial Membangun Startup Anda dengan PHP di Envato Tuts+. Dalam seri ini, saya membimbing Anda melalui peluncuran startup dari konsep ke kenyataan menggunakan aplikasi Meeting Planner saya sebagai contoh di kehidupan nyata. Setiap langkah di sepanjang jalan, saya akan merilis kode Meeting Planner sebagai contoh sumber terbuka yang bisa Anda pelajari. Saya juga akan membahas masalah bisnis terkait startup saat mereka muncul.

Dalam tutorial ini, saya akan memandu Anda melalui penerapan integrasi OAuth dengan jejaring sosial umum untuk mendaftar dan penggunaan berulang yang lebih mudah dan lebih efisien. Saya akan menjelajahi Facebook, Google, Twitter dan LinkedIn, jaringan yang saya lihat paling tepat untuk target pengguna Meeting Planner.

Semua kode untuk Meeting Planner ditulis dalam Framework Yii2 untuk PHP. Jika Anda ingin mempelajari lebih lanjut tentang Yii2, lihat seri paralel kami Pemrograman dengan Yii2 di Envato Tuts+.

Jika Anda belum mencoba Meeting Planner, cobalah menjadwalkan pertemuan pertama Anda sekarang juga. Ini benar-benar mulai bersatu tahun ini. Pada akhirnya, saya dapat menggunakan dukungan AuthClient built-in Yii2 untuk memberi tanda masuk dari semua jaringan di atas—sehingga Anda dapat menggunakannya untuk mendaftar sekarang.

Umpan balik dipersilahkan. Jika Anda memiliki pertanyaan atau saran topik, kirimkan komentar di bawah ini. Anda juga bisa menghubungi saya di Twitter @reifman.

Apa itu AuthClient?

AuthClient adalah dukungan built-in Yii untuk aplikasi Anda untuk melakukan otentikasi melalui layanan pihak ketiga dengan OpenID, OAuth, atau OAuth2.

Jika Anda mengikuti seri Yii2 saya pada bulan Juni 2015, Anda pasti sudah melihat saya menggunakan AuthClient untuk berintegrasi dengan Google melalui OpenID, namun perusahaan tersebut akhirnya menghentikan dukungannya untuk spesifikasi tersebut segera setelahnya. Kemudian, pada bulan Desember, saya menulis sebuah tutorial yang menggunakan ekstensi Yii2-User untuk menambahkan dukungan Google OAuth—Framework Yii2 belum memilikinya. Namun, Yii2-User tidak berintegrasi dengan baik dengan basis kode yang sudah mapan yang sudah memiliki basis kode yang berorientasi pengguna. Tapi untunglah, Framework Yii2 sejak itu menambahkan dukungan untuk Google OAuth, dan semuanya menjadi lebih mudah.

Dalam tutorial ini, saya akan memandu Anda melalui penggunaan fungsionalitas AuthClient yang baru untuk diintegrasikan dengan berbagai jaringan sosial populer. Di luar kotak, Yii memberikan dukungan untuk klien berikut:

Motivasi lain untuk mendukung koneksi ke Meeting Planner melalui jejaring sosial adalah memungkinkan orang muncul dan dengan mudah berbagi nama dan email mereka dengan kita. Dengan pendaftaran email dan password, kita sebenarnya tidak pernah mempelajari nama mereka. Namun, Twitter, tidak seperti jejaring sosial lainnya, menciptakan hambatan yang sangat problematis untuk mendapatkan alamat email pengguna, yang akhirnya membuat saya menonaktifkannya untuk saat ini.

Mari kita mulai dengan integrasi kode.

Memasang AuthClient dalam Aplikasi Kita

Pertama, kita perlu menginstal komponen Yii untuk OAuth, AuthClient Yii.

Menambahkan AuthClient ke Composer

Mari tambahkan pustaka AuthClient ke composer.json:

Kemudian, kita perlu memperbarui composer:

Mengkonfigurasi Dukungan AuthClient

Dan, kita perlu menambahkan pengaturan konfigurasi AuthClient ke file konfigurasi kita di \frontend\config\main.php.

Tambahkan elemen array untuk semua layanan pihak ketiga yang ingin Anda dukung (rincian masing-masing dapat ditemukan di Panduan AuthClient):

Untuk mendapatkan kode untuk semua kunci dan rahasia itu, Anda perlu mendaftarkan aplikasi Anda ke setiap jaringan sosial. Hal ini sering memakan waktu.

Mendaftarkan Aplikasi Pengembang

Ikuti sepanjang saat saya memandu Anda melalui pendaftaran dengan beberapa jaringan dan beberapa aspek konfigurasi yang lebih dalam dengan orang lain.

Mendaftar dengan Twitter

Buat aplikasi Twitter baru di Twitter Application Dashboard:

Building Your Startup OAuth - Create App

Klik Create New App—saya menemukan bahwa URL callback tidak diperlukan, namun untuk saat ini saya menggunakan pengganti http://mydomain.com/user/security/auth.

Building Your Startup OAuth - Twitter Dev App Details

Inilah halaman baru untuk aplikasi kita:

Building Your Startup OAuth - Twitter App Page

Inilah halaman Pengaturannya:

Building Your Startup OAuth - Twitter Dev App Settings

Inilah halaman Key dan Access Token. Di sini, kita perlu menyalin Consumer Key (API Key) dan Consumer Secret (API Secret):

Building Your Startup OAuth - Twitter Dev App Keys and Tokens

Kunci itu ada di file mp.ini kita, yang dibaca ke variabel $config di atas untuk mengkonfigurasi AuthClient for Twitter.

Mendaftarkan Aplikasi Facebook kita

Selanjutnya, mari mengunjungi konsol pengembang Facebook dan Add a New App:

Building Your Startup OAuth - Facebook Dev Console

Kita akan memilih untuk membuat aplikasi WWW Website untuk saat ini:

Building Your Startup OAuth - Facebook Dev Console Add an App

Berikan nama aplikasi kita:

Building Your Startup OAuth - Facebook Dev Console Generate App ID

Dan kumpulkan App ID baru kita:

Building Your Startup OAuth - Facebook Dev Console Create an App Dialogs

Mereka meminta semua informasi reguler, seperti URL:

Building Your Startup OAuth - Facebook Dev Console App Webpage URL

Dan kemudian Anda dapat menemukan aplikasi Meeting Planner kita dalam daftar:

Building Your Startup OAuth - Facebook Dev Console with Apps Listed

Inilah dashboard Facebook untuk aplikasi Anda:

Building Your Startup OAuth - Facebook Dev Console Finished App Page

Mendaftar dengan Google

Google API sedikit lebih rumit daripada Twitter dan Facebook, juga UX-nya sedikit sulit untuk diikuti. Tapi pada dasarnya, begitu Anda membuat aplikasi, Anda memerlukan kunci OAuth 2.0, yang Anda dapatkan dengan membuka area aplikasi di layar kredensial:

Building Your Startup OAuth - Google Dev App Credentials

Yang membawa Anda ke sini:

Building Your Startup OAuth - Google Dev App Keys and redirect URLs

Demi keamanan, Google (dan LinkedIn) memerlukan daftar lengkap path URL dan parameter mana yang dapat digunakan selama urutan OAuth. Sementara dalam pengembangan, ini bisa memerlukan banyak penyesuaian—bahkan untuk pengujian dari localhost.

Setelah Anda memasukkan mereka, Anda akan melihatnya tercantum di bawah ini:

Building Your Startup OAuth - Google Dev App All Those URLs

Google melakukan pekerjaan yang bagus membantu Anda mengkonfigurasi layar persetujuan yang akan dilihat pengguna Anda saat mereka mencoba masuk atau menautkan akun Google mereka ke Meeting Planner:

Building Your Startup OAuth - Google Dev App Credentials Preview

Mendaftar dengan LinkedIn

LinkedIn cukup sederhana dibandingkan dengan Google. Anda memerlukan rincian dasar untuk aplikasi Anda:

Building Your Startup OAuth - LinkedIn Dev App Settings

Seperti Google, mereka memerlukan semua URL yang akan Anda gunakan dalam pengembangan dan produksi. Anda juga bisa mendapatkan kunci di halaman ini:

Building Your Startup OAuth - LinkedIn Dev Keys and Redirect URLs again

Menempatkan Kunci di File Konfigurasi Kita

Dalam Protecting Your Keys From GitHub, saya menjelaskan secara rinci bagaimana saya menggunakan file konfigurasi untuk menyimpan semua kunci saya terlepas dari repositori GitHub saya. Kemudian, saya menyertakan file ini di awal file konfigurasi Yii saya. Ini menjaga saya dari dengan tidak sengaja memeriksa kunci saya ke repositori dan mengkompromikan akun saya.

Kita menempatkan kedua key dan secret dari Aplikasi Twitter dan Facebook ke /var/secure/mp.ini di luar repositori:

Di sini lagi adalah kode di \frontend\config\main.php yang menyertakan pengaturan ini dan menetapkan variabel konfigurasi individual:

Memperbarui Skema untuk Menyimpan Kunci Sesi

Sekarang setelah kita siap untuk menulis kode untuk mengintegrasikan pendaftaran dan login sosial, kita memerlukan database untuk membuat tabel Auth yang akan menyimpan layanan sosial, ID-nya untuk orang tersebut, dan user_id untuk orang tersebut di Meeting Planner:

Inilah migrasinya seperti ini:

Inilah hasilnya saat kita menjalankannya:

Sekali lagi, saya menggunakan generator kode Gii dari Yii untuk membuat model Auth:

Building Your Startup OAuth - Yiis Gii Model Generator of Auth Model

Pada akhirnya, tabel Auth akan menyimpan konten seperti ini:

Building Your Startup OAuth - Database view of Auth table

Tambahkan Widget AuthChoice ke Meeting Planner

Widget AuthChoice Yii2 melakukan pekerjaan yang sangat baik dalam menerapkan tombol masuk untuk setiap layanan yang Anda konfigurasikan. Dan melakukannya sesuai urutan dimana Anda mengatur berbagai layanan dan kunci (sehingga Anda dapat mengubahnya).

Cukup mudah untuk menambahkan widget ke form kita di login.php dan signup.php:

Inilah halaman pendaftaran kita sekarang:

Building Your Startup OAuth - The New Login Screen with AuthChoice Widget Buttons to Social Networks

Bagi pengguna lama yang sudah login, saya membuat cara mudah bagi mereka untuk menautkan akun mereka. Ini disebut Link Social Accounts pada halaman pengaturan profil:

Building Your Startup OAuth - New Link Social Accounts

Jika Anda mengklik LinkedIn, inilah layar OAuth mereka yang akan meminta Anda memberikan izin kepada Meeting Planner:

Building Your Startup OAuth - LinkedIn Permissions Page

Dan inilah layar untuk Google:

Building Your Startup OAuth - Google Permissions Page

Tapi apa yang sebenarnya terjadi saat pengguna mengizinkan kita membagikan detail akun sosial mereka? Mari kita bahas kode yang telah saya tulis untuk memproses tindakan pengguna.

Pengolahan Izin OAuth

\frontend\controllers\SiteController.php mengolah tindakan auth yang masuk ke fungsi onAuthSuccess:

Sebagian besar klien OAuth yang baik memberikan informasi serupa pada array properti yang serupa, kecuali Twitter. Twitter terlambat ke permainan untuk berbagi alamat email, dan untuk MVP saya, ini tidak akan sepadan dengan pekerjaan ekstra untuk mengkonfigurasinya sekarang. Google dan Facebook adalah jauh lebih lazim.

Pertama, saya mengumpulkan rincian layanan dan mengumpulkan data pribadi sebanyak mungkin: email, nama depan dan belakang, nama lengkap, dan terutama ID eksternal pengguna tersebut di jejaring sosial tersebut:

Pada baris terakhir kode di atas, kita mencari di tabel Auth untuk ID eksternal orang tersebut. Jika tidak ada, mereka adalah baru pada Meeting Planner. Jika mereka ada, maka kita mengenalinya.

Demikian pula, kita perlu memeriksa apakah alamat email mereka sudah ada, karena mungkin saja orang yang memiliki alamat email yang sebelumnya sudah terdaftar di Meeting Planner ini.

Bila tidak ada pengguna terotentikasi saat ini di MeetingPlanner.io, kode di bawah ini melihat data pengguna yang masuk.

Jika ID eksternal sudah ada di tabel Auth kita, kita memasukkan mereka. Itu mudah (bagi mereka)!

Jika kita tidak mengenali ID tapi kita telah mendaftarkan alamat emailnya, kita meminta mereka untuk login melalui nama pengguna dan kata sandi dan kemudian menautkan akun mereka.

Building Your Startup OAuth - Error Msg for We have Your Email Previously

Selanjutnya, jika mereka memulai di halaman login saat mereka mengklik tombol akun sosial dan kita tidak mengenali ID eksternal atau alamat emailnya, kita mengarahkan mereka kembali ke halaman pendaftaran dan meminta mereka untuk mencoba lagi—dari halaman registrasi.

Jika mereka terhubung dari halaman pendaftaran, kita memastikan pengguna baru tidak mempertaruhkan nama pengguna yang terduplikasi (dari pengguna Meeting Planner yang sudah ada sebelumnya). Dalam skenario ini, kita hanya memperpanjang nama pengguna dengan string acak untuk saat ini. Dan kita mendaftarkan mereka sebagai pengguna baru di Meeting Planner dengan kata sandi (yang sebenarnya tidak mereka butuhkan).

Pada langkah terakhir di atas, kita menambahkan detail akun sosial eksternal mereka ke tabel Auth untuk pengakuan di masa mendatang.

Menghubungkan Akun Meeting Planner yang Sudah Ada

Jika mereka berasal dari tab Link Social Accounts di halaman profil pengguna (bukan halaman login atau pendaftaran kita), maka kita hanya perlu menambahkan rincian akun eksternal mereka ke Auth, dan memindahkan login mereka ke User::STATUS_ACTIVE. (Ingat, pengguna yang datang dari tautan undangan Meeting Planner tapi tidak pernah mendaftar memiliki mode User::STATUS_PASSIVE.)

Inilah yang terlihat (di masa depan saya akan mengisi informasi penamaan dari informasi OAuth—ini masih belum selesai):

Building Your Startup OAuth - Successful Account Linkage

Penutup

Harus saya akui, dampak kerja koneksi OAuth terhadap layanan utama seperti Google, Facebook dan LinkedIn cukup dramatis. Itu membuat mendaftar dan secara teratur menggunakan Meeting Planner begitu mudah dan mempercepat otentikasi di masa depan. Benar-benar luar biasa.

Meeting Planner telah benar-benar terkumpul beberapa bulan terakhir ini. Silakan mencoba login sosial dan registrasi sekarang juga! Tonton tutorial yang akan datang di serial Membangun Startup Anda dengan PHP—ada banyak fitur menyenangkan yang muncul saat produk mengarah ke MVP.

Saya juga mulai bereksperimen dengan WeFunder berdasarkan penerapan aturan crowdfunding SEC yang baru. Harap pertimbangkan untuk mengikuti profil kami. Saya mungkin menulis lebih tentang ini sebagai bagian dari seri kami.

Silakan tambahkan pertanyaan dan komentar Anda di bawah ini; Saya biasanya berpartisipasi dalam diskusi. Anda juga bisa menghubungi saya di Twitter @reifman. Saya menyambut permintaan fitur dan topik.

Jika Anda ingin tahu kapan tutorial Yii2 berikutnya tiba, ikuti saya @reifman di Twitter atau periksa halaman instruktur saya. Halaman instruktur saya akan mencakup semua artikel dari seri ini segera setelah diterbitkan.

Link Terkait

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.