روال‌های مطلوب برای استفاده از signInWithRedirect در مرورگرهایی که دسترسی به فضای ذخیره‌سازی طرف سوم را مسدود می‌کنند

این سند روال‌های مطلوب استفاده از ورود به سیستم با هدایت مجدد در مرورگرهایی را که کوکی‌های طرف سوم را مسدود می‌کنند شرح می‌دهد. برای اینکه signInWithRedirect() در محیط‌های تولید و در همه مرورگرها طبق انتظار عمل کند، باید یکی از گزینه‌های فهرست‌شده در اینجا را دنبال کنید.

نمای کلی

برای اینکه جریان signInWithRedirect() برای شما و کاربران‌تان یکپارچه باشد، «کیت توسعه نرم‌افزار جاوااسکریپت Firebase Authentication» از iframe بین مبدأ استفاده می‌کند که به دامنه Firebase Hosting برنامه‌تان متصل می‌شود. بااین‌حال، این سازوکار با مرورگرهایی که دسترسی به فضای ذخیره‌سازی طرف سوم را مسدود می‌کنند کار نمی‌کند.

ازآنجایی‌که درخواست از کاربران برای غیرفعال کردن ویژگی‌های پارتیشن‌بندی فضای ذخیره‌سازی در مرورگر به‌ندرت گزینه مناسبی است، باید بسته به جزئیات مورد استفاده‌تان، یکی از گزینه‌های راه‌اندازی زیر را برای برنامه‌تان اعمال کنید.

  • اگر برنامه خود را با «میزبانی Firebase» در زیردامنه‌ای از firebaseapp.com میزبانی می‌کنید، تحت تأثیر این مشکل قرار نمی‌گیرید و نیازی به اقدام نیست.
  • اگر برنامه‌تان را با «میزبانی Firebase» در دامنه سفارشی یا زیردامنه web.app میزبانی می‌کنید، از گزینه ۱ استفاده کنید.
  • اگر برنامه‌تان را با سرویسی غیر از Firebase میزبانی می‌کنید، از گزینه ۲، گزینه ۳، گزینه ۴، یا گزینه ۵ استفاده کنید.

گزینه ۱: پیکربندی Firebase را به‌روز کنید تا از دامنه سفارشی‌تان به‌عنوان authDomain استفاده کنید

اگر برنامه‌تان را بااستفاده از دامنه سفارشی با «میزبانی Firebase» میزبانی می‌کنید، می‌توانید «کیت توسعه نرم‌افزار Firebase» را پیکربندی کنید تا از دامنه سفارشی‌تان به‌عنوان authDomain استفاده کند. این کار تضمین می‌کند که برنامه شما و iframe اصالت‌سنجی از دامنه یکسانی استفاده کنند، که از مشکل ورود به سیستم جلوگیری می‌کند. (اگر از «میزبانی Firebase» استفاده نمی‌کنید، باید از گزینه دیگری استفاده کنید.). مطمئن شوید که دامنه سفارشی را در همان پروژه‌ای که برای اصالت‌سنجی استفاده می‌کنید راه‌اندازی کرده‌اید.

برای به‌روز کردن پیکربندی Firebase به‌منظور استفاده از دامنه سفارشی به‌عنوان دامنه اصالت‌سنجی، کارهای زیر را انجام دهید:

  1. «کیت توسعه نرم‌افزار Firebase JS» را پیکربندی کنید تا از دامنه سفارشی‌تان به‌عنوان authDomain استفاده کند:

    const firebaseConfig = {
      apiKey: "<api-key>",
      authDomain: "<the-domain-that-serves-your-app>",
      databaseURL: "<database-url>",
      projectId: "<project-id>",
      appId: "<app-id>"
    };
    
  1. authDomain جدید را به فهرست شناسه‌های «URI هدایت» مجاز ارائه‌دهنده OAuth خود اضافه کنید. نحوه انجام این کار به ارائه‌دهنده بستگی دارد، اما به‌طورکلی می‌توانید بخش «قبل‌از شروع» را در هر ارائه‌دهنده برای دستورالعمل‌های دقیق دنبال کنید (برای مثال، ارائه‌دهنده Facebook). نشانی وب به‌روزشده برای مجوز دادن به‌صورت https://<the-domain-that-serves-your-app>/__/auth/handler است — /__/auth/handler در انتها مهم است.

    به‌همین ترتیب، اگر از ارائه‌دهنده SAML استفاده می‌کنید، authDomain جدید را به نشانی وب «سرویس مصرف‌کننده ادعای SAML» (ACS) اضافه کنید.

  2. مطمئن شوید که continue_uri شما در فهرست دامنه‌های مجاز قرار دارد.

  3. درصورت نیاز، با «میزبانی Firebase» مجدداً مستقر کنید تا جدیدترین فایل پیکربندی Firebase میزبانی‌شده در /__/firebase/init.json را واکشی کنید.

گزینه ۲: رفتن به signInWithPopup()‎

به‌جای signInWithRedirect() از signInWithPopup() استفاده کنید. بقیه کد برنامه شما یکسان باقی می‌ماند، اما شیء UserCredential به‌روش دیگری بازیابی می‌شود.

Web

  // Before
  // ==============
  signInWithRedirect(auth, new GoogleAuthProvider());
  // After the page redirects back
  const userCred = await getRedirectResult(auth);

  // After
  // ==============
  const userCred = await signInWithPopup(auth, new GoogleAuthProvider());

Web

  // Before
  // ==============
  firebase.auth().signInWithRedirect(new firebase.auth.GoogleAuthProvider());
  // After the page redirects back
  var userCred = await firebase.auth().getRedirectResult();

  // After
  // ==============
  var userCred = await firebase.auth().signInWithPopup(
      new firebase.auth.GoogleAuthProvider());
```

ورود به سیستم با بالاپَر همیشه برای کاربران ایده‌آل نیست—بالاپَرها گاهی‌اوقات توسط دستگاه یا پلاتفرم مسدود می‌شوند و جریان برای کاربران تلفن همراه روان‌تر است. اگر استفاده از بالاپَرها برای برنامه‌تان مشکل‌ساز است، باید یکی از گزینه‌های دیگر را دنبال کنید.

گزینه ۳: درخواست‌های اصالت‌سنجی پراکسی به firebaseapp.com

جریان signInWithRedirect با هدایت مجدد از دامنه برنامه شما به دامنه مشخص‌شده در پارامتر authDomain در پیکربندی Firebase شروع می‌شود (به‌طور پیش‌فرض «.firebaseapp.com»). authDomain میزبان کد دستیار ورود به سیستم است که به «ارائه‌دهنده هویت» هدایت می‌کند و درصورت موفقیت، به دامنه برنامه هدایت می‌کند.

وقتی جریان اصالت‌سنجی به دامنه برنامه شما برمی‌گردد، به فضای ذخیره‌سازی مرورگر دامنه یاری‌رسان ورود به سیستم دسترسی پیدا می‌شود. این گزینه و گزینه زیر (برای میزبانی خودکار کد) دسترسی به فضای ذخیره‌سازی بین‌مبدائی را که درغیراین‌صورت توسط مرورگرها مسدود می‌شود حذف می‌کند.

  1. کارگزار جانشین معکوسی در سرور برنامه‌تان راه‌اندازی کنید تا درخواست‌های GET/POST به https://<app domain>/__/auth/ به https://<project>.firebaseapp.com/__/auth/ بازارسال شود. مطمئن شوید که این بازارسال برای مرورگر شفاف باشد؛ این کار را نمی‌توان ازطریق «بازارسال ۳۰۲» انجام داد.

    اگر از nginx برای ارائه دامنه سفارشی خود استفاده می‌کنید، پیکربندی پروکسی معکوس به این شکل خواهد بود:

    # reverse proxy for signin-helpers for popup/redirect sign in.
    location /__/auth {
      proxy_pass https://<project>.firebaseapp.com;
    }
    
  2. برای به‌روزرسانی redirect_uri مجاز، نشانی وب ACS، و authDomain، مراحل گزینه ۱ را دنبال کنید. پس‌از استقرار مجدد برنامه، دسترسی به فضای ذخیره‌سازی بین مبدأ دیگر نباید اتفاق بیفتد.

گزینه ۴: میزبانی کد کمکی ورود به سیستم در دامنه خودتان

روش دیگر برای حذف دسترسی به فضای ذخیره‌سازی بین مبدأها این است که کد دستیار ورود به سیستم Firebase را خودتان میزبانی کنید. بااین‌حال، این رویکرد برای ورود به سیستم Apple یا SAML کار نمی‌کند. فقط درصورتی از این گزینه استفاده کنید که راه‌اندازی پراکسی معکوس در گزینه ۳ غیرممکن باشد.

مراحل میزبانی کد کمکی به شرح زیر است:

  1. با اجرای فرمان‌های زیر، فایل‌ها را از مکان <project>.firebaseapp.com بارگیری کنید تا میزبانی کنید:

    mkdir signin_helpers/ && cd signin_helpers
    wget https://<project>.firebaseapp.com/__/auth/handler
    wget https://<project>.firebaseapp.com/__/auth/handler.js
    wget https://<project>.firebaseapp.com/__/auth/experiments.js
    wget https://<project>.firebaseapp.com/__/auth/iframe
    wget https://<project>.firebaseapp.com/__/auth/iframe.js
    wget https://<project>.firebaseapp.com/__/auth/links
    wget https://<project>.firebaseapp.com/__/auth/links.js
    wget https://<project>.firebaseapp.com/__/firebase/init.json
    
  2. فایل‌های بالا را در دامنه برنامه‌تان میزبانی کنید. مطمئن شوید که سرور وب شما می‌تواند به https://<app domain>/__/auth/<filename> و https://<app domain>/__/firebase/init.json پاسخ دهد.

    در اینجا پیاده‌سازی سرور نمونه‌ای وجود دارد که فایل‌ها را بارگیری و میزبانی می‌کند. توصیه می‌کنیم فایل‌ها را به‌صورت دوره‌ای بارگیری و همگام‌سازی کنید تا مطمئن شوید که جدیدترین رفع اشکالات و ویژگی‌ها را دریافت می‌کنید.

  3. مراحل گزینه ۱ را برای به‌روزرسانی redirect_uri مجاز و authDomain خود دنبال کنید. پس‌از استقرار مجدد برنامه، دسترسی به فضای ذخیره‌سازی بین مبدأ دیگر نباید اتفاق بیفتد.

گزینه ۵: ورود به سیستم ارائه‌دهنده را به‌طور مستقل مدیریت کنید

«کیت توسعه نرم‌افزار Firebase Authentication» signInWithPopup() و signInWithRedirect() را به‌عنوان روش‌های راحت برای پوشش دادن منطق پیچیده و اجتناب از نیاز به استفاده از کیت توسعه نرم‌افزار دیگر ارائه می‌دهد. می‌توانید با ورود به سیستم ارائه‌دهنده به‌طور مستقل و سپس استفاده از signInWithCredential() برای تبدیل اعتبارنامه ارائه‌دهنده به اعتبارنامه «اصالت‌سنجی Firebase»، به‌طور کامل از هر دو روش استفاده نکنید. برای مثال، می‌توانید از کیت توسعه نرم‌افزار ورود به سیستم Google، کد نمونه برای دریافت اطلاعات اعتباری حساب Google استفاده کنید، سپس با اجرای کد زیر، اطلاعات اعتباری Google جدیدی را نمونه‌سازی کنید:

Web

  // `googleUser` from the onsuccess Google Sign In callback.
  //  googUser = gapi.auth2.getAuthInstance().currentUser.get();
  const credential = GoogleAuthProvider.credential(googleUser.getAuthResponse().id_token);
  const result = await signInWithCredential(auth, credential);

Web

  // `googleUser` from the onsuccess Google Sign In callback.
  const credential = firebase.auth.GoogleAuthProvider.credential(
      googleUser.getAuthResponse().id_token);
  const result = await firebase.auth().signInWithCredential(credential);

پس‌از تماس با signInWithCredential()، بقیه عملکردهای برنامه شما همان‌طور که قبلاً بود کار می‌کند.

دستورالعمل‌های دریافت اطلاعات اعتباری Apple در اینجا موجود است.