Enable Social media native login in Xamarin Forms

Bài viết hướng dẫn bạn cài đặt và thiết kế tính năng đăng nhập trên ứng dụng Xamarin Forms bằng cách sử dụng tài khoản Facebook và Google. Sau khi đăng nhập thành công bạn có thể truy cập đến các thông tin như profile, email, avatar,… của tài khoản mạng xã hội tương ứng.

Bước 1: Tạo project Xamarin Forms

Mình sử dụng Visual Studio 2019 tạo mới một project Xamarin Forms với template là Blank, đặt cho solution là MiniBook

Tạo thành công bạn sẽ có solution mới với 3 project là

  • MiniBook: Core project (.net standard)
  • MiniBook.Android: Android project (Xamarin.Android)
  • MiniBook.iOS: iOS project (Xamarin.iOS)

Với Visual Studio 2019 các project của bạn sẽ cài đặt sẵn thư viện Xamarin.Forms 3.6 và Xamarin.Essentials, bạn có thể update chúng lên version mới nhất nếu cần.

Bước 2: Cấu hình cơ bản cho ứng dụng

Thay đổi Package name (Android: AndroidManifest.xml) và BundleIdentifier (iOS: Info.plist) thành tên mà bạn muốn, đây là định danh cho ứng dụng của bạn với store và các 3rd party khác ở đây mình cùng đặt là:

com.ksharp.minibook

Cài đặt nuget packages cho project Android

  • Xamarin.GooglePlayServices.Auth
  • Xamarin.Facebook.Android
  • Plugin.CurrentActivity (nhớ thêm phương thức Init ở hàm OnCreate)

Và các nuget cho project iOS:

  • Xamarin.Google.iOS.SignIn
  • Xamarin.Facebook.iOS

Bước 2.1 Tạo keystore và lấy hash cho project Android:

Như bạn biết file cài đặt của ứng dụng Android là apk, mà trong quá trình tạo file này ở bước cuối cùng file apk của bạn sẽ được sign bởi một file key. Trong quá trình chạy debug thì file key này được lấy trong thư mục:

C:\Users\USERNAME\AppData\Local\Xamarin\Mono for Android\debug.keystore

Và khi ứng dụng bạn archive để upload lên store thì bạn cần tạo file key cho cho archive, nếu file apk mà không có key này thì store sẽ không nhận.

Ngoài ra Google Play Store còn có cho bạn lựa chọn là sau khi upload thành công rồi, file apk của bạn sẽ được sign lại lần nữa bằng key của store, nếu bạn mở chức năng này thì nó sẽ như thế này:

Mà các thư viện như Facebook hay Google chúng ta cần sử dụng nó yêu cầu một cái hash của file key bạn đang sử dụng để verify quyền sở hửu, vậy nên ứng với từng release mà bạn phải cung cấp mã hash tương ứng.

Ở đây mình không sử dụng key mặc định của Xamarin mà mình tạo một file key cho quá trình debug để dễ thao tác (mình có thể dùng key này để upload app cũng được nếu sử dụng Google Signing Key), cách tạo như sau

Mở cmd ở mode administrator, trỏ tới thư mục bin cửa thư viện java của bạn, trên máy mình là:

cd C:\Program Files (x86)\Java\jdk1.8.0_161\bin

Chạy lệnh để tạo keystore, (tên file MiniBook.keystore, tên alias MiniBook)

keytool -genkey -v -keystore MiniBook.keystore -alias MiniBook -keyalg RSA -keysize 2048 -validity 10000

Nhập password và các thông tin khác (chỉ cần fill một trong số thôi, vd họ tên hay tên tổ chức), bước nhập password cho key bạn có thể bỏ qua nếu sài cùng một password.

Chạy tiếp lệnh sau, để lấy mã sha1-binary (dùng cho cấu hình Facebook)

keytool -exportcert -alias MiniBook -keystore MiniBook.keystore | openssl sha1 -binary | openssl base64

Chạy lệnh sau, để lấy mã sha1 (dùng cho cấu hình Google)

