چگونه Google Auth جدید را در برنامه React و Express تنظیم کنیم

در این مقاله، نحوه پیکربندی دکمه جدید Google Auth “Sign in with Google” را در یک برنامه React.js و Express.js خواهید آموخت.

این روش جدید نحوه اجرای برنامه‌نویسان Google Auth را ساده می‌کند. مزایای قابل توجهی را به همراه دارد، مانند اجازه دادن به کاربران برای مشاهده یک عکس نمایه برای انتخاب حساب Google صحیح – که از اشتباهات ثبت نام جلوگیری می کند و تضمین می کند که برنامه شما تحت تأثیر قرار نمی گیرد زمانی که Google «وارد سیستم با Google” کتابخانه جاوا اسکریپت در 31 مارس 2023.

معرفی سایت: 10 چیزی که هر طراح از شنیدن آن متنفر است

شایان ذکر است که شناسه‌های مشتری جدید ایجاد شده اکنون از کتابخانه پلتفرم قدیمی‌تر و آن Google Auth مسدود شده‌اند. باید به این صورت اجرا شود.

در اینجا کد منبع این مقاله آمده است: سرور و مشتری.

ایجاد شناسه مشتری Google و راز

اولین گامی که برای اجرای احراز هویت Google باید بردارید، ایجاد شناسه مشتری و راز برای برنامه‌ای است که ایجاد می‌کنید.

مرحله 1

ما با رفتن به کنسول گوگل شروع می کنیم.

مرحله 2

روی منوی کشویی برجسته شده در بالا کلیک کنید. پس از آن، روی پروژه جدید که در زیر مشخص شده است کلیک کنید.

مرحله 3

نام پروژه را اضافه کنید. من connect-google-auth-article را انتخاب کردم.

مرحله 4

برای انتخاب پروژه، روی منوی کشویی در مرحله 1 کلیک کنید.

مرحله 5

صفحه بعدی که می بینید باید مانند نمونه زیر باشد. سپس روی داشبورد کلیک کنید.

مرحله 6

مرحله بعدی پیکربندی رضایت oauth است. برای رسیدن به آن، روی «APIs and services» بروید و روی «صفحه رضایت OAuth» کلیک کنید.

مرحله 7

نوع رضایت مورد نظر خود را انتخاب کنید. خارجی را انتخاب کردم و CREATE را فشار دادم.

مرحله 8

پس از تنظیم رضایت، برای تنظیم جزئیات برنامه خود، روی اعتبارنامه ها کلیک کنید. از آنجایی که برنامه من در لوکال هاست میزبانی می شود، جزئیات را مطابق تصویر زیر تنظیم کردم.

توجه: هنگامی که آماده استقرار برنامه خود هستید، باید URI1 و URI2 را با نام دامنه ای که می خواهید استفاده کنید جایگزین کنید – مانند https://example.com .

مرحله 9

هنگامی که اطلاعات کاربری شما با موفقیت ذخیره شد، می توانید شناسه مشتری و Secret ایجاد شده را کپی یا دانلود کنید.

برنامه React را راه اندازی کنید

ساده ترین راه برای بوت استرپ کردن برنامه React.js استفاده از ایجاد برنامه React است.

بنابراین، یک پوشه ایجاد کنید، نام آن را هر چه می خواهید بگذارید. سپس یک ترمینال را باز کنید و کد زیر را اجرا کنید: npx create-react-app app.

راه اندازی سرور اکسپرس

پوشه دیگری در فهرست اصلی ایجاد کنید. من سرور خود را نام گذاری می کنم. سپس، یک ترمینال و سی دی را در سرور باز کنید: cd server.

پس از آن، قبل از ایجاد package.json با اجرای npm init -y، یک فایل server.js ایجاد کنید. در مرحله بعد، بسته های زیر را نصب کنید:

• Express.js: “یک چارچوب برنامه وب Node.js حداقل و انعطاف پذیر که مجموعه ای قوی از ویژگی ها را برای برنامه های کاربردی وب و تلفن همراه ارائه می دهد”.
• CORS: یک بسته Node.js برای ارائه میانافزار Connect/Express که می‌تواند برای فعال کردن اشتراک‌گذاری منابع متقاطع با گزینه‌های مختلف استفاده شود.
• Dotenv: یک بسته Node.js که متغیرهای محیطی را از فایل .env بارگیری می کند.
• Google-ath-library: Google API’s Authentication Client Library برای Node.js.
• Jsonwebtoken: یک کتابخانه اجرای JSON Web Token برای Node.js.
• Nodemon: یک اسکریپت مانیتور ساده برای استفاده در طول توسعه یک برنامه Node.js.

می توانید بسته های بالا را با اجرای دستور زیر نصب کنید:

npm نصب express cors dotenv google-ath-library jsonwebtoken nodemon

پس از آن، اسکریپت خود را با انجام این کار پیکربندی کنید:

  "اسکریپت ها": {
    "شروع": "node server.js"،
    "dev": "nodemon server.js"
  }،

package.json شما باید به این شکل باشد:

{
  "name": "connect-google-auth-article"،
  "نسخه": "1.0.0"،
  "توضیحات": ""،
  "اصلی": "server.js"،
  "اسکریپت ها": {
    "شروع": "node server.js"،
    "dev": "nodemon server.js"
  }،
  "وابستگی ها": {
    "cors": "^2.8.5"،
    "dotenv": "^16.0.2"،
    "express": "^4.18.1"،
    "google-auth-library": "^8.5.2"،
    "jsonwebtoken": "^8.5.1"،
    "nodemon": "^2.0.20"
  }،
  "کلمات کلیدی": []،
  "نویسنده": ""،
  "مجوز": "ISC"
}

