React-Rainbow-firebase-auth
Die Benutzerauthentifizierung ist häufig der schwierigste Teil beim Erstellen einer Web -App, insbesondere wenn Sie mehrere Anbieter integrieren möchten. Ein Profil zu haben ist eine der häufigsten Funktionen, die Sie für Ihre Projekte hinzufügen müssen. Jetzt wurde alle harten Arbeiten für Sie als Templete -Build in React erledigt, mit dem Sie in nur wenigen Minuten mit dem Firebase -Service Authentifizierung authentifizieren können.
Das Projekt verwendet:
- Reagieren Sie 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
- Stilkomponenten 4.4.1
- React-Rainbow-Komponenten 1.11.0
- Eslint 6.1.0
- Stylelint 12.0.0
- Cypress 3.7.0
Unterstützte Anbieter:
Merkmale:
- Idealische Authentifizierungs -Benutzeroberfläche und Sicherheitslösung für moderne Single -Page -Apps
- Unterstützt die lokale Login mit Benutzername, E-Mail und Passwort mit den besten Sicherheitspraktiken
- Unterstützt die soziale Anmeldung bei Facebook und Google mit den besten Sicherheitspraktiken
- Benutzerprofilseite mit der Möglichkeit, Ihr aktuelles Kennwort, Ihr Benutzername und Ihre E-Mail zu aktualisieren
- Sendet System -E -Mails zum Zurücksetzen des Passworts
- Facebook und Google Integration vollständig getestet
- Integrationstest mit Zypressen
Installieren und ausführen
- Diese Anweisungen sind grundlegend. Sie können jede Methode verwenden, um diese Arbeit zu erledigen.
- Machen Sie einen neuen Ordner für Ihr Repo
- Starten Sie eine GIT -Instanz und kopieren Sie Vorlagendateien
- Überschreiben Sie diese Readme
- Stellen Sie sicher, dass Sie den Repo -Titel ändern
- Stellen Sie sicher, dass Sie das
manifest.json im public Ordner ändern - Stellen Sie sicher, dass Sie die
firebase.js im src -Ordner ändern
Verschiedenes
Bevor du anfing
Fügen Sie Ihrem JavaScript -Projekt Firebase hinzu
Seien Sie bereit, mit Facebook -Anbieter Klage zu erhalten
- Holen Sie sich die App -ID und ein App -Geheimnis für Ihre App auf der Website von Facebook for Developmenters
- Aktivieren Sie Facebook Login:
- Öffnen Sie in der Firebase -Konsole den Auth -Abschnitt.
- Aktivieren Sie auf der Registerkarte "Anzeichen in der Methode" die Facebook- Anmeldemethode und geben Sie die App-ID und das App-Geheimnis an, das Sie von Facebook erhalten haben.
- Stellen Sie dann sicher, dass Ihr OAuth-Umleitungs-URI (z. B.
my-app-12345.firebaseapp.com/__/auth/handler ) als eine Ihrer OAuth-Redirect-URIs auf der Einstellungsseite Ihrer Facebook-App auf der Facebook-Seite für die Entwickler-Site auf der Produkteinstellungen> Facebook-Login- Konfiguration aufgeführt ist.
Seien Sie bereit, mit Google Provider Acces zu erhalten
- Aktivieren Sie Google Anmelden in der Firebase-Konsole:
- Öffnen Sie in der Firebase -Konsole den Auth -Abschnitt.
- Aktivieren Sie auf der Registerkarte "Anmelden in der Methode " die Google -Anmeldemethode und klicken Sie auf Speichern .
Seien Sie bereit, mit dem Github -Anbieter Klage zu erhalten
- Öffnen Sie in der Firebase -Konsole den Auth -Abschnitt.
- Aktivieren Sie auf der Registerkarte "Anzeichen in Methode" den GitHub -Anbieter.
- Fügen Sie die Client -ID und das Client -Geheimnis aus der Entwicklerkonsole dieses Anbieters zur Anbieterkonfiguration hinzu:
- Registrieren Sie Ihre App als Entwickleranwendung auf GitHub und erhalten Sie die OAuth 2.0 -Client -ID und das Client -Geheimnis Ihrer App.
- Stellen Sie sicher, dass Ihre Firebase OAuth URI (z. B.
my-app-12345.firebaseapp.com/__/auth/handler ) als Callback-URL Ihrer App auf der Einstellungsseite Ihrer App auf der Konfiguration Ihrer Github-App festgelegt wird.
- Klicken Sie auf Speichern .
Unterstützer
Dies ist ein Open-Source-ProjektOpen von Nexxtway Corp.