ทำระบบ Login เข้าใช้งานเว็บไซต์ด้วย Google+ Login ~ AiNoTsubasa

ถ้าพูดถึงเว็บ Social Media แล้ว เพื่อน ๆ ก็คงจะนึกถึง Facebook กันใช่ม่ะ แต่ในความเป็นจริง นอกจาก Facebook แล้วก็ยังมีเว็บ Social Media อีก Platform นึงอยู่นะ..... Google+ (Google Plus) ชื่อนี้คนทั่วไปอาจจะไม่ค่อยรู้จักกันสักเท่าไหร่ แต่ก็ถือเป็นเว็บ Social Media อีกเว็บที่ Google เป็นเจ้าของ ซึ่งแน่นอนว่าเราสามารถเข้าใช้งาน Google+ ด้วย account ของ Google ได้

แม้ว่า Google+ จะไม่ค่อยประสบความสำเร็จและเป็นที่นิยมเท่ากับ Facebook สักเท่าไหร่ แต่ทาง Google ก็ได้เปิด API ให้นักพัฒนาสามารถนำ Google+ Login ไปใช้ในการยืนยันตัวตนเพื่อเข้าใช้งานเว็บไซต์ภายนอกได้เหมือนกับ Facebook ซึ่งในบทความที่แล้วนู้นนนน เราได้ผนวก Facebook Login เข้ากับเว็บไซต์ของเราไปแล้ว ในบทความนี้เรามาลองผนวก Google+ Login เข้ากับเว็บไซต์ของเรากันบ้างดีกว่า เย่!

การจะใช้งาน Google+ Login นั้น อันดับแรกจะต้องเปิดการใช้งาน Google+ API แล้วสร้าง Client ID ที่จะใช้ในการเรียก Library ของ Google ก่อน ถัดไปก็โหลด Library เข้าไปที่เว็บ แล้วสร้างปุ่มไว้เรียกใช้งาน Login API แค่นี้ก็เป็นอันเสร็จ ว่าแล้วก็อย่ารอช้า ลุยที่ขั้นตอนแรกกันเลยดีกว่า

เปิดการใช้งาน Google+ API

เริ่มต้นด้วยการเข้าไปที่ Google API Console

คลิกปุ่ม Create หรือ สร้าง เพื่อทำการสร้างโปรเจ็กต์ใหม่

จัดตั้งชื่อให้เรียบร้อยแล้วคลิกปุ่ม สร้าง (Create)

คลิกที่ เปิดใช้ API และบริการ (Enable APIs & Services)

ให้ค้นหาแล้วก็คลิกไปที่ Google+ API

คลิกเบา ๆ ที่ปุ่ม เปิดใช้ (Enable) โล้ดดดดด

หลังจากเปิดการใช้งาน Google+ API แล้ว ขั้นตอนถัดไปให้คลิกที่ API และบริการ (APIs & Services) ตรงมุมซ้ายบน แล้วจึงคลิกที่ ข้อมูลรับรอง (Credentials) ตรงแถบเมนูด้านซ้าย

คลิกที่แท็บ "หน้าจอคำยินยอม OAuth" จากนั้นให้กรอกชื่อแอปพลิเคชัน และ email โดยชื่อแอปพลิเคชันจะเป็นชื่อที่แสดงให้ผู้ใช้งานเห็นก่อนจะทำการ Login ถัดไปให้เลื่อนลงมาข้างล่าง แล้วคลิกที่ปุ่ม บันทึก (Save)

ในแท็บ "ข้อมูลรับรอง" ให้คลิกที่ สร้างข้อมูลรับรอง (New credentials) จะมีตัวเลือกปรากฏออกมา ให้เลือกที่ รหัสไคลเอ็นต์ OAuth (OAuth client ID)

ตรงประเภทของแอปพลิเคชันให้เลือกเป็น "เว็บแอปพลิเคชัน" (Web application) แล้วเลื่อนลงมาข้างล่าง ในส่วนของ JavaScript เริ่มต้นที่ได้รับอนุญาต ให้กรอก URL ของเว็บไซต์ที่จะเรียกใช้งาน JavaScript Library กด Enter จากนั้นจึงคลิกปุ่ม สร้าง (Create)

พอสร้างเสร็จแล้วจะมี OAuth client dialog box แสดงขึ้นมา ให้ก็อปปี้ "รหัสไคลเอ็นต์" (Client ID) และ "รหัสลับไคลเอ็นต์" (Client secret) เอาไว้ โดยใน dialog box จะมีแจ้งว่า OAuth มีขีดจำกัดการใช้งาน เนื่องจาก OAuth นี้ยังไม่ได้รับการเผยแพร่จากทาง Google ถ้าอยากเผยแพร่แอปพลิเคชัน จะต้องรอให้ Google ตรวจสอบความน่าเชื่อถือแอปพลิเคชันของเราก่อน

