Login Social React Native bằng FireBase – dành cho Android

120

Như tiêu đề, nay mình mình sẽ hướng dẫn cách đăng nhập bằng tài khoản social như Facebook, Google Api, Github, Twitter,… Chắc chắn những bạn làm với login social android cũng đã có một thời gian đau đầu không biết phải làm gì khi login bằng tài khoản social, cá nhân mình cũng vậy cũng đã phải tìm rất nhiều bài viết trên stackoverflow, viblo,… nhưng rồi phiên bản cũng khác, hoặc là không đầy đủ,…

Quan trọng là khi các bạn chạy bản debug, release và khi upload nếu các bạn mà không lắm rõ nó sẽ làm tốn thời gian của các bạn rất nhiều. Cá nhân mình đã cũng đã mất một thời gian để hiểu và áp dụng được nên nay mình xin chia sẻ những kiến thức mà mình tìm hiểu được. Khi debug thì như nào, khi release ra sao và khi upload lên store khác nhau như nào, …!!

Có thể bạn muốn xem:

  Login Social React Native with FireBase - dành cho iOS
  Tạo và xuất bản một thư viện cho Android

Login Google Api với Firebase

1. Android

Trước khi bắt đầu thì các bạn cần phải có 1 app react-native, các bạn có thể tham khảo bài viết này của mình để tạo ra 1 app bắt đầu (https://viblo.asia/p/bai-1-hay-bat-dau-voi-react-native-maGK7jQD5j2)

Sau khi đã chạy được app như hình trên (ở đây mình chạy trên Android, mình sẽ làm login bên Android trước nhá) thì chúng ta bắt đầu thôi nào! Đầu tiên các bạn cần phải cài đặt firebase, ở đây mình sử dụng react-native-fcm

(https://github.com/evollu/react-native-fcm)

  • react-native install react-native-fcm

Nếu bạn sử dụng react-native install thì các bạn sẽ không phải link nữa, nhưng để chắc chắn các bạn vào các file sau check lại giúp mình nhá!

file android/build.gradle

  Tạo Notification trong React Native thật đơn giản!
  Flutter chiến với React Native ai ngon hơn?

file android/app/build.gradle

Ở đây mình sử dụng + là bởi vì tránh các lỗi version, nhưng khi các bạn áp dụng vào project thì nên chọn đúng version không về sau có thể gặp lỗi như version của các package khác chưa update phù hợp với nhau!

file android/app/src/main/AndroidManifest.xml

file android/settings.gradle

file MainActivity.java

file MainApplication.java

Sau khi kiểm tra và đã đầy đủ chúng ta cần phải vào firebase và tạo 1 app (https://console.firebase.google.com).

Click Add project và nhập tên project, ở đây mình đặt tên là LoginSocial

Sau khi tạo xong chúng ta click vào tạo 1 app Android

TIếp theo họ có hỏi package name của mình là gì thì bạn hãy hãy vào file AndroidManifest.xml và copy tên package name. Của mình ở đây là com.loginsocial

Tiếp theo các bạn cần phải down file google-serviecs.json về và để vào trong thư mục android/app/

Tiếp theo như họ có hướng dẫn thì nếu app đã tồn tại thì hãy xoá đi và cài lại, các bạn uninstall đi và chạy lại lệnh react-native run-android nhá.

Video Tăng mạnh doanh thu và trải nghiệm người dùng với Data Analytics


Tiếp theo chúng ta cần cài đặt package react-native-google-signin

  • react-native install react-native-google-signin

Và cũng cần phải setting một chút nữa.

Các bạn có thể tham khảo docs của họ: (https://github.com/react-native-community/react-native-google-signin)

Các bạn nên kiểm tra xem còn thiếu chỗ nào, ở đây của mình là còn thiếu ở file này nhá :

android/app/build.gradle

Ok, vậy là chúng ta đã thiết lập xong rồi đó, tiếp theo chúng ta xây dựng giao diện nào!

Ở đây mình sẽ tạo ra 1 nút button và khi click vào sẽ show thông tin tài khoản đã đăng nhập.

Các bạn sửa lại file App.js thành như sau nhá

Đầu tiên ta cần import react-native-google-signin

Tiếp đó các bạn cần phải config môi trường Google+ Api

Các bạn tạo hàm setupSocial() như sau:

WEB_CLIENT_ID và IOS_CLIENT_ID các bạn vào trong (https://console.developers.google.com/ ) đăng nhập bằng tài khoản đã link với với firebase nhá.

Các bạn open login bằng google+ lên và check thông tin như mình nhá :

Sau khi đã xong các bạn quay lại trang console bên google+ api và chọn App bên firebase mà chúng ta đã tạo

Tiếp theo các bạn click vào Library ở thanh TabBar bên phải và search với từ khoá google+ api và sẽ ra kết quả sau đây:

Các bạn click vào Google+ API và enable nó lên để chúng kết nối với nhau nhá.

Sau khi đã xong, bạn hãy click vào Credentials và sẽ thấy Web client id và ios client id. Ở đây chúng ta chưa thấy ios client id bởi vì ở bên firebase chúng ta mới chỉ tạo app andoird. Một lát nữa chúng ta cùng làm bên iOS nhá.

Sau khi đã có web client id các bạn sửa lại setupSocial() thành như sau, nhớ là web client id của bạn nhá :

Note:

Trước khi bắt đầu code giao diện mình cần các bạn làm việc này, khi đăng nhập google+ api họ sẽ yêu cầu sha-1 của file mình đang làm việc, mọi người chạy câu lệnh này để lấy sha-1 nhá:

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

Câu trên nghĩa là sẽ file debug.keystore với alias là androiddebugkey

Sau khi chạy xong các bạn sẽ thấy MD5, SHA1, SHA256, các bạn cần copy đoạn SHA-1 đó và vào paste vào trong fingerprint trong firebase app Android

Note Đây chỉ là sha-1 của bản các bạn chạy debug thôi nhá, khi release các bạn sẽ cần làm như này 1 lần nữa và lấy sha-1 của bản release.

Thông thường các bạn sẽ tạo file keystore để release là my-release-key.keystore với alias là my-key-alias theo docs của React native. Nên các bạn có thể sử dụng câu lệnh này để lấy sha-1 của file release:

keytool -list -v -keystore /path/android/app/my-release-key.keystore -alias my-key-alias

Và đừng quên thêm fingerprint vào trong firebase nhá!

Okey bây giờ mình bắt đầu thôi:

Trong render() mình sẽ tạo 1 button có gọi tới hàm doLogin(), ở đây mình có truyền tham số là google bởi vì mình sẽ dùng code của bài này cho bài tiếp theo là login Facebook:

configure API

Sau đó ta cần lấy thông tin user và lưu vào state userInfo

Các bạn có thể console.log googleUser ra và xem kết quả nhá.

Bây giờ ta sửa hàm render() một chút để lấy thông tin ra nhá.

Vậy là xong rồi đó và đây là kết quả, các bạn có thể run thiết bị lên và test. Tiếp theo chúng ta làm bên iOS nhá. Do bài viết dài quá vậy nên mình chia làm 2 bài nhá. Mong mọi người ủng hộ. Có thắc mắc gì mong mọi comment cho mình biết, thanks!!

Người viết: Nguyễn Khánh Long

TopDev via Viblo