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

Cara Memprogram Dengan Yii2: Integrasi AuthClient Dengan Twitter & Google

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called How to Program With Yii2.
How to Program With Yii2: Specialized Validations
How to Program With Yii2: Using the Advanced Application Template

Indonesian (Bahasa Indonesia) translation by Ade Khairul Umam (you can also view the original English article)

Final product image
What You'll Be Creating

Jika Anda bertanya, "Apa itu Yii?" lihat tutorial saya sebelumnya: Pengantar Kerangka Yii, yang mengulas manfaat Yii dan menyertakan ikhtisar tentang apa yang baru di Yii 2.0, dirilis pada Oktober 2014.

Dalam seri Programming With Yii2 ini, saya membimbing pembaca untuk menggunakan Framework Yii2 yang baru ditingkatkan untuk PHP. Dalam tutorial ini, saya akan memandu Anda melalui integrasi dukungan AuthClient bawaan untuk menyediakan masuk dari jaringan pihak ketiga seperti Twitter, Google, dan Facebook.

Untuk contoh ini, kami akan terus membayangkan kami sedang membangun kerangka kerja untuk memposting pembaruan status sederhana, mis. mini-Twitter kami sendiri, menggunakan basis kode halo kami. Gunakan tautan GitHub di halaman ini untuk mengunduh repositori kode.

Dalam pemrograman dengan Yii2: Mengintegrasikan registrasi User, aku berjalan melalui integrasi Perpustakaan Yii2-pengguna untuk pengguna pendaftaran dan otentikasi. Dalam tutorial ini, kita akan mempelajari bagaimana mengintegrasikan AuthClient dengan Yii2-pengguna dan menimpa dengan pemandangan.

Sekadar mengingatkan, saya berpartisipasi dalam diskusi di bawah ini. Jika Anda memiliki pertanyaan atau saran topik, silakan kirim komentar di bawah ini. Anda juga dapat menghubungi saya di Twitter @reifman atau email saya di Lookahead Consulting.

apa itu AuthClient?

AuthClient adalah Yii's built-in mendukung untuk aplikasi Anda untuk mengotentikasi melalui layanan pihak ketiga dengan OpenID, OAuth atau OAuth2.

Sebagai contoh, AuthClient menyediakan dukungan untuk pengunjung baru untuk mendaftar dan masuk ke aplikasi Anda menggunakan account Twitter mereka daripada harus memberikan password.

Dari kotak, dukungan untuk klien berikut tersedia:

Konfigurasi untuk setiap klien sedikit berbeda. Untuk OAuth diperlukan untuk mendapatkan klien ID dan kunci rahasia dari layanan Anda akan menggunakan. Untuk OpenID bekerja di luar kotak dalam kebanyakan kasus.

Untuk tutorial ini, saya akan memandu Anda melalui penambahan otentikasi Twitter dan Google.

Menginstal AuthClient di aplikasi kita

Tambahkan AuthClient ke komposer

Pertama, kita perlu menambahkan Perpustakaan AuthClient untuk composer.json:

Kemudian, kita perlu memperbarui komposer:

Konfigurasi AuthClient dukungan

Kita perlu menambahkan pengaturan konfigurasi AuthClient ke file konfigurasi web kami di \config\web.php.

Menambahkan elemen array untuk semua layanan pihak ketiga yang Anda ingin untuk mendukung (rincian untuk masing-masing dapat ditemukan dalam panduan AuthClient). Untuk sekarang, kita akan menggunakan kunci pengganti untuk Twitter.

Google akan bekerja di luar kotak tanpa konfigurasi tambahan, tetapi untuk berkicau, kita perlu mendaftar aplikasi.

Mendaftar aplikasi Twitter kami

Membuat sebuah aplikasi Twitter yang baru di Dashboard aplikasi Twitter:

Twitter Apps Dashboard

Klik Buat aplikasi baru. Saya menemukan bahwa callback URL tidak perlu, tetapi untuk sekarang saya menggunakan pengganti http://mydomain.com/user/security/auth.

Twitter Apps Create an application

Berikut adalah halaman baru untuk aplikasi kita:

Twitter Apps App Page

Berikut adalah halaman pengaturan:

Twitter Apps App Settings Page

Berikut adalah Halaman kunci dan token akses. Di sini, kita perlu menyalin konsumen Key (kunci API) dan konsumen rahasia (API Secret):

Twitter Apps App Keys and Access Tokens

Kami akan membuat penggunaan orang-orang kunci dalam sekejap.

Melindungi kunci dari GitHub

