اضافه کردن ورود به سیستم Google با Firebase به یک برنامه Next.js که در Vercel میزبان (با استفاده از Next-Firebase-Auth-Edge) است

سلب مسئولیت

این یک ترجمه انگلیسی از پست اصلی ژاپنی من در Qiita است (https://qiita.com/yanosen_jp/items/848206a306f52c7e3f94). بنابراین برخی از تصاویر به زبان ژاپنی هستند ، اما نباید حدس بزنید که منظور آنها چیست. امیدوارم این کمک کند!

مقدمه

من برای ساختن یک برنامه مرتبط با کلاس و میزبانی آن در Vercel پس از امتحان کردن یک ابزار ژنراتور برنامه AI (V0) ، شروع به مطالعه Next.JS کردم. در گذشته ، من با استفاده از اسکریپت Google Apps ، برنامه هایی را با ویژگی ورود به سیستم Google ساخته ام. این بار ، من می خواستم با استفاده از ویژگی ورود به سیستم بازآفرینی کنم Next.js + Firebaseبشر

با این حال ، برای یک مبتدی مانند من ، پیکربندی بسیار پیچیده تر از آنچه انتظار داشتم بود ، بنابراین تصمیم گرفتم یادداشت برداری کنم. به هر حال ، Chatgpt O1 Pro و سایر ابزارهای AI تقریباً هیچ کمکی نداشتند در حل این موضوعات خاص. من بیشتر اطلاعات را از وبلاگ های سنتی و پست های انجمن جمع آوری کردم و یافته های خود را در اینجا به اشتراک می گذارم.

از آنجا که من هنوز یک مبتدی کامل هستم ، اگر سوء تفاهم یا اشتباه وجود داشته باشد ، عذرخواهی می کنم. احساس راحتی کنید که آنها را در نظرات بیان کنید تا بتوانم آنها را اصلاح کنم.

نقطه شروع

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

Next-Firebase-Auth-Edge بسته ای برای دستیابی به تأیید هویت Firebase در Next.js. درون آن Examples/next-typescript-starter دایرکتوری ، یک پروژه نمونه وجود دارد که از آن استفاده خواهیم کرد. این در حال حاضر شامل یک صفحه ورود به سیستم و عملکرد مانند تصویر زیر است:

آماده سازی پروژه Vercel

فرض خواهیم کرد که شما در حال حاضر به Vercel ، Github ، Google Cloud و Firebase دسترسی دارید. محیط محلی من macOS است.

1. به صفحه انتشار GitHub بروید Next-Firebase-Auth-Edge و آخرین نسخه را بارگیری کنید. در زمان نوشتن ، آن بود v1.8.2بشر
2. فایل بارگیری شده را از حالت فشرده خارج کنید (من نام پوشه را به عنوان ترک کردم Next-Firebase-Auth-Edge-1.8.2).
3. آن پوشه را به مخزن GitHub خود فشار دهید.
4. در Vercel ، یک پروژه جدید ایجاد کرده و آن را به آن repo متصل کنید.
5. برای “دایرکتوری ریشه” ، حتماً انتخاب کنید next-typescript-starter (نه کل مخزن). ما فقط به آن پوشه احتیاج داریم.

پس از تنظیم فهرست اصلی ، پیش بروید و مستقر شوید. این باید بدون خطا مستقر شود ، اگرچه هنوز کار نخواهد کرد زیرا هیچ چیز پیکربندی نشده است.

پس از اتمام استقرار ، بررسی کنید جزئیات استقرار برای یافتن دامنه تولید (موردی که با هر استقرار تغییر نمی کند). یادداشت کنید به عنوان مثال ، من چیزی شبیه به این داشتم:

vercel-tests....vercel.app

تنظیم یک برنامه وب Firebase

در مرحله بعد ، یک برنامه وب در Firebase ایجاد کنید. ما در این آموزش میزبان Firebase نخواهیم بود ، اما هنوز به پیکربندی برنامه اصلی نیاز داریم.

1. در کنسول Firebase ، یک پروژه جدید ایجاد کنید.
2. روی “افزودن برنامه” کلیک کنید و گزینه وب را انتخاب کنید.
3. در صورت تمایل از میزبانی Firebase پرش کنید. در اینجا کاملاً لازم نیست.
4. وقتی تنظیمات SDK Firebase را مشاهده می کنید ، کپی کنید firebaseConfig جزئیات در جایی امن. به زودی به آنها احتیاج خواهیم داشت.

به ترمینال خود برگردید ، به داخل بروید next-typescript-starter پوشه و اجرا:

yarn install

(npm install ممکن است در این پروژه خاص خطایی ایجاد کند.)

سپس Firebase CLI را در سطح جهانی نصب کنید:

npm install -g firebase-tools
firebase login
firebase use your-firebase-project-id

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

firebase init

“میزبانی” را در طی فرآیند تنظیم انتخاب کنید.

این یک ایجاد می کند firebase.json در پروژه خود پرونده کنید. آن را به حداقل پیکربندی زیر ویرایش کنید:

{
  "hosting": {
    "public": "public"
  }
}

سپس تنظیمات میزبانی خالی خود را مستقر کنید:

firebase deploy --only hosting

اگر همه چیز خوب پیش برود ، پیام موفقیت را مشاهده خواهید کرد:

در این مرحله ، پرونده ای به نام init.json باید به صورت خودکار تولید شود. با بازدید می توانید تأیید کنید:

https://(your-project-id).firebaseapp.com/__/firebase/init.json

در صورت موفقیت ، یک شیء JSON برای پروژه شما نمایش می دهد:

اکنون ، به کنسول Firebase برگردید.

تنظیم احراز هویت Firebase

دوباره در کنسول Firebase ، بروید ساخت → احراز هویت و کلیک کنید شروع کردنبشر

Google را به عنوان ارائه دهنده ورود به سیستم فعال کنید:

ضامن را به فعال کردن و در صورت لزوم آن را پیکربندی کنید. تغییرات را ذخیره کنید.

بعد ، در احراز هویت → تنظیمات → دامنه های مجاز بخش ، دامنه را برای برنامه Vercel خود اضافه کنید.

سپس روی نماد دنده در سمت چپ کنسول Firebase کلیک کنید ، انتخاب کنید تنظیمات پروژه، و باز کردن حساب های خدماتی برگه برای مشاهده جزئیات SDK Admin Firebase.

یک کلید خصوصی جدید ایجاد کنید. این پرونده حاوی اطلاعات حساس خواهد بود (مانند private_key) ، بنابراین آن را ایمن نگه دارید.

اگرچه فقط برای ورود به سیستم کاملاً ضروری نیست ، اما پروژه نمونه نیز از Firestore استفاده می کند. زیر ساخت → پایگاه داده Firestore، یک پایگاه داده ایجاد کنید. پس از ایجاد آن ، به آنجا بروید قاعده و اگر می خواهید خواندن را به راحتی آزمایش کنید و آنها را به راحتی می نویسید ، آنها را به روز کنید (به عنوان مثال ، اجازه دهید برای کاربران معتبر بخوانید/بنویسید).

پیکربندی پروژه Next.js

در ویرایشگر کد خود (به عنوان مثال ، در مقابل کد) ، برای پروژه Vercel خود به پوشه بروید و پیدا کنید *.env.distبشر آن را کپی کرده و آن را تغییر نام دهید *.env.local:

در .env.local، جزئیات جمع آوری شده از Firebase و Vercel را پر کنید:

FIREBASE_API_KEY=AIza*********
FIREBASE_PROJECT_ID=qii****
FIREBASE_ADMIN_CLIENT_EMAIL=firebase-adminsdk-*****@******.iam.gserviceaccount.com
FIREBASE_ADMIN_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\nMIIEvQIBADANBgkqhk********uSfqy/esU8C/4yvskY=\n-----END PRIVATE KEY-----\n"

NEXT_PUBLIC_FIREBASE_API_KEY=AIzaS***********
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=vercel-tests-******.vercel.app
NEXT_PUBLIC_FIREBASE_PROJECT_ID=qii*****
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=79************
NEXT_PUBLIC_ORIGIN=https://vercel-tests-*********.vercel.app

USE_SECURE_COOKIES=false

COOKIE_SECRET_CURRENT=6Lch49AqAAAAAB************
COOKIE_SECRET_PREVIOUS=6GVAHILed0yfoJGogCgkZ*********

مواردی که باید توجه داشته باشید:

• FIREBASE_ADMIN_PRIVATE_KEY باید در نقل قول ها پیچیده شودبشر
• NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN باید باشد دامنه برنامه Vercel شما (بدون پیشوند HTTPS)بشر
• NEXT_PUBLIC_ORIGIN باید شامل پیشوند HTTPS باشد از برنامه Vercel شما
• COOKIE_SECRET_CURRENT وت COOKIE_SECRET_PREVIOUS می تواند هر رشته ای باشد ، اما آنها را خالی نکنید.

اکنون ، ما همچنین باید این متغیرهای محیط را به پروژه Vercel خود اضافه کنیم. در داشبورد Vercel خود ، به تنظیمات → متغیرهای محیط، کلیک کنید اضافه کردن دیگری، پس وارد کردن .envبشر بارگذاری خود را .env.localبشر

• از آنجا که برنامه Vercel به طور پیش فرض از طریق HTTPS سرو می شود. use_secure_cookies = درست است در متغیرهای محیط ورسل.
• اگر قالب کلید خصوصی شما شکسته می شود (نقل قول های گمشده یا خط خط) ، آن را به صورت دستی در داشبورد Vercel ویرایش کنید.

پس از تنظیم همه چیز ، تغییرات محلی خود را به GitHub فشار دهید تا Vercel دوباره مستقر شود. پس از اتمام ، دامنه تولید را باز کنید. این بار ، صفحه باید به درستی ارائه شود:

با این حال ، اگر سعی کنید با Google وارد شوید، شما این خطا را دریافت خواهید کرد:

این Error 400: redirect_uri_mismatch اتفاق می افتد زیرا ما دامنه را به متغیرهای محیط خود به Vercel تغییر دادیم ، اما Google Cloud هنوز از این امر آگاه نیست.

تنظیم Google Cloud

در کنسول Google Cloud ، همان پروژه ای را که برای Firebase استفاده کرده اید انتخاب کنید. رفتن به API و خدمات → اعتبار → شناسه مشتری OAUTH 2.0، سپس روی ورودی مشتری کلیک کنید:

زمینه هایی را برای منشأ مجاز جاوا اسکریپت وت URIS تغییر مسیر مجازبشر وارد کنید:

• منشأ مجاز جاوا اسکریپت: URL پایه برنامه Vercel شما (به عنوان مثال ، https://vercel-tests-******.vercel.app)
• URIS تغییر مسیر مجاز: همان دامنه به علاوه **/auth/handler** (به عنوان مثال ، https://vercel-tests-******.vercel.app/auth/handler)

سپس پس انداز کنید.

پس از اتمام ، دوباره وارد سیستم شوید با Google وارد شوید (Redirect)بشر اگر همه تنظیمات صحیح است ، پس از انتخاب حساب Google خود ، باید صفحه موفقیت ورود به سیستم را ببینید:

در مشخصات صفحه ، پیشخوان دکمه مقدار در Firestore را افزایش می دهد user-counters مجموعه (اگر وجود نداشته باشد ، مجموعه به طور خودکار ایجاد می شود):

پایان

این عالی خواهد بود اگر ابزارهای AI بتوانند دستورالعمل های گام به گام روشنی را برای مواردی از این دست ارائه دهند. با این حال ، هنگامی که هوش مصنوعی فاقد زمینه یا دانش مناسب است ، اغلب پیشنهادات بی ربط بی پایان می دهد و باعث سینک زمان زیادی می شود. بعضی اوقات سریعتر می توانید از طریق پست های وبلاگ یا انجمن های نوشتاری انسانی هنگام گیربندی جستجو کنید. امیدوارم این راهنما به شما کمک کند تا Next.js + Firebase + Google Sign-In-In-In-In-In-In-In-In-In-In-In-In-In-App را در Vercel تنظیم کنید!