AuthClient เป็น Extension สำหรับ Yii Framework 2 ซึ่งทำให้เราสามารถเชื่อมต่อกับ Social Media ได้อย่างง่ายดาย เช่นการเข้าระบบด้วย Facebook, Live, LinkedIn, Google+, Twitter และอื่นๆ
ติดตั้ง Yii Framework 2
ทำการสร้าง Project ชื่อ yii2-social
composer create-project yiisoft/yii2-app-advanced yii2-social
ทำการ init แบบ Development ให้เรียบร้อยดังนี้
ทำ Virtual Host
ทำการตั้งค่า Virtual Host เพื่อรองรับ Callback โดยการเปิด File apachex.x.x/conf/extra/httpd-vhosts.conf
ถึงตอนนี้ให้ทำการ restart apache ให้เรียบร้อย เราจะเข้าเว็บด้วย http://yii2-social.dev เพื่อความสมจริง
แก้ไขไฟล์ hosts
เปิด Notepad แบบ Administrator เพื่อใช้สิทธิ์สูงสุดในการแก้ไขไฟล์
จากนั้นเปิดไฟล์ C:\Windows\System32\drivers\etc\hosts
เพิ่มข้อมูลดังนี้
127.0.0.1 yii2-social.dev
จากนั้นบันทึกเป็นอันเสร็จเรียบร้อย และทดสอบโดยเข้า URL http://yii2-social.dev/
สำหรับบทเรียนรู้นี้เรามาสร้าง Application เพื่อเตรียมพร้อมสำหรับการเชื่อมต่อ AuthClient Extension กันก่อนนะครับ
Facebook Application
การสร้าง Facebook Application เพื่อรองรับการเชื่อมต่อผ่าน AuthClient โดยเข้า URL
https://developers.facebook.com/
จากนั้นเข้าระบบและคลิกเลือกดังนี้
จากนั้นทำการกด Link เพื่อสร้าง Application
จากนั้นใส่ชื่อ Application ที่ต้องการ
จากนั้นใส่ URL ที่ได้กำหนดไว้ ใน virtual host
หลังจากใส่ Site URL เสร็จแล้วสามารถกดปุ่ม Finish บน Wizard ได้เลย และกด Link Skip to Developer Dashboard ได้เลย
จะเข้าสู่หน้า App Dashboard ของ Facebook ดังนี้
Twitter Application
สำหรับการสร้าง Application บน Twitter นั้นสามารถทำได้โดย เข้าระบบแล้วเข้า URL
https://apps.twitter.com/
จากนั้นกดปุ่ม Create New App
จากนั้นใส่รายละเอียดของ App ตามต้องการ ที่สำคัญคือชื่อ App จะต้องไม่ซ้ำ และให้กำหนด URL และ Callback URL ดังต่อไปนี้
จากนั้นกดปุ่ม Create your Twitter application จะปรากฏหน้าแสดงรายละเอียดของ App ดังนี้
Google Application
การสร้าง Application สำหรับ Google Connect สามารถสร้างได้โดยเข้า URL
https://console.developers.google.com
เข้าระบบด้วย Google Account
จากนั้นสร้าง Application ใหม่โดยกดที่ Link Create a Project
จากนั้นใส่ชื่อ Application ตามต้องการ แล้วกดปุ่ม Create
ทำการเปิดการใช้งาน Google+ API
จากนั้นกดปุ่ม Enable
จากนั้นกดปุ่ม Go to Credentials
จากนั้นกำหนดรายละเอียดดังต่อไปนี้
เมื่อกดปุ่ม What credentials do I need? จะปรากฏการตั้งค่าดังนี้
กำหนดรายละเอียดเพิ่มเติม
กดปุ่ม Continue
ทำการ Download ค่า Config เก็บไว้เพื่อนำไปใช้ ใน Yii Framework 2 อีกครั้ง ผมเรียกไฟล์นี้ว่า Google Plus Key นะครับ ตอนตั้งค่าใน Yii Framework จะได้จำได้
Live Application
สำหรับ Microsoft Applications นั้นสามารถเข้าระบบโดยใช้ URL
https://account.live.com/developers/applications
จากนั้นกดปุ่ม Add an App
ใส่ชื่อ Application จากนั้นกดปุ่ม Create application
จะปรากฏรายละเอียด และกดปุ่ม Add Platform
จากนั้นเลือก Web
กำหนดรายละเอียด
หมายเหตุ Microsoft บังคับให้ Redirect URIs เป็น https://
กดปุ่ม Generate Password
กดปุ่ม Save
LinkedIn Application
สำหรับการสร้าง LinkedIn Application ให้เข้า URL
https://www.linkedin.com/developer/apps
ทำการเข้าระบบให้เรียบร้อยจากนั้นกดปุ่ม สร้างแอพพลิเคชั่น
กำหนดรายละเอียด
จากนั้นกำหนดค่าต่างๆ ดังนี้
เป็นอันเสร็จเรียบร้อยแล้ว
เอาล่ะครับ นี่ก็เป็นการสร้าง Application จากผู้ให้บริการค่ายต่างๆ ซึ่งมีขั้นตอนในการสร้าง Application แตกต่างกันไปที่สำคัญนะครับให้จำ Application ID และ Secret Key เพื่อนำมาใช้ใน AuthClient ใน Yii Framework 2 ของเราต่อไปนะครับ ติดตามได้ที่ Part 2 นะครับ
ความคิดเห็น