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

Membina Permulaan Anda Dengan PHP: Memudahkan 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

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

Final product image
What You'll Be Creating

Tutorial ini adalah sebahagian daripada Membina Permulaan Anda Dengan siri PHP pada Envato Tuts+. Dalam siri ini, saya membimbing anda melalui melancarkan permulaan dari konsep ke realiti menggunakan aplikasi Perancang Mesyuarat saya sebagai contoh kehidupan sebenar. Setiap langkah di sepanjang jalan, saya akan melepaskan kod Perancang Mesyuarat sebagai contoh sumber terbuka yang boleh anda pelajari. Saya juga akan menangani isu-isu perniagaan yang berkaitan dengan permulaan apabila ia timbul.

Dalam tutorial ini, saya akan membimbing anda menerapkan integrasi OAuth dengan rangkaian sosial yang biasa untuk membuat penggunaan mendaftar dan berulang lebih mudah dan lebih cekap. Saya akan meneroka Facebook, Google, Twitter dan LinkedIn, rangkaian yang saya lihat sebagai yang paling sesuai untuk pengguna sasaran Perancang Mesyuarat.

Semua kod Perancang Mesyuarat ditulis dalam Rangka Kerja Yii2 untuk PHP. Sekiranya anda ingin mengetahui lebih lanjut mengenai Yii2, lihat siri selari Pengaturcaraan dengan Yii2 di Envato Tuts+.

Sekiranya anda belum mencuba Perancang Mesyuarat, cuba jadualkan pertemuan pertama anda sekarang. Ia benar-benar mula datang bersama tahun ini. Pada akhirnya, saya dapat menggunakan sokongan AuthClient Yii2 yang terbina dalam untuk menyediakan log masuk dari semua rangkaian di atas-supaya anda boleh menggunakannya untuk mendaftar sekarang.

Maklum balas adalah dialu-alukan. Sekiranya anda mempunyai soalan atau cadangan topik, sila hantar komen di bawah. Anda juga boleh menghubungi saya di Twitter @reifman.

Apa itu AuthClient?

AuthClient adalah sokongan terbina dalam Yii untuk aplikasi anda untuk mengesahkan melalui perkhidmatan pihak ketiga dengan OpenID, OAuth, atau OAuth2.

Jika anda mengikuti siri Yii2 saya pada bulan Jun 2015, anda akan melihat saya menggunakan AuthClient untuk mengintegrasikan dengan Google melalui OpenID, tetapi syarikat itu mengakhiri sokongannya untuk spesifikasi tidak lama kemudian. Kemudian, pada bulan Disember, saya menulis tutorial yang menggunakan sambungan Yii2-Pengguna untuk menambah sokongan Google OAuth-Rangka Kerja Yii2 belum lagi. Walau bagaimanapun, Yii2-Pengguna tidak menyatukan dengan baik dengan pangkalan data yang telah ditetapkan yang sudah mempunyai basis pengguna yang berorientasikan pengguna. Tapi untungnya, Rangka Kerja Yii2 sejak itu telah menambah sokongan untuk Google OAuth, dan semuanya telah menjadi lebih mudah.

Dalam tutorial ini, saya akan membimbing anda melalui menggunakan fungsi AuthClient baru untuk mengintegrasikan dengan pelbagai rangkaian sosial yang popular. Di luar kotak, Yii memberi sokongan kepada pelanggan berikut:

Satu lagi motivasi untuk menyokong sambungan kepada Perancang Mesyuarat melalui rangkaian sosial adalah bahawa ia membolehkan orang ramai untuk muncul dan dengan mudah berkongsi nama dan e-mel dengan kami. Dengan pendaftaran e-mel dan kata laluan, kita sebenarnya tidak pernah mempelajari nama mereka. Walau bagaimanapun, Twitter, tidak seperti rangkaian sosial yang lain, mewujudkan halangan yang bermasalah dengan ketara untuk mendapatkan alamat e-mel pengguna, yang pada akhirnya mendorong saya untuk menyahdayakannya untuk sekarang.

Mari kita mulakan dengan integrasi kod.

Memasang AuthClient dalam Aplikasi Kami

