Login google là một phương thức xác thực phổ biến trong các ứng dụng Web và Mobile. Trong bài này chúng ta sẽ tìm hiểu cách login google trong dự án React native và không sử dụng Firebase.

1. Tạo React native App

Đầu tiên, chúng ta sẽ tạo một dự án mới với React native Cli (không dùng Expo go). Làm theo hướng dẫn trên document của nó . Tại đây xem như đã start được app của bạn.

Tiếp theo cài package @react-native-google-signin/google-signin bằng câu lệnh trong project:

npm i @react-native-google-signin/google-signin

2. Setup môi trường cho Android

Sau khi cài đặt mô-đun cần thiết, thiết lập một số tệp Android để làm cho nó hoạt động bình thường.

2.1 Cập nhật android/build.gradle với cấu hình sau:

• Thêm classpath 'com.google.gms:google-services:4.3.10' vào dependencies trong buildscript

2.2 Cập nhật android/app/build.gradle với cấu hình sau:

• Thêm apply plugin: 'com.android.application' trên đầu file build.gradle (android/app)

Thêm code sau trong dependencies.

implementation 'com.google.android.gms:play-services-auth:20.0.0'
implementation "androidx.browser:browser:1.2.0"

3. Import module trong App

Bây giờ sẽ import thư viện

import { GoogleSignin, statusCodes } from '@react-native-google-signin/google-signin';

Sau đó thiết lập cấu hình trong useEffect():

useEffect(() => {
 GoogleSignin.configure({
 webClientId: "Your-web-client-id", 
 offlineAccess: true
 });
}, [])

webClientId sẽ tạo sau, yên tâm nhé =))

Tiếp theo sẽ viết hàm để thực hiện chức năng signup/signin với google

const GoogleSingUp = async () => {
 try {
 await GoogleSignin.hasPlayServices();
 await GoogleSignin.signIn().then(result => { console.log(result) });
 } catch (error) {
 if (error.code === statusCodes.SIGN_IN_CANCELLED) {
 // user cancelled the login flow
 alert('User cancelled the login flow !');
 } else if (error.code === statusCodes.IN_PROGRESS) {
 alert('Signin in progress');
 // operation (f.e. sign in) is in progress already
 } else if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) {
 alert('Google play services not available or outdated !');
 // play services not available or outdated
 } else {
 console.log(error)
 }
 }
 };

Connect tới function trên khi người dùng nhấn nút Login google: onPress={GoogleSingUp}

4. Khởi tạo webClientID và SHA-1

Đây là phần chính mà hầu hết các developer gặp phải: Error: Status{statusCode=DEVELOPER_ERROR}

=> Lý do : SHA-1 key chưa được thêm vào Google Console

4.1 Tạo Release key

Trong android/app chạy command sau:

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

Nó sẽ hỏi vài thông tin và bạn cần phải nhớ password đã nhập. Command này sẽ tạo một release key trong folder app/android

• Trong file android/gradle.properties thêm

MYAPP_UPLOAD_STORE_FILE=my_release_key.keystore
MYAPP_UPLOAD_KEY_ALIAS= my_key_alias
MYAPP_UPLOAD_STORE_PASSWORD=yourPassword
MYAPP_UPLOAD_KEY_PASSWORD=yourPassword

• Và như này trong android/app/build.gradle

signingConfigs {
 debug {
 // storeFile file('debug.keystore')
 // storePassword 'android'
 // keyAlias 'androiddebugkey'
 // keyPassword 'android'

 storeFile file(MYAPP_UPLOAD_STORE_FILE)
 storePassword MYAPP_UPLOAD_STORE_PASSWORD
 keyAlias MYAPP_UPLOAD_KEY_ALIAS
 keyPassword MYAPP_UPLOAD_KEY_PASSWORD
 }

 release {
 if (project.hasProperty('MYAPP_UPLOAD_STORE_FILE')) {
 storeFile file(MYAPP_UPLOAD_STORE_FILE)
 storePassword MYAPP_UPLOAD_STORE_PASSWORD
 keyAlias MYAPP_UPLOAD_KEY_ALIAS
 keyPassword MYAPP_UPLOAD_KEY_PASSWORD
 }
 }
}

Bây giờ sẽ khởi tạo SHA1 key trong android/app bằng lệnh:

keytool -list -v -keystore my_release_key.keystore -alias my_key_alias

Copy SHA-1 key tới bước kế tiếp

4.2 Chèn SHA-1 key đến Google Developer Console

Bây giờ các bạn sẽ vào bảng điều khiển Google Console tại đây Sau đó tạo một OAuth client ID

Sau đó chọn Application type là Android, Name là tên tuỳ chọn của bạn. Quan trọng là SHA-1 key sẽ là key lấy ở bước trên, còn Package name là tên package trong file android/app/src/debug/AndroidManifest.xml. Tên này sẽ giống với tên namespace trong file android/app/build.gradle, có định dạng kiểu com.package_name. Lưu và đóng

Tiếp theo sẽ tạo một Oauth client ID khác, lần này Application Type sẽ là Web application. Nhập các field, lưu và đóng. Tạo xong và lấy Client ID dùng cho webClientId ở phía trên

5. Bước cuối cùng

Khi đã hoàn thành xong các bước trên, start lại app, click vào button login google, đăng nhập tài khoản google. Sau khi hoàn tất sẽ redirect về và log ra thông tin user tương tự như sau:

{
 "idToken": "Your-google-auth-token",
 "scopes": [
 "https://www.googleapis.com/auth/userinfo.email",
 "https://www.googleapis.com/auth/userinfo.profile"
 ],
 "serverAuthCode": "your-server-auth-code",
 "user": {
 "email": "youremail@gmail.com",
 "familyName": "your-last-name",
 "givenName": "your-first-name",
 "id": "some-id",
 "name": "your-full-name",
 "photo": "a-url-for-profile-photo"
 }
}

Như vậy chúng ta đã thành công tích hợp Login Google và ứng dụng React native mà không sử dụng Firebase