Kami menghentikan Platform Perpustakaan Google Sign-In JavaScript untuk web . Untuk otentikasi dan user masuk, menggunakan Layanan Identity Google SDK baru untuk kedua Web dan Android sebagai gantinya.

Membuat tombol Masuk Google khusus

Untuk membuat tombol Masuk dengan Google dengan setelan khusus, tambahkan elemen yang berisi tombol masuk ke laman masuk Anda, tulis fungsi yang memanggil signin2.render() dengan setelan gaya dan cakupan Anda, dan sertakan https://apis.google.com/js/platform.js dengan string kueri onload=YOUR_RENDER_FUNCTION .

Berikut adalah contoh tombol Masuk dengan Google yang menentukan parameter gaya khusus:

Kode HTML, JavaScript, dan CSS berikut menghasilkan tombol di atas:

<html>
<head>
  <meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">
</head>
<body>
  <div id="my-signin2"></div>
  <script>
    function onSuccess(googleUser) {
      console.log('Logged in as: ' + googleUser.getBasicProfile().getName());
    }
    function onFailure(error) {
      console.log(error);
    }
    function renderButton() {
      gapi.signin2.render('my-signin2', {
        'scope': 'profile email',
        'width': 240,
        'height': 50,
        'longtitle': true,
        'theme': 'dark',
        'onsuccess': onSuccess,
        'onfailure': onFailure
      });
    }
  </script>

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

Anda juga dapat menentukan setelan untuk tombol Masuk Google khusus dengan menentukan atribut data- ke elemen div dengan kelas g-signin2 . Sebagai contoh:

<div class="g-signin2" data-width="300" data-height="200" data-longtitle="true">

Membangun tombol dengan grafik khusus

Anda dapat membuat tombol Masuk dengan Google agar sesuai dengan desain situs Anda. Anda harus mengikuti pedoman pencitraan merek dan menggunakan warna dan ikon yang sesuai di tombol Anda. Panduan branding juga menyediakan aset ikon yang dapat Anda gunakan untuk mendesain tombol Anda. Anda juga harus memastikan bahwa tombol Anda sama menonjolnya dengan opsi login pihak ketiga lainnya.

Berikut adalah contoh tombol Masuk dengan Google yang dibuat dengan grafik khusus:

Kode HTML, JavaScript, dan CSS berikut menghasilkan tombol di atas:

<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
  <script src="https://apis.google.com/js/api:client.js"></script>
  <script>
  var googleUser = {};
  var startApp = function() {
    gapi.load('auth2', function(){
      // Retrieve the singleton for the GoogleAuth library and set up the client.
      auth2 = gapi.auth2.init({
        client_id: 'YOUR_CLIENT_ID.apps.googleusercontent.com',
        cookiepolicy: 'single_host_origin',
        // Request scopes in addition to 'profile' and 'email'
        //scope: 'additional_scope'
      });
      attachSignin(document.getElementById('customBtn'));
    });
  };

  function attachSignin(element) {
    console.log(element.id);
    auth2.attachClickHandler(element, {},
        function(googleUser) {
          document.getElementById('name').innerText = "Signed in: " +
              googleUser.getBasicProfile().getName();
        }, function(error) {
          alert(JSON.stringify(error, undefined, 2));
        });
  }
  </script>
  <style type="text/css">
    #customBtn {
      display: inline-block;
      background: white;
      color: #444;
      width: 190px;
      border-radius: 5px;
      border: thin solid #888;
      box-shadow: 1px 1px 1px grey;
      white-space: nowrap;
    }
    #customBtn:hover {
      cursor: pointer;
    }
    span.label {
      font-family: serif;
      font-weight: normal;
    }
    span.icon {
      background: url('/identity/sign-in/g-normal.png') transparent 5px 50% no-repeat;
      display: inline-block;
      vertical-align: middle;
      width: 42px;
      height: 42px;
    }
    span.buttonText {
      display: inline-block;
      vertical-align: middle;
      padding-left: 42px;
      padding-right: 42px;
      font-size: 14px;
      font-weight: bold;
      /* Use the Roboto font that is loaded in the <head> */
      font-family: 'Roboto', sans-serif;
    }
  </style>
  </head>
  <body>
  <!-- In the callback, you would hide the gSignInWrapper element on a
  successful sign in -->
  <div id="gSignInWrapper">
    <span class="label">Sign in with:</span>
    <div id="customBtn" class="customGPlusSignIn">
      <span class="icon"></span>
      <span class="buttonText">Google</span>
    </div>
  </div>
  <div id="name"></div>
  <script>startApp();</script>
</body>
</html>