Perlu Diperhatikan

Level Pengguna = Medium – Pro
Menguasai bahasa pemprograman :

             a. PHP ( medium )
             b. HTML ( medium )
             c. CSS ( medium )
             d. Javascript ( dasar )

Langkah-langkah

   b. Kedua , Buat sesuai dengan nama domain atau project

 c. Ketiga , Pilih project nya

                              

c. Kelima , Klik pada bagian sidebar Kredensial 

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

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

<script>
// Render Google Sign-in button
function renderButton() {
    gapi.signin2.render('gSignIn', {
        'scope': 'profile email',
        'width': 240,
        'height': 50,
        'longtitle': true,
        'theme': 'dark',
        'onsuccess': onSuccess,
        'onfailure': onFailure
    });
}

// Sign-in success callback
function onSuccess(googleUser) {
    // Get the Google profile data (basic)
    //var profile = googleUser.getBasicProfile();
    
    // Retrieve the Google account data
    gapi.client.load('oauth2', 'v2', function () {
        var request = gapi.client.oauth2.userinfo.get({
            'userId': 'me'
        });
        request.execute(function (resp) {
            // Display the user details
            var profileHTML = '
Welcome '+resp.given_name+'! Sign out
';
            profileHTML += '<img src="'+resp.picture+'"/>
Google ID: '+resp.id+'
Name: '+resp.name+'
Email: '+resp.email+'
Gender: '+resp.gender+'
Locale: '+resp.locale+'
Google Profile: <a target="_blank" href="'+resp.link+'">click to view profile
';
            document.getElementsByClassName("userContent")[0].innerHTML = profileHTML;
            
            document.getElementById("gSignIn").style.display = "none";
            document.getElementsByClassName("userContent")[0].style.display = "block";
        });
    });
}

// Sign-in failure callback
function onFailure(error) {
    alert(error);
}

// Sign out the user
function signOut() {
    var auth2 = gapi.auth2.getAuthInstance();
    auth2.signOut().then(function () {
        document.getElementsByClassName("userContent")[0].innerHTML = '';
        document.getElementsByClassName("userContent")[0].style.display = "none";
        document.getElementById("gSignIn").style.display = "block";
    });
    
    auth2.disconnect();
}
</script>

HTML Code:

Kode HTML berikut menampilkan tombol Masuk Google dan informasi akun pengguna di halaman web.

Tambahkan elemen (gSignIn) untuk merender tombol masuk.

Tambahkan elemen div (userContent) untuk merender info profil Google.

<div id="gSignIn"></div>


<div class="userContent" style="display: none;"></div>

Simpan Data Akun Google di Database (jQuery, Ajax, PHP, dan MySQL)
Setelah pengguna masuk dengan akun Google, Anda dapat menyimpan informasi profil pengguna dalam basis data. Panduan langkah demi langkah berikut akan menunjukkan kepada Anda bagaimana cara menyimpan data pengguna di database MySQL menggunakan jQuery, Ajax, dan PHP.

Buat Tabel Database
Untuk menyimpan informasi akun pengguna dari Google, Anda perlu membuat tabel di basis data. SQL berikut ini membuat tabel pengguna dengan beberapa bidang dasar di database MySQL.

CREATE TABLE `users` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `oauth_provider` varchar(10) COLLATE utf8_unicode_ci NOT NULL,
 `oauth_uid` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
 `first_name` varchar(25) COLLATE utf8_unicode_ci NOT NULL,
 `last_name` varchar(25) COLLATE utf8_unicode_ci NOT NULL,
 `email` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
 `gender` varchar(10) COLLATE utf8_unicode_ci DEFAULT NULL,
 `locale` varchar(10) COLLATE utf8_unicode_ci DEFAULT NULL,
 `picture` varchar(255) COLLATE utf8_unicode_ci DEFAULT NULL,
 `link` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
 `created` datetime NOT NULL,
 `modified` datetime NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

JavaScript Kami akan menggunakan jQuery dan Ajax untuk mengirim informasi profil pengguna ke skrip sisi server dan memasukkan data akun dalam database MySQL. Memuat perpustakaan jQuery di awal kode JavaScript yang ditulis pada langkah sebelumnya.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Panggil fungsi saveUserData () di request.execute () dari panggilan balik onSuccess () dan sampaikan respons Google OAuth. Setelah pembaruan ini, seluruh kode onSuccess () terlihat seperti di bawah ini.

