通过Dart中的Mailer / Mailer2发送SMTP的电子邮件

Question

我有一个下一个问题，请发送邮件给smtp

Dart VM version: 2.1.0-dev.6.0 (Thu Sep 27 09:51:34 2018 +0200) on "macos_x64"

pubspec.yaml

  

环境：     sdk：'> = 2.0.0 <3.0.0'

     

依赖性：     角度的：^ 5.0.0     angular_components：^ 0.9.2     angular_router：^ 2.0.0-alpha + 19     angular_forms：^ 2.0.0     ng_bootstrap：任意     bootstrap_sass：^ 4.1.2     mailer2：^ 1.2.3

     

dev_dependencies：     angular_test：^ 2.0.0     build_runner：^ 0.10.3     build_test：^ 0.10.3 + 2     build_web_compilers：^ 0.4.4 + 1     测试：^ 1.0.0     sass_builder：^ 2.0.0

contacto_componente.dart

import 'package:angular/angular.dart';
import 'package:angular_forms/angular_forms.dart';
import 'package:easy_export_web/routes.dart';
import 'package:mailer2/mailer.dart';

@Component(
  selector: 'contacto',
  styleUrls: ['contacto_component.css'],
  templateUrl: 'contacto_component.html',
  directives: [NgModel, formDirectives, NgControl, NgControlGroup, NgClass],
  providers: [
    [const ClassProvider(Routes)]
  ],
)
class ContactoComponent implements OnInit {
  final Routes routes;

  ContactoComponent(this.routes);

  Contacto contacto = new Contacto();
  bool submitted = false;

  void onSubmit() {
    print('antes Submmit ${submitted}');
    if (submitted) {
      emailSend();
    }
    submitted = false;
  }

  emailSend() {
    String username = 'caoyarzom@gmail.com';
    String password = 'xxxxxxxxxx';

    print('email ${contacto.email}');
    print('nombre ${contacto.name}');
    print('Empresa ${contacto.enterprise}');
    print('Mensaje ${contacto.mensaje}');

    var options = new GmailSmtpOptions()
      ..username = username
      ..password = password;

    // Create our email transport.
    var emailTransport = new SmtpTransport(options);

    // Create our mail/envelope.
    var envelope = new Envelope()
      ..from = username
      ..recipients.add('caoyarzom@turismolachacra.cl')
      ..bccRecipients.add(contacto.email)
      ..subject = 'Contacto Web EasyExport ${contacto.enterprise} :)'
      ..text = contacto.mensaje
      ..html = '<h1>Test</h1><p>Hey!</p>';

    // Email it.
    emailTransport
        .send(envelope)
        .then((envelope) => print('Email sent!'))
        .catchError((e) => print('Error occurred: $e'))
        .whenComplete(() => contacto = new Contacto());
  }

  @override
  void ngOnInit() {}

  Map<String, bool> setCssValidityClass(NgControl control) {
    final validityClass = control.valid == true ? 'is-valid' : 'is-invalid';
    return {validityClass: true};
  }
}

class Contacto {
  String email;
  String name;
  String enterprise;
  String mensaje;

  Contacto({this.email, this.name, this.enterprise, this.mensaje});
}

contacto_componente.html

<div id="contacto">
    <h1 class="cover-heading">Contacto</h1>
    <p class="lead">Enviame tus datos para que conversemos!.</p>
    <form (ngSubmit)="onSubmit()" #contactoForm="ngForm">
        <div class="form-group">
            <label for="exampleFormControlInput1">Escribe tu e-mail</label>
            <input type="email"
                   required
                   class="form-control"
                   id="exampleFormControlInput1"
                   placeholder="abrito@easyexport.cl"
                   [(ngModel)]="contacto.email"
                   #email="ngForm"
                   [class.is-valid]="email.valid"
                   [class.is-invalid]="!email.valid"
                   ngControl="email">
            <label for="exampleFormControlInput2">Escribe tu nombre</label>
            <input type="text"
                   required
                   class="form-control"
                   id="exampleFormControlInput2"
                   placeholder="Alan Brito"
                   [(ngModel)]="contacto.name"
                   #name="ngForm"
                   [class.is-valid]="name.valid"
                   [class.is-invalid]="!name.valid"
                   ngControl="name">
            <div [hidden]="name.valid || name.pristine" class="invalid-feedback">
                Name is required
            </div>
            <label for="exampleFormControlInput3">Escribe el nombre de tu Empresa</label>
            <input type="text"
                   required
                   class="form-control"
                   id="exampleFormControlInput3"
                   placeholder="EasyExport Ltda."
                   [(ngModel)]="contacto.enterprise"
                   #enterprise="ngForm"
                   [class.is-valid]="enterprise.valid"
                   [class.is-invalid]="!enterprise.valid"
                   ngControl="enterprise">
        </div>
        <div class="form-group">
            <label for="exampleFormControlTextarea1">Escribe tus dudas/comentarios/sugerencias!</label>
            <textarea class="form-control"
                      id="exampleFormControlTextarea1"
                      rows="3"
                      required
                      placeholder="Con Confianza..."
                      [(ngModel)]="contacto.mensaje"
                      #mensaje="ngForm"
                      [class.is-valid]="mensaje.valid"
                      [class.is-invalid]="!mensaje.valid"
                      ngControl="mensaje"></textarea>
        </div>

            <button type="submit"
                    (click)="submitted=true"
                    [disabled]="!contactoForm.form.valid"
                    class="btn btn-primary">Enviar</button>

    </form>
</div>

webdev服务

webdev serve

我在浏览器中运行时出现的问题

problem

完整日志 https://www.dropbox.com/s/yggb1qd7xtyz99q/localhost-1538426918207.txt?dl=0

Answer 1

这里的问题很简单-您正在尝试在浏览器中发送SMTP消息。 SMTP位于TCP之上，而不是 HTTP之上，因此您需要一个TCP套接字才能使用package:mailer。

套接字在浏览器中不可用；因此，您无法在浏览器中发送电子邮件。

您可以：

1. 创建一个用于发送电子邮件的简单API
2. 使用GMail API通过HTTP发送