Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)
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:
"minimum-stability": "stable",
"require": {
"php": ">=5.4.0",
"yiisoft/yii2": "*",
"yiisoft/yii2-bootstrap": "*",
"yiisoft/yii2-swiftmailer": "*",
"2amigos/yii2-google-maps-library": "*",
"2amigos/yii2-google-places-library": "*",
"stichoza/google-translate-php": "~2.0",
"2amigos/yii2-date-time-picker-widget": "*",
"yiisoft/yii2-jui": "*",
"cebe/yii2-gravatar": "*",
"kartik-v/yii2-widget-fileinput": "*",
"kartik-v/yii2-widget-switchinput": "*",
"yiisoft/yii2-imagine": "*",
"2amigos/yii2-resource-manager-component": "0.1.*",
"yiisoft/yii2-authclient": "~2.0.0"
},
Kemudian, kita perlu memperbarui composer:
sudo composer update
Password:
Loading composer repositories with package information
Updating dependencies (including require-dev)
- Updating 2amigos/yii2-date-time-picker-widget (0.1.0 => 0.1.1)
Checking out 572e2448ba1cd207b339dd5d117e3d1d23f0bbc3
- Installing yiisoft/yii2-authclient (2.0.2)
Loading from cache
Writing lock file
Generating autoload files
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):
'components' => [
'authClientCollection' => [
'class' => 'yii\authclient\Collection',
'clients' => [
'facebook' => [
'class' => 'yii\authclient\clients\Facebook',
'clientId' => $config['oauth_fb_id'],
'clientSecret' => $config['oauth_fb_secret'],
],
'google' => [
'class' => 'yii\authclient\clients\GoogleOAuth',
'clientId' => $config['oauth_google_client_id'],
'clientSecret' => $config['oauth_google_client_secret'],
],
'linkedin' => [
'class' => 'yii\authclient\clients\LinkedIn',
'clientId' => $config['linkedin_client_id'],
'clientSecret' => $config['linkedin_client_secret'],
],
'twitter' => [
'class' => 'yii\authclient\clients\Twitter',
'consumerKey' => $config['oauth_twitter_key'],
'consumerSecret' => $config['oauth_twitter_secret'],
],
],
],
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:
Klik Create New App—saya menemukan bahwa URL callback tidak diperlukan, namun untuk saat ini saya menggunakan pengganti http://mydomain.com/user/security/auth.
Inilah halaman baru untuk aplikasi kita:
Inilah halaman Pengaturannya:
Inilah halaman Key dan Access Token. Di sini, kita perlu menyalin Consumer Key (API Key) dan Consumer Secret (API Secret):
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:
Kita akan memilih untuk membuat aplikasi WWW Website untuk saat ini:
Berikan nama aplikasi kita:
Dan kumpulkan App ID baru kita:
Mereka meminta semua informasi reguler, seperti URL:
Dan kemudian Anda dapat menemukan aplikasi Meeting Planner kita dalam daftar:
Inilah dashboard Facebook untuk aplikasi Anda:
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:
Yang membawa Anda ke sini:
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:
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:
Mendaftar dengan LinkedIn
LinkedIn cukup sederhana dibandingkan dengan Google. Anda memerlukan rincian dasar untuk aplikasi Anda:
Seperti Google, mereka memerlukan semua URL yang akan Anda gunakan dalam pengembangan dan produksi. Anda juga bisa mendapatkan kunci di halaman ini:
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:
oauth_fb_id="154xxxxxxxxxxxxxx33" oauth_fb_secret="bcxxxxxxxxxxxxxxdda" oauth_twitter_key ="JCpxxxxxxxxxxxxxxnsF" oauth_twitter_secret="f3xxxxxxxxxxxxxxxxxxxxxxxxxxxxu37" oauth_twitter_token="153xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxfBj" oauth_twitter_token_secret="Synxxxxxxxxxxxxxxxxxxxxxxxxxxxx4X" oauth_google_client_id = "1xxxxxxxxxxxxxxxxxxxxxxq.apps.googleusercontent.com" oauth_google_client_secret = "cfkxxxxxxxxxxxxxxox" linkedin_client_id = "7xxxxxxxxxxxxxxq" linkedin_client_secret ="IxxxxxxxxxxxxxxI"
Di sini lagi adalah kode di \frontend\config\main.php yang menyertakan pengaturan ini dan menetapkan variabel konfigurasi individual:
<?php
$config = parse_ini_file('/var/secure/mp.ini', true);
$params = array_merge(
require(__DIR__ . '/../../common/config/params.php'),
require(__DIR__ . '/../../common/config/params-local.php'),
require(__DIR__ . '/params.php'),
require(__DIR__ . '/params-local.php')
);
return [
'id' => 'app-frontend',
'basePath' => dirname(__DIR__),
'bootstrap' => ['log'],
'controllerNamespace' => 'frontend\controllers',
'components' => [
'authClientCollection' => [
'class' => 'yii\authclient\Collection',
'clients' => [
'google' => [
'class' => 'yii\authclient\clients\GoogleOpenId'
],
'facebook' => [
'class' => 'yii\authclient\clients\Facebook',
'clientId' => $config['oauth_fb_id'],
'clientSecret' => $config['oauth_fb_secret'],
],
'twitter' => [
'class' => 'yii\authclient\clients\Twitter',
'consumerKey' => $config['oauth_twitter_key'],
'consumerSecret' => $config['oauth_twitter_secret'],
],
],
],
'urlManager' => [
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:
./yii migrate/create create_auth_table Yii Migration Tool (based on Yii v2.0.2) Create new migration '/Users/Jeff/Sites/mp/console/migrations/m150227_235635_create_auth_table.php'? (yes|no) [no]:yes New migration created successfully.
Inilah migrasinya seperti ini:
<?php
use yii\db\Schema;
use yii\db\Migration;
class m150227_235635_create_auth_table extends Migration
{
public function up()
{
$tableOptions = null;
if ($this->db->driverName === 'mysql') {
$tableOptions = 'CHARACTER SET utf8 COLLATE utf8_unicode_ci ENGINE=InnoDB';
}
$this->createTable('{{%auth}}', [
'id' => Schema::TYPE_PK,
'user_id' => Schema::TYPE_BIGINT.' NOT NULL',
'source' => Schema::TYPE_STRING.' NOT NULL',
'source_id' => Schema::TYPE_STRING.' NOT NULL',
], $tableOptions);
$this->addForeignKey('fk-auth-user_id-user-id', '{{%auth}}', 'user_id', '{{%user}}', 'id', 'CASCADE', 'CASCADE');
}
public function down()
{
$this->dropForeignKey('fk-auth-user_id-user-id', '{{%auth}}');
$this->dropTable('{{%auth}}');
}
}
Inilah hasilnya saat kita menjalankannya:
./yii migrate/up
Yii Migration Tool (based on Yii v2.0.2)
Total 1 new migration to be applied:
m150227_235635_create_auth_table
Apply the above migration? (yes|no) [no]:yes
*** applying m150227_235635_create_auth_table
> create table {{%auth}} ... done (time: 0.016s)
> add foreign key fk-auth-user_id-user-id: {{%auth}} (user_id) references {{%user}} (id) ... done (time: 0.012s)
*** applied m150227_235635_create_auth_table (time: 0.033s)
Migrated up successfully.
Sekali lagi, saya menggunakan generator kode Gii dari Yii untuk membuat model Auth:
Pada akhirnya, tabel Auth akan menyimpan konten seperti ini:
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:
<div class="row">
<div class="col-lg-5">
<p>Or, login with one of the following services:</p>
<?= yii\authclient\widgets\AuthChoice::widget([
'baseAuthUrl' => ['site/auth','mode'=>'login'],
'popupMode' => false,
]) ?>
</div> <!-- end col-lg-5 -->
</div> <!-- end row -->
Inilah halaman pendaftaran kita sekarang:
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:
Jika Anda mengklik LinkedIn, inilah layar OAuth mereka yang akan meminta Anda memberikan izin kepada Meeting Planner:
Dan inilah layar untuk Google:
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:
/**
* @inheritdoc
*/
public function actions()
{
return [
'error' => [
'class' => 'yii\web\ErrorAction',
],
'captcha' => [
'class' => 'yii\captcha\CaptchaAction',
'fixedVerifyCode' => YII_ENV_TEST ? 'testme' : null,
],
'auth' => [
'class' => 'yii\authclient\AuthAction',
'successCallback' => [$this, '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:
public function onAuthSuccess($client)
{
$mode = Yii::$app->getRequest()->getQueryParam('mode');
$attributes = $client->getUserAttributes();
$serviceId = $attributes['id'];
$serviceProvider = $client->getId();
$serviceTitle = $client->getTitle();
$firstname ='';
$lastname='';
$fullname ='';
switch ($serviceProvider) {
case 'facebook':
$username = $email = $attributes['email'];
$fullname = $attributes['name'];
break;
case 'google':
$email = $attributes['emails'][0]['value'];
if (isset($attributes['displayName'])) {
$fullname = $username = $attributes['displayName'];
}
if (isset($attributes['name']['familyName']) and isset($attributes['name']['givenName'])) {
$lastname = $attributes['name']['familyName'];
$firstname = $attributes['name']['givenName'];
}
break;
case 'linkedin':
$username = $email = $attributes['email-address'];
$lastname = $attributes['first-name'];
$firstname = $attributes['last-name'];
$fullname = $firstname.' '.$lastname;
break;
case 'twitter':
$username = $attributes['screen_name'];
$fullname = $attributes['name'];
// to do - fix social helpers
$email = $serviceId.'@twitter.com';
break;
}
// to do - split names into first and last with parser
$auth = Auth::find()->where([
'source' => (string)$serviceProvider,
'source_id' => (string)$serviceId,
])->one();
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.
if (Yii::$app->user->isGuest) {
if ($auth) {
// if the user_id associated with this oauth login is registered, try to log them in
$user_id = $auth->user_id;
$person = new \common\models\User;
$identity = $person->findIdentity($user_id);
Yii::$app->user->login($identity);
} else {
// it's a new oauth id
// first check if we know the email address
if (isset($email) && User::find()->where(['email' => $email])->exists()) {
// the email is already registered, ask person to link accounts after logging in
Yii::$app->getSession()->setFlash('error', [
Yii::t('frontend', "The email in this {client} account is already registered. Please login using your username and password first, then link to this account in your profile settings.", ['client' => $serviceTitle]),
]);
$this->redirect(['login']);
} else {
if ($mode == 'login') {
// they were trying to login with an unconnected account - ask them to login normally and link after
Yii::$app->getSession()->setFlash('error', [
Yii::t('frontend', "We don't recognize the user with this email from {client}. If you wish to sign up, try again below. If you wish to link {client} to your Meeting Planner account, login first with your username and password. Then visit your profile settings.", ['client' => $serviceTitle]),
]);
$this->redirect(['signup']);
}
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).
else if ($mode == 'signup') {
// sign up a new account using oauth
// look for username that exists already and differentiate it
if (isset($username) && User::find()->where(['username' => $username])->exists()) {
$username.=Yii::$app->security->generateRandomString(6);
}
$password = Yii::$app->security->generateRandomString(12);
$user = new User([
'username' => $username, // $attributes['login'],
'email' => $email,
'password' => $password,
'status' => User::STATUS_ACTIVE,
]);
$user->generateAuthKey();
$user->generatePasswordResetToken();
$transaction = $user->getDb()->beginTransaction();
if ($user->save()) {
$auth = new Auth([
'user_id' => $user->id,
'source' => $serviceProvider, // $client->getId(),
'source_id' => $serviceId, // (string)$attributes['id'],
]);
if ($auth->save()) {
$transaction->commit();
Yii::$app->user->login($user);
} else {
print_r($auth->getErrors());
}
} else {
print_r($user->getErrors());
}
} // end signup
}
}
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.)
} else {
// user already logged in, link the accounts
if (!$auth) { // add auth provider
$auth = new Auth([
'user_id' => Yii::$app->user->id,
'source' => $serviceProvider,
'source_id' => $serviceId,
]);
$auth->validate();
$auth->save();
$u = User::findOne(Yii::$app->user->id);
$u->status = User::STATUS_ACTIVE;
$u->update();
Yii::$app->session->setFlash('success', Yii::t('frontend', 'Your {serviceProvider} account has been connected to your Meeting Planner account. In the future you can log in with a single click of its logo.',
array('serviceProvider'=>$serviceTitle)));
}
}
Inilah yang terlihat (di masa depan saya akan mengisi informasi penamaan dari informasi OAuth—ini masih belum selesai):
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
