สอนทำ Google Signin ด้วย ReactJs(ViteJs) ดูจบแล้วทำเป็นแน่นอน
ในบทความนี้เราจะสอนการสร้างระบบการเข้าสู่ระบบผ่าน Google ด้วย ReactJs และ ViteJs
ขั้นตอนที่ 1: สร้างโปรเจค ReactJs ด้วย ViteJs
เริ่มต้นด้วยการสร้างโปรเจค ReactJs ด้วย ViteJs โดยใช้คำสั่งต่อไปนี้
npx create-vite@latest my-google-signin-app
cd my-google-signin-app
npm install react react-dom react-router-dom
ขั้นตอนที่ 2: สร้างโมดูลสำหรับ Google Signin
สร้างโมดูลสำหรับ Google Signin โดยใช้ Google API และ ReactJs
import React from 'react';
import { GoogleLogin } from 'react-google-login';
const clientId = 'YOUR_GOOGLE_CLIENT_ID';
function GoogleSignin() {
const responseGoogle = (response) => {
console.log(response);
}
return (
);
}
export default GoogleSignin;
ขั้นตอนที่ 3: นำ Google Signin มาใช้ในโปรเจค ReactJs
นำโมดูล Google Signin ที่สร้างไว้มาใช้ในโปรเจค ReactJs
import React from 'react';
import GoogleSignin from './GoogleSignin';
function App() {
return (
Google Signin ด้วย ReactJs(ViteJs)
);
}
export default App;
ขั้นตอนที่ 4: ทดสอบระบบการเข้าสู่ระบบผ่าน Google
ทดสอบระบบการเข้าสู่ระบบผ่าน Google โดยกดปุ่ม Login with Google และตรวจสอบการทำงานของระบบ
สรุป
การสร้างระบบการเข้าสู่ระบบผ่าน Google ด้วย ReactJs และ ViteJs ไม่ยากเลย โดยเพียงแค่สร้างโมดูลสำหรับการเข้าสู่ระบบและนำมาใช้ในโปรเจค ReactJs แล้วก็ทดสอบระบบการเข้าสู่ระบบ คุณสามารถทำระบบการเข้าสู่ระบบผ่าน Google ในเว็บของคุณได้อย่างง่ายดาย