Pertama, kita perlu memasang komponen Yii untuk OAuth, Yii's AuthClient.

Tambah AuthClient kepada Komposer

Mari tambahkan perpustakaan AuthClient ke composer.json:

Kemudian, kita perlu mengemas kini komposer:

Mengkonfigurasi Sokongan AuthClient

Dan, kita perlu menambah tetapan konfigurasi AuthClient ke fail konfigurasi kami di \\frontend\\config\\main.php.

Tambah elemen array untuk semua perkhidmatan pihak ketiga yang anda ingin sokongan (butiran bagi setiap boleh didapati di Panduan AuthClient):

Untuk mendapatkan kod untuk semua kunci dan rahsia, anda perlu mendaftarkan permohonan anda dengan setiap rangkaian sosial. Ini sering kali memakan masa.

Mendaftar Aplikasi Pembangun

Ikutilah semasa saya memandu anda melalui menandatangani beberapa rangkaian dan beberapa aspek konfigurasi yang lebih mendalam dengan orang lain.

Pendaftaran Dengan Twitter

Buat aplikasi Twitter baru di Papan Pemuka Aplikasi Twitter:

Building Your Startup OAuth - Create App

Klik Buat Aplikasi Baru-Saya mendapati bahawa URL panggil balik tidak perlu, tetapi untuk sekarang saya menggunakan pemegang tempat http://mydomain.com/user/security/auth.

Building Your Startup OAuth - Twitter Dev App Details

Berikut adalah halaman baru untuk permohonan kami:

Building Your Startup OAuth - Twitter App Page

Berikut ialah halaman Tetapan:

Building Your Startup OAuth - Twitter Dev App Settings

Berikut adalah halaman Token dan Akses Token. Di sini, kita perlu menyalin Kunci Pengguna (API Key) dan Rahsia Pengguna (API Secret):

Building Your Startup OAuth - Twitter Dev App Keys and Tokens

Kekunci-kekunci tersebut masuk dalam fail mp.ini kami, yang dibaca ke dalam pembolehubah $config di atas untuk mengkonfigurasi AuthClient untuk Twitter.

Daftar Aplikasi Facebook kami

Seterusnya, mari lawat konsol pemaju Facebook dan Tambah App Baru:

Building Your Startup OAuth - Facebook Dev Console

Kami akan memilih untuk membuat aplikasi Laman Web WWW untuk sekarang:

Building Your Startup OAuth - Facebook Dev Console Add an App

Sediakan nama permohonan kami:

Building Your Startup OAuth - Facebook Dev Console Generate App ID

Dan kumpulkan ID App baru kami:

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

Tempat yang dicadangkan

Building Your Startup OAuth - Facebook Dev Console App Webpage URL

Dan kemudian anda boleh mencari aplikasi Perancang Mesyuarat kami dalam senarai:

Building Your Startup OAuth - Facebook Dev Console with Apps Listed

Berikut adalah papan pemuka Facebook untuk permohonan anda:

Building Your Startup OAuth - Facebook Dev Console Finished App Page

Daftar Dengan Google

API Google sedikit lebih kompleks daripada Twitter dan Facebook, jadi UX agak sukar untuk diikuti. Tetapi pada asasnya, sebaik sahaja anda membuat aplikasi, anda memerlukan kunci OAuth 2.0, yang anda dapat dengan membuka kawasan aplikasi pada skrin kelayakan:

Building Your Startup OAuth - Google Dev App Credentials

Itu membawa anda ke sini:

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

Atas alasan keselamatan, Google (dan LinkedIn) memerlukan senarai penuh dengan tepat URL dan parameter URL yang digunakan saat urutan OAuth. Semasa dalam pembangunan, ini memerlukan banyak penyelarasan-walaupun untuk ujian dari localhost.

Sebaik sahaja anda memasukkannya, anda akan melihatnya disenaraikan di bawah:

Building Your Startup OAuth - Google Dev App All Those URLs

Google melakukan kerja yang baik untuk membantu anda mengkonfigurasi skrin persetujuan yang akan dilihat oleh pengguna anda apabila mereka cuba mendaftar atau memautkan akaun Google mereka ke Perancang Mesyuarat:

Building Your Startup OAuth - Google Dev App Credentials Preview

Daftar Dengan LinkedIn

LinkedIn adalah agak mudah berbanding dengan Google. Anda memerlukan butiran asas untuk permohonan anda:

Building Your Startup OAuth - LinkedIn Dev App Settings

Pilihan untuk berhenti melanggan dari jemputan Perancang Mesyuarat masa depan

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

Meletakkan Kunci dalam Fail Konfigurasi kami

Dalam Melindungi Kekunci Anda Dari GitHub, saya menerangkan secara terperinci bagaimana saya menggunakan fail konfigurasi untuk menyimpan semua kunci saya selain daripada repositori GitHub saya. Kemudian, saya masukkan fail ini pada permulaan fail konfigurasi Yii saya. Ini membuatkan saya tidak sengaja menyemak kunci saya untuk repositori saya dan menjejaskan akaun saya.

Kami meletakkan kekunci dan rahsia Aplikasi Twitter dan Facebook ke dalam /var/secure/mp.ini di luar repositori:

Di sini lagi ialah kod dalam \\frontend\\config\\main.php yang merangkumi tetapan ini dan menetapkan pembolehubah konfigurasi individu:

Mengemas kini Skema untuk Menyimpan Kunci Sesi

Sekarang kita sudah bersedia untuk menulis kod untuk mengintegrasikan pendaftaran sosial dan log masuk, kita perlu pangkalan data untuk membuat jadual Auth yang akan menyimpan perkhidmatan sosial, ID untuk orang itu, dan user_id untuk orang itu dalam Perancang Mesyuarat:

Inilah yang kelihatan seperti penghijrahan:

Inilah hasilnya apabila kita menjalankannya:

Sekali lagi, saya menggunakan penjana kod Yii untuk membuat model Auth:

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

Akhirnya, jadual Auth akan memegang kandungan seperti ini:

Building Your Startup OAuth - Database view of Auth table

Tambah Widget AuthChoice ke Perancang Mesyuarat

Widget AuthChoice Yii2 melakukan tugas yang sangat baik untuk melaksanakan butang log masuk untuk setiap perkhidmatan yang anda konfigurasikan. Dan ia berbuat demikian dalam susunan di mana anda menyediakan pelbagai perkhidmatan dan kunci (supaya anda boleh mengubahnya).

Ia cukup mudah untuk menambah widget ke borang kami di login.php dan signup.php:

Berikut adalah halaman pendaftaran kami sekarang:

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

Bagi pengguna sedia ada yang log masuk, saya membuat cara mudah bagi mereka untuk memautkan akaun mereka. Ia dipanggil Akaun Sosial Link pada halaman tetapan profil:

Building Your Startup OAuth - New Link Social Accounts

Sekiranya anda mengklik LinkedIn, inilah skrin OAuth mereka yang akan meminta anda memberi kebenaran kepada Perancang Mesyuarat:

Building Your Startup OAuth - LinkedIn Permissions Page

Dan inilah skrin untuk Google:

Building Your Startup OAuth - Google Permissions Page

Tetapi apa yang berlaku apabila pengguna membenarkan kami berkongsi butiran akaun sosial mereka? Mari kita melalui kod yang saya tulis untuk memproses tindakan pengguna.

Memproses Kebenaran OAuth

\\Frontend\\controllers\\SiteController.php memproses tindakan auth yang masuk ke fungsi onAuthSuccess:

Kebanyakan pelanggan OAuth yang baik memberikan maklumat yang serupa dalam array harta yang serupa, kecuali Twitter. Twitter terlambat ke permainan perkongsian alamat e-mel, dan untuk MVP saya, ia tidak akan bernilai kerja tambahan untuk mengkonfigurasi sekarang. Google dan Facebook jauh lebih luas.

Pertama, saya mengumpul butiran perkhidmatan dan mengumpulkan data peribadi sebanyak yang saya boleh: email, nama pertama dan nama akhir, nama penuh, dan terutama ID luaran pengguna di rangkaian sosial itu:

Dalam baris terakhir kod di atas, kami mencari dalam jadual Auth untuk ID luaran orang itu. Jika mereka tidak wujud, mereka baru kepada Perancang Mesyuarat. Jika mereka wujud, maka kita mengenali mereka.