پس از آن، کد زیر را در server.js بنویسید و npm run dev را برای راه اندازی سرور خود اجرا کنید:

const express = نیاز("express");
برنامه const = express();
نیازمند("dotenv/config");
const cors = نیازمند("cors");
const { OAuth2Client } = نیاز دارد("google-auth-library");
const jwt = نیازمند("jsonwebtoken");

برنامه.استفاده از(
  کورها({
    origin: ["http://localhost:3000"]،
    روش‌ها: "GET,POST,PUT,DELETE,OPTIONS"،
  })
);
برنامه.استفاده از(express.json());

اجازه دهید DB = [];

برنامه.گوش دادن("5152"، ( ) => کنسول.log("سرور در حال اجرا در پورت 5152" ));

در حال آماده سازی برنامه React

برای تهیه برنامه مشتری خود، اسکریپت Google را به فایل public/index.html خود اضافه می کنیم:

  اسکریپت src="https://accounts .google.com/gsi/client" ناهمگام به تعویق انداختن>script>

فایل index.html ما باید به شکل زیر باشد:

DOCTYPE html >
html lang="en">
  سر>
    متا مجموعه نویسه="utf-8" />
    پیوند rel="نماد" href="%PUBLIC_URL%/favicon.ico" />
    متا نام="viewport" محتوا="width=device-width, initial-scale=1" />
    متا نام="theme-color" محتوا attr-equals">="#000000" />
    متا
      نام="توضیح"
      محتوا="وب سایت ایجاد شده با استفاده از create-react-app"
    />
    پیوند rel="apple-touch-icon " href="%PUBLIC_URL%/logo192.png" />
    پیوند rel="مانیفست" href="%PUBLIC_URL%/manifest.json" />
    
    اسکریپت src="https://accounts .google.com/gsi/client" ناهمگام به تعویق انداختن>script>
    title>برنامه Reacttitle>
  سر>
  body>
    noscript>برای اجرای این برنامه باید جاوا اسکریپت را فعال کنید.noscript>
    div id="root"> div>
  body>
html>

بعد، دو پوشه در src خود ایجاد می‌کنیم: صفحه‌ها و قلاب‌ها.
صفحه‌ها حاوی پنج فایل خواهد بود: Home.jsx، Landing.jsx، Login.jsx، Signup.jsx و index.js. پوشه hooks تنها حاوی یک فایل خواهد بود: useFetch.jsx.

پیکربندی مسیریابی سمت سرویس گیرنده

بسته ای که ما برای مسیریابی سمت سرویس گیرنده استفاده خواهیم کرد، react-router-dom است. یک ترمینال جدید باز کنید، سی دی را در برنامه قرار دهید و کد زیر را اجرا کنید: npm install react-router-dom.

سپس می‌توانیم App.js خود را به‌صورت زیر به‌روزرسانی کنیم:

وارد کردن React، { useEffect } از  "واکنش";
وارد کردن { useState  از "react"؛
وارد کردن { BrowserRouter، مسیرها، مسیر، پیمایش } از "react-router-dom ";

const برنامه = ()  => {
  const [کاربر، setUser] = useState( {});

  بازگشت (
    BrowserRouter>
      مسیرها>

      /مسیرها>
    /BrowserRouter>
  );
};

صادرات پیش‌فرض برنامه;

ایجاد صفحه فرود

صفحه فرود در مورد ما تنها صفحه ای است که برای یک کاربر احراز هویت نشده در دسترس است. این شامل پیوندهایی به صفحات ثبت نام و ورود به سیستم خواهد بود. به این صورت خواهد بود:

وارد کردن React از "react";
وارد کردن { پیوند } از "react -router-dom";

const فرود = ()  => {
  بازگشت (
    >
      سبک سرصفحه={{ textAlign: "center" }}>
        h1>به دنیای من خوش آمدید /h1>
      /header>
      سبک اصلی={{ نمایش: "flex"، justifyContent: "center"، gap: "2rem" }}>
        پیوند
          به="/signup"
          style={{
            textDecoration: "هیچکدام"،
            border: "1px solid gray"،
            padding: "0.5rem 1rem"،
            backgroundColor: "گندم"،
            color: "#333"،
          }}
        >
          ثبت نام بالا
        /پیوند>
        پیوند
          به="/login"
          style={{
            textDecoration: "هیچکدام"،
            border: "1px solid gray"،
            padding: "0.5rem 1rem"،
            backgroundColor: "whitesmoke"،
            color: "#333"،
          }}
        >
          ورود به سیستم
        /پیوند>
      /main>
    />
  );
};

صادرات پیش‌فرض فرود;

بیایید آن را تجزیه کنیم:

• مولفه یک عنصر قطعه React که با یک تگ خالی نشان داده شده است را برمی گرداند.
• بخش شامل دو عنصر است:
  
  . هدر یک را برمی‌گرداند و متن را در مرکز آن قرار می‌دهد، در حالی که عنصر اصلی دو پیوند را از react-router-dom برمی‌گرداند و همچنین آنها را در مرکز قرار می‌دهد.

منبع: https://avizhehsaz.ir/10-چیزی-که-هر-طراح-از-شنیدن-آن-متنفر-است/