ลองเล่น LINE Login iOS SDK + Swift 3
เมื่อวันที่ 29 กันยายน 2016 ที่ผ่านมา LINE ได้จัดงาน LINE Developer Day 2016 ขึ้น ซึ่งถือว่าเป็นการเปลี่ยนแปลงครั้งใหญ่ของ LINE เลยทีเดียว มีของใหม่ๆ มาให้นักพัฒนาเล่นเพียบ เช่น LINE Login, LINE Notify, LINE Message API เป็นต้น โดยอ่านรายละเอียดสรุปคร่าวๆ จาก Techsauce ได้ที่
หลังจากที่ผมได้อ่านบทความอันนี้แล้ว ก็เกิดอยากลองทำ LINE Login กับ iOS apps ขึ้นมาทันที เลยลองพยายาม search หาข้อมูลดูว่า พอมีอะไรช่วยเราได้บ้าง จนไปเจอ https://developers.line.me ซึ่งก็มีเนื้อหาอยู่ค่อนข้างครบถ้วนเลยทีเดียว
LINE Login คืออะไร
LINE login ก็เหมือนกับพวก Login with Facebook, Google Sign-In นั่นแหละ คือ มันช่วยให้ user สามารถเข้าใช้งาน apps ของพวกเราได้อย่างง่ายดาย โดยไม่ต้องกรอก username และ password เลย ประกอบกับคนไทยนิยมเล่น LINE กันอยู่แล้ว จึงถือว่าเป็นตัวเลือกที่ดีมากๆ เลย ในการ integrate เข้ากับระบบ login ของ apps เรา อ่านรายละเอียดคร่าวๆ ได้ที่
เอาละ เพื่อไม่ให้เป็นการเสียเวลา เรามาเริ่มเล่นไปพร้อมๆ กันเลย
ขั้นตอนการ Implement LINE Login ใน iOS
- การสร้าง Business account ที่ https://business.line.me/en/ (ฟรี)
- การสร้าง Channel ให้สำหรับ apps ของเรา
- การใช้ LINE Login iOS SDK
Part 1 การสร้าง Business account
อันดับแรกให้ Login เข้าไปด้วย https://business.line.me/en/ เข้าไปด้วย email ที่ผูกกับ LINE Account ของเราก่อน หลังจากนั้นจะขึ้นหน้าให้สร้าง Business account ก็ให้กรอก email ของเราเข้าไป
หลังจากนั้นเข้าไปยืนยันใน mail box ให้เรียบร้อย หลังจากนั้นกลับมาที่ https://business.line.me/en/ แล้ว Add business account เข้าไป (หน้าตาเว็บอาจจะไม่เหมือนกันเท่าไหร่ สำหรับคนที่เพิ่งสมัครเข้ามาครั้งแรก แต่ไม่ต้องห่วง ทำตามสเตป เดี๋ยวได้เองครับ)
โดยให้เลือก Enterprise Type เป็น Sole proprietor ครับ แล้วก็กรอกข้อมูลตามฟอร์มให้ครบถ้วน ทำตามสเตปไปเรื่อยๆ จนได้ Business account มา ก็เป็นอันจบเนื้อหาส่วนนี้แล้ว
Part 2 การสร้าง Channel ให้สำหรับ apps
หลังจากที่เราได้ Business account มาแล้ว ขั้นตอนต่อมาก็เป็นการสร้าง Channel ให้กับ apps ของเรา เพื่อให้ได้ Channel ID มาใช้ใน LINE Login iOS SDK ต่อไป ให้เราเลือกไปที่ service LINE Login
หลังจากนั้นจะพบกับหน้าให้กรอกข้อมูลของ Channel ที่เราจะสร้างขึ้น กรอกให้ครบถ้วน โดย Application Type ให้เลือกเป็น NATIVE_APP กด OK ได้เลย
หลังจากนั้น ให้กดไปที่ปุ่ม Line Developers ด้านล่าง
website จะ redirect ไปที่ LINE developers channel console ให้กดที่ Download SDK ตรงเมนูซ้ายมือ
จะพบหน้าให้ download SDK ทั้ง Android และ iOS
download LineAdapter_3.1.17.zip มาไว้ที่ Mac แล้ว unzip ออกเตรียมไว้สำหรับ Part 3
Part 3 การใช้ LINE Login iOS SDK
LINE ได้เตรียม start project ให้เราไว้ด้วยที่ https://github.com/line/line-sdk-starter-ios ซึ่งมีทั้ง Objective-C และ Swift แต่ผมแนะนำว่า สร้างใหม่ด้วย Xcode 8 โดยใช้ Swift 3 ไปเลยดีกว่า เพราะเราต้อง modified หลายอย่าง เนื่องจาก starter project ตัวนี้ ทำขึ้นใน Q4 2015 (เก่าไปนะ แถม Docs ยังไม่ update อีก นั่งแก้ตั้งนาน กว่าจะทำให้รันกับ Swift 3 ได้ :( )
ให้สร้าง Xcode project อันใหม่ขึ้นมา ตั้ง bundle id ตามใจชอบเลย จากนั้นให้เปิด project ขึ้นมา แล้วออกแบบ layout คล้ายๆ นี้
มีปุ่ม 4 ปุ่ม ส่วนสีดำๆ ด้านล่าง คือ UITextView ที่ set background เป็นสีดำ และ set text font เป็นสีเขียว เอาไว้สำหรับแสดงผลข้อมูลที่ได้รับมาจาก LINE หลังจาก authorized
การเพิ่ม LINE frameworks เข้าไปที่ project
ให้เราไป copy framework 3 อัน และ bundle 1 อัน ที่ได้มาจากการ download LINE Login iOS SDK แล้วลากไปใส่ใน Frameworks ให้เรียบร้อย (เลือก copy if needed ด้วยนะ) พร้อมทั้งเพิ่ม Framework อื่นๆ ของ iOS ด้วย ตามในภาพด้านล่างด้วย โดยยังไม่ต้องสนใจ LineAdapter.plist และ LineSDKDemo bridging header แต่อย่างใด เดี๋ยวจะให้เพิ่มอีกทีครับ
ส่วนวิธีเพิ่ม framwork ของ iOS เอง ให้ไปที่ TARGET -> Build Phases -> Link Binary With Libraries กด + แล้วเพิ่ม ios frameworks ตามที่บอกไปแล้วด้านบนครับ
Linker flag settings
ให้เพิ่ม -ObjC โดยไปที่ TARGETS -> Build Settings -> Other Linker Flags ตามรูปด้านล่าง
URL Types settings
ให้เพิ่ม URL Schemes ไว้สำหรับหลังจาก authenticated จาก LINE apps แล้ว ให้สามารถส่ง data กลับมาที่ apps เราได้
คลิกขวาที่ Info.plist -> Open As -> Source Code จากนั้นวาง xml ก้อนนี้เพิ่มเข้าไป
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleTypeRole</key>
<string>None</string>
<key>CFBundleURLSchemes</key>
<array>
<string>line3rdp.{YOUR_BUNDLE_ID}</string>
</array>
</dict>
</array>โดยให้เปลี่ยน {YOUR_BUNDLE_ID} เป็น bundle id ของแต่ละคน
สร้าง configuration file
สร้างไฟล์ขึ้นมาใหม่ เอาไว้สำหรับให้ LINE Login iOS SDK ใน project เรา สามารถเชื่อมต่อกับ Channel ที่เราสร้างไว้ใน Part 2 ได้ โดยต้องตั้งชื่อว่า LineAdapter.plist เท่านั้น หลังจากนั้นคลิกขวา -> Open As -> Source Code แล้ววาง xml ก้อนนี้ลงไป
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>ChannelId</key>
<string>{YOUR_CHANNEL_ID}</string>
</dict>
</plist>เปลี่ยน {YOUR_CHANNEL_ID} เป็น Channel ID ของแต่ละคนให้เรียบร้อย โดยดูได้จาก line developer channel console ดังรูปด้านล่าง (ลบ Channel ID แปป อิอิ)
การตั้งค่าสำหรับ iOS9+
สำหรับ iOS9 เป็นต้นไป เราจำเป็นต้องเซ็ต Whitelisting the LINE app เพื่อให้สามารถเปิด LINE app จาก apps เราได้ และต้องเซ็ต Whitelisting LINE domains ให้สามารถโหลด API ของ LINE Login iOS SDK ได้ด้วย
Whitelisting the LINE app
ใน Info.plist เพิ่ม
<key>LSApplicationQueriesSchemes</key>
<array>
<string>lineauth</string>
<string>line3rdp.$(APP_IDENTIFIER)</string>
</array>Whitelisting LINE domains
ใน Info.plist เพิ่ม
<key>NSAppTransportSecurity</key>
<dict>
<key>NSExceptionDomains</key>
<dict>
<key>obs.line-apps.com</key>
<dict>
<key>NSIncludesSubdomains</key>
<true/>
<key>NSThirdPartyExceptionAllowsInsecureHTTPLoads</key>
<true/>
<key>NSThirdPartyExceptionRequiresForwardSecrecy</key>
<false/>
</dict>
<key>dl.profile.line-cdn.net</key>
<dict>
<key>NSIncludesSubdomains</key>
<true/>
<key>NSThirdPartyExceptionAllowsInsecureHTTPLoads</key>
<true/>
<key>NSThirdPartyExceptionRequiresForwardSecrecy</key>
<false/>
</dict>
<key>dl.profile.line.naver.jp</key>
<dict>
<key>NSIncludesSubdomains</key>
<true/>
<key>NSThirdPartyExceptionRequiresForwardSecrecy</key>
<false/>
</dict>
<key>lcs.naver.jp</key>
<dict>
<key>NSThirdPartyExceptionRequiresForwardSecrecy</key>
<false/>
</dict>
<key>scdn.line-apps.com</key>
<dict>
<key>NSThirdPartyExceptionRequiresForwardSecrecy</key>
<false/>
</dict>
<key>access.line.me</key>
<dict>
<key>NSThirdPartyExceptionRequiresForwardSecrecy</key>
<false/>
</dict>
<key>api.line.me</key>
<dict>
<key>NSThirdPartyExceptionRequiresForwardSecrecy</key>
<false/>
</dict>
</dict>
</dict>Setup Bridging Header File
เนื่องจาก LINE Login iOS SDK ถูกเขียนด้วย Objective-C ซึ่งถ้าจะเอามาใช้กับ Swift 3 จำเป็นต้องทำเรื่อง bridging header file ด้วย วิธีที่ง่ายที่สุดก็คือ ให้เราสร้างไฟล์ .m ขึ้นมา โดยไปที่ File -> New -> File -> Objective-C File หลังจากนั้น Xcode จะ suggest ให้เราแอด bridging header file ก็กดแอดไป จากนั้นให้เปิดไฟล์นั้นขึ้นมาแล้วเพิ่ม code ตามนี้
#import <LineAdapter/LineAdapter.h>
#import <LineAdapterLogin/LineAdapterLogin.h>
#import <LineAdapterUI/LineAdapterUI.h>ทีนี้เราก็จะสามารถเรียกใช้ LINE framework ใน Swift 3 ได้แล้ว เย้
Technical Configuration
ให้เราไปที่ edit iOS Bundle ID และ iOS Scheme (เหมือนกับ URL Scheme ที่เราเซ็ตไปในหัวข้อ URL Types settings) ใน line developer channel console ด้วย
Implementation
ได้เวลาเขียน code กันซะที setup อย่างยาวนาน เริ่มกันที่ AppDelegate.swift ก่อนเลย เพิ่ม code เข้าไปดังนี้
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
// Override point for customization after application launch.
LineAdapter.handleLaunchOptions(launchOptions)
return true
}func application(_ app: UIApplication, open url: URL, options: [UIApplicationOpenURLOptionsKey : Any] = [:]) -> Bool {
return LineAdapter.handleOpen(url)
}
เป็นการทำให้ apps เราสามารถรับ response กลับมาจาก LINE ได้
ต่อมาไปที่ ViewController.swift แล้วปรับ code เป็นประมาณนี้
lineAdapter = LineAdapter.withConfigFile()สำหรับบรรทัดด้านบนนี้ จะเป็นการสร้าง lineAdapter โดยเชื่อมต่อกับ Channel ID ที่อยู่ใน LineAdapter.plist นั่นเอง นั่นแปลว่า เราจะสามารถเชื่อมต่อกับ LINE ผ่าน Channel ของเราได้แล้ว
อธิบายหลักการทำงาน ViewController.swift ง่ายๆ ก็คือ ในกรณีที่เรามี LINE ลงอยู่ในเครื่อง (คิดว่าทุกคนต้องมีอยู่แล้ว 555) จะไปทำการ authentication ที่ LINE เมื่อเรียบร้อยแล้ว LINE จะส่ง callback result กลับมาให้ apps เรา แต่ถ้าไม่มี LINE ลงในเครื่อง จะไปทำการ authentication ที่ LineAdapterWebViewController ที่เชื่อมต่อเข้ากับ LineAdapterNavigationController แทน ซึ่งทั้งหมดเกิดขึ้นแบบ in apps ไม่มีการไปเปิด Safari ข้างนอกเลย ดีงามมาก
ส่วนวิธีการรับค่าจาก LINE เราจะใช้ NotificationCenter ซึ่งจะทำการ subscribed ไว้ก่อน โดยใช้ LineAdapterAuthorizationDidChange เป็น key และสร้าง func lineAdapterAuthorizationDidChange(with notification: NSNotification) { … } ไว้รับ callback result
ส่วนการ logout ก็แสนจะง่ายดาย เพียงแค่เรียก
lineAdapter.unauthorize()ต่อไป build และ run โปรเจค เพื่อทำการทดสอบได้เลยยย
ลองกดปุ่ม Login with Line App แอปเราจะกระโดดไปเปิด LINE ที่หน้า Verify (รูปซ้ายล่าง) และบอกเราว่า เรากำลังจะเข้าไปใช้งาน Channel อะไร มีการขอ permissions อะไรบ้าง หลังจากนั้นเมื่อกด Allow แล้วจะเด้งกลับมาที่แอปเรา (รูปขวาล่าง)
หรือถ้าเป็นกรณี login ผ่าน WebView ในแอปของเรา ก็จะแสดงหน้าให้กรอก email และ password เพื่อทำการ authentication (รูปซ้ายล่าง)
Get user profiles
สำหรับการ get user profiles ให้เรียก
lineAdapter.getLineApiClient().getMyProfile { (response: [AnyHashable : Any]?, error : Error?) in … }โดยเราสามารถดึงข้อมูล user profile ได้จาก response?[“key”] โดยใช้ key ตามด้านล่างนี้ได้เลย
นอกจากนี้เรายังสามารถดึง access token และ refresh token ได้จาก
self.lineAdapter.getLineApiClient().accessToken
self.lineAdapter.getLineApiClient().refreshTokenผลลัพธ์
รูปซ้ายล่างเป็นหลังจากที่กดปุ่ม Print User Profile (ขอเซ็นเซอร์ access token, refresh token และ uid นิดนึง อิอิ) ส่วนรูปขวาล่างเป็นหลังจากกดปุ่ม Logout แล้วครับ
อ่าน document ต้นฉบับได้ที่
API Reference
เป็นไงบ้างครับ การใช้ LINE Login iOS SDK + Swift 3 ตอนนี้เรายังทำได้เพียงแค่ดึงข้อมูล user profile บางส่วนอยู่ แต่อนาคต LINE น่าจะทำพวก Social API ให้เราดึงข้อมูล feed, chat, group chat ได้แบบ Facebook เลย รับรองสนุกแน่นอนครับ ก็รอติดตามกันต่อไปครับ อยู่ที่เวลาเท่านั้นเอง
สำหรับใครที่สนใจอยากลองเล่น สามารถโหลดตัว Demo ได้ที่ https://github.com/itopstack/LineLogin-iOS-SDK-Demo สำหรับบทความการเกาะกระแส LINE บทความนี้ ก็จบลงแต่เพียงเท่านี้ หากมีข้อผิดพลาดประการใด ก็ขออภัยมา ณ ที่นี้ด้วยครับ พบกันใหม่ บทความหน้า สำหรับวันนี้ ลากันไปก่อน สวัสดีครับ :)
ติดตามเรื่องราวต่างๆ ทั้งเทคโนโลยี มุมมองชีวิต การเรียนรู้ การใช้ชีวิต ได้ที่ https://www.facebook.com/itopstory/
