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

Để tạo nút Đăng nhập bằng Google 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, viết một hàm gọi signin2.render() bằng 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 vào bằng chuỗi truy vấn onload=YOUR_RENDER_FUNCTION.

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 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 hình ảnh tuỳ chỉnh

Bạn có thể tạo nút Đăng nhập bằng Google cho phù hợp với thiết kế của trang web. Bạn phải tuân thủ nguyên tắc sử dụng thương hiệu và sử dụng màu sắc cũng như biểu tượng thích hợp trong nút. Nguyên tắc sử dụng thương hiệu cũng cung cấp các thành phần biểu tượng mà bạn có thể sử 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>