keytool -list -v -keystore MiniBook.keystore -alias MiniBook

Sao chép file MiniBook.keystore trong thư mục bin đến project của Android của bạn (tính từ file MiniBook.Android.csproj, mình bỏ nó vào /keystore/debug/MiniBook.keystore)

Sau đó vào Properties của project MiniBook.Android, mục Package Signing bạn tick chọn điền các thông tin của keystore vào


Bước 3: Đăng ký dịch vụ Single Sign-on của Facebook và Google

>Facebook

Truy cập developers.facebook.com/apps và tạo mới một facebook app. Tạo thành công bạn sẽ được một đoạn mã AppId

Với App Id, mình sẽ note lại thành 2 field sau:

  • FB_APP_ID: 8189924xxxxxx
  • FB_URL_SCHEME: fb8189924xxxxxx
  • FB_APP_NAME: MB

Vào mục Products, chọn [Set Up] ở product Facebook Login

Bỏ qua bước Quick Start (do nó không hướng dẫn trên Xamarin)

Vào phần Settings -> Basic, scroll xuống dưới cùng, chọn Add Platform

iOS: Điền BundleId, và bận Single Sign On lên

Android: Điền Package name, class main activity của bạn, hash (sha1-binary) lấy ở bước 2.1 và bật Single Sign on.

>Google

Truy cập vào console.developers.google.com, tạo mới một project.

Vào mục Credentials, lần lượt tạo 3 cái OAuth Client ID, target tướng ứng với 1 cái Web, 1 Android và 1 iOS

Cũng điền các thông tin tương tự như facebook, riêng đối với android bạn điền mã sha1 lấy được ở bước 2.1

Sau đó bạn note lại được các thông tin như sau:

  • GG_WEB_CLIENT_ID: 4290xxxxx.apps.googleusercontent.com
  • GG_ANDROID_CLIENT_ID: 4290yyyyy.apps.googleusercontent.com
  • GG_IOS_CLIENT_ID: 4290zzzzz.apps.googleusercontent.com
  • GG_IOS_URL_SCHEME: com.googleusercontent.apps.4290zzzzz

Bước 4: Thêm các cấu hình Facebook, Google đã đăng ký

>Project Android

Thêm file strings.xml vào thư mục Resource/values

Thêm đoạn sau vào trong thẻ <application> của file AndroidManifest.xml

>Project iOS

Mở file Info.plist (Open with -> XML Editor), thêm đoạn code sau vào thẻ trước thẻ </dict></plist>

Bước 5: Implement phương thức đăng nhập trên các nền tảng

>Project core

Tạo trang LoginPage.xaml đơn giản như sau:

Tạo thư mục Services, thêm các interface sau:

>Project Android

Implement chức năng login theo các interface tương ứng:

Ở file MainActivity.cs, override lại các phương thức như sau:

>Project iOS

Implement chức năng login theo các interface tương ứng:

Thêm Renderer cho trang LoginPage, kế thừa ISignInUIDelegate của Google.Signin

Ở file AppDelegate.cs, thêm đoạn sau vào phương thức FinishedLaunching và override các hàm OpenUrl

Bước 6: Test thử

Viết các phương thức sử lý sự kiện clicked trên trang LoginPage

  • Lưu ý 1: ở đây mình sử dụng DependencyService để gọi các implementation, nên nhớ thêm config dependency tương ứng ở tầng Android và iOS
  • Lưu ý 2: Mình đang sử dụng C# 8 beta, nên chỗ switch có hơi khác khác
  • Lưu ý 3: Đối với iOS bạn nên run trên real device

Nếu thành công bạn sẽ nhận được token tương ứng từ Facebook/Google, với token bạn có thể truy cập các thông tin đã yêu cầu khi user đăng nhập, hoặc sử dụng để đăng nhập vào hệ thống của bạn, mình có hướng dẫn trong các bài viết khác ở đây.

Link source code mình sẽ update sau cho bạn nào cần.

Chúc bạn thành công.