การจะส่งแอปพลิเคชันให้ Google ตรวจสอบ จำเป็นต้องเข้าไปที่เมนู "ข้อมูลรับรอง" (Credentials) คลิกที่แท็บ หน้าจอคำยินยอม OAuth (OAuth consent screen) จากนั้นให้เพิ่ม URL หน้าแรกของเว็บไซต์ และ URL นโยบายความเป็นส่วนตัว (Privacy Policy URL) เมื่อกรอกข้อมูลเรียบร้อยค่อยคลิกปุ่ม ส่งเพื่อการยืนยัน แล้วก็รอการตรวจสอบจาก Google โดยจะมี email แจ้งความคืบหน้าส่งมาให้

หลังจากที่เราได้ Client ID มาแล้ว อันดับต่อไปก็จะเป็นการเขียนโค้ดสร้างปุ่ม Login ซึ่งในบทความนี้จะแบ่งวิธีใช้งานปุ่ม Login ออกเป็นสองแบบ นั่นคือ ใช้งานปุ่ม Login ของ Google หรือใช้งานปุ่ม Login ของเราเอง ซึ่งทั้งสองวิธีจะมีการเขียนโค้ดที่แตกต่างกันเล็กน้อย เอาล่ะ มาลงมือเขียนโค้ดกันเลยดีกว่า

เพิ่ม Google Sign-In ลงในเว็บไซต์

1. Sign-In ด้วยปุ่ม Login ของ Google

ทำการเพิ่ม JavaScript Library ที่จำเป็นเข้าไปในเว็บไซต์ด้วยการเพิ่มโค้ดดังต่อไปนี้ลงไปภายใน <head>

<meta name="google-signin-scope" content="profile email">
<meta name="google-signin-client_id" content="YOUR_CLIENT_ID">
<script src="https://apis.google.com/js/platform.js" async defer></script>

โดยแก้ไข YOUR_CLIENT_ID ให้เป็นค่า Client ID ที่ได้จากการสร้างเมื่อสักครู่ เท่านี้ก็เสร็จสิ้นการเพิ่ม JavaScript Library ลงไปในเว็บไซต์ของเราแล้ว

ขั้นตอนต่อไปจะเป็นการเขียนโค้ดแสดงปุ่ม Login ของ Google และ textarea สำหรับแสดงผลการ Login ให้เพิ่มโค้ดดังต่อไปนี้ลงไปภายใน <body>

<div class="g-signin2" data-onsuccess="onSignIn" data-theme="dark"></div>
<br>
Result: <textarea id="result"></textarea>

เพิ่มปุ่ม Login เสร็จแล้ว ต่อไปให้เขียนโค้ดสำหรับแสดงผลการ Login ให้เพิ่มโค้ดดังต่อไปนี้ลงไปภายใน <body>

<script>
  function onSignIn(userInfo) {
    var result = '';
    
    // Useful data for your client-side scripts:
    var profile = userInfo.getBasicProfile();
    
    result+= "ID: "+profile.getId()+"\n";
    result+= "Full Name:  "+profile.getName()+"\n";
    result+= "Given Name: "+profile.getGivenName()+"\n";
    result+= "Family Name: "+profile.getFamilyName()+"\n";
    result+= "Email: "+profile.getEmail()+"\n";
    result+= "ID Token: "+userInfo.getAuthResponse().id_token+"\n";
    
    document.getElementById("result").value = result;
  };
</script>

จากโค้ดด้านบน ฟังก์ชัน onSignIn() จะทำการรับข้อมูลผู้ใช้งานมา จากนั้นก็แสดงผลใน textarea ซึ่งเมื่อคลิกปุ่ม Login ของ Google แล้ว จะเป็นการเรียกใช้งานฟังก์ชันจาก JavaScript Library ถ้า Login Account ได้สำเร็จ ก็จะไปเรียกใช้งานฟังก์ชัน onSignIn() เพื่อแสดงผลข้อมูลของผู้ใช้

แค่นี้ก็เสร็จแล้ว วิธีนี้ถือเป็นวิธีที่ง่ายมาก เนื่องจากเราไม่ต้องทำอะไรเลย แค่เพิ่ม JavaScript Library และสร้างปุ่มของ Google ขึ้นมาบนหน้าเว็บก็จบแล้ว ต่อไปเรามาดูวิธีที่สองกันว่าจะยากง่ายยังไง

....................

2. Sign-In ด้วยปุ่ม Login ของเราเอง

วิธีที่สองนี้ เริ่มต้นด้วยการเพิ่ม JavaScript Library ลงในเว็บไซต์เหมือนกับวิธีแรก โดยเพิ่มโค้ดดังต่อไปนี้ลงไปภายใน <head>

<script src="https://apis.google.com/js/platform.js?onload=bindGpLoginBtn" async defer></script>

จะเห็นได้ว่าโค้ดเปลี่ยนไปจากวิธีแรกนิดหน่อยโดยมี ?onload=bindGpLoginBtn พ่วงท้ายเข้ามา ซึ่งเจ้าข้อความที่เพิ่มเข้ามาหมายถึง เมื่อโหลด Library เสร็จแล้วให้เรียกใช้งานฟังก์ชัน bindGpLoginBtn ต่อทันที

