การทำระบบ Social Connect ด้วย AuthClient Part 1

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 นะครับ