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.
Đầ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
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:
2.2 Cập nhật android/app/build.gradle với cấu hình sau:
Thêm code sau trong dependencies.
implementation 'com.google.android.gms:play-services-auth:20.0.0'
implementation "androidx.browser:browser:1.2.0"
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}
Đâ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
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
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
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
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
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