Tạo nút Đăng nhập bằng Google tuỳ chỉnh

Để tạo nút Đăng nhập bằng Google có các chế độ cài đặt tuỳ chỉnh, hãy thêm một phần tử chứa nút đăng nhập vào trang đăng nhập của bạn, viết một hàm gọi signin2.render() với các chế độ cài đặt kiểu và phạm vi, đồng thời đưa tập lệnh https://apis.google.com/js/platform.js có chuỗi truy vấn onload=YOUR_RENDER_FUNCTION vào.

Sau đây là ví dụ về nút Đăng nhập bằng Google chỉ định các tham số kiểu tuỳ chỉnh:

Mã HTML, JavaScript và CSS sau đây tạo ra nút ở trên:

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

Bạn cũng có thể chỉ định chế độ cài đặt cho nút Đăng nhập bằng Google tuỳ chỉnh bằng cách xác định các thuộc tính data- cho phần tử div có lớp g-signin2. Ví dụ:

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

Tạo nút bằng đồ hoạ tuỳ chỉnh

Bạn có thể tạo nút Đăng nhập bằng Google sao cho phù hợp với kiểu thiết kế trang web của mình. Bạn phải tuân thủ nguyên tắc xây dựng thương hiệu cũng như sử dụng màu sắc và biểu tượng thích hợp cho nút. Nguyên tắc sử dụng thương hiệu cũng cung cấp thành phần biểu tượng mà bạn có thể dùng để thiết kế nút. Bạn cũng phải đảm bảo rằng nút của bạn nổi bật như các lựa chọn đăng nhập khác của bên thứ ba.

Sau đây là ví dụ về nút Đăng nhập bằng Google được tạo bằng đồ hoạ tuỳ chỉnh:

Mã HTML, JavaScript và CSS sau đây tạo ra nút ở trên:

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