Google Sign-In untuk aplikasi web-based-mu

Suatu saat muncul ide kami untuk menyatukan akun para civitas akademika di kampus kami dengan konsep single akun. Sejalan dengan itu kebijakan kampus sudah mulai menggalakkan email dengan domain kampus kami, yang bekerja sama dengan Google tentunya. Oleh sebab itu maka kami sedang mencoba menggabungkan 2 masalah awal tersebut untuk membuat aplikasi-aplikasi kami dapat login menggunakan email google. Dapur kami tentang arsitek single login ini tidak saya share tentunya, di sini akan saya share bagaimana cara simpel menggunakan fasilitas google tersebut.

Langkah-langkah penggunaan fasilitas Google Sign-In sebagai berikut.

1. Sarat untuk menggunakan fasilitas Google ini anda harus memiliki project di Google Developers Console, anda bisa mengaksesnya di console.developers.google.com.
2. Kemudian pilih project yang telah ada atau buat baru.
3. Pada sidebar APIs & auth, pilih Credentials, dan klik tab OAuth consent screen.
4. Pilih Email Address, Isikan Product Name, dan klik tombol Save.
5. Kembali ke sidebar APIs & auth dan pilih Credentials.
6. Klik Create a new Client ID atau pilih Add credentials dan pilih yang OAuth 2.0 client ID sehingga muncul form pilihan.
7. Pada bagian Application type pilih Web application.
8. Pada isian Authorized JavaScript origins, isikan alamat URLmu, misal https://login.aplikasiku.com. Di sini dapat diisi beberapa alamat URL yang digunakan baik domain maupun subdomain yang diinginkan.
9. Klik tombol Create Client ID.
10. Hasilnya pada bagian Client ID for web application ditampilkan Client ID yang aplikasimu butuhkan untuk mengakses API Google.
11. Kamu harus menyertakan Google Platform Library pada aplikasi web-mu yang terintegrasi dengan Google Sign-in, sisipkan script ini pada header HTML.

    <script src="https://apis.google.com/js/platform.js" async defer></script>

12. Tambahkan client ID yang telah kamu buat di Google Developers Console dengan meta elemen google-signin-client_id.

    <meta name="google-signin-client_id" content="123123123-asdasdasdasd.apps.googleusercontent.com">

13. Buat script javascript sederhana untuk kontrol login dan logout aplikasi, misal:

    function onSignIn(googleUser) {
     var id_token = googleUser.getAuthResponse().id_token;
     var xhr = new XMLHttpRequest();
     xhr.open('POST', 'https://login.aplikasiku.com/cek_login.php');
     xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
     xhr.onload = function() {
     console.log('Signed in as: ' + xhr.responseText);
     };
     xhr.send('idtoken=' + id_token);
     //console.log('ID: ' + id_token);
     if(id_token==''){}else{
     xhr.send('idtoken=' + id_token);
     }
     }
    function signOut() {
     var auth2 = gapi.auth2.getAuthInstance();
     auth2.signOut().then(function () {
     console.log('User signed out.');
     });
     }

14. Tambahkan tombol Sign-In Google pada halaman loginmu dengan menambah div berikut.

    <div class="g-signin2" data-onsuccess="onSignIn"></div>

15. Buat file untuk cek data yang namanya sama dengan target saat posting data sign-in berhasil, misal pada contoh adalah cek_login.php. Isi file cek_login.php misalnya

     $url = 'https://www.googleapis.com/oauth2/v3/tokeninfo?id_token='.$_POST['idtoken'];

     $content = file_get_contents($url);

     print_r($content);

     echo '<a href="#" onclick="signOut();">Sign out</a>';

16. Content yang diperoleh saat cek token merupakan data informasi user yang digunakan untuk login, kamu dapat memanfaatkan data email untuk crosscek data email pada database akun kamu.
17. OK selesai.

Semoga bermanfaat.

sumber: developers.google.com/identity/sign-in/web/