ขั้นตอนต่อไปจะเป็นการเขียนโค้ดแสดงปุ่ม Login ของ Google และ textarea สำหรับแสดงผลการ Login ให้เพิ่มโค้ดดังต่อไปนี้ลงไปภายใน <body>

<button id="gp-login-btn">Sign in with Google</button>
<br>
Result: <textarea id="result"></textarea>

ปุ่มที่เราได้เพิ่มเข้ามาในวิธีที่สองนี้เป็นเพียงปุ่มธรรมดา ๆ แตกต่างจากปุ่มในวิธีแรก เพราะงั้นเราจะต้องผูก event เข้ากับปุ่ม เมื่อมีการคลิกปุ่มก็ให้ไปเรียกฟังก์ชัน Login ของ Google

อันดับต่อไปให้เขียนโค้ดผูก event เข้ากับปุ่ม เพื่อจัดการการ Login โดยเพิ่มโค้ดดังต่อไปนี้ลงไปภายใน <body>

<script>
  function bindGpLoginBtn() {
    gapi.load('auth2', function(){
      auth2 = gapi.auth2.init({
        client_id: 'YOUR_CLIENT_ID',
        scope: 'profile email'
      });
      attachSignin(document.getElementById('gp-login-btn'));
    });
}
   
  function attachSignin(element) {
    auth2.attachClickHandler(element, {},
      function(googleUser) {
        // Success
 getCurrentGpUserInfo(googleUser);
      }, function(error) {
 // Error
 console.log(JSON.stringify(error, undefined, 2));
      }
    );
  }

  function getCurrentGpUserInfo(userInfo) {
    var result = '';
    
    // Useful data for your client-side scripts:
    var profile = userInfo.getBasicProfile();
    
    result+= "ID: "+profile.getId()+"\n";
    result+= "Full Name:  "+profile.getName()+"\n";
    result+= "Given Name: "+profile.getGivenName()+"\n";
    result+= "Family Name: "+profile.getFamilyName()+"\n";
    result+= "Email: "+profile.getEmail()+"\n";
    result+= "ID Token: "+userInfo.getAuthResponse().id_token+"\n";
    
    document.getElementById("result").value = result;
}
</script>

ในโค้ดด้านบนให้แก้ไข YOUR_CLIENT_ID ให้เป็นค่า Client ID ที่ได้จากการสร้างเมื่อสักครู่ โดยฟังก์ชัน bindGpLoginBtn จะถูกเรียกให้ทำงานเพื่อกำหนดค่าและผูก event เข้ากับปุ่ม โดยเมื่อมีการกดปุ่มก็จะไปเรียกใช้งานฟังก์ชัน Login จาก JavaScript Library ถ้า Login ได้สำเร็จก็จะเรียกใช้งานฟังก์ชัน getCurrentGpUserInfo() เพื่อแสดงข้อมูลของผู้ใช้งาน

....................

หลังจากเขียนโค้ดเสร็จทั้งสองวิธีแล้ว อันดับถัดไปก็ถึงเวลาทดสอบโค้ดที่เขียนแล้ว โดยรูปฝั่งซ้ายเป็นปุ่มของ Google ส่วนรูปฝั่งขวาจะเป็นปุ่มที่เราสร้างขึ้นเอง

เมื่อคลิกปุ่มแล้ว จะมีป๊อปอัพขึ้นมาถามว่าจะ Login ด้วย Account อะไร พร้อมทั้งมีข้อความแจ้งว่า "Google จะส่งข้อมูลชื่อและ email ให้กับแอปพลิเคชันนี้" ซึ่งถ้าเรา Login ก็หมายความว่าเรายินยอมที่จะเป็นการแบ่งข้อมูลให้กับเว็บไซต์ ซึ่งจุดนี้ก็จะเหมือนกับป๊อปอัพที่ขึ้นมาถามในบทความ Facebook Login ให้เพื่อน ๆ อ่านสักนิดก่อนที่จะ Login นะจ๊ะ

หลังจาก Login แล้วก็ได้ข้อมูลของผู้ใช้งานมาแสดงตามรูป..... Done! สำหรับบทความนี้ก็ขอจบลงเพียงแค่นี้ เอาไว้พบกันใหม่บทความหน้า บ๊ายบาย

ไฟล์โค้ด: AiNoTsubasa's Github

ของแถม!!!

ถ้าต้องการให้มีปุ่ม Logout ให้เพิ่มโค้ดดังต่อไปนี้ลงไปภายใน <body> จ้า

<button onclick="signOut();">Sign out</button>
<script>
  function signOut() {
    var auth2 = gapi.auth2.getAuthInstance();
    auth2.signOut().then(function () {
      console.log('User signed out.');
    });
  }
</script>

AiNoTsubasa

Blog สบาย ๆ ของ Developer ชิล ๆ ที่ชื่นชอบในเทคโนโลยี, การเขียนโปรแกรม, การอ่านหนังสือ และภาษาญี่ปุ่น

วันพฤหัสบดีที่ 4 ตุลาคม พ.ศ. 2561