Hướng dẫn login bằng tài khoản Google Plus và lấy thông tin người dùng


Để có thể làm được bạn cần đăng ký một tài khoản Gmail (Google Plus), đăng nhập vào và click VÀO ĐÂY, ấn nút Create để tạo một project nếu bạn chưa đăng ký.

Ấn vào tab Service tìm Google+ API bật nó lên, sẽ có màu xanh.

Chọn tab API Access rồi click Create an OAuth 2.0 Client ID để tạo một service đă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 (0)

Bình luận (<{ numberComments }>)

  • avatar
    <{ comment.author.username }> Reply
    <{ comment.createdAt | date:'yyyy-MM-dd HH:mm:ss' }>
    • avatar
      <{ reply.author.username }>
      <{ reply.createdAt | date:'yyyy-MM-dd HH:mm:ss' }>