// Sign-in success callback
function onSuccess(googleUser) {
    // Get the Google profile data (basic)
    //var profile = googleUser.getBasicProfile();
    
    // Retrieve the Google account data
    gapi.client.load('oauth2', 'v2', function () {
        var request = gapi.client.oauth2.userinfo.get({
            'userId': 'me'
        });
        request.execute(function (resp) {
            // Display the user details
            var profileHTML = '
Welcome '+resp.given_name+'! Sign out
';
            profileHTML += '<img src="'+resp.picture+'"/>
Google ID: '+resp.id+'
Name: '+resp.name+'
Email: '+resp.email+'
Gender: '+resp.gender+'
Locale: '+resp.locale+'
Google Profile: <a target="_blank" href="'+resp.link+'">click to view profile
';
            document.getElementsByClassName("userContent")[0].innerHTML = profileHTML;
            
            document.getElementById("gSignIn").style.display = "none";
            document.getElementsByClassName("userContent")[0].style.display = "block";
            
            // Save user data
            saveUserData(resp);
        });
    });
}

<?php
// Database configuration
$dbHost     = "localhost";
$dbUsername = "root";
$dbPassword = "root";
$dbName     = "muslimqodr";

// Create database connection
$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);

// Check connection
if ($db->connect_error) {
    die("Connection failed: " . $db->connect_error);
}

Menyimpan Data dalam Database (userData.php)
File userData.php diambil oleh permintaan Ajax untuk menyimpan informasi akun pengguna (Google) dalam database MySQL.

Ambil dan decode data JSON yang diposting.
Periksa apakah data pengguna sudah ada dalam database berdasarkan pada penyedia dan ID OAuth.
Masukkan atau perbarui data pengguna menggunakan PHP dan MySQL.

<?php
// Load the database configuration file
require_once 'dbConfig.php';

// Get and decode the POST data
$userData = json_decode($_POST['userData']);

if(!empty($userData)){
    // The user's profile info
    $oauth_provider = $_POST['oauth_provider'];
    $oauth_uid  = !empty($userData->id)?$userData->id:'';
    $first_name = !empty($userData->given_name)?$userData->given_name:'';
    $last_name  = !empty($userData->family_name)?$userData->family_name:'';
    $email      = !empty($userData->email)?$userData->email:'';
    $gender     = !empty($userData->gender)?$userData->gender:'';
    $locale     = !empty($userData->locale)?$userData->locale:'';
    $picture    = !empty($userData->picture)?$userData->picture:'';
    $link       = !empty($userData->link)?$userData->link:'';
    
    // Check whether the user data already exist in the database
    $query = "SELECT * FROM users WHERE oauth_provider = '".$oauth_provider."' AND oauth_uid = '".$oauth_uid."'";
    $result = $db->query($query);
    
    if($result->num_rows > 0){ 
        // Update user data if already exists
        $query = "UPDATE users SET first_name = '".$first_name."', last_name = '".$last_name."', email = '".$email."', gender = '".$gender."', locale = '".$locale."', picture = '".$picture."', link = '".$link."', modified = NOW() WHERE oauth_provider = '".$oauth_provider."' AND oauth_uid = '".$oauth_uid."'";
        $update = $db->query($query);
    }else{
        // Insert user data
        $query = "INSERT INTO users VALUES (NULL, '".$oauth_provider."', '".$oauth_uid."', '".$first_name."', '".$last_name."', '".$email."', '".$gender."', '".$locale."', '".$picture."', '".$link."', NOW(), NOW())";
        $insert = $db->query($query);
    }
    
    return true;
}
?>

Kesimpulan

Google Sing-in dengan JavaScript adalah cara instan untuk menambahkan fungsi login pengguna di situs web. Dalam kode contoh, kami telah membuatnya mudah untuk mengintegrasikan Google Login tanpa penyegaran halaman menggunakan JavaScript. Skrip ini akan membantu membuat sistem masuk sosial Anda menjadi ramah pengguna karena pengguna dapat masuk dengan akun Google mereka di jendela dialog tanpa meninggalkan halaman web.

#qodralandalus ,
Website : qodr.or.id