Реализация firebaseUI в Angular, мне не хватает поддержки опции «держать меня в системе».
Я понимаю, что firebaseUI возобновляет поток «регистрации» и «входа в систему», объединяя эти два шага в один (https://github.com/firebase/firebaseui-web/issues/665#issuecomment -596197657 ). Однако я не могу найти оправдания для того, чтобы не предлагать пользователю вариант безопасности выбора правильной аутентификации (https://firebase.google.com/docs/auth/web/auth-state-persistence). firebaseUI- angular частично документирует firebaseui.disableAutoSignIn (), но это не переключатель, а только односторонняя опция (https://github.com/RaphaelJenni/FirebaseUI-Angular#disable -autosign ).
Итак, что мне здесь не хватает? Как пользователь должен защищать свои данные, если он посещает свою учетную запись на устройстве publi c, когда постоянная аутентификация неявно установлена на LOCAL?
UPDATE
Через пару раундов я получил в опцию «держать меня в системе» - но только при использовании входа в Google, а не при использовании входа через электронную почту / ссылку.
Основная проблема электронной почты / ссылки заключается в том, что ссылка / URL-адрес отправлены по электронной почте. аутентифицируется в новой вкладке браузера, и во время этого он сильно затрудняет сохранение подлинности. Отправленная по электронной почте ссылка / URL-адрес переходит на firebaseapp.com, который аутентифицирует и перенаправляет приложение Angular. Итак, как передать выбор персистентности пользователя в этом потоке?
Песочница firebaseUI-web + Angular очень быстро настраивается:
- Blank Angular project
- npm i firebase @ angular / fire firebaseui --save
- firebaseConfig установлен в environment.ts
- ниже кода
app.module .ts:
import {AngularFireModule} from '@angular/fire';
import {AngularFireAuthModule} from '@angular/fire/auth';
import {environment} from 'src/environments/environment';
...
@NgModule({ ...
imports: [ ...
AngularFireModule.initializeApp(environment.firebaseConfig),
AngularFireAuthModule,
...
app.component.ts:
import { Component, OnInit } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import * as firebase from 'firebase/app';
import * as firebaseui from 'firebaseui';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
ui: firebaseui.auth.AuthUI; // firebaseUI reference
uiLinkUrl = false;
keepSignin = false;
constructor(public afAuth: AngularFireAuth) {}
ngOnInit() {
this.ui = new firebaseui.auth.AuthUI(firebase.auth());
if (this.ui.isPendingRedirect()) {
this.uiLinkUrl = true;
}
this.afAuth.authState.subscribe((response) => {
if (response) {
// update html element if not routing.
this.showFirebaseUI();
} else {
// only update persistence if signed out, and not reroute.
if (!this.uiLinkUrl) {
this.afAuth.auth.setPersistence(this.keepSignin ?
firebase.auth.Auth.Persistence.LOCAL :
firebase.auth.Auth.Persistence.SESSION);
}
this.uiLinkUrl = false;
this.showFirebaseUI();
}
});
}
toggleKeepSignin() {
this.keepSignin = !this.keepSignin;
this.afAuth.auth.setPersistence(this.keepSignin ?
firebase.auth.Auth.Persistence.LOCAL :
firebase.auth.Auth.Persistence.SESSION);
}
showFirebaseUI() {
// The start method will wait until the DOM is loaded.
this.ui.start('#firebaseui-auth-container', {
callbacks: {
uiShown: function () {
document.getElementById('loader').style.display = 'none';
},
signInSuccessWithAuthResult: function (authResult, redirectUrl) {
return false;
},
},
credentialHelper: firebaseui.auth.CredentialHelper.NONE,
signInFlow: 'popup',
signInOptions: [
{ provider: firebase.auth.GoogleAuthProvider.PROVIDER_ID,
customParameters: {prompt: 'select_account'} },
{ provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
signInMethod: firebase.auth.EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD },
],
});
}
}
app.component. html:
<div *ngIf="afAuth.auth.currentUser">
<h1 style="color:#0a0;">Signed IN</h1>
<button (click)="afAuth.auth.signOut()">Sign Out</button>
</div>
<div *ngIf="!afAuth.auth.currentUser">
<h1 style="color:#a00;">Signed OUT</h1>
</div>
<div style="background:#222;" id="firebaseui-auth-container"></div>
<div id="loader">Loading...</div>
<div style="text-align:center;" (click)="toggleKeepSignin()">
<input type="checkbox" [checked]="keepSignin">Keep me signed in
</div>