React authentication với Google

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 IDYour 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-use-googlelogin

Thư viện react-use-googlelogin 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-use-googlelogin

Trong folder project của bạn, chạy lệnh:

npm install react-use-googlelogin

Xem tài liệu sử dụng thư viện react-use-googlelogin

https://www.npmjs.com/package/react-google-login

Code cho nút Login

import React from 'react';
import ReactDOM from 'react-dom';
import GoogleLogin from 'react-google-login';
import { GoogleLogin } from 'react-google-login';
const responseGoogle = (response) => {
  console.log(response);
}
ReactDOM.render(
  <GoogleLogin
    clientId="CLIENT_ID_CỦA_BẠN"
    buttonText="Login"
    onSuccess={responseGoogle}
    onFailure={responseGoogle}
    cookiePolicy={'single_host_origin'}
  />,
  document.getElementById('googleButton')
);

Code cho nút Logout

import { GoogleLogout } from 'react-google-login';
<GoogleLogout
  clientId="CLIENT_ID_CỦA_BẠN"
  buttonText="Logout"
  onLogoutSuccess={logout}
>
</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ú 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. Code cho 2 nút, đặt trong tag Aside của layout

<GoogleLogin
clientId="CLIENT_ID_CỦA_BAN" 
buttonText="Đăng nhập"
onSuccess={dangNhhapThanhCong} onFailure={dangNhapThatBai}
cookiePolicy={'single_host_origin'} isSignedIn={true}/> &nbsp; 

<GoogleLogout
clientId=""CLIENT_ID_CỦA_BAN"
buttonText="Thoát" onLogoutSuccess={thoat}  />

b. 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

Kết quả trả về của Google khi login thành công

Ẩ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

– Code ở đầu function App() để định nghĩa 2 state 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);
 }

– 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, tạo router dùng render function xử lý

<Route exact path="/download" render={() => (
      dangNhapChua ? (<DownLoad/>): (<Redirect 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: