ลองเล่น Social Authentication จาก sample code

android Aug 03, 2018
High impact designs for influencers > https://creativemarket.com/NordWood
Photo by NordWood Themes / Unsplash

เราทำงานต้องสามัคคีกัน งานนี้เป็นความร่วมมือกันระหว่าง backend และ frontend ในการทดลอง login ด้วย social network อื่นๆ เพราะคนไม่ได้ใช้ Facebook เพียงอย่างเดียว ยังมีของ Google ไปจนถึง Line เลยมาลองเล่นอะไรสนุกๆดู

ในเมื่อน้อง backend อยากลอง เราก็จัดให้ด้วย sample code เพื่อให้สามารถ proof ได้ว่า เราได้ token กลับไปส่งให้ฝั่ง backend ได้ เรื่อง code เราจะไม่ได้พูดอะไรมาก เราพูดแค่ว่า ทำยังไงให้ใช้ได้มากกว่า 555

ดังนั้นเรามาเริ่มลองกันเลยดีกว่าาาาา

อนุญาตให้พักสายตากับน้องปัญและนุ้งเนยแปปนึงนะ เนื้อหาจะมารัวๆแล้วนะเออ ref : https://media1.tenor.com/images/4555d3f89a606aeba27f57a2d2b2274e/tenor.gif

ลองเล่นของใหม่ไฟกระพริบกับ Line Login version 2.1 ไปด้วยกัน

ปล. เชื่อว่าตอน publish ออกไป ไม่น่าจะตัวใหม่ไฟกระพริบแล้ว บล็อกนี้ถูกดองไว้นานพอควร

ตอนแรกลองทำแอป โดยเปิดหน้าเว็บ url ของตัว line channel ด้วย chrome custom tab ปรากฏว่า มันก็เหมือนหน้าเว็บนั่นแหละ และมันก็อปได้ไหมจากหน้าเว็บ ไม่รู้ว่าทำได้ไหม หรือต้องทำยังไง

หรือจริงๆต้องแบบนี้หว่า แต่ใช้กับ webview นะ

[Tip/Trick] วิธีติดต่อกับ WebView ผ่าน JavascriptInterface มันเท่มาก
อีก 1 ความสามารถที่ทำให้ฝั่ง web และ android ติดต่อกันได้ เช่น ฝั่ง android สามารถ แก้ไข/ดึงค่าบางอย่าง จากเว็บไซต์เพื่อมาประมวลผลบางอย่าง หรือ ฝั่ง web อยากเรียกใช้ method บน android…

และไปเจอใน medium ของ Line Developer Thailand เกี่ยวกับ Line Login version 2.1

LINE Login version 2.1 มีอะไรใหม่บ้าง?
สวัสดีครับ ผมข้าวปั้น เป็น Developer ที่ LINE ครับ เมื่อปลายเดือนกันยายนที่ผ่านมาได้มีโอกาสไปร่วมงาน LINE Developer Day 2017 เป็นงานที่ LINE ปล่อยของเจ๋งๆ มากมาย และหนึ่งในนั้นคือ LINE Login version…

การเริ่มต้นคร่าวๆ คือ สร้าง channel ขึ้นมาอันนึง ที่รองรับตัว Line Login แล้วก็ติ๊กทั้ง Native และ App เพื่อรองรับการเข้าทั้งหน้าเว็บและในแอปของเรา (ขออนุญาตพูดคร่าวๆนะ หวังว่าจะทำตามได้)

ของ android และ iOS ค่อนข้างจะคล้ายๆกัน และทางไลน์เองมีตัวอย่างใน github อยู่แล้ว ไม่ต้องเขียนโค้ดเองเนอะ ลิ้งเราจะแปะเฉพาะของ android นะ git clone อันนี้มา

line/line-sdk-starter-android-v2
A starter application that demonstrates how to use LINE SDK V2 for Android. - line/line-sdk-starter-android-v2

ขั้นตอนการทำตามในนี้ และเรามาสรุปเป็นข้อๆให้เข้าใจง่าย

https://developers.line.me/en/docs/line-login/android/try-line-login/

แน่นอน ต้อง clone โค้ดตัวอย่างออกมาก่อน

$ git clone https://github.com/line/line-sdk-starter-android-v2.git

