Cách chèn nút đăng nhập Google vào Blog

Tác dụng khi chèn nút đăng nhập Google vào Blog mà ai cũng có thể thấy được đó là ngay trong hộp thoại đăng nhập có đề cập đến đoạn: “Để tiếp tục, Google sẽ chia sẻ tên, địa chỉ email và ảnh hồ sơ của bạn…” điều đó có nghĩa là với bất kỳ tài khoản Google nào đã đăng nhập vào trang web của bạn thì bạn sẽ thu thập được dữ liệu như trên mà Google chia sẻ.

Mình phân tích rõ thêm một chút về cách thức đăng nhập thông qua nút đăng nhập Google mà bạn chèn vào trang web:

Giả sử bạn đang có một tài khoản Goolge và sau đây có một số trường hợp xảy ra bạn cần nắm rõ:

+ Trường hợp bạn đã đăng nhập trên một trình duyệt web ví dụ như Chorme chẳng hạn. Khi bạn truy cập trang web nào đó đã chèn nút đăng nhập và tất nhiên bạn phải đăng nhập thông qua nút đó để Google chia sẻ dữ liệu đăng nhập cho trang web đó và quyền đăng nhập hay không là tùy ở bạn.

+ Trường hợp bạn chưa đăng nhập trên trình duyệt nhưng lại đăng nhập thông qua nút đăng nhập của trang web thì đồng nghĩa bạn cũng đã đăng nhập luôn trên trình duyệt.

+ Trong trường hợp nếu trang web đó có chèn thêm nút đăng xuất và khi bạn sử dụng nút đó để đăng xuất khỏi trang web tức là thoát tài khoản khỏi trang web đó thì trang web sẽ không lấy được dữ liệu từ tài khoản đã đăng xuất.

+ Cuối cùng nếu bạn chọn đăng xuất tài khoản khỏi trình duyệt thì đồng nghĩa bạn cũng vừa đăng xuất khỏi trang web mà bạn đã đăng nhập trước đó.

Tại sao bạn nên sử dụng nút đăng nhập cho trang web của mình? Có một vài nguyên nhân sau đây:

+ Bạn muốn thu thập dữ liệu từ tài khoản đăng nhập để hiển thị.
+ Trang web của bạn về hỏi đáp trong đó sử dụng tài khoản Google để trả lời
+ Trang web bạn dạng thống kê, phân tích cần số phiếu bầu từ tài khoản Google
+ Hay đơn giản bạn muốn chèn nút đăng nhập ngay bên dưới khung nhận xét để khách truy cập đăng nhập.
+ …

Cách chèn nút đăng nhập Google vào Blogger

Thật ra trang web Google đã hướng dẫn rồi chỉ cần bạn hiểu chút là có thể chèn được nút đăng nhập vào Blog, nhưng điều quan trọng nhất bạn cần có được đoạn mã mà Google nhận dạng có tên google-signin-client_id và để lấy được đoạn mã này bạn cần phải tạo một project trong đó có tên và thêm tên miền trang web của bạn vào project đó.

Bạn truy cập địa chỉ: https://developers.google.com/identity/sign-in/web/sign-in và tạo cho mình một project nếu chưa có, bạn click vào dòng CONFIGURE A PROJECT để bắt đầu tạo một project mới.

Khi bạn tạo xong, bạn sẽ được cung cấp google-signin-client_id mới như hình minh họa bên dưới:

– Khi có được google-signin-client_id bạn chèn thẻ meta có lưu google-signin-client_id trước thẻ </head> của Chủ đề như ví dụ

Copy


<meta content='209844211141-r1edo4r22rvrga35shbi86m5fnvkv8kr.apps.googleusercontent.com' name='google-signin-client_id'/>

– Tiếp theo bạn cần chèn thư viện javascript của Google trước thẻ đóng </body>

Copy


<script async='' defer='' src='https://apis.google.com/js/platform.js'></script>

– Khi chèn script xong bạn cần đặt nút đăng nhập vào vị trí muốn hiển thị của trang bằng đoạn sau:

Copy


<div class="g-signin2" data-onsuccess="onSignIn" data-theme="dark"></div>

Cuối cùng bạn cần xử lý khi người dùng sau khi đăng nhập thông qua trang web của bạn bằng đoạn script chèn ngay trên link <script src=’/platform.js’/> mà bạn đã chèn trước </body>

+ Trường hợp mình muốn ẩn nút đăng nhập:

Copy


<script>//<![CDATA[

function onSignIn(googleUser) {

  var profile = googleUser.getBasicProfile();

  $('.g-signin2').hide();

}

//]]></script>

+ Hoặc sau khi ẩn nút đăng nhập và thay thế bằng nút đăng xuất:

Copy


<style>

.abcRioButton {

    height: 36px;

    width: 120px;

}

.abcRioButtonBlue .abcRioButtonIcon {

    padding: 8px;

}

.abcRioButtonIconImage {

    width: 18px;

    height: 18px;

}

.abcRioButtonContents {

    font-size: 13px;

    line-height: 34px;

}

</style>

<script>//<![CDATA[

function onSignIn(googleUser) {

  var profile = googleUser.getBasicProfile();

  $('.g-signin2').hide();

  $('.g-signout').append('<div class="abcRioButton abcRioButtonBlue"><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>');

}

$('.g-signout').click(function() {

  var auth2 = gapi.auth2.getAuthInstance();

  auth2.signOut().then(function () {

    $('.g-signin2').show();

    $('.g-signout').empty();

  });

});

//]]></script>

+ Hoặc mình muốn hiển thị thông tin của tài khoản:

Copy


<script>//<![CDATA[

function onSignIn(googleUser) {

  var profile = googleUser.getBasicProfile();

  $('.g-signin2').hide();

  $('.g-signout').append('<div class="abcRioButton abcRioButtonBlue"><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>');

  $('.gb_wb').append('<div class="box_tin"><p>ID: '+  profile.getId() +'</p><p>Full Name: '+  profile.getName() +'</p><p>Image URL: '+  profile.getImageUrl() +'</p><p>Email: '+ profile.getEmail() +'</p></div>');

}

$(".g-signout").click(function() {

  var auth2 = gapi.auth2.getAuthInstance();

  auth2.signOut().then(function () {

    $('.g-signin2').show();

    $('.gb_wb,.g-signout').empty();

  });

});

//]]></script>