angular - 如何在我的 Angular 应用程序中创建自定义 Firebase 新用户电子邮件验证流程？

问题描述

我正在开发托管在 Firebase 上的 Angular 应用程序，并使用 Firebase 身份验证服务来处理用户注册。当用户在应用程序中注册时，我发送一封电子邮件以进行电子邮件确认，我通过以下代码执行此操作：

userCreated.sendEmailVerification().then(function() {
    console.log("User verification e-mail sent to: ", userCreated.email);
}).catch(function(error) {
    console.log("ERROR SENDING USER VERIFICATION E-MAIL !!! THE USER E-MAIL HAVE TO BE VERIFIED MANUALLY BY THE ADMIN");
    alert("ERROR SENDING USER VERIFICATION E-MAIL !!! THE USER E-MAIL HAVE TO BE VERIFIED MANUALLY BY THE ADMIN");
});

好的，问题是我必须为我的用户验证实现一些额外的逻辑（当用户单击电子邮件内的链接时会发生什么）。

我发现这篇关于custom-email-handler 的文章：https ://firebase.google.com/docs/auth/custom-email-handler

但我对如何将它准确地集成到我的 Angular 项目中有些疑问。据我所知（但我对此完全不确定，所以请给我一些提示）它以这种方式工作：

我必须创建一个包含自定义验证链接的自定义验证电子邮件模板（这次指向与进入我的 Angular 应用程序的特定路由相关的特定 Angular 组件）
在这个组件中，我可以处理实现此方法的verifyEmail模式，在此处添加我的额外自定义逻辑：

function handleVerifyEmail(auth, actionCode, continueUrl, lang) { // 将 UI 本地化为由 lang // 参数确定的所选语言。// 尝试应用电子邮件验证码。auth.applyActionCode(actionCode).then(function(resp) { // 邮箱地址已经过验证。
```
 // TODO: Display a confirmation message to the user.
 // You could also provide the user with a link back to the app.

 // TODO: If a continue URL is available, display a button which on
 // click redirects the user back to the app via continueUrl with
 // additional state determined from that URL's parameters.
```
}).catch(function(error) { // 代码无效或过期。请用户再次验证他们的电子邮件地址 // 再次。}); }

我不确定我是否必须在我的 Angular 应用程序的组件内或 Firebase 云功能或其他地方做。

你能给我一些提示吗？

标签： angularfirebasegoogle-cloud-platformfirebase-authenticationgoogle-cloud-functions

解决方案

我必须创建一个包含自定义验证链接的自定义验证电子邮件模板（这次指向与进入我的 Angular 应用程序的特定路由相关的特定 Angular 组件）

是的，您可以通过 Firebase 控制台自定义 Firebase 模板，以便将链接指向您在 Angular Web 应用中实现的页面。Firebase 附加了文档中详述的一组查询字符串参数。

generateEmailVerificationLink()请注意，您也可以通过Admin SDK的方法通过 Cloud Function 生成电子邮件。

然后，在您的 web 应用程序的相应页面中，您需要

从 URL 中提取查询字符串参数

该文档getParameterByName()使用该方法提供了一种可能的解决方案

  // Get the action to complete.
  var mode = getParameterByName('mode');
  // Get the one-time code from the query parameter.
  var actionCode = getParameterByName('oobCode');
  // (Optional) Get the continue URL from the query parameter if available.
  var continueUrl = getParameterByName('continueUrl');
  // (Optional) Get the language code if available.
  var lang = getParameterByName('lang') || 'en';

使用的值actionCode来调用applyActionCode()方法，这是这个过程中的关键动作：当这个方法返回的promise被实现时，验证邮件。然后，您可以实现所需的额外业务逻辑。

需要注意的是，这发生在前端（即在您的 Angular 应用程序的组件内），因此如果需要在后端完成额外的自定义业务逻辑（例如添加自定义声明），您需要调用云函数。如果您的自定义业务逻辑可以从前端完成（例如更新 Firestore 文档），只需在验证电子邮件后从该页面执行，即在then()块中，如下所示：

auth.applyActionCode(actionCode).then(function(resp) {
    // Email address has been verified.
    
    // Implement your custom logic here

  }).catch(function(error) {
    // Code is invalid or expired. Ask the user to verify their email address
    // again.
  });

请注意，由于此代码是通过您的 Angular 应用程序的组件实现的，因此用户很可能已经登录，因为他之前很有可能通过该createUserWithEmailAndPassword()方法创建了他的帐户，该方法将他登录到您的应用程序。

angular - 如何在我的 Angular 应用程序中创建自定义 Firebase 新用户电子邮件验证流程？

问题描述

解决方案

推荐阅读