จากนั้นเราจะ build พัง 555 เนื่องจากมันไม่รู้จัก Line sdk นั่นเอง
จึงต้องไป download ก่อน ที่ https://developers.line.me/en/docs/line-login/downloads แล้ว attack มันออกมา แล้วเอาก็อปปี้ไฟล์ .aar ข้างใน folder ไปไว้ใน app/libs แล้ว sync gradle ใหม่อีกรอบ

ไปที่ constant.java ไปใส่ channel id ของเราลงไป

ไปที่ Line Console -> App settings ใส่ package name ของแอป ซึ่งในนั้นมีบอกอยู่แล้ว และใส่ package signature (fingerprint ของ keysotre) ลงไป

build app ลงเครื่อง แล้วลองเล่นดู ใครที่มี line อยู่ในเครื่องกดปุ่มบนได้เลย ผลที่ได้ มันจะดึงชื่อ, รูปโปรไฟล์, User ID, Status Message, และ Access Token ออกมา พร้อมปุ่มต่างๆด้านล่าง อาทิ get profile, refresh token, verify token, และ logout

เนื่องจากบล็อกดองไว้นาน เลยต้องหาตัวอย่างใหม่มาเพิ่มเพื่อศึกษาการทำงานจาก source code (ตอนแรกจะใช้ของพี่ตี๋ แต่พี่เขาลบออกไปแล้ว) เลยเอาอันที่ลองทำแต่โค้ดยังไม่สวยแถมไม่ใช่ Kotlin เอามาลงกันก่อนเน้อ clone มาก็ดันติด git เขาอีก

mikkipastel/line-sdk-starter-android-v2
test for line login v.2. Contribute to mikkipastel/line-sdk-starter-android-v2 development by creating an account on GitHub.

สรุป ได้แอปที่ดึงข้อมูล profile ของเรา พร้อม access token ให้ทาง backend ใช้กัน ของแอปดูง่ายเนอะ แต่ของเว็บนี่สิ ยากไปเลยนะนี่ แอบไปเห็นมา ใช้คนละท่าเลย


ลองทำ Google Sign-In แบบง่ายๆ ไม่สับสน กันดีกว่า

เราเคยพยายามลองทำ Google Sign-In อยู่ แต่ดูจะยุ่งยากเอามากๆเลย ในเมื่อจัด Line login มาแล้ว งั้นใช้สูตรเดียวกัน คือจะไม่เขียนโค้ดใหม่ เราจะลองใช้โค้ดตัวอย่างแล้วกัน เวลาของเรามีค่าเนอะ 555

Google Sign-In อยู่ใน Google Identity Platform รองรับทั้ง Android, iOS, Web และ TV

ref: https://developers.google.com/identity/

รูปแบบการทำงานแบบคร่าวๆ เป็นแบบนี้

Google Sign-In for Android | Google Developers
Get users into your apps quickly and securely, using a registration system they already use and trust—their Google account.

ขั้นตอนการทำแบบรวบรัดและใช้ได้ เป็นดังนี้

ก่อนอื่น clone code มาก่อน ซึ่ง Android กับ iOS ใช้ sample ตัวนี้ 

$ git clone https://github.com/googlesamples/google-services

ในนี้แบ่งเป็น folder ใหญ่ๆ เป็น Android และ iOS และข้างในแบ่งอีกเป็น Analytics, GCM และ Signin ส่วน iOS จะมี Shared เพิ่มมาด้วยนะ

ดังนั้นเราจะใช้

googlesamples/google-services
A collection of quickstart samples demonstrating the Google APIs for Android and iOS - googlesamples/google-services

ไปดู SDK Manager ลง Google Play Service เวอร์ชั่น 11.8.0 ขึ้นไป บน Android 4.2.2 ขึ้นไป และไปเพิ่มใน gradle สองจุด คือ gradle ของ project

allprojects {
    repositories {
        google()
    }
}

และ gradle ของ module

apply plugin: 'com.android.application'
    ...

    dependencies {
        compile 'com.google.android.gms:play-services-auth:11.8.0'
    }

เรามา config โปรเจกของเรา ใน Google API project ใครยังไม่มีโปรเจกก็ไปสร้างซะ ที่ https://console.developers.google.com

ถ้าอ่านตาม https://developers.google.com/identity/sign-in/android/start หรือ https://developers.google.com/identity/sign-in/android/start-integrating จะเจอปุ่มสีฟ้า CONFIGURE A PROJECT

กดปุ่มนี้แล้วเลือกโปรเจก เลือกว่าเราจะรันที่ไหน ในที่นี้เลือก Android ใส่ package name และ SHA1 ลงไป

จากนั้นสร้าง key fingerprint เพื่อให้ได้ SHA1 แต่ละ OS ก็จะมี path ที่อยู่ต่างกันไป ของ debug.keystore ต่างกันไป

  • ~/.android/ บน OS X และ Linux
  • C:\Documents and Settings\<user>\.android\ บน Windows XP
  • C:\Users\<user>\.android\ บน Windows Vista and Windows 7, 8, และ 10

หลังจากเข้า path พวกนี้แล้ว เราพิมพ์คำสั่งนี้ลงไป แล้วก็อป SHA1 ลงไป

keytool -list -v -keystore debug.keystore -alias androiddebugkey -storepass android -keypass android

ก็อปปี้ cilent user id ไปแปะในโปรเจก ใน string.xml

<string name="server_client_id">SERVER_CLIENT_ID</string>

และดาวน์โหลด configuratio files นามว่า google-service.json ไปใส่ในโปรเจกชั้นเดียวกับ app

กลับไปที่ Developer Console กดที่ Dashboard และกดที่ ENABLE APIS AND SERVICE เลือก Google+ API แล้วไป enable api ซะ

build ลงเครื่อง และใช้ได้เลย

ตัว object account สามารถดึงข้อมูลได้หลายอย่าง เช่น

  • account.getIdToken() : ดึง token ของ user นั้นๆ
  • account.getDisplayName() : ชื่อของเรา
  • account.getEmail() : อีเมลล์ของเรา
  • account.getId() : id ของเรา
  • account.getPhotoUrl() : รูปภาพ profile ของเรา

ถ้าเราเอาโค้ดไปทำเลย โดยที่ก็อป server cilent id และไม่ได้เอา google-service.json ไปใส่ในโปรเจก และ ไม่ได้ enable Google+ API มันจะทำให้ account เป็น null ทำให้ Sign-In ไม่ได้

ตอนแรกไล่ debug จนเจอ แต่หาสาเหตุไม่ได้ว่าทำไม จนมาเจอว่า account เป็น null มาจากไม่ได้ enable Google+ API นั่นเอง

Reference :

Android Code : ทำ Google Plus login ตอนที่ 1

สุดท้ายกับเจ้า Facebook

อันนี้เป็นตัวพื้นฐานของทุกแอปเลยนะ ที่ต้อง login Facebook และลองทำตามข้างล่าวก็เป็นแบบ basic สุดๆ

https://developers.facebook.com/docs/facebook-login/android#

แต่ถ้า custom อะไรบางอย่าง มันก็ไม่ได้ง่ายนะเอาจริงๆ ลองเอาไปเล่นดูได้ที่นี่เลยจ้า แต่ใส่ key เองน๊าา

mikkipastel/testFacebookLogin
trial for sign-in with facebook. Contribute to mikkipastel/testFacebookLogin development by creating an account on GitHub.

และเราสามารถดึงชื่อ รูป profile จาก Facebook ได้ตามนี้เลย

https://developers.facebook.com/docs/facebook-login/android/accesstokens


จบไปสำหรับสามตัวเนอะ ทั้ง Line, Google+ และ Facebook คิดว่าน่าจะเอาไปประยุกต์ใช้ต่อได้ เราเชื่อในศักยภาพ developer ไทยนะ ฮี่ๆ

สุดท้ายฝากร้านกันสักนิด ฝากเพจด้วยนะจ๊ะ

อย่าลืมกด like กด share บทความกันด้วยนะคะ :)

Posted by MikkiPastel on Sunday, 10 December 2017

Tags

Minseo Chayabanjonglerd

Android Developer ผู้เป็นเจ้าของบล็อก MikkiPastel ที่ชอบทำหลายๆอย่างนอกจากเขียนแอพแอนดรอยด์ เช่น เขียนบล็อก เขียนแชทบอท เรียนออนไลน์ อ่านหนังสือ วาดรูปเล่น ดู netfilx สั่งอาหารอร่อยๆกัน เป็นต้น

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.