คำแนะนำการผสาน Facebook Login ใน Android ด้วย Back4App

วิธีการเพิ่มการเข้าสู่ระบบ facebook ในแอป android ของคุณ บทนำ ในคู่มือนี้ คุณจะได้เรียนรู้วิธีการเข้าสู่ระบบโดยใช้ facebook login และ parse user parse user คลาสผ่าน back4app บทเรียนนี้ใช้แอปพื้นฐานที่สร้างขึ้นใน android studio 4 1 1 โดยมี buildtoolsversion=30 0 3 buildtoolsversion=30 0 3 , compile sdk version = 30 compile sdk version = 30 และ targetsdkversion 30 targetsdkversion 30 ในทุกช่วงเวลา คุณสามารถเข้าถึงโปรเจกต์ android ที่สร้างขึ้นโดยใช้บทเรียนนี้ได้ที่ที่เก็บ github ของเรา https //github com/templates back4app/android parse sdk kotlin https //github com/templates back4app/android parse sdk java เป้าหมาย สร้างฟีเจอร์การเข้าสู่ระบบด้วย facebook ในแอป android ของคุณโดยใช้ parse และ back4app ข้อกำหนดเบื้องต้น ในการทำตามบทเรียนนี้ เราต้องการ https //developer android com/studio/index html แอปที่สร้างขึ้นบน back4app หมายเหตุ ติดตาม https //www back4app com/docs/get started/new parse app เพื่อเรียนรู้วิธีการสร้าง parse app บน back4app แอป android ที่เชื่อมต่อกับ back4app หมายเหตุ ติดตาม https //www back4app com/docs/android/parse android sdk เพื่อสร้างโปรเจกต์ android studio ที่เชื่อมต่อกับ back4app อุปกรณ์ (หรือ https //developer android com/studio/run/managing avds html ) ที่รัน android 4 1 (jelly bean) หรือใหม่กว่า 1 การตั้งค่า facebook ในการเริ่มใช้ฟังก์ชัน facebook คุณต้อง ไปที่ https //developers facebook com/ และสร้างบัญชีและแอป ติดตามคู่มือเริ่มต้นอย่างรวดเร็วของ facebook โดย https //developers facebook com/docs/facebook login/android และใส่ใจในคำแนะนำต่อไปนี้ นี่คือขั้นตอนที่รวมอยู่ในคู่มือเริ่มต้นอย่างรวดเร็วของ facebook ซึ่งคุณต้องปฏิบัติตามอย่างระมัดระวัง เนื่องจากคุณจะไม่ปฏิบัติตามอย่างแม่นยำตามที่ facebook แนะนำ ในขั้นตอนที่ 3 แทนที่จะเพิ่ม implementation 'com facebook android\ facebook login \[8 1)' ใน dependencies{} dependencies{} ส่วนที่ build gradle (module\ app) build gradle (module\ app) , เพิ่มโค้ดต่อไปนี้ใน dependencies{} dependencies{} ส่วนที่ build gradle (module\ app) build gradle (module\ app) 1 // update the versions to the latest ones 2 implementation "com github parse community\ parsefacebookutils android\ latest version here" 3 implementation 'com facebook android\ facebook android sdk\ latest version here' อย่าลืมอัปเดตเวอร์ชันของ parse facebook utils sdk สำหรับ android เป็นเวอร์ชันล่าสุด คุณสามารถตรวจสอบว่าเวอร์ชันล่าสุดคืออะไรที่ https //jitpack io/ , โดยทำตามขั้นตอนเหล่านี้ ที่เว็บไซต์ jitpack วาง parse community\ parsefacebookutils android parse community\ parsefacebookutils android ใน git repo url git repo url กล่อง หลังจากทำเช่นนั้น ให้คลิกที่ ค้นหา ค้นหา ปุ่ม จากนั้นคุณควรเห็นเวอร์ชันที่มีให้ของ parse sdk สำหรับ android ตามที่แสดงในภาพด้านล่างนี้ ในขั้นตอนที่ 4 คุณจะถูกขอให้เพิ่มสิทธิ์การเข้าถึงอินเทอร์เน็ตที่ แอปพลิเคชัน แอปพลิเคชัน ใน /app/manifest/androidmanifest xml /app/manifest/androidmanifest xml ไฟล์ แต่คุณได้เพิ่มมันแล้วในขณะที่ติดตาม https //www back4app com/docs/android/parse android sdk คู่มือ ดังนั้นคุณจึงไม่จำเป็นต้องทำสิ่งนี้ ในขั้นตอนที่ 6 คุณจะต้องให้แฮชคีย์ ดังนั้นคุณต้องมี https //www openssl org/ ที่ติดตั้งอยู่ คู่มือของ facebook ไม่ได้ให้คำสั่งในการสร้างแฮชคีย์ใน linux แต่การทำเช่นนั้นง่ายมาก เพราะสิ่งที่คุณต้องทำคือเปิดหน้าต่างเทอร์มินัลและรันคำสั่งต่อไปนี้ keytool exportcert alias androiddebugkey keystore / android/debug keystore | openssl sha1 binary | openssl base64 อย่าทำตามขั้นตอนในคู่มือเริ่มต้นอย่างรวดเร็วของ facebook ทันทีหลังจาก step 6 https //en wikipedia org/wiki/sha 1 (อัลกอริธึมการแฮชที่ปลอดภัย) sha 1 ซึ่งเรียกว่าอัลกอริธึมการแฮชที่ปลอดภัย เป็นอัลกอริธึมการเข้ารหัสที่ใช้กันอย่างแพร่หลายที่สุด sha 1 ถูกออกแบบโดยหน่วยงานความมั่นคงแห่งชาติสหรัฐอเมริกา sha 1 ฟิงเกอร์พริ้นต์เป็นกุญแจเฉพาะที่สร้างขึ้นสำหรับคอมพิวเตอร์ของคุณซึ่งสามารถใช้สำหรับการลงนาม โดยหลักแล้วจะใช้สำหรับการส่งข้อมูลเพื่อใช้กับ api บางตัว (เช่น api ของ facebook ที่เราจะใช้ในคู่มือนี้) หากคุณต้องการเรียนรู้รายละเอียดเพิ่มเติม คุณสามารถเยี่ยมชมหน้า wikipedia ของ sha 1 ได้ คุณควรปฏิบัติตามขั้นตอนอื่น ๆ ที่อธิบายไว้ในคู่มือเริ่มต้นอย่างรวดเร็วของ facebook และไม่ได้กล่าวถึงที่นี่ 2 เชื่อมโยงแอป facebook ของคุณกับ back4app ไปที่แดชบอร์ดแอปของคุณที่ https //www back4app com/ และคลิกที่ การตั้งค่าเซิร์ฟเวอร์ การตั้งค่าเซิร์ฟเวอร์ ค้นหาบล็อก “facebook login” และคลิกที่ การตั้งค่า การตั้งค่า บล็อก “facebook login” จะมีลักษณะดังนี้ 3\ เราต้องเพิ่ม facebook id ของเรา ซึ่งเราได้มาจากคู่มือ facebook ไปยัง string xml (คุณควรได้ทำตามคู่มือ facebook และทำสิ่งนี้ก่อนหน้านี้) ไปที่โปรเจกต์ android studio ของคุณ เปิดไฟล์ strings ของคุณ /app/src/main/res/values/strings xml /app/src/main/res/values/strings xml , คัดลอก facebook app id facebook app id และวางใน facebook appid facebook appid ฟิลด์ของหน้าสุดท้ายของ back4app ที่คุณเปิดอยู่ สุดท้ายกดปุ่ม + + 3 เพิ่มองค์ประกอบผู้ให้บริการในไฟล์ manifest กลับไปที่โปรเจกต์ android studio ของคุณ และภายใน application application องค์ประกอบใน /app/manifest/androidmanifest xml /app/manifest/androidmanifest xml ไฟล์ หลังจาก meta data meta data องค์ประกอบ ให้เพิ่มโค้ดต่อไปนี้ 1 \<provider 2 android\ name="com facebook facebookcontentprovider" 3 \<! don't forget to put your facebook app id in the following link > 4 android\ authorities="com facebook app facebookcontentprovideryour facebook app id" 5 android\ exported="true" /> อย่าลืมใส่ facebook app id ของคุณในโค้ดด้านบนนี้ 4 เริ่มต้น parse facebook util sdks ในโปรเจกต์ android studio ของคุณ ในไฟล์ java ที่เรียกว่า app app ที่ขยาย application ที่คุณสร้างขึ้นเพื่อเริ่มต้น parse sdk ใน oncreate oncreate เมธอด หลังจาก parse initialize() parse initialize() ให้ใช้โค้ดต่อไปนี้เพื่อเริ่มต้น parse facebook utils sdk 1 parsefacebookutils initialize (this); หากคุณไม่มี app java app java ไฟล์ตามที่อธิบายไว้ในขั้นตอนนี้ ให้เข้าถึง https //www back4app com/docs/android/parse android sdk เอกสารและตรวจสอบให้แน่ใจว่าคุณได้ทำตามขั้นตอนทั้งหมดที่จำเป็นในการติดตั้ง parse sdk อย่างถูกต้อง หากคุณไม่ติดตั้ง parse sdk อย่างถูกต้อง การเข้าสู่ระบบ facebook ของคุณกับ parse จะไม่ทำงาน 5 ตั้งค่า ในตอนเริ่มต้นของแต่ละกิจกรรม parse ให้นำเข้าดังต่อไปนี้ 1 import androidx appcompat app appcompatactivity ; 2 import android app alertdialog ; 3 import android app progressdialog ; 4 import android content intent ; 5 import android os bundle ; 6 import android widget button ; 7 import com facebook login loginmanager ; 8 import com parse parseuser ; 6 เข้าสู่ระบบ ในการดำเนินการกิจกรรมการเข้าสู่ระบบของคุณ ให้ทำดังต่อไปนี้ นำเข้าไปยัง loginactivity loginactivity , นอกเหนือจากการนำเข้าขึ้นอยู่ใน ขั้นตอนที่ 4 1 นำเข้า android app alertdialog ; 2 นำเข้า android app progressdialog ; 3 นำเข้า android content intent ; 4 นำเข้า android os bundle ; 5 นำเข้า android util log ; 6 นำเข้า android widget button ; 7 นำเข้า android widget toast ; 8 นำเข้า com facebook accesstoken ; 9 นำเข้า com facebook graphrequest ; 10 นำเข้า com parse parseuser ; 11 นำเข้า com parse facebook parsefacebookutils ; 12 นำเข้า org json jsonexception ; 13 นำเข้า java util arrays ; 14 นำเข้า java util collection ; 2\ เพื่อใช้ facebook login เพียงแค่ใช้โค้ดต่อไปนี้ 1 final progressdialog dialog = new progressdialog(this); 2 dialog settitle("please, wait a moment "); 3 dialog setmessage("logging in "); 4 dialog show(); 5 collection\<string> permissions = arrays aslist("public profile", "email"); 6 parsefacebookutils loginwithreadpermissionsinbackground(this, permissions, (user, err) > { 7 dialog dismiss(); 8 if (err != null) { 9 log e("facebookloginexample", "done ", err); 10 toast maketext(this, err getmessage(), toast length long) show(); 11 } else if (user == null) { 12 toast maketext(this, "the user cancelled the facebook login ", toast length long) show(); 13 log d("facebookloginexample", "uh oh the user cancelled the facebook login "); 14 } else if (user isnew()) { 15 toast maketext(this, "user signed up and logged in through facebook ", toast length long) show(); 16 log d("facebookloginexample", "user signed up and logged in through facebook!"); 17 getuserdetailfromfb(); 18 } else { 19 toast maketext(this, "user logged in through facebook ", toast length long) show(); 20 log d("facebookloginexample", "user logged in through facebook!"); 21 showalert("oh, you!", "welcome back!"); 22 } 23 });1 val dlg = progressdialog(this) 2 dlg settitle("please, wait a moment ") 3 dlg setmessage("logging in ") 4 dlg show() 5 val permissions collection\<string> = listof("public profile", "email") 6 parsefacebookutils loginwithreadpermissionsinbackground(this, permissions) { user parseuser?, err parseexception? > 7 dlg dismiss() 8 when { 9 err != null > { 10 log e("facebookloginexample", "done ", err) 11 toast maketext(this, err message, toast length long) show() 12 } 13 user == null > { 14 toast maketext(this, "the user cancelled the facebook login ", toast length long) show() 15 log d("facebookloginexample", "uh oh the user cancelled the facebook login ") 16 } 17 user isnew > { 18 toast maketext(this, "user signed up and logged in through facebook ", toast length long) show() 19 log d("facebookloginexample", "user signed up and logged in through facebook!") 20 getuserdetailfromfb() 21 } 22 else > { 23 toast maketext(this, "user logged in through facebook ", toast length long) show() 24 log d("facebookloginexample", "user logged in through facebook!") 25 showalert("oh, you!", "welcome back!") 26 } 27 } 28 } ในโปรเจกต์ตัวอย่าง โค้ดนี้ถูกวางไว้ภายใน login via facebook login via facebook การเรียกกลับของปุ่ม 3\ หลังจากการเข้าสู่ระบบที่ประสบความสำเร็จผ่าน facebook ไปยังแอปของเรา เราสามารถรับข้อมูลพื้นฐานของผู้ใช้ที่เข้าสู่ระบบได้ ดังที่คุณเห็น มีวิธีการมากมายที่รวมอยู่ในโค้ดข้างต้น วิธีการ getuserdetailfromfb getuserdetailfromfb มีหน้าที่ในการดึงรายละเอียดของผู้ใช้ นี่คือโค้ดสำหรับวิธีการนี้ 1 private void getuserdetailfromfb() { 2 graphrequest request = graphrequest newmerequest(accesstoken getcurrentaccesstoken(), (object, response) > { 3 parseuser user = parseuser getcurrentuser(); 4 try { 5 if (object has("name")) 6 user setusername(object getstring("name")); 7 if (object has("email")) 8 user setemail(object getstring("email")); 9 } catch (jsonexception e) { 10 e printstacktrace(); 11 } 12 user saveinbackground(e > { 13 if (e == null) { 14 showalert("first time login!", "welcome!"); 15 } else 16 showalert("error", e getmessage()); 17 }); 18 }); 19 20 bundle parameters = new bundle(); 21 parameters putstring("fields", "name,email"); 22 request setparameters(parameters); 23 request executeasync(); 24 }1 private fun getuserdetailfromfb() { 2 val request = 3 graphrequest newmerequest(accesstoken getcurrentaccesstoken()) { `object` jsonobject, graphresponse? > 4 val user = parseuser getcurrentuser() 5 try { 6 user username = `object` getstring("name") 7 } catch (e jsonexception) { 8 e printstacktrace() 9 } 10 try { 11 user email = `object` getstring("email") 12 } catch (e jsonexception) { 13 e printstacktrace() 14 } 15 user saveinbackground { 16 if (it == null) 17 showalert("first time login!", "welcome!") 18 else 19 showalert("error", it message) 20 } 21 } 22 val parameters = bundle() 23 parameters putstring("fields", "name,email") 24 request parameters = parameters 25 request executeasync() 26 } 4\ น่าสนใจที่จะเพิ่มวิธีการในการแสดง alert dialogs และทำให้กระบวนการดูเป็นมืออาชีพมากขึ้น ในฟังก์ชันนี้ เราจะได้รับพารามิเตอร์ผู้ใช้ด้วย เมื่อไปที่หน้า mainactivity เราจะส่งพารามิเตอร์ผู้ใช้นี้ใน intent และใน mainactivity เราจะดึงข้อมูลในผู้ใช้นี้และพิมพ์ลงบนหน้าจอ วิธีการด้านล่างทำสิ่งนี้ 1 private void showalert(string title, string message) { 2 alertdialog builder builder = new alertdialog builder(this) 3 settitle(title) 4 setmessage(message) 5 setpositivebutton("ok", (dialog, which) > { 6 dialog cancel(); 7 intent intent = new intent(this, mainactivity class); 8 intent addflags(intent flag activity clear task | intent flag activity new task); 9 startactivity(intent); 10 }); 11 alertdialog ok = builder create(); 12 ok show(); 13 }1 private fun showalert(title string, message string?) { 2 val builder = alertdialog builder(this) 3 settitle(title) 4 setmessage(message) 5 setpositivebutton("ok") { dialog dialoginterface, which int > 6 dialog cancel() 7 val intent = intent(this\@loginactivity, mainactivity class java) 8 intent addflags(intent flag activity clear task or intent flag activity new task) 9 startactivity(intent) 10 } 11 val ok = builder create() 12 ok show() 13 } 5\ หากคุณต้องการเชื่อมโยง parseuser ที่มีอยู่กับบัญชี facebook คุณสามารถเชื่อมโยงได้ดังนี้ 1 collection\<string> permissions = arrays aslist("public profile", "email"); 2 if (!parsefacebookutils islinked(parseuser getcurrentuser())) { 3 parsefacebookutils linkwithreadpermissionsinbackground(parseuser getcurrentuser(), this, permissions, ex > { 4 if (parsefacebookutils islinked(parseuser getcurrentuser())) { 5 toast maketext(this, "woohoo, user logged in with facebook ", toast length long) show(); 6 log d("facebookloginexample", "woohoo, user logged in with facebook!"); 7 } 8 }); 9 } else { 10 toast maketext(this, "you have already linked your account with facebook ", toast length long) show(); 11 }1 val permissions= listof("public profile","email") 2 if (!parsefacebookutils islinked(parseuser getcurrentuser())){ 3 parsefacebookutils linkwithreadpermissionsinbackground(parseuser getcurrentuser(),this,permissions) { 4 if (parsefacebookutils islinked(parseuser getcurrentuser())){ 5 toast maketext(this, "woohoo, user logged in with facebook ", toast length long) show() 6 log d("facebookloginexample", "woohoo, user logged in with facebook!") 7 } 8 } 9 } else { 10 toast maketext(this, "you have already linked your account with facebook ", toast length long) show() 11 } 12 } ในโปรเจกต์ตัวอย่าง โค้ดนี้ถูกวางไว้ภายใน เชื่อมบัญชีของคุณกับ facebook เชื่อมบัญชีของคุณกับ facebook การเรียกกลับของปุ่ม 6\ หากคุณต้องการยกเลิกการเชื่อมโยง facebook จากผู้ใช้ ให้ทำดังนี้ 1 parsefacebookutils unlinkinbackground(parseuser getcurrentuser(), ex > { 2 if (ex == null) { 3 toast maketext(this, "the user is no longer associated with their facebook account ", toast length long) show(); 4 log d("myapp", "the user is no longer associated with their facebook account "); 5 } else { 6 toast maketext(this, ex getmessage(), toast length long) show(); 7 } 8 });1 parsefacebookutils unlinkinbackground(parseuser getcurrentuser()) { 2 if (it == null) { 3 toast maketext(this,"the user is no longer associated with their facebook account ",toast length long) show() 4 log d("myapp", "the user is no longer associated with their facebook account ") 5 } else { 6 toast maketext(this, it message, toast length long) show() 7 } 8 } ในโปรเจกต์ตัวอย่าง โค้ดนี้ถูกวางไว้ภายใน ยกเลิกการเชื่อมบัญชีของคุณจาก facebook ยกเลิกการเชื่อมบัญชีของคุณจาก facebook การเรียกกลับของปุ่ม 7\ มันเป็น สิ่งสำคัญมาก ที่จะใช้สิ่งต่อไปนี้เป็นวิธีการนอกเหนือจาก oncreate() oncreate() วิธีการของ loginactivity loginactivity เพื่อส่งผลลัพธ์การเข้าสู่ระบบไปยัง loginmanager ผ่าน callbackmanager และหลีกเลี่ยงข้อผิดพลาด 1 @override 2 protected void onactivityresult(int requestcode, int resultcode, intent data) { 3 super onactivityresult(requestcode, resultcode, data); 4 parsefacebookutils onactivityresult(requestcode, resultcode, data); 5 }1 override fun onactivityresult(requestcode int, resultcode int, data intent?) { 2 super onactivityresult(requestcode, resultcode, data) 3 parsefacebookutils onactivityresult(requestcode, resultcode, data) 4 } 7 ออกจากระบบ ในการใช้งาน facebook logout เพียงแค่ใช้โค้ดที่กล่าวถึงด้านล่าง 1 final progressdialog dialog = new progressdialog(this); 2 dialog settitle("please, wait a moment "); 3 dialog setmessage("logging out "); 4 dialog show(); 5 loginmanager getinstance() logout(); 6 parseuser logoutinbackground(e > { 7 if (e == null) 8 showalert("so, you're going ", "ok bye bye then", true); 9 else 10 showalert("error ", e getmessage(), false); 11 });1 val dlg = progressdialog(this) 2 dlg settitle("please, wait a moment ") 3 dlg setmessage("logging out ") 4 dlg show() 5 loginmanager getinstance() logout() 6 parseuser logoutinbackground { e > 7 if (e == null) 8 showalert("so, you're going ", "ok bye bye then", true) 9 else 10 showalert("error ", e message, false) 11 } ในโปรเจกต์ตัวอย่าง โค้ดนี้ถูกวางไว้ภายใน ปุ่ม log out ปุ่ม log out callback วิธีการ alertdisplayer alertdisplayer เป็นวิธีเดียวกับที่คุณเพิ่มใน loginactivity loginactivity , อย่าลืมเปลี่ยน intent intent ของมันด้วย เสร็จเรียบร้อย! ในขั้นตอนนี้ คุณสามารถเข้าสู่ระบบ ลงทะเบียน และออกจากระบบแอปของคุณด้วย facebook โดยใช้ฟีเจอร์หลักของ parse server ผ่าน back4app!