How to make LOGIN with SSO

Assalamualaikum..

WELCOME BACK to MY CERMIIIIIIIIIIII~~~

Yay! Ketemu lagi nih sama Dea untuk kesekian kalinya hehehe Semoga kalian ga pernah bosen dan selalu pantengin terus cermi tentang aktivitas Dea. Btw apa kabar nih sahabat TimUR semuanya? InshaAllah semuanya dalam keadaan sehat dan selalu dalam lindungan Allah yaa amin^^

Langsung aja nih yaa.. As usual disini Dea akan membahas tentang hal yang berkaitan dengan project Dea yaitu “Penilaian Sidang”. Mungkin sebagian dari kalian sudah tahu apasih SSO itu. Sedikit disini Dea akan mengulas bahwa Sigle Sign-On atau sering disingkat menjadi SSO, pada dasarnya SSO adalah akses ke beberapa software yang terpisah dan berdiri sendiri, tetapi dimiliki oleh satu pengguna yang sama.

Pada sistem “Penilaian Sidang” yang Dea buat akan diterapkannya login dengan menggunakan SSO. Dimana sistem tersebut dapat diakses hanya dengan menggunakan akun gmail. Contohnya kita bisa menggunakan akun rinfo kita, seperti yang Dea miliki yaitu dea@raharja.info. Dengan adanya login menggunakan SSO ini kita sebagai pengguna hanya cukup melakukan proses autentikasi sekali saja untuk mendapatkan izin akses terhadap semua layanan yang terdapat di dalam jaringan. Okay disini Dea akan share bagaimana cara membuat login menggunakan SSO.

Check this out ———–>

  • Langkah pertama yaitu kalain harus menginstall Extension yii2-authclient terlebih dahulu. Nah setelah kalian menginstall Extension yii2-authclient selanjutnya  tambahkan extension “yiisoft/yii2-authclient”: “*” pada file composer.json.

 

  • Langkah selanjutnya yaitu kalian harus mengubah file web.php pada folder config (yang terdapat pada kodingan kalian ) lalu tambahkan script sebagai berikut :

 

'authClientCollection' => [
              'class' => 'yii\authclient\Collection',
              'clients' => [ 
                    
                    'google' => [
      		    'class' => 'yii\authclient\clients\GoogleOAuth',
                    'clientId' => 'Isikan ClientId Kamu',
                    'clientSecret' => 'Isikan ClientSecret Kamu',
                ],
            ],
        ],

  • Kemudian buatlah clientId’ dan ‘clientSecret’ kalian dapat membuatnya di   console.developers.google.com. Dengan cara Create new project pada API Manager dan create credentials. Kemudian isikan Authorized JavaScript origins dan Authorized redirect URIs. Setelah selesai lalu klik save.

 

  • Setelah kalian save maka akan muncul ‘clientId’ dan ‘clientSecret’ kalian. Oh ya guys fyi nih setiap orang memilki clientId’ dan ‘clientSecret’ yang berbeda-beda. So, keep ‘clientId’ dan ‘clientSecret’ kalian yaa jangan diberitahukan siapapun.

 

  • Nah selanjutnya kalian tinggal isi pada tab  Authorized JavaScript origins dan Authorized redirect URIs sesuai dengan yang sudah kalian miliki yaa..

 

  • Setelah selesai lalu kalian harus membuat action AuthAction pada file SiteController. Contohnya seperti berikut ya guys :

 

  • 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
        }
    }

 

  • and for the last step kalian harus  menambahkan button untuk login SSO dengan cara buka folder Views/site/login.php 

 

 

  • Yay! tadaaaaaaaa finally kalian bisa login menggunakan SSO.

 

Berikut adalah tampilan dari sistem “Penilaian Sidang” yang Dea buat yang dapat diakses menggunakan SSO :

 

Alhamdulillaah..

Sekian cermi Dea kali ini mudah-mudahan bermanfaat dan dapat diaplikasikan dalam project kalian masing-masing yaa. Sampai bertemu di next cermi hihihi byeeeeee^^

130 Total Views 1 Views Today
Views All Time
Views All Time
122
Views Today
Views Today
1

Leave a Reply

You must be logged in to post a comment.