Android : ตัวอย่างการ Log in ด้วย Facebook

octoboy | พฤศจิกายน 26, 2014 | Android | 1 ความเห็น

สวัสดีผู้อ่านทุกคนครับ แหม่ๆหนึ่งสัปดาห์ผ่านไปเร็วจริงๆไม่นานจากบทความ “การ import Facebook SDK” วันนี้เราจะมาลองใช้ Facebook SDK กันครับ โดยตัวอย่างในวันนี้คือการ Login Facebook ด้วยแอพพลิเคชั่นของเราครับ ครั้งนี้ก็มีโค้ดตัวอย่างพร้อมอธิบายเช่นเดิมแต่ท้ายบทความมีตัวอย่างปัญหาที่อาจเกิดขึ้นพร้อมวิธีแก้ไขด้วย หากพร้อมแล้วเรามาเตรียมตัวก่อนที่จะนำตัวอย่างไปใช้กัน

ก่อนนำตัวอย่างไปใช้

1. หากผู้อ่านต้องการรันตัวอย่างผ่านอีมูเลเตอร์ต้องทำตามบทความ การติดตั้ง Facebook บน Emulator ก่อนครับ

2. ในตัวอย่างทำการนำเข้า (import) Facebook SDK ไว้ให้แล้ว แต่หากใครยังไม่รู้เรื่องการ import Facebook SDK แนะนำให้ลองศึกษาจาก การ import Facebook SDK ก่อนครับ

โค้ดตัวอย่าง

สามารถดาวน์โหลดได้จากลิงค์นี้ครับ FacebookLogin.zip ต้องเพิ่ม app id เองนะครับ (การลงทะเบียนขอ app id ดูได้จากข้างล่างครับ รวมถึงการนำ app id ไปวางตรงส่วนไหนด้วย) ตัวอย่างยังไม่สามารถทำได้นะครับ ต้องไปทำตามหัวข้อ “การลงทะเบียนแอพพลิเคชั่นกับเฟซบุ๊ค”

** ตัวอย่างนี้ผมได้มากจาก javatechig.com นำมาตัดส่วนที่ไม่ได้เกี่ยวกับบทความออกนิดหน่อย

อธิบายโค้ดตัวอย่าง

activity_main.xml

ในหน้านี้ทำการเพิ่มปุ่มล๊อคอินเฟซบุ๊ค โดยการเพิ่มโค้ดข้างล่างไว้แบบนี้ครับ (ในส่วนนี้เฟซบุ๊คได้ทำไว้ให้เราเรียกใช้ได้เลยครับ)

   <com.facebook.widget.LoginButton  
     android:id="@+id/authButton"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:layout_gravity="center_horizontal"  
     android:layout_marginTop="30dp"  
     />

MainActivity.java

ส่วนนี้ทำหน้าที่ควบคุม เมื่อมีการกดปุ่มล๊อคอิน จะทำการระบุตัวตน (หาจากแอพพลิเคชั่นเฟซบุ๊คในเครื่องของเรานั้นหละ) และเมื่อเรายืนยันตัวตนสำเร็จ ปุ่มก็จะถูกเปลี่ยนเป็นล๊อคเอ๊าท์ และ ข้อความข้างล่างปุ่มก็จะเปลี่ยนเป็น Hello ตามด้วยชื่อของคุณโดยการทำงานดังกล่าวทำงานในฟังก์ชั่น setUserInfoChangedCallback ครับ รายละเอียดเพิ่มเติมของ com.facebook.widget.LoginButton

 public class MainActivity extends FragmentActivity {  
   
   @Override  
   protected void onCreate(Bundle savedInstanceState) {  
     super.onCreate(savedInstanceState);  
     setContentView(R.layout.activity_main);  
 
     userName = (TextView) findViewById(R.id.user_name);  
     loginBtn = (LoginButton) findViewById(R.id.authButton);  
     loginBtn.setUserInfoChangedCallback(new LoginButton.UserInfoChangedCallback() {  
       @Override  
       public void onUserInfoFetched(GraphUser user) {  
         if (user != null) {  
           userName.setText("Hello, " + user.getName());  
         } else {  
           userName.setText("You are not logged");  
         }  
       }  
     });  
   }  
 }

AndroidManifest.xml

ใน AndroidManifest ของเราจำเป็นต้องเพิ่ม 3 สิ่งคือสิทธิในการใช่อินเตอร์เน็ต, เพิ่ม LoginActivity (แต่เป็นของแอพพลิเคชั่นเฟซบุ๊ค) และ แอพไอดี (app_id) อันนี้เราต้องทำการลงทะเบียนแอพพลิเคชั่นไอดีกับเฟซบุ๊คแล้วนำมาใส่

1. เพิ่มโค้ดข้างล่างในการขอสิทธิในการใช้อินเตอร์เน็ต

 <uses-permission android:name="android.permission.INTERNET" />

2. เพิ่มโค้ดข้างล่างเพื่อเพิ่ม LoginActivity

 <activity android:name="com.facebook.LoginActivity" />

3. เติมโค้ดข้างล่างอีกนั้นหละครับ เพื่อเพิ่ม app_id (ไอดีตรงนี้เราจะไปสมัครในขั้นตอนต่อไปนะครับ)

     <meta-data  
       android:name="com.facebook.sdk.ApplicationId"  
       android:value="@string/app_id" />

การลงทะเบียนแอพพลิเคชั่นกับเฟซบุ๊ค

1. สมัครสมาชิก Facebook Developer อันนี้ผมจะไม่อธิบายขั้นตอนนะครับลองสมัครดูไม่ยาก

2. เมื่อสมัครเสร็จไปที่แถบ Apps -> Add a New App

3. เลือก Android

4. และตั้งชื่อ แอพพลิเคชั่นของเราครับ และ เลือกหมวดหมู่แอพพลิเคชั่นของเราให้เรียบร้อย

5. หลังจากนั้นกลับมาที่แถบ Apps -> ชื่อแอพพลิเคชั่นของเรา

6. เจอหน้า Dashboard หน้าตาแบบนี้ครับ ตรงนี้หละครับที่เราจะนำ App ID มาใส่ใน string.xml ของเรา

7. นำ app_id ไปใส่ใน string.xml ดังนี้

 <string name="app_id"> ..... app id ของเรา </string>

8. หลังจากนั้นไปที่ Settings ที่แถบด้านซ้าย และ กดปุ่ม +Add Platform (ขั้นตอนนี้คือการเพิ่มให้แอพพลิเคชั่นบนระบบแอนดรอย์ของเรามีสิทธิ์เข้าใช้บริการของเฟซบุ๊คผ่าน แอพพลิเคชั่นไอดีนี้

9. เลือกแอนดรอย์ (คงเลือกไม่ผิดกันนะ)

10. จะพบหน้าต่างแบบข้างล่างครับโดยมีลายละเอียดการเติมคำในช่องว่างดังนี้

– โดยส่วนแรกให้เติม Package ของโปรเจ็คเราครับ

– ส่วนที่สอง คือคลาสที่เราใช้ครับ

– ส่วนสุดท้าย คือ key hash ครับได้มายังไงเดี๋ยวดูขั้นต่อไป

– Single Sign On เปิดให้เป็น on ครับ

11. การได้มาซึ้ง Key Hash มีวิธีการดังนี้ให้พิมพ์คำสั่งด้านล่างที่ cmd หรือ terminal ครับและเมื่อเราได้ Key Hash มาแล้วให้นำมาเติมคำในช่องว่างด้วยนะครับ

สำหรับ Linux และ OSX

 keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64

สำหรับ windows

 keytool -exportcert -alias androiddebugkey -keystore %HOMEPATH%\.android\debug.keystore | openssl sha1 -binary | openssl base64

ครับในที่สุดก็จบลงหวังว่าจะไม่งงกันนะครับ เนื่องจากมีขั้นตอนในการลงทะเบียนแอพพลิเคชั่นซึ่งอาจจะทำให้งงกันอยู่บ้าง แต่ถ้าทำตามขั้นตอนอย่างใจเย็นทุกขั้นตอนก็คงไม่มีปัญหาอะไร สุดท้ายแล้วเรามารันแอพพลิเคชั่นให้ชื่นใจกันดีกว่า หากใครพบปัญหา ลองดูว่าเราทำตามขั้นตอนถูกต้องหรือไม่ (ข้างล่างบทความผมมีวิธีแก้ปัญหา Invalid Key hash หากเรามั่นใจว่าเราได้ทำตามขั้นตอนข้างบนได้ถูกต้องแล้วยังเกิดปัญหา)

ผลลัพธ์ตัวอย่าง

ปัญหาที่อาจจะเจอ

1. เมื่อเราทำการใส่ key hash ถูกต้องตามที่เราสร้างได้แล้ว แต่ยังเกิดปัญหา Invalid Key hash ให้แก้โดยการใส่โค้ดข้างล่างไว้ใน MainActivity.java

   public static void showHashKey(Context context) {  
     try {  
       PackageInfo info = context.getPackageManager().getPackageInfo(  
           "com.example.octoboy.facebooklogin", PackageManager.GET_SIGNATURES); //Your      package name here  
       for (Signature signature : info.signatures) {  
         MessageDigest md = MessageDigest.getInstance("SHA");  
         md.update(signature.toByteArray());  
         Log.i("KeyHash:", Base64.encodeToString(md.digest(), Base64.DEFAULT));  
       }  
     } catch (PackageManager.NameNotFoundException e) {  
       Log.i("KeyHash:", "error");  
     } catch (NoSuchAlgorithmException e) {  
       Log.i("KeyHash:", "error");  
     }  
   }

หลังจากนั้นให้ทำการเรียกใช้ฟังก์ชั่นดังกล่าวใน onCreate ดังนี้