การใช้ Facebook เพื่อจัดการระบบ Login และ User ด้วย Titanium Mobile
หลังจากที่เราได้ทำความรู้จักกับ API ที่มีไว้สำหรับเชื่อมต่อ Application ของเรากับ Facebook ไปแล้วในบทความ Titanium Mobile กับ Facebook มาถึงในบทความนี้ก็จะกล่าวถึงวิธีการใช้ Facebook ในการ Login เพื่อเข้าใช้งานใน Application ของเรา เหมือนกับหลาย ๆ Application ที่นิยมใช้กันนะครับ
สิ่งที่เราจะต้องทำการจัดเตรียมก่อนเป็นอันดับแรกเลยนั้นก็คือ Facebook App ID ครับ โดยเราสามารถไปสร้างได้ที่ developers.facebook.com ตามภาพนะครับ
จากนั้นทำการกำหนด Permission ให้กับ Application ของเราครับ
ในส่วนของ Permission นั้น สามารถเข้าไปดูทั้งหมดได้ที่ Facebook Permission List
***เพิ่มเติมสำหรับ iOS นะครับ เราจะต้องเพิ่ม Config บางอย่างลงไปใน tiapp.xml สำหรับการเชื่อมต่อกับ Facebook ครับ โดยสิ่งที่เราต้องเพิ่มคือ
มาต่อกันเลยนะครับ จากที่เคยได้กล่าวเอาไว้ในบทความก่อนหน้า Titanium Mobile กับ Facebook การ Login เข้าสู่ Facebook นั้นสามารถทำได้ 2 วิธีด้วยกัน นั่นก็คือ
เมื่อเรากดที่ปุ่ม Allow All ก็จะพบกับ Message แบบนี้ครับ
เป็นอันเรียบร้อยในส่วนของ การ Login ด้วย คำสั่ง Titanium.Facebook.authorize
มาต่อกันที่วิธีที่ 2 ครับ วิธีการนี้จะเป็นการสร้างปุ่ม LoginButton สำหรับการเรียกหน้าจอการ Login เข้าสู่ Facebook ครับ สำหรับวิธีการก็สามารถเขียนด้วยคำสั่งแบบนี้ครับ
** อย่าลืมสร้าง Window มารองรับก่อนนะครับ
เมื่อทำการรันก็จะพบกับหน้าจอแบบนี้ครับ
เมื่อกดที่ปุ่ม Login with Facebook ก็จะเข้าสู่หน้าจอการ Login ตามลำดับ
ในส่วนของการ Logout จาก Facebook สามารถสั่งให้ Application ของเรา Logout ออกจาก Facebook ได้ด้วยคำสั่ง
เป็นอย่างไรกันบ้างครับสำหรับการ Login เข้าสู่ Application ด้วย Facebook จะเห็นได้ว่า สามารถทำได้อย่างง่ายดายเลยนะครับ ในบทความหน้านั้นผมจะแนะนำวิธีการดังข้อมูล Profile ของ User มาใช้งานนะครับ
สิ่งที่เราจะต้องทำการจัดเตรียมก่อนเป็นอันดับแรกเลยนั้นก็คือ 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
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 |
เป็นอันเรียบร้อยในส่วนของ การ 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 มาใช้งานนะครับ
ขอบคุณครับ
ตอบลบรอตอนต่อไป
.
ตอบลบ