fx รีเลย์ส่วนตัว
2024.11.07
Private Relay ให้ที่อยู่อีเมลที่สร้างขึ้นเพื่อใช้แทนที่อยู่อีเมลส่วนตัว
ผู้รับจะยังคงได้รับอีเมล แต่ Private Relay จะเก็บที่อยู่อีเมลส่วนตัวไว้ไม่ให้ถูกเก็บเกี่ยว จากนั้นจึงทำการซื้อ ขาย แลกเปลี่ยน หรือรวมกับข้อมูลอื่น ๆ เพื่อระบุ ติดตาม และ/หรือกำหนดเป้าหมายเป็นการส่วนตัว
โปรดดูมาตรฐานการเข้ารหัสของเราสำหรับสไตล์โค้ด รูปแบบการตั้งชื่อ และวิธีการอื่นๆ
sudo apt install postgresql libpq-dev python3-devbrew install postgresql libpqsudo dnf install libpq-devel python3-develโคลนและเปลี่ยนเป็นไดเร็กทอรี:
git clone --recurse-submodules https://github.com/mozilla/fx-private-relay.git
cd fx-private-relayสร้างและเปิดใช้งานสภาพแวดล้อมเสมือน:
ระบบที่ใช้ยูนิกซ์:
virtualenv env
source env/bin/activateหน้าต่าง:
python -m venv env
source env/Scripts/activate หากคุณไม่ได้ใช้ Git Bash บน Windows แทนที่จะพิมพ์ source env/Scripts/activate ให้พิมพ์ .envScriptsactivate
หมายเหตุ: หากคุณใช้ Windows และได้รับข้อความแสดงข้อผิดพลาดที่ระบุว่าสคริปต์การเรียกใช้งานถูกปิดใช้งานบนคอมพิวเตอร์ของคุณ ให้ไปที่ Windows PowerShell แล้วพิมพ์ Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy Unrestricted จากนั้นลองอีกครั้ง
ติดตั้งข้อกำหนด Python และโหนด:
pip install -r requirements.txt cd frontend
npm install
cd ../ หมายเหตุ: หากคุณใช้ Windows คุณอาจพบปัญหาเกี่ยวกับการใช้ตัวแปรสภาพแวดล้อมในสคริปต์ npm คุณสามารถบังคับให้ npm ใช้ git-bash: npm config set script-shell "C:\Program Files\Git\bin\bash.exe" นี่เป็นตำแหน่งเริ่มต้น การติดตั้งของคุณอาจแตกต่างกัน
คัดลอกไฟล์ .env สำหรับการกำหนดค่า decouple :
cp .env-dist .env เพิ่มค่า SECRET_KEY ให้กับ .env :
SECRET_KEY =secret-key-should-be-different-for-every-installย้ายฐานข้อมูล:
python manage.py migrateสร้างผู้ใช้ระดับสูง:
python manage.py createsuperuserเรียกใช้แบ็กเอนด์:
python manage.py runserverและในเทอร์มินัลอื่น ให้สร้างส่วนหน้า:
cd frontend
npm run watchเอกสารต่อไปนี้จะช่วยให้คุณเริ่มต้นการพัฒนาได้ รวมถึงการสร้างสตริงใหม่เพื่อแปล ดูการแปลและการแปลสำหรับข้อมูลทั่วไปเกี่ยวกับการแปลรีเลย์
เราใช้โมดูลย่อย git สำหรับไฟล์ข้อความที่แปล ขั้นตอนการติดตั้ง --recurse-submodules ควรนำไฟล์ข้อความไปไว้ในไดเร็กทอรีการทำงานของคุณแล้ว แต่คุณอาจต้องการอัปเดตการแปลหลังการติดตั้งด้วย วิธีที่ง่ายที่สุดคือ:
git submodule update --remote หากต้องการอัปเดตโมดูลย่อยโดยอัตโนมัติเมื่อรัน git pull หรือคำสั่งอื่นๆ:
git config --global submodule.recurse true ไดเร็กทอรี privaterelay/locales เป็นที่เก็บ git เช่นเดียวกับไดเร็กทอรีอื่น ๆ ดังนั้นหากต้องการเปลี่ยนแปลงข้อความ:
ทำการเปลี่ยนแปลงตามที่คุณต้องการใน privaterelay/locales/en ขณะที่คุณทำงาน
cd privaterelay/locales/en
git branch message-updates-yyyymmdd
git push -u origin message-updates-yyyymmdd
จากนั้น คุณสามารถเปิดคำขอดึงจากสาขา message-updates-yyyymmdd ไปยังสาขา main repo l10n
หากคุณยังไม่พร้อมที่จะส่งสตริงสำหรับการแปล คุณสามารถเพิ่มสตริงเหล่านั้นลงใน frontend/pendingTranslations.ftl ได้ สตริงในไฟล์นั้นจะปรากฏขึ้นจนกว่าจะเพิ่มสตริงที่มี ID เดียวกันไปยังที่เก็บ l10n
ในทำนองเดียวกัน มี pending_locales/pending.ftl ซึ่งสามารถจัดเก็บสตริงภาษาแบ็กเอนด์ชั่วคราวได้ เมื่อรวมสตริงจากคำขอดึงใน repo l10n เข้ากับ Relay repo แล้ว สตริงที่เกี่ยวข้องเหล่านี้จะต้องถูกลบออกจาก pending_locales/pending.ftl เพื่อหลีกเลี่ยงความล้มเหลวในการทดสอบ CircleCI
หากต้องการคอมมิตการอัปเดตการแปลของแอป (เช่น ก่อนการเปิดตัว) เราจำเป็นต้องคอมมิตการอัปเดตโมดูลย่อยนี้ ดังนั้น หากการแปลที่อัปเดตพร้อมที่จะส่งไปยังแอป คุณสามารถ git add โมดูลย่อยได้เหมือนกับไฟล์อื่นๆ:
git add privaterelay/localesจากนั้นคุณสามารถคอมมิตและพุชเพื่อตั้งค่าพื้นที่เก็บข้อมูลแอปเป็นโมดูลย่อยการแปลเวอร์ชันอัปเดต:
git pushกระบวนการอัตโนมัติจะอัปเดตโมดูลย่อยทุกวัน โดยนำมาซึ่งการเปลี่ยนแปลงและการแปลใหม่ๆ จากทีมการแปล
หากต้องการเปิดใช้งานการรับรองความถูกต้องของบัญชี Mozilla บนเซิร์ฟเวอร์ภายในเครื่องของคุณ คุณสามารถใช้แอป OAuth "Firefox Private Relay local dev" บน account.stage.mozaws.net
โดยทำดังนี้:
ตั้งค่า ADMIN_ENABLED=True ในไฟล์ .env ของคุณ
ปิดเซิร์ฟเวอร์หากทำงานอยู่ และเพิ่มตารางผู้ดูแลระบบด้วย:
python manage.py migrate รันเซิร์ฟเวอร์ ขณะนี้มีจุดสิ้นสุด /admin :
python manage.py runserverไปที่หน้าผู้ดูแลระบบ django เพื่อเปลี่ยนไซต์เริ่มต้น
เปลี่ยน example.com เป็น 127.0.0.1:8000 แล้วคลิกบันทึก
ไปที่หน้าผู้ดูแลระบบแอปโซเชียล django-allauth ลงชื่อเข้าใช้ด้วยบัญชี superuser ที่คุณสร้างไว้ด้านบน และเพิ่มแอปโซเชียลสำหรับบัญชี Firefox:
| สนาม | ค่า |
|---|---|
| ผู้ให้บริการ | บัญชีมอซิลลา |
| ชื่อ | accounts.stage.mozaws.net |
| รหัสลูกค้า | 9ebfe2c2f9ea3c58 |
| รหัสลับ | ขอสิ่งนี้ได้จาก #fx-private-relay-eng ช่อง Slack |
| เว็บไซต์ | 127.0.0.1:8000 -> ไซต์ที่เลือก |
ตอนนี้คุณสามารถลงชื่อเข้าใช้ http://127.0.0.1:8000/ ด้วย FxA ได้แล้ว
หมายเหตุ: ส่วนเสริมอยู่ใน repo แยกต่างหาก ดูข้อมูลเพิ่มเติมเกี่ยวกับการเริ่มต้นใช้งาน
ส่วนเสริมเพิ่ม Firefox UI เพื่อสร้างและกรอกที่อยู่อีเมลอัตโนมัติทั่วทั้งเว็บ การเรียกใช้ส่วนเสริมในเครื่องทำให้สามารถสื่อสารกับเซิร์ฟเวอร์ในเครื่องของคุณ ( 127.0.0.1:8000 ) แทนเซิร์ฟเวอร์ที่ใช้งานจริง ( relay.firefox.com )
npm run watch จะเฝ้าดูไดเร็กทอรี frontend/src และสร้างส่วนหน้าเมื่อตรวจพบการเปลี่ยนแปลง อย่างไรก็ตาม การสร้างบิลด์ที่ใช้งานจริงนั้นใช้เวลานานพอที่จะขัดขวางขั้นตอนการพัฒนาของคุณ ดังนั้นจึงเป็นไปได้ที่จะรันส่วนหน้าบนเซิร์ฟเวอร์แยกต่างหากที่จะคอมไพล์โมดูลที่เปลี่ยนแปลงใหม่เท่านั้น และไม่ใช้การเพิ่มประสิทธิภาพการผลิต หากต้องการทำเช่นนั้น แทนที่จะใช้ npm run watch ให้รัน npm run dev
ส่วนหน้าพร้อมใช้งานแล้วที่ http://localhost:3000 โปรดทราบว่าสิ่งนี้จะทำให้สภาพแวดล้อมการพัฒนาในพื้นที่ของคุณมีความคล้ายคลึงกับการใช้งานจริงน้อยลง โดยเฉพาะอย่างยิ่ง การรับรองความถูกต้องโดยปกติจะผูกไว้กับเซิร์ฟเวอร์ส่วนหลัง และจำเป็นต้องจำลองเมื่อเรียกใช้ส่วนหน้าบนเซิร์ฟเวอร์ที่แยกต่างหาก หากคุณทำการเปลี่ยนแปลงใดๆ ที่เกี่ยวข้องกับการรับรองความถูกต้อง อย่าลืมทดสอบโดยใช้ npm run watch ด้วยเช่นกัน
หมายเหตุ: คุณลักษณะพรีเมียมจะเปิดใช้งานโดยอัตโนมัติสำหรับผู้ใช้ที่มีที่อยู่อีเมลลงท้ายด้วย mozilla.com , getpocket.com หรือ mozillafoundation.org (ดู PREMIUM_DOMAINS ใน emails/models.py ) เพื่อเลียนแบบประสบการณ์ของลูกค้า ขอแนะนำให้ทำตามขั้นตอนด้านล่าง
เพื่อเปิดใช้งานคุณสมบัติรีเลย์ระดับพรีเมียม เราได้รวมเข้ากับแพลตฟอร์มการสมัครสมาชิก FXA ในระดับสูง เพื่อตั้งค่าการสมัครสมาชิก Relay พรีเมียม เรา:
เปิดใช้งานการรับรองความถูกต้องของบัญชี Mozilla ตามที่อธิบายไว้ข้างต้น
สร้างผลิตภัณฑ์และราคาในแดชบอร์ด Stripe ของเรา (สอบถามใน #subscription-platform ช่อง Slack เพื่อเข้าถึงแดชบอร์ด Stripe ของเรา)
เชื่อมโยงผู้ใช้ Relay ฟรีเข้ากับขั้นตอนการซื้อ SubPlat ที่เหมาะสม
ตรวจสอบ json โปรไฟล์ FXA ของผู้ใช้สำหรับช่อง subscriptions เพื่อดูว่าพวกเขาสามารถเข้าถึงฟีเจอร์พรีเมียมเฉพาะการสมัครรับข้อมูลได้หรือไม่
ในรายละเอียด:
เปิดใช้งานการรับรองความถูกต้องของบัญชี Mozilla ตามที่อธิบายไว้ข้างต้น
ไปที่แดชบอร์ด Stripe ของเรา (สอบถามใน #subscription-platform ช่อง Slack เพื่อเข้าถึงแดชบอร์ด Stripe ของเรา)
สร้างผลิตภัณฑ์ใหม่ใน Stripe
เพิ่ม product: ข้อมูลเมตา
product: ตัวอย่างเช่น ต้องป้อน webIconURL เป็น product:webIconURL เพิ่ม capabilities: ข้อมูลเมตา
capabilities: และค่านี้เป็นสตริงรูปแบบอิสระเพื่ออธิบาย "ความสามารถ" ที่การซื้อการสมัครสมาชิกมอบให้กับผู้ใช้ เช่น capabilities:9ebfe2c2f9ea3c58 พร้อมค่า premium-relayตั้งค่า env vars ด้วยค่าจากขั้นตอนข้างต้น:
| วาร์ | ค่า |
|---|---|
FXA_SUBSCRIPTIONS_URL | https://accounts.stage.mozaws.net/subscriptions |
PERIODICAL_PREMIUM_PROD_ID | prod_KEq0LXqs7vysQT (จาก Stripe) |
PREMIUM_PLAN_ID_US_MONTHLY | price_1LiMjeKb9q6OnNsLzwixHuRz (จาก Stripe) |
PREMIUM_PLAN_ID_US_YEARLY | price_1LiMlBKb9q6OnNsL7tvrtI7y (จาก Stripe) |
PHONE_PROD_ID | prod_LviM2I0paxH1DZ (จาก Stripe) |
PHONE_PLAN_ID_US_MONTHLY | price_1LDqw3Kb9q6OnNsL6XIDst28 (จาก Stripe) |
PHONE_PLAN_ID_US_YEARLY | price_1Lhd35Kb9q6OnNsL9bAxjUGq (จากแถบ) |
BUNDLE_PROD_ID | prod_MQ9Zf1cyI81XS2 (จากแถบ) |
BUNDLE_PLAN_ID_US | price_1Lwp7uKb9q6OnNsLQYzpzUs5 (จาก Stripe) |
SUBSCRIPTIONS_WITH_UNLIMITED | "premium-relay" (ตรงกับค่า capabilities ที่คุณใช้ใน Stripe) |
SUBSCRIPTIONS_WITH_PHONE | "relay-phones" (ตรงกับค่า capabilities ที่คุณใช้ใน Stripe) |
ใน frontend/ ให้ตั้งค่า ANALYZE=true เมื่อรัน npm run build เพื่อสร้างรายงานโดยละเอียดว่าโมดูลใดใช้ขนาดบันเดิลส่วนใหญ่ รายงานจะถูกสร้างขึ้นสำหรับทั้งไคลเอนต์และเซิร์ฟเวอร์ของส่วนหน้า แต่เนื่องจากเราใช้เฉพาะไคลเอนต์ เราจึงสนใจเพียงสิ่งนั้นจริงๆ รายงานจะเปิดขึ้นโดยอัตโนมัติในเบราว์เซอร์ของคุณ และสามารถพบได้ใน /frontend/.next/analyze/
ANALYZE=true npm run buildมีเอกสารกรณีทดสอบที่ครอบคลุมสำหรับการซื้อรีเลย์ระดับพรีเมียม
คุณสามารถใช้รายละเอียดบัตรเครดิตทดสอบของ Stripe ในการชำระเงินได้
คุณสมบัติโทรศัพท์ได้รับการปกป้องเพิ่มเติมด้วย phones ธงวาฟเฟิล ในขั้นตอนนี้ คุณจะต้องมี SRE เพื่อเพิ่มแฟล็กให้กับผู้ใช้ทดสอบของคุณ บนเซิร์ฟเวอร์การพัฒนา นักพัฒนาสามารถเพิ่มแฟล็กได้
นอกเหนือจากข้อกำหนดสำหรับ dev แล้ว สภาพแวดล้อมการผลิตควรใช้:
สภาพแวดล้อมการผลิตควรตั้งค่าตัวแปรสภาพแวดล้อมเพิ่มเติมบางส่วนด้วย:
DATABASE_URL=postgresql://:@:/
DJANGO_SECURE_HSTS_SECONDS=15768000
DJANGO_SECURE_SSL_REDIRECT=True
