หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ส่วนประกอบของบุคคลที่สาม
ดาวน์โหลด

React-Rainbow-Firebase-Auth

การรับรองความถูกต้องของผู้ใช้มักเป็นส่วนที่ยากที่สุดในการสร้างเว็บแอปใด ๆ โดยเฉพาะอย่างยิ่งหากคุณต้องการรวมผู้ให้บริการหลายรายเข้าด้วยกัน การมีโปรไฟล์เป็นหนึ่งในคุณสมบัติที่พบบ่อยที่สุดที่คุณจะต้องเพิ่มในโครงการของคุณ ตอนนี้งานที่ยากลำบากทั้งหมดได้ทำเพื่อคุณในฐานะ Templete Build in React ที่จะช่วยให้คุณสามารถตรวจสอบสิทธิ์โดยใช้บริการ Firebase ได้ในเวลาไม่กี่นาที

โครงการใช้:

  • ตอบสนอง 16.12.0
  • React-Dom 16.12.0
  • React-Redux 7.1.3
  • React-Router-Dom 5.1.2
  • React-intl 3.6.2
  • Redux 4.0.4
  • Redux-form 8.2.6
  • Firebase 7.4.0
  • องค์ประกอบสไตล์ 4.4.1
  • องค์ประกอบ React-RainBow 1.11.0
  • ESLINT 6.1.0
  • Stylelint 12.0.0
  • ไซเปรส 3.7.0

ผู้ให้บริการสนับสนุน:

  • Google
  • Facebook

คุณสมบัติ:

  • UI การรับรองความถูกต้องในอุดมคติและโซลูชันความปลอดภัยสำหรับแอพหน้าเดียวที่ทันสมัย
  • รองรับการเข้าสู่ระบบท้องถิ่นด้วยชื่อผู้ใช้อีเมลและรหัสผ่านโดยใช้แนวทางปฏิบัติด้านความปลอดภัยที่ดีที่สุด
  • รองรับการเข้าสู่ระบบโซเชียลด้วย Facebook และ Google โดยใช้แนวทางปฏิบัติด้านความปลอดภัยที่ดีที่สุด
  • หน้าโปรไฟล์ผู้ใช้ที่มีความสามารถในการอัปเดตรหัสผ่านปัจจุบันชื่อผู้ใช้และอีเมลของคุณ
  • ส่งอีเมลระบบสำหรับรีเซ็ตรหัสผ่าน
  • การรวมการรวม Facebook และ Google อย่างเต็มที่
  • การทดสอบการรวมด้วยไซเปรส

ติดตั้งและเรียกใช้

  • คำแนะนำเหล่านี้เป็นพื้นฐานคุณสามารถใช้วิธีการใด ๆ ในการทำงานนี้
  1. สร้างโฟลเดอร์ใหม่สำหรับ repo ของคุณ
  2. เริ่มต้นอินสแตนซ์ GIT และคัดลอกผ่านไฟล์เทมเพลต
  3. เขียนทับ readme นี้
  4. ตรวจสอบให้แน่ใจว่าได้เปลี่ยนชื่อ repo
  5. ตรวจสอบให้แน่ใจว่าได้เปลี่ยน manifest.json ในโฟลเดอร์ public
  6. ตรวจสอบให้แน่ใจว่าได้เปลี่ยน firebase.js ในโฟลเดอร์ src

เบ็ดเตล็ด

ก่อนที่คุณจะเริ่ม

เพิ่ม firebase ลงในโครงการ JavaScript ของคุณ

เตรียมพร้อมที่จะได้รับ ACCES กับผู้ให้บริการ Facebook

  1. บนเว็บไซต์ Facebook สำหรับนักพัฒนาได้รับ รหัสแอพ และ แอพลับ สำหรับแอปของคุณ
  2. เปิดใช้งานการเข้าสู่ระบบ Facebook:
    1. ในคอนโซล Firebase เปิดส่วน Auth
    2. บนแท็บ เมธอดลงชื่อเข้า ใช้เปิดใช้งานวิธีการลงชื่อเข้าใช้ Facebook และระบุ ID แอพ และ ความลับของแอพ ที่คุณได้รับจาก Facebook
    3. จากนั้นตรวจสอบให้แน่ใจว่า OAUTH เปลี่ยนเส้นทาง URI (เช่น my-app-12345.firebaseapp.com/__/auth/handler ) แสดงรายการเป็นหนึ่งใน OAuth Randirect URIs ในหน้าการตั้งค่าแอป Facebook ของคุณบน Facebook สำหรับเว็บไซต์นักพัฒนาใน การตั้งค่าผลิตภัณฑ์> การกำหนดค่าเข้าสู่ระบบ Facebook

เตรียมพร้อมที่จะได้รับการรับรองกับผู้ให้บริการ Google

  1. เปิดใช้งาน Google ลงชื่อเข้าใช้ในคอนโซล Firebase:
    1. ในคอนโซล Firebase เปิดส่วน Auth
    2. บนแท็บ เมธอดลงชื่อเข้า ใช้เปิดใช้งานวิธีการลงชื่อเข้าใช้ Google และคลิก บันทึก

เตรียมพร้อมที่จะได้รับ ACCES กับผู้ให้บริการ GitHub

  1. ในคอนโซล Firebase เปิดส่วน Auth
  2. บนแท็บ วิธีการลงชื่อเข้า ใช้เปิดใช้งานผู้ให้บริการ GitHub
  3. เพิ่ม รหัสลูกค้า และ ความลับของลูกค้า จากคอนโซลนักพัฒนาของผู้ให้บริการในการกำหนดค่าผู้ให้บริการ:
    1. ลงทะเบียนแอปของคุณเป็นแอปพลิเคชันนักพัฒนาซอฟต์แวร์บน GitHub และรับ รหัสไคลเอนต์ OAuth 2.0 ของแอปและ ความลับของลูกค้า
    2. ตรวจสอบให้แน่ใจว่า Firebase Oauth ของคุณเปลี่ยนเส้นทาง URI (เช่น my-app-12345.firebaseapp.com/__/auth/handler ) ถูกตั้งค่าเป็น URL การเรียกคืนการอนุญาต ของคุณในหน้าการตั้งค่าแอปของคุณในการกำหนดค่าแอป GitHub ของคุณ
  4. คลิก บันทึก

ผู้สนับสนุน

นี่คือ ProjectOpen โอเพนซอร์ซที่ดูแลโดย Nexxtway Corp

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด