Thêm Button Đăng Nhập Google Vào Blogspot Cực Dễ Dàng

Admin
Thêm Button Đăng Nhập Google Vào Blogspot Cực Dễ Dàng

Thi thoảng bạn vẫn thấy nút đăng nhập bằng google trên một số Website. Bạn muốn thêm nó vào chính website của bạn nhưng không biết cách thực hiện hoặc đã xem qua cách tạo nhưng vẫn chưa làm được thì hãy xem bài viết này, chúng tôi sẽ Hướng Dân Thêm Button Đăng Nhập Google Vào Blogspot Cực Dễ Dàng Giúp Blog Của Bạn Trở Nên Chuyên Nghiệp Hơn

Lí Do Bạn Nên Thêm Button Đăng Nhập Bằng Google Vào Blog

Khi thêm button đăng nhập bằng google vào blog sẽ :

  • Giúp Bạn Thu Thập Được Dữ Liệu.
  • Thích Hợp Cho Trang Web Dạng Hỏi Đáp Mà Sử Dụng Tài Khoản Google Để Tra Lời
  • Phù Hợp Với Dạng Web dạng thống kê, phân tích cần số phiếu bầu từ tài khoản Google
  • Chèn dưới khung nhận xét cho khách khi comment.

Cách Thêm Button Đăng Nhập Bằng Google Vào Blogspot


Bước 1: Truy cập vào Url:https://developers.google.com/identity/sign-in/web/sign-in và tạo cho mình 1 project bằng cách click vào CONFIGURE A PROJECT


Sau khi tạo xong bạn sẽ nhận được dòng mã như hình bên dưới :


Bước 3: Sau khi đã có mã các bạn chèn Scrip sau vào blog:

<script src="https://apis.google.com/js/api:client.js"></script>
<script>//<![CDATA[
gapi.load('auth2', function() {
  gapi.auth2.init({
client_id: "NHẬP MÃ CỦA BẠN TẠI ĐÂY"
    scope: "profile email"
  }).then(function(auth2) {
    attachSignin(document.querySelector('.g-signin'))
    if (auth2.isSignedIn.get() == true) {
      var profile = auth2.currentUser.get().getBasicProfile()
      console.log(profile.getName())
      console.log(profile.getEmail())
      document.querySelector('.g-signout').innerHTML='<div class="abcRioButton abcRioButtonBlue" tabindex="0"><div class="abcRioButtonContentWrapper"><div class="abcRioButtonIcon"><div class="abcRioButtonIconImage"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="abcRioButtonSvg"><g><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path><path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path><path fill="none" d="M0 0h48v48H0z"></path></g></svg></div></div><span class="abcRioButtonContents">Đăng xuất</span></div></div>'
    } else {
      document.querySelector('.g-signin').innerHTML='<div class="abcRioButton abcRioButtonBlue" tabindex="0"><div class="abcRioButtonContentWrapper"><div class="abcRioButtonIcon"><div class="abcRioButtonIconImage"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 48 48" class="abcRioButtonSvg"><g><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path><path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path><path fill="none" d="M0 0h48v48H0z"></path></g></svg></div></div><span class="abcRioButtonContents">Đăng nhập</span></div></div>'
    }
    function attachSignin(element) {
      auth2.attachClickHandler(element, {},
        function(googleUser) {
          var profile = googleUser.getBasicProfile()
          console.log(profile.getName())
          console.log(profile.getEmail())
          document.querySelector('.g-signin').innerHTML=''
          document.querySelector('.g-signout').innerHTML='<div class="abcRioButton abcRioButtonBlue" tabindex="0"><div class="abcRioButtonContentWrapper"><div class="abcRioButtonIcon"><div class="abcRioButtonIconImage"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="abcRioButtonSvg"><g><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path><path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path><path fill="none" d="M0 0h48v48H0z"></path></g></svg></div></div><span class="abcRioButtonContents">Đăng xuất</span></div></div>'
        })
    }
  })
})
document.querySelector('.g-signout').addEventListener('click', function() {
  var auth2 = gapi.auth2.getAuthInstance()
  auth2.signOut().then(function() {
    document.querySelector('.g-signin').innerHTML='<div class="abcRioButton abcRioButtonBlue" tabindex="0"><div class="abcRioButtonContentWrapper"><div class="abcRioButtonIcon"><div class="abcRioButtonIconImage"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 48 48" class="abcRioButtonSvg"><g><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path><path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path><path fill="none" d="M0 0h48v48H0z"></path></g></svg></div></div><span class="abcRioButtonContents">Đăng nhập</span></div></div>'
    document.querySelector('.g-signout').innerHTML=''
  })
})
//]]></script>

Bước 4: Tiếp đó các bạn chèn code sau vào nơi mà bạn muốn button hiển thị:

<div class="g-signin">
</div>
<div class="g-signout">
</div>

Bổ sung: Style sign up và sign in:

.g-signin, .g-signout {
    display: inline-block;
}
.abcRioButton {
    -webkit-border-radius: 1px;
    border-radius: 1px;
    -webkit-box-shadow 0 2px 4px 0px rgba(0,0,0,.25): ;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.25);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: background-color .218s,border-color .218s,box-shadow .218s;
    transition: background-color .218s,border-color .218s,box-shadow .218s;
    -webkit-user-select: none;
    -webkit-appearance: none;
    background-color: #fff;
    background-image: none;
    color: #262626;
    cursor: pointer;
    outline: none;
    overflow: hidden;
    position: relative;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    height: 36px;
    width: 120px;
}
.abcRioButtonBlue {
    background-color: #4285f4;
    border: none;
    color: #fff;
}
.abcRioButtonContentWrapper {
    height: 100%;
    width: 100%;
}
.abcRioButtonBlue .abcRioButtonContentWrapper {
    border: 1px solid transparent;
}
.abcRioButtonIcon {
    float: left;
}
.abcRioButtonBlue .abcRioButtonIcon {
    background-color: #fff;
    -webkit-border-radius: 1px;
    border-radius: 1px;
}
.abcRioButtonBlue .abcRioButtonIcon {
    padding: 8px;
}
.abcRioButtonIconImage {
    width: 18px;
    height: 18px;
}
.abcRioButtonSvg {
    display: block;
    height: auto;
    width: auto;
    min-width: auto;
}
.abcRioButtonContents {
    font-family: Roboto,arial,sans-serif;
    font-size: 13px;
    line-height: 34px;
    font-weight: 500;
    letter-spacing: .21px;
    margin-left: 6px;
    margin-right: 6px;
    vertical-align: top;
}

LỜI KẾT


Bên trên là cách để thêm button đăng nhập bằng google vào blog. Nếu có thắc mắc gì hãy comment xuống dưới để được giải đáp

Tags
Reactions

Đăng nhận xét

0 Nhận xét