Dalam melindungi Anda kunci dari GitHub, saya menjelaskan secara rinci bagaimana saya menggunakan file konfigurasi untuk menyimpan semua kunci saya dari repositori GitHub saya. Kemudian, saya sertakan file ini pada awal saya file konfigurasi Yii. Ini membuat saya dari sengaja memeriksa saya kunci untuk repositori saya dan mengorbankan account saya.

Juga, dalam pengenalan MailTrap: A Fake Server SMTP untuk pra-produksi pengujian dari aplikasi Email, saya mulai mengintegrasikan MailTrap's Pengaturan SMTP ke konfigurasi Yii SwiftMailer saya untuk tujuan pengujian. Ini akan memastikan kami menerima email registrasi ketika kita mendaftar pada platform pembangunan daerah kami.

MailTrap SMTP Settings

Kami menempatkan tombol Twitter aplikasi dan tombol MailTrap SMTP ke /var/secure/hello.ini di luar repositori:

Berikut adalah kode di \config\web.php yang mencakup pengaturan ini dan menetapkan Variable konfigurasi individu:

Lebih lanjut di bawah ini, di sini adalah bagaimana kita mengkonfigurasi pengaturan SMTP untuk SwiftMailer:

Memperbarui skema Database toko sesi kunci

Karena kita menggunakan Yii2-User, itu telah disediakan meja Token untuk menyimpan tombol AuthClient.

Kita akan memeriksa isi dari tabel ini pada akhir tutorial ini, setelah kami terdaftar melalui Twitter.

Tambahkan AuthClient Widget untuk antarmuka pengguna

Halaman login Yii2-User menampilkan nya Connect widget untuk AuthClient layanan pada halaman masuk — melihat Google dan Twitter ikon di bagian bawah halaman:

AuthClient Widget on Sign In Page

Untuk beberapa alasan, namun, mereka tidak termasuk pada halaman pendaftaran pendaftaran. Hal ini tampaknya seperti pengawasan kepada saya.

Untuk memodifikasi halaman sign up, kita perlu mengganti tampilan pendaftaran. Untungnya, Yii dan pengguna Yii2 membuat ini mudah-Lihat juga mengganti dilihat di Yii2‑User.

Kembali ke \config\web.php, kami menambahkan komponen lihat di bawah ini:

Kemudian kita menempatkan kita sendiri versi modifikasi dari Yii2 pengguna register.php di @app/views/user/registration/register.php. Jika halaman pendaftaran diminta, Yii akan memuat versi kami, yang mencakup Connect widget:

Berikut adalah laman pendaftaran kami sekarang:

AuthClient Widget on Our Sign Up Page

Pengalaman pengguna menghubungkan melalui Layanan

Berikut adalah apa yang tampak seperti proses pendaftaran. Ketika Anda klik pada ikon Twitter di atas, akan meminta Anda untuk sign in ke Twitter account:

Twitter OAuth Sign In Page

Maka akan meminta Anda untuk mengotorisasi aplikasi dengan account:

Twitter OAuth Authorize App

Maka akan membawa Anda ke dalam formulir pendaftaran Connect di aplikasi kita — Halaman ini juga disediakan oleh Yii2-User:

Yii2-User Connect Your Account to Twitter

Ketika Anda mengklik selesai, itu menyisipkan OAuth token ke tabel Token dan mengarahkan Anda ke halaman rumah sepenuhnya dikonfirmasi dengan aplikasi kami:

Hello App Signed In Via Twitter

Berikut adalah mengintip di dalam tabel Token, yang menyimpan tombol sesi layanan untuk setiap pengguna:

The Token Table with codes from Twitter

Pada berikutnya masuk upaya, Twitter akan mengarahkan Anda tanpa memerlukan otorisasi tambahan.

Itu adalah bagaimana kita mengintegrasikan layanan pihak ketiga ke dalam template aplikasi dasar Yii2 dengan Yii2-User. Saya berharap Anda akan senang dengan cara mudah ini adalah.

Anda mungkin ingin memeriksa kami seri bangunan Anda Startup dengan PHP, yang akan menggunakan Yii2's lanjutan template dengan pihak ketiga integrasi (terlepas dari Yii2-User).

Apakah berikutnya?

Menonton untuk mendatang tutorial dalam seri pemrograman dengan Yii2 saat aku melanjutkan menyelam ke dalam aspek-aspek yang berbeda dari kerangka.

Saya menyambut permintaan fitur dan topik. Anda dapat mengirim mereka di komentar di bawah atau email saya di website saya Lookahead Consulting.

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

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.