Я Angular новичок ie унаследовал Angular веб-сайт, который пока не работает.
Часть сайта требует, чтобы пользователи вошли в систему, и у нас есть Firebase login - параметры входа - Google и mail / пароль (позже я должен добраться до Apple, но сначала мне нужно, чтобы эта часть работала).
Логины Google работают плавно - нажмите кнопку и всплывающее окно позволяет выбрать учетную запись Google, и когда я возвращаюсь на свою страницу, она знает, что она вошла в систему. Вот код, который создает начальный экран входа в систему:
firebase-auth-uui. service.ts
import { Injectable } from '@angular/core';
import { auth } from "firebase";
import * as firebaseui from "firebaseui";
import * as firebase from "firebase";
import { UserInfo } from "../../models/user-info";
import * as Rx from "rxjs";
import AuthUI = firebaseui.auth.AuthUI;
import Config = firebaseui.auth.Config;
@Injectable({
providedIn: 'root'
})
export class FirebaseAuthUiService {
private firebaseUi: AuthUI;
private appleProvider: auth.OAuthProvider = new auth.OAuthProvider('apple.com');
private uiConfig: Config = {
signInFlow: "popup",
signInSuccessUrl: '/login-pending',
signInOptions: [
auth.GoogleAuthProvider.PROVIDER_ID,
auth.EmailAuthProvider.PROVIDER_ID,
],
tosUrl: 'https://www.mycompany.com/terms-conditions/',
// Privacy policy url/callback.
privacyPolicyUrl: function () {
window.location.assign('https://www.mycompany.com/privacy-policy/');
}
};
constructor() {
console.log("constructor initializing firebaseUI"); // I see this log when I start up
this.firebaseUi = new firebaseui.auth.AuthUI(firebase.auth());
}
public isUserLoggedIn() {
console.log("hitting isUserLoggedIn"); // NEVER see this
var s = new Rx.Subject();
firebase.auth().onAuthStateChanged(user => {
if (user) {
console.log("and we ARE logged in");
s.next(new UserInfo(user.uid, user.displayName, user.email, user.phoneNumber, user.photoURL, user.providerId));
} else {
console.log("we are NOT logged in");
s.next();
}
});
return s.asObservable();
}
public start(selector: string | Element, signInSuccessWithAuthResult, signInFailure, uiShown) {
console.log("called firebase START with selector = " + selector); // I see this, selector is "#fui-container"
this.uiConfig.callbacks = {
signInSuccessWithAuthResult: signInSuccessWithAuthResult,
signInFailure: signInFailure,
uiShown: uiShown
};
this.firebaseUi.start(selector, this.uiConfig);
}
private signInSuccessWithAuthResult(authResult, redirectUrl): boolean {
var user = authResult.user;
var credential = authResult.credential;
var isNewUser = authResult.additionalUserInfo.isNewUser;
var providerId = authResult.additionalUserInfo.providerId;
var operationType = authResult.operationType;
console.log(user, credential, isNewUser, providerId, operationType); // NEVER see this
return false;
}
private signInFailure(error): Promise<void> {
return Promise.resolve();
}
private uiShown(): void {
console.log("Hit firebase ui shown"); // NEVER see this
}
}
Как вы можете видеть, есть ряд функций, которые мне никогда не удавались, даже если этот логин работает - и работает с здесь , так как я вижу некоторые из журналов. Я нашел другой класс, в котором этот код называется:
login-component.ts
import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import { FirebaseAuthUiService } from "../../services/firebase/firebase-auth-ui.service";
import { MatSnackBar } from "@angular/material";
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
@Output()
onFinish: EventEmitter<void> = new EventEmitter();
private readonly AUTH_CONTAINER = '#fui-container';
progressHidden = false;
authHidden = true;
constructor(private authUi: FirebaseAuthUiService, private snackbar: MatSnackBar) { }
ngOnInit() {
this.authUi.start(
this.AUTH_CONTAINER,
this.signInSuccessWithAuthResult.bind(this),
this.signInFailure.bind(this),
this.uiShown.bind(this)
);
}
private signInSuccessWithAuthResult(authResult, redirectUrl): boolean {
console.log("success on login component, redirect url is: " + redirectUrl); //I see this, redirect url is always 'undefined'
var user = authResult.user;
var isNewUser = authResult.additionalUserInfo.isNewUser;
console.log("Is new user = " + isNewUser);
var providerId = authResult.additionalUserInfo.providerId;
var needVerification = false;
if (providerId == 'password') {
console.log("it's an email");
// check if it's verified
if (user.emailVerified) {
console.log("Mail is verified");
} else {
console.log("email not verified");
needVerification = true;
}
} else {
console.log("provider = " + providerId);
}
var operationType = authResult.operationType;
if (needVerification) {
console.log("Sending an email verification"); // and email verification IS sent
user.sendEmailVerification();
let snackbarMessage = "E-mail needs verification. A verification email has been sent to " + user.email; // I do see this for unverified email
this.snackbar.open(snackbarMessage);
}
this.onFinish.emit();
return false;
}
private signInFailure(error): Promise<void> {
console.log('signInFailure', error); // never see this but it's not a worry
this.onFinish.emit();
return Promise.resolve();
}
private uiShown() {
console.log("hit ui shown"); //I DO see this
this.progressHidden = true;
this.authHidden = false;
}
}
Этот код МОЖЕТ обнаружить, выполнил ли пользователь вход из непроверенного по электронной почте и отправляет им ссылку для подтверждения, но у меня большая проблема:
Когда я использую логин Google, он работает, и я вошел в систему, когда я использую логин электронной почты, в первый раз он перенаправляет меня на страница для выбора адреса электронной почты (URL https://www.accountchooser.com/redirect.html#my .website.com ), и когда я выбираю электронное письмо, оно просто возвращает меня туда, где я находился, не выполнив вход в систему. Во второй раз, когда я нажимаю свой логин При нажатии на кнопку появляется всплывающее окно с идентификатором электронной почты, который я выбрал ранее, и позволяет мне ввести пароль - после этого я действительно вошел в систему (и я нажал код, чтобы проверить, подтверждено ли письмо). Я бы, конечно, хотел, чтобы это всплывающее окно с запросом пароля появилось сразу, но это не так.
Я искал Google и StackOverflow в течение нескольких дней и пытался снова и снова читать литературу по Firebase, но я не не понимаю, что я делаю не так.
Любая помощь будет признательна!
Спасибо
ИЗМЕНЕНО ДЛЯ УДАЛЕНИЯ ВТОРОГО ВОПРОСА
ВТОРОЕ РЕДАКТИРОВАНИЕ Оказывается, проблема в том, что в моем браузере активен "Выбор аккаунта". Когда я его отключаю, все отлично работает. Таким образом, вопрос на самом деле сейчас - как мне автоматически избежать вызова AccountChooser на моем сайте?