Yii2: Super Easy to Create Login Social Account with AuthClient (Facebook, Google, Twitter, etc)

login as

Artikel ini semakin menegaskan kepada Anda tentang kelemahan utama Yii yaitu keterlaluan lengkap. Yii khususnya yang versi 2 bisa membuat Anda semakin maaf “bodoh”..

Kali ini kita akan membahas tentang login dan register via social aaccount macam google, facebook, twiiter, dll. Pasti pernah dong megunjungi website yang membutuhkan login namun kita juga disuguhi pilihan untuk login dengan social account kita.. agak riskan sih.. tapi itu aman kok yang penting kita jeli melihat URL yang dihasilkan di popup windows yang muncul.

Bagaimana Yii2 melakukannya!!

Yii2 menggunakan AuthClient Extension for Yii 2 (This extension adds OpenID, OAuth and OAuth2 consumers for the Yii framework 2.0)

Apa itu Oauth, menurut wikipedia (http://en.wikipedia.org/wiki/OAuth) adalah singkatan dari open standard to authorization. OAuth sebuah protokal yang membuat aplikasi kita bisa mengakses dengan aman data user pada aplikasi server yang support OAuth tentunya dengan persetujuan dari si user itu sendiri.. OAuth sampai artikel ini dibuat mencapai versi 2.0

Hampir semua website-website besar support OAuth sebut saja Google, Facebook, Twitter. Nah kalo web kamu ingin menjadi besar juga, maka sebaiknya implementasikan ini.. sejak dini hehe..

Lantas apa itu OpenID, openID menggunakan protokol OAuth. Misi open ID adalah membuat satu akun aja untuk semua website. Kalo selama ini kita membuat akun satu persatu ditiap website misal Google akun sendiri, facebook, twitter, nah kenapa nggak bikin satu aja dan bisa digunakan disemua website.. pokoknya gitu deh gak usah dipikirin..

Sebelum kita mulai.. kita buat scenario dulu..
1. User yang akan login diaplikasi kita bisa menggunakan akun Googlenya..
2. Ketika user memilih menggunakan Googlenya, maka akan muncul popup login google dan form persetujuan untuk mengakses data pribadi user (berupa email dan nama)
3. Jika diijinkan oleh user, maka kita gunakan data emailnya untuk search di tabel user.. ada nggak email tersebut.
4. Jika ada maka user diloginkan otomatis
5. Jika user belum terdaftar ditabel kita maka kita redirect ke form signup

Oke langsung aja praktek..

Buka ini http://www.yiiframework.com/doc-2.0/ext-authclient-index.html ikuti tutorialnya.. selesai..

1). Instal dulu via composer, tambahkan pada composer json, extension authclient

"yiisoft/yii2-authclient": "*"

2). Kalo udah selesai install, silahkan tambahkan di main config bagian component

'components' => [
    'authClientCollection' => [
        'class' => 'yii\authclient\Collection',
        'clients' => [
            'google' => [
                'class' => 'yii\authclient\clients\GoogleOpenId'
            ],
        ],
    ]
    ...
]

3). Lalu pada SiteController tambahkan action AuthAction

class SiteController extends Controller
{
    public function actions()
    {
        return [
            'auth' => [
                'class' => 'yii\authclient\AuthAction',
                'successCallback' => [$this, 'successCallback'],
            ],
        ];
    }

    public function successCallback($client)
    {
        $attributes = $client->getUserAttributes();
        // user login or signup comes here
    }
}

4). Kode diatas dari tutorial di web Yii, nah sekarang waktunya kita mikir (cak lontong)

5). Pada view – site – login.php, tambahkan ikon login via Google dengan cara menambahkan widget AuthChoice

<?= yii\authclient\widgets\AuthChoice::widget([
	 'baseAuthUrl' => ['site/auth']
]) ?>

 

auth-login

6). Modifikasi SiteController fungsi auth (lihat poin no 5) untuk mengakses class authAction
Buatlah variabel successUrl pada controller, kemudian tambahkan parameter successUrl dengan nilai variabel successUrl tadi.
successUrl itu untuk redirect ke url tertentu apabila fungsi AuthAction success.

class SiteController extends Controller
{
	public $successUrl = ''; //bikin variabel successUrl

    public function actions()
    {
        return [
            'auth' => [
                'class' => 'yii\authclient\AuthAction',
                'successCallback' => [$this, 'successCallback'],
				'successUrl' => $this->successUrl
            ],
        ];
    }
	...

7). Modifikasi SiteController fungsi successCallback

	public function successCallback($client)
    {
        $attributes = $client->getUserAttributes();
        // user login or signup comes here
		/*
		Kalo di die(print_r($attributes));
		maka akan keluar
		Array ( [id] => https://www.google.com/accounts/o8/id?id=AItOawkSN3ecyrQAUOVyy9kuX-2oq-hahagake [namePerson/first] => Hafid [namePerson/last] => Mukhlasin [pref/language] => en [contact/email] => milisstudio@gmail.com [first_name] => Hafid [last_name] => Mukhlasin [email] => milisstudio@gmail.com [language] => en ) 

		Nah data ini bisa kita gunakan untuk check apakah si user udah terdaftar ato belum..
		*/

		$user = \common\models\User::find()
			->where([
				'email'=>$attributes['email'],
			])
			->one();
		if(!empty($user)){
			Yii::$app->user->login($user);
		}
		else{
			//Simpen disession attribute user dari Google
			$session = Yii::$app->session;
			$session['attributes']=$attributes;
			// redirect ke form signup, dengan mengset nilai variabell global successUrl
			$this->successUrl = \yii\helpers\Url::to(['signup']);
		}	

    }

8) Modifikasi SiteController fungsi signup

	public function actionSignup()
    {

        $model = new SignupForm();

		// Tambahkan ini aje.. session yang kita buat sebelumnya, MULAI
		$session = Yii::$app->session;
		if (!empty($session['attributes'])){
			$model->username = $session['attributes']['first_name'];
			$model->email = $session['attributes']['email'];
		}
		// SELESAI

        if ($model->load(Yii::$app->request->post())) {
            if ($user = $model->signup()) {
                if (Yii::$app->getUser()->login($user)) {
                    return $this->goHome();
                }
            }
        }

        return $this->render('signup', [
            'model' => $model,
        ]);
    }

auth-signup
9) Selesai..


Jadi ketika di klik Login Google maka

auth-login-google

auth-login-google-aggreement


Jika pake eauth 2.0, kita perlu menambahkan parameter clientId dan clientSecret
‘facebook’ => [
'class' => 'yii\authclient\clients\Facebook',
'clientId' => 'facebook_client_id',
'clientSecret' => 'facebook_client_secret',
],
Untuk mendapatkannya kita harus register aplikasi kita ke

- register your app here: https://github.com/settings/applications
- register your app here: https://account.live.com/developers/applications/index
- register your app here: https://www.linkedin.com/secure/developer
- register your app here: https://developers.facebook.com/apps/
- register your app here: https://dev.twitter.com/apps/new
- register your app here: https://code.google.com/apis/console/

9 Comments
  1. Adit
  2. Hafid Mukhlasin
  3. seo
  4. Apy
  5. nitrowarez.com
  6. MRX
  7. Masyar
    • Hafid Mukhlasin

Leave a Reply

Your email address will not be published. Required fields are marked *