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

Để tạo nút Đăng nhập bằng Google bằng 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, hãy viết một hàm gọi điện signin2.render() với các chế độ cài đặt kiểu và phạm vi. và bao gồm tập lệnh https://apis.google.com/js/platform.js 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 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 data- thuộc tính cho một 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 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. Các nguyên tắc sử dụng thương hiệu cũng hãy 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 mình 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 hình ả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>