Integrasi dengan Google OAuth 2.0 – SSO & Google Login

Assalamualaikum wbt,

Ada sahabat bertanyakan pasal bagaimana ingin mengintegrasikai google OAuth dengan web aplikasi dan bagaimana pelaksanaannya dengan projek MyUMPID yang sedang berjalan. Google telah menyediakan kemudahan ini untuk membolehkan aplikasi web & mobile apps login diintegrasi menggunakan akaun google. Ia sangat sesuai digunakan di ekosistem UMP kerana akaun kesemua staf menggunakan akaun google. Juga projek myumpid telah synckan semuka akaun staf dengan google cloud menggunakan 1 id username dan 1 password.

Jadi, saya cuba kongsikan cara mudah untuk mengintegrasi google OAuth ini.

1. Login menggunakan Akaun Google

2. Terus ke Console Cloud Google

https://console.cloud.google.com

3. Buka Menu Credentials

Klik pada left menu > APIS & Services > Credentials

tekan butang ‘CREATE CREDENTIALS’. 

Nota : Untuk makluman credentials ini boleh didaftar lebih daripada satu. Ia mewakil aplikasi yang kita ingin integrasi nanti. Contohnya . sistem ecomms, sistem pelajar & akademik (sppa). Setiap pendaftaran ini, google akan menjana secret key & token.(pastikan ia simpan di tempat yg selamat)

Pilih Menu ‘OAuth Client ID‘.

4. Daftar Maklumat Domain Organisasi – ‘Configure Consent Screen’

Nota: Pendaftaran ini adalah sekali sahaja dan bertujuan untuk memasukkan nama domain .contohnya . ump.edu.my. Untuk memastikan credential daripada client  atau web aplikasi yang diakses dari alamat domain tersebut dikenal oleh pihak google bagi tujuann autentikasi.

Klik butang ‘Configure Consent Screen’ untuk pendaftaran

Pilih ‘Internal‘. Sebab kesemua pengguna adalah di dalam organisasi UMP (domain. ump.edu.my)

Medan lain biarkan kosong dan isi di bahagian ini sahaja ‘Authorize Domain’. Masukkan alamat domain & tekan butang add domain.

Tekan butang ‘save & continue‘.

Ok selesai.

4. Daftar  ‘OAuth Client’

Setelah selesai mendaftar domain tadi di Consent Screen, anda klik pada menu ‘Credentials’ semula.

paparan seperti di atas . Tutorial ini adalah menggunakan Web Application. 

Ok,paparan seperti ini dan memerlukan kita memasukkan beberapa maklumat. Masukkan..

– nama (tidak kisah nama apa.sebaiknya merujuk kepada nama sis aplikasi)

– Authorize JS origins – Masukkan alamat laman web (contoh ini saya gunakan localhost) -> http://localhost

– Authorized redirect URIs – Masukkan alamat aplikasi  yang merujuk kepada default page /index page. ->(http://localhost/adMgmt/app/index.php)

& Tekan butang ‘Create’

Senarai credential yang didaftarakan disenaraikan.

(Seperti yang saya maklum, pendaftaran boleh lebih daripada satu yang merujuk kepada laman aplikasi kita atau akses)

Klik pada credential untuk melihat TOKEN (Client iD & Client Secret – salin di tempat yg selamat kerana kita akan gunakannya dari client web nnti)

Ok selesaikan daftar di cloud google.Next kita akan konfigur di client . Dalam hal ini kita sediakan simple aplikasi yang menggunakan lib client google api.

5. Persediaan di Client menggunakan google api client

Anda beberapa bahasa api yang boleh kita gunakan untuk di client . Iaitu java, nodejs, python, php dan NET. jadi kita boleh pilih mengikut stack yang sesuai dengan persekitaran organisasi. Contoh yang saya tunjukkan ni adalah menggunakan PhP.

jadi saya download dulu lib ini.

https://github.com/googleapis/google-api-php-client/releases

Perhatian. Sila pilih lib ikut versi php anda. Jika saya, saya download versi lib php 7.xx/

cara lain adalah anda boleh install lib ini menggunakan composer. Ikut masing2 punya kemahiran.

.

Apabila download selesai, anda extrakkan zip files ni dalam letak di dalam folder web app anda. Maybe boleh letak dalam

folder lib>googleoatuh (ikut masing2)

contoh seperti ini.

seterusnya kita sediakan file php . index.php

http://localhost/adMgmt/app/index.php

(ini yg kita daftar di cloud tadi)

index.php

<?php