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 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}/> &nbsp; 

<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

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:

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:

BÀI VIẾT LIÊN QUANXEM THÊM