Hướng dẫn cơ bản để cài đặt chức năng đăng nhập với tài khoản mạng xã hội trên ứng dụng Xamarin Forms (Android, iOS) sử dụng SDK “chính chủ” của Facebook, Google. Hướng dẫn này tạm dừng lại ở bước xác thực trên phía ứng dụng, còn việc sử dụng tài khoản mạng xã hội để đăng nhập vào web api thì mình xin hẹn một bài viết khác.

Mục tiêu của việc đăng nhập với tài khoản mạng xã hội là sau khi người dùng đăng nhập thành công ta phải lấy được Access Token hoặc Id Token (dùng để lấy thông tin người dùng) và User Id.

Bước 1. Project & Thư viện

Ta chuẩn bị một project Xamarin Forms (mình sài thư viện Xamarin.Forms 3.1), sau đó cài các thư viện sau với nuget ứng với từng project:

  • Android:
    • Xamarin.Facebook.Android
    • Xamarin.GooglePlayServices.Auth (nên cài version 42.1021.1)
  • iOS:
    • Xamarin.Facebook.iOS
    • Xamarin.Google.iOS.SignIn

Set package name, bundle id cho project, vd: com.ksharp.xamarin

Bước 2. Đăng ký API app Facebook, Google

Đăng ký Facebook API app tại: https://developers.facebook.com, sau khi tạo bạn vào mục cài đặt nhập các thông số như hỗ trợ Android, hỗ trợ iOS, bật chế độ Single Sign On và điền package name, bundle id, keystore hash (android) như đã cấu hình trên project. Bạn sẽ được 1 AppId để cấu hình trên phía project.

Đăng ký Google API app tại: https://console.developers.google.com, sau khi tạo project ta phải tạo Credentials cho project Android và project iOS, sau đó hãy download file Config Json (Android) và Config Plist (iOS)

Bước 3. Config Resource & Manifest

Project Android

Thêm đoạn code sau vào thẻ <application> trong tập tin AndroidManifest.xml

Trong file Resources\values\strings.xml (tạo mới nếu chưa có), thêm 2 dòng string với Facebook AppId tương ứng

Project iOS

Chỉnh sửa file Info.plist

Điền Facebook AppId, AppName (các dòng 6,23,25), Bundle Id (dòng 18), REVERSED_CLIENT_ID trong file plist – tải từ google console (dòng 12).

Bước 4. Tạo các interface trên project shared

Tạo các interface trên project shared, ta sẽ gọi các dependency qua các interface này

Bước 5. Implementation trên Android

Ta có 2 class implementation của 2 interface trên, riêng phần của Google bạn thêm vào client id Android lấy từ trang console.

Trong class MainActivity thêm đoạn code sau

Bước 6. Implementation trên iOS

Tương tự ta cũng có các class implementation trên nền tảng iOS

Với trang đăng nhập của bạn là LoginView.xaml, bạn tạo thêm một class renderer với nội dung như sau

Override 2 method trong class AppDelegate

Cũng trong class AppDelegate, thêm dòng code sau trong method FinishedLaunching

Bước 7. Sử dụng

Chúng ta sử dụng DependencyService hoặc một bộ IoC nào đó để có thể gọi các implementation thông qua interface, kết quả trả về true/false ứng với trường hợp đăng nhập thành công hoặc thất bại (user cancel hay lỗi), ví dụ:

Hết nhá. Nếu bạn nào cần source demo thì comment vài bữa mình up sau. Như đã nói hướng dẫn này tạm dừng lại ở bước xác thực trên phía ứng dụng, còn việc sử dụng tài khoản mạng xã hội để đăng nhập vào web api thì mình xin hẹn một bài viết khác.