React authentication với Google hướng dẫn bạn cách xác thực người dùng qua Google như đăng nhập, thoát, hạn chế đăng nhập…
Đăng ký để có clientID
Để thực hiện xác thực với Google, bạn cần có ClientID do Google cấp. Thực hiện như sau:
1. Vào : https://console.cloud.google.com/ và đăng nhập với tài khoản gmail.
2. Tạo project theo gợi ý như hình


3. Vào https://console.developers.google.com/apis/credentials => Create Creadentials => Oauth client ID

Nếu màn hình hiện ra nút cấu hình Configure Consent Screen thì nhắp vào để khai báo các thông tin cơ bản cho Google như hai hình dưới đây:


4. Sau đó chọn lại Create Creadentials => Oauth client ID

Rồi khai báo : Web aplication + Tên project + url ứng dụng của bạn+ nhắp Create như hình dưới

5. Kết quả sẽ hiện Your Client ID và Your Client Secret . Hãy copy lại để dùng sau. Xong nhắp OK

Sau này khi vào lại https://console.developers.google.com/apis/credentials bạn sẽ thấy thông tin đã tạo

React authentication với Google với react-google-login
Thư viện react-google-login cung cấp chức năng đăng nhập với tài khoản google trong ứng dụng React.
Cài thư viện react-google-login
Trong folder project của bạn, chạy lệnh:
npm install --legacy-peer-deps react-google-login
Tài liệu sử dụng react-google-login
https://www.npmjs.com/package/react-google-login
Code cho nút Login
const hàmChạyKhiThànhCông = (response) => { ... }
const hàmChạyKhiThấtBại= (response) => { ... }
<GoogleLogin
clientId="CLIENT_ID_CỦA_BẠN"
buttonText="Login"
onSuccess={hàmChạyKhiThànhCông}
onFailure={hàmChạyKhiThấtBại}
cookiePolicy={'single_host_origin'}
/>
Code cho nút Logout
import { GoogleLogout } from 'react-google-login';
const hàmChạyKhiThoátOK = (response) => { ... }
<GoogleLogout
clientId="CLIENT_ID_CỦA_BẠN"
buttonText="Logout"
onLogoutSuccess={hàmChạyKhiThoátOK}>
</GoogleLogout>
Giữ trạng thái login cho user
Thuộc tính isSignedIn={true} ghi trong button đăng nhập giúp giữ trạng thái đã login thành công cho user
<GoogleLogin
clientId="CLIENT_ID_CỦA_BẠN"
onSuccess={responseGoogle}
isSignedIn={true}
/>
Hiện và xem hoạt động Login , Logout
Bây giờ , chúng ta cho hiện nút login , logout trong layout đã của bạn để xem hoạt động của chúng (để thuận lợi cho demo, hãy dùng layout trong bài Sử dụng React Router)
a. File app.js
import { GoogleLogin } from 'react-google-login';
import { GoogleLogout } from 'react-google-login';
b. Trong layout (tag Aside chẳn hạn), code cho hiện 2 nút
<GoogleLogin
clientId="CLIENT_ID_CỦA_BAN"
buttonText="Đăng nhập"
onSuccess={dangNhhapThanhCong} onFailure={dangNhapThatBai}
cookiePolicy={'single_host_origin'} isSignedIn={true}/>
<GoogleLogout
clientId="CLIENT_ID_CỦA_BAN"
buttonText="Thoát" onLogoutSuccess={thoat} />
c. Code các hàm đăng nhập thành công, thất bại, thoát
const dangNhhapThanhCong = (response) => {
console.log("Đăng nhập thành công", response);
}
const thoat = (response) => {
console.log("Đã thoát", response);
}
const dangNhapThatBai = (response) => {
console.log("Đăng nhập thất bại", response);
}

c. Test: Xem thử sẽ thấy các nút đăng nhập và Thoát. Nhắp nút Đăng nhập sẽ thấy form đăng nhập của Google. khi thành công, quan sát trong consolse sẽ thấy response trả về từ Google

Ẩn hiện nút đăng nhập, thoát và thông tin user login
Bây giờ chúng ta sẽ cho ẩn hiện nút Đăng nhập và Thoát dựa và trạng thái đăng nhập của user. Mời thực hiện:
a. App.js, import useState
import { useState } from "react";
b. Định nghĩa 2 state ở đầu function App() có tên userInfo, dangNhapChua. Và định nghĩa component NutGoogle để hiện nút Đăng nhập/Thoát
const [dangNhapChua, ganTrangThaiDangNhap] = useState(false);
const [userInfo, ganuserInfo] = useState( {tokenId:'', hoten:'', email:''} );
const NutGoogle = (props) => {
let code;
if (dangNhapChua===false) code= <NutDangNhap/>
else { code =
<div> <p>Họ Tên: {userInfo.hoten} </p>
<p>Email: {userInfo.email} </p>
<NutThoat/>
</div>
}
return (code);
}
const NutDangNhap = ()=>{
return (
<GoogleLogin
clientId="CLIENT_ID_CỦA_BAN"
buttonText="Đăng nhập"
onSuccess={dangNhhapThanhCong} onFailure={dangNhapThatBai}
cookiePolicy={'single_host_origin'} isSignedIn={true}/>
)}
const NutThoat = () => {
return (
<GoogleLogout
clientId="CLIENT_ID_CỦA_BAN"
buttonText="Thoát" onLogoutSuccess={thoat} />
)}
– Code lại hàm đăng nhập thành công và thoat
const dangNhhapThanhCong = (response) => {
ganTrangThaiDangNhap(true);
ganuserInfo({
tokenId:response.tokenId,
hoten:response.profileObj.name,
email: response.profileObj.email
})
}
const thoat = (response) => {
ganTrangThaiDangNhap(false);
ganuserInfo({tokenId:'',hoten:'',email: ''})
}
– Cho hiện component NutGoogle – component sẽ hiện nút Đăng nhập hoặc nút Thoát. Code ở chỗ nào trong layout tùy ý bạn muốn hiện
<hr/>
<NutGoogle/>
<hr/>
Xem kết quả: khi chưa đăng nhập

Đã đăng nhập:

Hạn chế đăng nhập
Giả sử bạn có một component để hiện thông tin gì đó, bạn chỉ muốn cho người đã đăng nhập xem, ai chưa thì phải đăng nhập. Mời thực hiện tiếp:
a. Tạo component Download
import React from 'react';
const DownLoad = () => {
return (
<h2>Đây là trang download, chỉ dành cho thành viên</h2>
);
};
export default DownLoad;
b. Trong App.js, tạo link trong nav
<Link to='/download'>Download</Link>
c.Trong App.js, import và tạo router dùng render function xử lý
import { Navigate } from 'react-router-dom';
<Route exact path="/download"
element = { dangNhapChua ? <DownLoad/>: <Navigate to="/"/>} />
Chạy trang, nhắp link Download, nếu đã đăng nhập sẽ hiện component Download, không thì phải login

Mời bạn thực hiện thêm:
- Tạo route có tên admin, nội dung tùy ý , chỉ hiện ra khi user đăng nhập.
- Tạo route có tên thoát để thực hiện thoát, xong quay về trang chủ
- Mời bạn thực hiện xác thực với Okta : https://hocweb.vn/tao-authentication-cho-app-react-trong-5-phut/ , SoundCloud API (https://codeaholicguy.com/2016/12/28/hoc-reactredux-qua-vi-du-thuc-te-authentication-thong-qua-soundcloud-api/ )
- Đọc thêm bài này để tham khảo về xác thực với Google https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow