Firebase 注册邀请

Question

我正在使用 firebase 在 next js 中构建邀请注册。这是我想要实现的流程：

1. 管理员输入要邀请的电子邮件 ID，然后单击“输入”。然后应使用 firebase 将邀请链接发送到该电子邮件。
2. 当用户点击它时，它应该被重定向到一个页面，用户可以在其中设置密码并提交。那么他的凭据应该保存在数据库中。

注意：此链接应该会在一天内过期。一旦使用该邀请链接进行注册，它就应该过期。 技术：next js/node 和 firebase

我使用了 sendEmailverific action()，但是当我使用它时，我无法从该 firebase 链接的 oobcode 获取用户电子邮件。这样我就可以使用用户输入的电子邮件和密码在 firebase 中创建新用户。

Answer 1

管理员发送邀请电子邮件

在 Next.js 中创建 API 路由来处理邀请电子邮件的发送。

// pages/api/sendInvitation.js
import { getAuth } from 'firebase-admin/auth';
import { initializeApp, applicationDefault, cert } from 'firebase-admin/app';

const serviceAccount = require('../../path/to/serviceAccountKey.json');

initializeApp({
  credential: cert(serviceAccount)
});

export default async (req, res) => {
  const { email } = req.body;
  
  if (!email) {
    return res.status(400).json({ error: 'Email is required' });
  }

  try {
    const link = await getAuth().generateSignInWithEmailLink(email, {
      url: 'http://yourdomain.com/completeSignup', // URL to redirect to after email verification
      handleCodeInApp: true
    });

    // Send email logic here (using nodemailer, SendGrid, etc.)

    res.status(200).json({ message: 'Invitation sent' });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
};

用户设置密码并提交

在 Next.js 中创建一个页面，供用户在单击邀请链接后设置密码。

// pages/completeSignup.js
import { useState } from 'react';
import { getAuth, confirmSignInWithEmailLink, createUserWithEmailAndPassword } from 'firebase/auth';
import { initializeApp } from 'firebase/app';

const firebaseConfig = {
  // your firebase config
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

export default function CompleteSignup() {
  const [password, setPassword] = useState('');
  const [message, setMessage] = useState('');

  const handleSubmit = async (event) => {
    event.preventDefault();

    try {
      const email = window.localStorage.getItem('emailForSignIn');
      if (!email) {
        throw new Error('Email not found');
      }

      if (confirmSignInWithEmailLink(auth, email, window.location.href)) {
        await createUserWithEmailAndPassword(auth, email, password);
        setMessage('User created successfully');
      }
    } catch (error) {
      setMessage(`Error: ${error.message}`);
    }
  };

  return (
    <div>
      <h1>Complete Signup</h1>
      <form onSubmit={handleSubmit}>
        <input
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          placeholder="Set Password"
          required
        />
        <button type="submit">Submit</button>
      </form>
      <p>{message}</p>
    </div>
  );
}

处理链接过期和使用情况

为确保链接在一天后过期并在使用后无效，您可以利用 Firebase 身份验证的内置功能。

generateSignInWithEmailLink

方法已经处理过期和一次性使用。唯一的额外步骤是确保在生成链接时临时存储电子邮件并在用户完成注册后清除电子邮件。

集成电子邮件发送逻辑

在

sendInvitation

API 路由中集成您首选的电子邮件发送服务（如 nodemailer、SendGrid 等）以发送生成的链接。

使用 Nodemailer 发送电子邮件的完整示例

import nodemailer from 'nodemailer';

// Assuming you have the email link generation code here

const transporter = nodemailer.createTransport({
  service: 'gmail',
  auth: {
    user: '[email protected]',
    pass: 'your-email-password'
  }
});

const mailOptions = {
  from: '[email protected]',
  to: email,
  subject: 'Complete your signup',
  html: `<p>Click <a href="${link}">here</a> to complete your signup.</p>`
};

transporter.sendMail(mailOptions, (error, info) => {
  if (error) {
    return console.log(error);
  }
  console.log('Email sent: ' + info.response);
});

注册后清除本地存储

用户完成注册后请务必清除本地存储：

if (confirmSignInWithEmailLink(auth, email, window.location.href)) {
  await createUserWithEmailAndPassword(auth, email, password);
  window.localStorage.removeItem('emailForSignIn'); // Clear email from local storage
  setMessage('User created successfully');
}