Question

我希望用户通过我的Web应用程序中的电子邮件链接无密码登录。将来，我也想在android / ios上实现此功能，但现在我很乐意在网络上实现此功能。我可以发送电子邮件，但是单击链接不会导致在Firebase中创建用户。

我尝试了许多教程，现在我在工作中使用了这两个很棒的教程： https://www.youtube.com/watch?v=BAG7Oig34RY&t=43s https://medium.com/@vivek040997/how-to-implement-firebase-email-link-passwordless-login-in-ionic-4-for-android-4c61f331c4a0

主页HTML：

    <ion-item>
    <ion-label position="floating">Email</ion-label>
    <ion-input [(ngModel)]="email"></ion-input>
  </ion-item>
<ion-button
    expand="block"
    [disabled]="emailSent"
    (click)="sendEmailLink(email)"
    >Login</ion-button
  >

Home.page.ts

    import { Component } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import { Platform, AlertController, NavController } from "@ionic/angular";

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  hasVerifiedEmail = true;
  sentTimestamp;
  email;
  emailSent = false;
  errorMessage;
  user;

  constructor(public afAuth: AngularFireAuth,private alertController: AlertController,
    private navCtrl: NavController) {

    }


  async sendEmailLink() {
    var actionCodeSettings = {
      // URL you want to redirect back to. Enter the Firebase hosting url here.
      url: "http://localhost:8101/home",
      handleCodeInApp: true,
      iOS: {
        bundleId: "com.firebaseemail.linkauth"
      },
      android: {
        packageName: "com.firebaseemail.linkauth"
      }
    };
try {
      await this.afAuth.auth.sendSignInLinkToEmail(
        this.email,
        actionCodeSettings
      );
      this.presentAlert("Mail Sent", "Check your email for login link");
      this.emailSent = true;
    } catch (err) {
      console.error(err);
      this.presentAlert("Error", "There was an error in sending mail");
      this.errorMessage = err.message;
    }
  }

  async presentAlert(title, message) {
    const alert = await this.alertController.create({
      header: title,
      message: message,
      buttons: ["OK"]
    });
await alert.present();
  }

}

我设法将电子邮件发送到该电子邮件。我的Firebase配置中也将白名单中的localhost URL列入了白名单。但是我想我错过了实际注册用户的功能吗？我只是不明白如何添加这部分。

非常感谢您的帮助！

Answer 1

我怀疑您确实按照本教程进行了学习。

请查看您执行的步骤，并确保在每个实例中都选择了正确的名称。

捆绑名称

我可以在您发布的摘录中看到，您已经复制了软件包名称com.firebaseemail.linkauth，这只是一个例子。

世界上的每个应用程序都必须具有唯一的包/捆绑ID。常见格式是撤消您的应用程序网站域。因此，如果您拥有域名www.microsoft.com，并且想要发布出色的应用程序，则可能会选择com.microsoft.awesomeapp之类的捆绑包名称。

并不一定要这样-可以是您想要的任何文本，但这是人们使用的原因，因为没有其他人可能会使用您自己的网站地址。这是世界上每个人都可以轻松生成自己独特的程序包名称的简便方法。

在此之后，本教程中还有其他几个地方，您可能犯了类似的错误，因此请查看所有示例占位符并检查您是否使用了自己的唯一值。

返回网址

在第6步中，说明了如何设置托管以及为什么需要托管。

重新阅读该部分，按照其设置说明进行操作。

稍后将需要该URL。

请参见教程第8步的第2部分，其中说明：

  // URL you want to redirect back to. Enter the Firebase hosting url here.
  url: "https://yourprojectname.firebaseapp.com/",

它说输入您的Firebase托管网址，但您输入了错误的内容-本地主机网址：

  // URL you want to redirect back to. Enter the Firebase hosting url here.
  url: "http://localhost:8101/home",

您只需要按照本教程操作，并确保已阅读每条说明并做正确的事情。似乎所有这些都可以提供完整的解决方案。

Ionic4：电子邮件无密码身份验证-用户未注册

1 个答案:

捆绑名称

返回网址