如何使用 Angular 和 ASP.NET Core 3.1 确认电子邮件答案

【问题标题】：How to confirm email using Angular and ASP.NET Core 3.1如何使用 Angular 和 ASP.NET Core 3.1 确认电子邮件
【发布时间】：2020-07-20 06:33:35
【问题描述】：

我正在使用 Angular 9 (localhost:4200) 和带有 dotnet Core 3.1 (localhost:5000) 的 WebAPI。在用户注册期间，我将用户数据从客户端传递到服务器，然后在注册方法中我向他发送一封电子邮件以进行验证。用户单击链接后，它会将他重定向到 localhost:5000 到 VerifyEmail 方法。

如何在注册功能中创建一个链接，以便代码可以先访问客户端功能，然后在服务器上确认验证？还是有更好的方法来使用 Angular/dotnet core WebApi 确认电子邮件？

客户端：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { User } from '../_models/user';
import { environment } from '../../environments/environment';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
baseUrl = environment.apiUrl + 'auth/';

constructor(private http: HttpClient) {}

register(user: User) {
    return this.http.post(this.baseUrl + 'register', user);
  }
}

verifyEmail(data: any) {     // not used 
    return this.http.post(this.baseUrl + 'VerifyEmail', data);
  }

服务器端：

[HttpPost("register")]
        public async Task<IActionResult> Register(UserForRegisterDto userForRegisterDto)
        {
            var code = string.Empty;
            var userToCreate = _mapper.Map<User>(userForRegisterDto);
            try
            {
                var userExists = await _userManager.FindByNameAsync(userToCreate.UserName);
                if (userExists == null)
                {
                    var result = await _userManager.CreateAsync(userToCreate, userForRegisterDto.Password);
                    code = await _userManager.GenerateEmailConfirmationTokenAsync(userToCreate);
                    if (result.Succeeded)
                    {
                        //some code
                    }
                }
                else
                {
                    var emailConfirmed = await _userManager.IsEmailConfirmedAsync(userExists);
                    code = await _userManager.GenerateEmailConfirmationTokenAsync(userExists);
                    if (emailConfirmed)
                    {
                        return Ok();
                    }
                }

                var link = Url.Action(nameof(VerifyEmail), "Auth", new { userId = userToCreate.Id, code }, Request.Scheme, Request.Host.ToString());

                await _emailService.SendAsync("test@test.com", "email verify", $"<a href=\"{link}\">Verify Email</a>", true);
            }
            catch (Exception ex)
            {
                throw;
            }
            return Ok();
        }

public async Task<IActionResult> VerifyEmail(string userId, string code)
        {
            if (string.IsNullOrEmpty(userId) || string.IsNullOrEmpty(code))
            {
                return BadRequest();
            }

            var user = await _userManager.FindByIdAsync(userId);

            if (user == null)
            {
                return BadRequest();
            }

            if (user.EmailConfirmed)
            {
                //return Ok();
            }

            var result = await _userManager.ConfirmEmailAsync(user, code);
            if (result.Succeeded)
            {
                return Ok();
            }

            return BadRequest();
        }

提前感谢您的帮助和您的时间！

【问题讨论】：

如果我理解正确，您可以创建一个新组件，解析为 /verify-email 之类的路由，并在其 ngOnInit() 方法中添加逻辑以从 AuthService 调用您的 verifyEmail 方法
谢谢，成功了！

标签： c# angular asp.net-core-webapi

【解决方案1】：

我将创建一个新的角度组件，它解析为 /verify-email 路由并从那里调用 AuthService

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'email-verification',
  template: '<h1>{{status}}</h1>',
  styleUrls: [ './email-verification.component.css' ]
})
export class EmailVerificationComponent implements OnInit  {
  status: string = "Verifying...";
  constructor(private authService: AuthService){}

  ngOnInit() {
    this.authService.verifyEmail().subscribe(_ => this.status = "Email verified!");
    //redirect to another component
  }
}

【讨论】：