Begitu juga, kita perlu menyemak sama ada alamat e-melnya sudah ada, kerana mungkin orang yang mempunyai alamat e-mel tadi terdaftar dengan Perancang Pertemuan.

Apabila tidak ada pengguna yang disahkan semasa di MeetingPlanner.io, kod di bawah ini melihat data pengguna masuk.

Sekiranya ID luaran sudah ada dalam jadual Auth kami, kami log masuk. Itu mudah (untuk mereka)!

Sekiranya kami tidak mengiktiraf ID tetapi kami telah mendaftarkan alamat e-mel tersebut, kami meminta mereka untuk log masuk melalui nama pengguna dan kata laluan dan kemudian memautkan akaun mereka.

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

Seterusnya, jika mereka mula pada halaman log masuk apabila mereka mengklik butang akaun sosial dan kami tidak mengenali ID luaran atau alamat e-mel, kami mengalihkannya ke halaman pendaftaran dan meminta mereka untuk mencuba lagi-dari halaman pendaftaran.

Sekiranya mereka dipautkan dari halaman pendaftaran, kami memastikan pengguna baru tidak mempertanggungjawabkan nama pengguna pendua (pengguna Perancang Mesyuarat yang sedia ada). Dalam senario ini, kita hanya menyampaikan nama pengguna dengan rentetan rawak sekarang. Dan kita mendaftar sebagai pengguna baru di Mesyuarat Perancang dengan kata laluan anda (yang mereka tidak benar-benar memerlukan) mereka.

Dalam langkah terakhir di atas, kami menambah butiran akaun sosial luaran mereka ke jadual Auth untuk pengiktirafan masa depan.

Menghubungkan akaun Perancang Mesyuarat sedia ada

Jika mereka datang dari tab Akaun Sosial Pautan pada halaman profil pengguna (bukan log masuk atau halaman pendaftaran kami), maka kami hanya perlu menambah butiran akaun luaran mereka kepada Auth, dan memindahkan log masuk ke Pengguna :: STATUS_ACTIVE. (Ingat, pengguna yang tiba dari pautan Rancangan Perancang Mesyuarat tetapi tidak pernah berdaftar mempunyai mod Pengguna :: STATUS_PASSIVE.)

Berikut adalah apa yang kelihatan seperti (pada masa akan datang saya akan masukkan maklumat penamaan dari maklumat yang OAuth — ia tidak dilakukan lagi):

Building Your Startup OAuth - Successful Account Linkage

Sebagai penutup

Saya perlu akui, kesan daripada kerja OAuth sambungan kepada Perkhidmatan utama seperti Google, Facebook dan LinkedIn adalah cukup dramatik. Ia menjadikan sign up dan kerap menggunakan Perancang Mesyuarat begitu mudah dan kelajuan pengesahan pada masa hadapan. Ia benar-benar adalah luar biasa semacam.

Perancang Mesyuarat telah benar-benar datang bersama beberapa bulan terakhir. Sila cuba login dan pendaftaran sosial sekarang! Tonton tutorial-tutorial yang akan datang di Bangunan Kami Permulaan Anda Dengan siri PHP-terdapat banyak ciri-ciri yang menarik yang muncul sebagai produk menuju MVP.

Saya juga mula bereksperimen dengan WeFunder berdasarkan pelaksanaan peraturan crowdfunding SEC yang baru. Sila pertimbangkan mengikuti profil kami. Saya boleh menulis tentang ini lebih sebagai sebahagian daripada siri kami.

Sila berasa bebas menambah soalan-soalan anda dan komen di bawah; Secara umumnya, cara mengambil bahagian dalam perbincangan. Anda juga boleh mengunjungi saya di Twitter @reifman. Saya mengalu-alukan permintaan ciri dan topik.

Jika anda ingin tahu apabila tutorial Yii2 seterusnya tiba, ikut saya @reifman di Twitter atau check laman guru saya. Laman guru saya akan merangkumi semua perkara-perkara dari siri ini sebaik sahaja mereka diterbitkan.

Pautan Berkaitan

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.