Hướng dẫn đăng nhập bằng tài khoản Google trên các website

0
324
views

Để cho phép người dùng đăng nhập bằng tài khoản Google trên website của mình bạn cần có một tài khoản Google (Google Plus), đăng nhập vào trình quản lý Google Console và click VÀO ĐÂY, ấn nút Create để tạo một project nếu bạn chưa có project nào.

Ấn vào tab Service và tìm Google+ API, kích hoạt nó lên, trạng thái sẽ chuyển thành màu xanh. Chọn tab API Access rồi click Create an OAuth 2.0 Client ID để tạo một service cho việc đăng nhập.

Điền tên App và chọn ảnh đại diện, một thông số quan trọng cần thêm đó là Javascript origins. Ta cần điền vào URL của trang web cần thực hiện login, nếu là debug thì điền “http://localhost”. Sau đó ấn Update để lưu thông tin lại.

Tạo một project (PHP hoặc C#) trong đó có trang index như sau :

<html>
<head>
  <title>Demo: Getting an email address using the Google+ Sign-in button</title>
     <style type="text/css">
        html, body { margin: 0; padding: 0; }
        .hide { display: none; }
        .show { display: block; }           
     </style>
     <script src="https://apis.google.com/js/client:plusone.js" type="text/javascript"></script>
     <script src="https://apis.google.com/js/plusone.js" type="text/javascript"></script>
     <script type="text/javascript">
        /*  
         * Triggered when the user accepts the sign in, cancels, or closes the
         * authorization dialog.
        */
        function loginFinishedCallback(authResult) {
            if (authResult) {
                  if (authResult[''error''] == undefined) {
                       gapi.auth.setToken(authResult); // Store the returned token.
                       toggleElement(''signin-button''); // Hide the sign-in button after successfully signing in the user.
                       getEmail();  // Trigger request to get the email address.
                  } else {
                      console.log(''An error occurred'');
                  }
             } else {
                  console.log(''Empty authResult'');  // Something went wrong
             }
        }

        /*
           * Initiates the request to the userinfo endpoint to get the user''s email
           * address. This function relies on the gapi.auth.setToken containing a valid
           * OAuth access token.
           *
           * When the request completes, the getEmailCallback is triggered and passed
           * the result of the request.
         */
        function getEmail() {
           // Load the oauth2 libraries to enable the userinfo methods.
           gapi.client.load(''oauth2'', ''v2'', function() {
               var request = gapi.client.oauth2.userinfo.get();
               request.execute(getEmailCallback);
           });
        }

        function getEmailCallback(obj) {
            //send back to server\n                $.post("/home/gplus",obj,function(data) {

            });
            var el = document.getElementById(''email'');
            var email = '''';

            if (obj[''email'']) {
                 email = ''Email: '' + obj[''email''];
            }
            // Uncomment to inspect the full object.
            el.innerHTML = email;
            toggleElement(''email'');
       }

       function toggleElement(id) {
            var el = document.getElementById(id);
            if (el.getAttribute(''class'') == ''hide'') {
                  el.setAttribute(''class'', ''show'');
            } else {
                  el.setAttribute(''class'', ''hide'');
            }
       }
  </script>
  </head>
  <body>
   <div id="signin-button" class="show">
       <div class="g-signin" 
           data-callback="loginFinishedCallback"
           data-approvalprompt="force"
           data-clientid="841077041629.apps.googleusercontent.com"
           data-scope="https://www.googleapis.com/auth/userinfo.email, https://www.googleapis.com/auth/userinfo.profile"
           data-height="short"
           data-cookiepolicy="single_host_origin"
       ></div>
       <!-- In most cases, you don''t want to use approvalprompt=force. Specified
       here to facilitate the demo.-->
   </div>
   <div id="email" class="hide"></div>
  </body>
</html>

lưu ý thuộc tính data-clientid trong thẻ div class="g-signin" chính là clientId mà bạn tạo ở phần API Access trên.
Để nhận được data từ client truyền lên cần tạo một action trên controller home nhận dữ liệu đó:

Code C

[AcceptVerbs(HttpVerbs.Post)]
public JsonResult gplus() {
    var email = Request["email"]

    ...
}

sau đó có thể set trạng thái đã login, lưu session tùy vào ứng dụng của bạn !

BÌNH LUẬN

Please enter your comment!
Please enter your name here