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

Để tạo nút Đăng nhập bằng Google với 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, viết một hàm gọi signin2.render() bằng chế độ cài đặt kiểu và phạm vi của bạn, đồng thời thêm tập lệnh https://apis.google.com/js/platform.js với 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 các 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 đồ hoạ 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ế trang web của mình. Bạn phải tuân thủ các nguyên tắc sử 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. Các 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ể sử dụng để thiết kế nút. Bạn cũng phải đảm bảo rằng nút của mình nổi bật như các tuỳ 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>