ทำระบบ Sign-in ด้วย Gmail บน iOS

สวัสดีครับวันนี้ผมจะมาสอนทำ sign in application ด้วย gmail กัน

gmail เป็นอีเมลที่ผู้ใช้งานเยอะเพราะเพียงมี gmail ก็ใช้ sign-in ได้ทุกบริการของ google ไม่ว่าจะเป็น youtube , google+ หรือ แม้กระทั้ง smart phone ที่เป็น ระบบปฏิบัติการ android จึงเห็นว่าน่าสนใจจึงนำมาสอนเพื่อนๆ เรามาเริ่มกันเลยดีกว่าครับ ปู้นๆ

1.New project

ก่อนอื่นเลยให้ new project ขึ้นมาก่อน โดยเปิดโปรแกรม Xcode เลือก Create a new Project ดังภาพ

เลือก Single View Application แล้วกด next

หลังจากนั้นให้ตั้งชื่อโปรเจคที่ Project Name ได้ตามใจชอบเลย

ใส่ชื่อผู้พัฒนาที่ Orgenization Name

เลือกภาษาที่จะใช้เขียน language

เลือกอุปกรณ์ที่แอปของเราลองรับ Devices

หลังจากนั้นกดปุ่ม next

2. ติดตั้ง Firebase ให้กับโปรเจคของเรา

หลังจากที่สร้างโปรเจคขึ้นมาแล้วให้ไปที่ Firebase แล้วทำการ Create New Project จะมีให้กรอก iOS bundle ID คือ bundle ID ของแอปเรานั้นเอง , App nickname เป็นชื่อแอปของเรา ( ไม่จำเป็นต้องชื่อเดียวกันกับโปรเจคก็ได้นะครับ ) ดังภาพ

เราสามารถดู iOS bundle ID ได้โดยให้ไปที่โปรเจค Xcode ของเราไปที่ชื่อโปรเจค

แล้ว copy bundle Identifier ไปใส่ bundle ID ที่ Firebase ดังภาพ

เมื่อกรอกครบแล้วให้กด Add App ได้เลย

หลังจากกด Add App จะขึ้นหน้าให้เราโหลดไฟล์ GoogleService-Info ดังภาพ

จะได้ไฟล์ GoogleService-Info.plist ให้นำไปใส่ใน โปรเจคของเรา

จากนั้นเปิด Terminal ขึ้นมาแล้วพิมพ์

cd เว้นวรรค ตามด้วยที่อยู่ของโฟร์เดอร์โปรเจคแล้วกด Enter

แล้วพิมพ์คำสั่ง ----> pod init (อย่าพึ่งปิด Terminal นะครับ)

หลักจากนั้น จะได้ไฟล์ Podfile มาในโฟร์เดอร์โปรเจค

ให้เปิดไฟล์ Podfile ขึ้นมา แล้วพิมพ์คำสั่งเพิ่ม pod ต่างๆดังภาพ

เมื่อเพิ่ม pod ต่างๆดังภาพเสร็จเรียบร้อยให้ทำการ save

แล้วเปิด Terminal ที่เปิดค้างไว้ขึ้นมาอีกครั้งหนึ่ง

แล้วพิมพ์---> pod install ตามภาพด้านล่าง

รอจนติดตั้งเสร็จสิ้นจะขึ้นว่า Pod installtion complete

ให้กลับไปเปิดโฟร์เดอร์โปรเจคขึ้นมาจะได้ไฟล์โปรเจค นามสกุล .xcworkspace มาดังภาพ ซึ่งเราจะใช้ไฟล์นี้ในการเขียนแอปกัน

3. นำ REVERSED CLIENT ID มาเพิ่มใน info.plist ในโปรเจค

หากเปิดไฟล์โปรเจคอยู่ให้ทำการปิดหน้าต่างโปรเจคไปก่อน แล้วจึงเปิดไฟล์โปรเจค workspace ขึ้นมา ตอนแรกเปิดมาอาจตกใจเพราะมีโฟร์เดอร์ Pods ขึ้นมาด้วย เราไม่ต้องสนใจ ให้เปิดโปรเดอร์ที่เป็นชื่อโปรเจคของเรา ก็จะพบกับไฟล์ต่างๆเหมือนสร้างโปรเจคปกติ

หลังจากนั้นให้ทำการเปิดไฟล์ GoogleService.swift ขึ้นมา แล้วทำการ copy ในส่วนของ REVERSED_CLIENT_ID มาดังภาพ

แล้วไปที่ (1) info ของโปรเจค เลือกเมนู (2) URL Types กดเพิ่มตรงปุ่ม (3) +

หลังจากกดปุ่มบวกแล้วจะให้นำ REVERSED_CLIENT_ID ที่ copy มาจากหน้า GoogleService.plist มาวางในช่อง URL Schemes แล้วกด Enter ดังภาพ

4. Config Firebase ใน AppDelegate

ทำการเปิดไฟล์ AppDelegate ขึ้นมาเพื่อ config ค่า firebase และ เพิ่มฟังก์ชัน google sing-in โดยพิมพ์โค้ดตามภาพดังนี้

5. ออกแบบหน้า UI หน้า Sign in และเขียนโค้ดควบคุมการทำงาน

ออกแบบหน้า UI sign in โดยใช้ view มาเป็น button ของปุ่มในการ sign in ปรับขนาดตามความเหมาะสม ดังภาพ

หลังจากนั้นให้ view subclass ไปที่ GIDSignInButton

เขียนโค้ดควบคุมการทำงานในหน้า ViewController ดังนี้

เมื่อเสร็จแล้ว run จะได้หน้าตา sign in เป็นดังภาพ

6. หน้า Profile User

ให้สร้างหน้ารายละเอียดของ user ที่ sign in เข้ามามีการแสดง ชื่อ , อีเมล , รูป ของผู้ใช้งาน โดยให้ให้สร้าง Navigation Controller ขึ้นมาอีก 1 หน้า โดยในหน้านี้จะประกอบไปด้วย UIimage เพื่อแสดงภาพ และ label เพื่อข้อมูลของ user