การใช้ Facebook เพื่อจัดการระบบ Login และ User ด้วย Titanium Mobile

หลังจากที่เราได้ทำความรู้จักกับ API ที่มีไว้สำหรับเชื่อมต่อ Application ของเรากับ Facebook ไปแล้วในบทความ Titanium Mobile กับ Facebook มาถึงในบทความนี้ก็จะกล่าวถึงวิธีการใช้ Facebook ในการ Login เพื่อเข้าใช้งานใน Application ของเรา เหมือนกับหลาย ๆ Application ที่นิยมใช้กันนะครับ




สิ่งที่เราจะต้องทำการจัดเตรียมก่อนเป็นอันดับแรกเลยนั้นก็คือ Facebook App ID ครับ โดยเราสามารถไปสร้างได้ที่ developers.facebook.com ตามภาพนะครับ


หลังจากนั้นเราก็มาที่ Titanium  Studio กันต่อเลยครับ เริ่มกันด้วยการกำหนด App ID ให้กับ Titanium.Facebook กันก่อนครับ ด้วยคำสั่ง
Titanium.Facebook.appid = "253673451435346";
จากนั้นทำการกำหนด Permission ให้กับ Application ของเราครับ
Titanium.Facebook.permissions = ['publish_stream'];
ในส่วนของ Permission นั้น สามารถเข้าไปดูทั้งหมดได้ที่ Facebook Permission List 
***เพิ่มเติมสำหรับ iOS นะครับ เราจะต้องเพิ่ม Config บางอย่างลงไปใน tiapp.xml สำหรับการเชื่อมต่อกับ Facebook ครับ โดยสิ่งที่เราต้องเพิ่มคือ
<property name="ti.facebook.appid">253673451435346</property>
มาต่อกันเลยนะครับ จากที่เคยได้กล่าวเอาไว้ในบทความก่อนหน้า Titanium Mobile กับ Facebook การ Login เข้าสู่ Facebook นั้นสามารถทำได้ 2 วิธีด้วยกัน นั่นก็คือ
  • Titanium.Facebook.authorize 
  • Titanium.Facebook.LoginButton
เรามาเริ่มกันที่วิธีแรกกันก่อนครับ เข้าสู่ Application ด้วย Titanium.Facebook.authorize สามารถเขียนคำสั่งเพื่อเรียกใช้งานดังนี้ครับ
Titanium.Facebook.appid = '253673451435346';
Titanium.Facebook.permissions = ['publish_stream']; 
Titanium.Facebook.addEventListener('login', function(e) {
    if (e.success) {
        alert('Logged In');
    } else if (e.error) {
        alert(e.error);
    } else if (e.cancelled) {
        alert("Canceled");
    }
});
Titanium.Facebook.authorize();
เมื่อทำการรัน ออกมาก็จะพบกับหน้าจอ แบบนี้ครับ

หน้าจอสำหรับ  Login เข้า Facebook
Facebook จะถามเพื่อให้เรารับ Application ของเรา

หน้าจอสำหรับ การ ให้สิทธิการเข้าถึง Profile
 เมื่อเรากดที่ปุ่ม Allow All ก็จะพบกับ Message แบบนี้ครับ


เป็นอันเรียบร้อยในส่วนของ การ Login ด้วย คำสั่ง Titanium.Facebook.authorize

มาต่อกันที่วิธีที่ 2 ครับ วิธีการนี้จะเป็นการสร้างปุ่ม LoginButton สำหรับการเรียกหน้าจอการ Login เข้าสู่ Facebook ครับ สำหรับวิธีการก็สามารถเขียนด้วยคำสั่งแบบนี้ครับ

Titanium.Facebook.appid = '253673451435346';
Titanium.Facebook.permissions = ['publish_stream'];
Titanium.Facebook.addEventListener('login', function(e) {
    if (e.success) {
        alert('Logged in');
    }
});
    
win.add(Titanium.Facebook.createLoginButton({
    top : 50,
    style : Titanium.Facebook.BUTTON_STYLE_WIDE
}));

** อย่าลืมสร้าง Window มารองรับก่อนนะครับ
เมื่อทำการรันก็จะพบกับหน้าจอแบบนี้ครับ


เมื่อกดที่ปุ่ม Login with Facebook ก็จะเข้าสู่หน้าจอการ Login ตามลำดับ

ในส่วนของการ Logout จาก Facebook สามารถสั่งให้ Application ของเรา Logout ออกจาก Facebook ได้ด้วยคำสั่ง

Titanium.Facebook.logout();

เป็นอย่างไรกันบ้างครับสำหรับการ Login เข้าสู่ Application ด้วย Facebook จะเห็นได้ว่า สามารถทำได้อย่างง่ายดายเลยนะครับ ในบทความหน้านั้นผมจะแนะนำวิธีการดังข้อมูล Profile ของ User มาใช้งานนะครับ

2 ความคิดเห็น: