Я пытаюсь взять дополнительные данные из формы регистрации пользователя и поместить их в базу данных пользователей firebase. Я могу получить адрес электронной почты + пароль, однако я не могу заставить работать другие поля.
Я пытался добавить больше переменных в this.afAuth.auth.createUserWithEmailAndPassword(email, password)
, но это работает только с двумя.
Вот код из auth.service.ts (функция SignUp и функции, которые также показаны в ней):
// Sign up with email/password
SignUp(email, password) {
return this.afAuth.auth.createUserWithEmailAndPassword(email, password)
.then((result) => {
/* Call the SendVerificaitonMail() function when new user sign
up and returns promise */
this.SendVerificationMail();
this.SetUserData(result.user);
}).catch((error) => {
window.alert(error.message)
})
}
// Send email verfificaiton when new user sign up
SendVerificationMail() {
return this.afAuth.auth.currentUser.sendEmailVerification()
.then(() => {
this.router.navigate(['verify-email-address']);
})
}
SetUserData(user) {
const userRef: AngularFirestoreDocument<User> = this.afs.doc(`users/${user.uid}`);
const userData: User = {
uid: user.uid,
email: user.email,
displayName: user.displayName,
photoURL: user.photoURL,
emailVerified: user.emailVerified,
department: user.department
}
return userRef.set(userData, {
merge: true
})
}
Вот данные из Registration.component (Сначала файл TS)
// This is where the only modification in the TS file is - the rest is the default (CLI made)
constructor(
public authService: AuthService
) { }
(HTML-файл)
<div class = "displayTable">
<div class = "displayTableCell">
<div class = "authBlock">
<h3>Sign Up</h3>
<div class = "formGroup">
<input type = "email" class = "formControl" placeholder = "Email Address" #userEmail required>
</div>
<div class = "formGroup">
<input type = "password" class = "formControl" placeholder = "Password" #userPwd required>
</div>
<div class = "formGroup">
<input type = "text" class = "formControl" placeholder = "Department" #userDept required>
</div>
<div class = "formGroup">
<input type = "button" class = "btn btnPrimary" value = "Sign Up" (click) = "authService.SignUp(userEmail.value, userPwd.value, userDept.value)">
</div>
<div class = "redirectToLogin">
<span>Already have an account? <span class = "redirect" routerLink = "/sign-in">Log In</span></span>
</div>
</div>
</div>
Желаемый результат: Добавьте отдел (и любые другие добавленные поля) в базу данных вместе с электронной почтой + паролем, которые уже есть.
Фактический результат:
Я получаю ошибку (как показано ниже) при попытке отправить отдел с помощью функции authService.SignUp()
. (через форму регистрации на сайте).
https://imgur.com/a/VcZfLdx
Ошибка правильная, department
есть undefined
, поэтому firebase жалуется. Вы в своем шаблоне проходите кафедру:
authService.SignUp(userEmail.value, userPwd.value, userDept.value)
Но в вашей соответствующей функции вы не добавили его в качестве параметра, поэтому сначала добавьте его, а также передайте в SetUserData
:
SignUp(email, password, department) { // add here!
return this.afAuth.auth.createUserWithEmailAndPassword(email, password)
.then((result) => {
// ...
this.SetUserData(result.user, department); // add as parameter also!
})
// ...
}
В SetUserData
также добавьте его как параметр, и теперь у вас есть доступ к значению!
SetUserData(user, department) { // added as parameter
// ...
const userData: User = {
uid: user.uid,
email: user.email,
displayName: user.displayName,
photoURL: user.photoURL,
emailVerified: user.emailVerified,
department: department // HERE!
}
// ...
}
О, во всяком случае, не слишком внимательно смотрел, обновил свой ответ, и теперь он должен работать :)
Большое спасибо! Я протестирую это в ближайшее время, но это выглядит довольно хорошо!
Хорошо. Я протестировал его, и он отлично работает, однако теперь он не отображается в моем компоненте панели инструментов, когда я пытаюсь вызвать его как {{user.department}}
, но такие вещи, как {{user.uid}}
и {{user.email}}
, не работают. Ниже приведен div, в котором предполагается привязка: <div *ngIf = "authService.userData as user"> <h1>Hello: {{(user.displayName) ? user.displayName : 'User'}}</h1><p>User ID: {{user.uid}</p><p>Email: {{user.email}}</p><p>Department: {{user.department}}</p></div>
Вы отладили? Что печатает console.info(result.user)
?
Вам нужно сделать некоторую отладку самостоятельно. Поместите журналы консоли во все места и посмотрите, как выглядят данные. Кроме того, вы видите значения в БД?
Я вижу значения в базе данных. Я пытался размещать console.info повсюду с различными вещами (например, после регистрации со всеми введенными значениями, во время входа в систему) и (я либо не знаю, где искать, либо) отдел не отображается /получить.
Я запутался... Какие данные показываются, а какие нет? Сначала вы сказали, что отдел работает, а теперь говорите, что нет? Вы извлекаете оба пользовательских объекта, верно?
Департамент не работал с самого начала, и это то, что я хотел исправить. (Как сбор отдела из формы, так и интерполяция строк в html компонента панели инструментов). Имя, UID и адрес электронной почты отображаются просто отлично, и я не уверен, как заставить отдел отображаться в том виде, в котором он есть в базе данных, и он (я думаю) должен работать.
Получаете ли вы пользовательские объекты оба, потому что отдел доступен только в одной из таблиц.
Какие два пользовательских объекта? В пользовательском объекте он показывает все данные, и при получении для него я верю он попадает в базу данных (в которой находится пользователь со всеми полями (отдел, электронная почта, имя пользователя и т. д.))
ну, один из пользователей извлекается из таблицы аутентификации this.afAuth.authState
, а второй, в котором находится значение отдела, извлекается из this.afs.doc(``users/${user.uid}``)
Не могу помочь, если не вижу кода.
Понял тебя. Я посмотрю на это.
Будет ли этот код там, где мне нужно что-то изменить, чтобы перейти к базе данных вместо authState? this.afAuth.authState.subscribe(user => { if (user) { this.userData = user; localStorage.setItem('user', JSON.stringify(this.userData)); JSON.parse(localStorage.getItem('user')); } else { localStorage.setItem('user', null); JSON.parse(localStorage.getItem('user')); } })
Этот фрагмент кода получает данные из таблицы пользователей авторизации, значение department
там отсутствует. Вам также нужно запросить другую таблицу. От this.afs.doc(`users/${user.uid}`)
Знаете, как бы я это сделал? Я попытался найти его, и я не уверен, что делать - мне нужно получить код из обоих или только из БД?
Прочтите руководство о том, как получить документ: github.com/angular/angularfire2/blob/master/docs/firestore/…
Вот что у меня там уже творится — я просто не знаю, как дальше брать поля из формы и задавать их в БД для пользователя.