如何从AngularFireAuth获得signInAnonymous以返回承诺

Question

bounty到期在6天内。这个问题的答案有资格获得+ 50声望赏金。Atticus29想要引起更多关注来回答这个问题。

我一直在遵循fireship.io的教程来设置条纹支付。在their repo's auth service中，我看到了很多可观察变量到Promise的转换，大概是为了允许checkout组件中非常有用且可读的async / await语法。例如，此方法存在于auth服务中：

getUser(): Promise<any> {
    return this.afAuth.authState.pipe(first()).toPromise();
  }

允许在组件中进行这样的调用

const user = await this.auth.getUser();

我试图从根本上允许用户向我的Webapp捐款，这不需要任何登录。当前，我在我的checkout组件中调用了stripeCreateCharge（请参见下文），但这取决于auth.getUser()方法，我认为这意味着我需要某种登录名。

因此，我在auth服务中创建了一个匿名登录方法，并在处理程序调用的上游调用它。

来自auth.service.ts：

anonymousLogin() {
    console.log("anonymousLogin entered");
    // console.log('AuthIsStateResolved: ' + this.afAuth.auth.isStateResolved_);
    this.afAuth.auth.signInAnonymously()
     .then((credential) => {
       console.log("success inside callback for signInAnonymously");
       console.log(credential.user);
       // this.authState = credential;
       this.updateUserData(credential.user);
       return this.getUser();
     })
     .catch(error => console.log(error));
  }

在我的checkout.component.ts中：

ngOnInit() {
    this.auth.signOut();
    this.handler = StripeCheckout.configure({
      key: 'pk_live_ztqhLfPwjEf2SFC26LDmWkXr',
      locale: 'auto',
      source: async (source) => {
        this.displayThings = true;
        this.loading = true;
        console.log("got into source callback from handler in checkout.component");
        this.auth.anonymousLogin();
        const user = await this.auth.getUser();
        console.log(user);
        if(user){
          const fun = this.functions.httpsCallable('stripeCreateCharge');
          this.confirmation = await fun({ source: source.id, uid: user.uid, amount: this.amount }).toPromise();
          console.log("this.confirmation");
          console.log(this.confirmation.outcome.seller_message);
          this.loading = false;
          if(this.confirmation.outcome.seller_message === "Payment complete."){
            this.paymentStatus = this.confirmation.outcome.seller_message + " Thank you!";
          } else{
            this.paymentStatus = this.confirmation.outcome.seller_message;
          }
        } else{
          console.log("ack never happened");
        }
      }
    });
  }

特别注意线条

        this.auth.anonymousLogin();
        const user = await this.auth.getUser();
        console.log(user);

上面，我看到this.auth.anonymousLogin()直到after才被完成，所以我们有一个异步性问题，如控制台输出所证明：

const user = await this.auth.getUser();

我的问题：有没有一种方法可以修改anonymousLogin（）以在完成后返回承诺，以便我可以继续使用async / await语法，并且有类似的东西，

或者，是否有更好的建议来处理整个事情？

2019年12月17日更新：

当我将return添加到signInAnonymously方法时，它在我的checkout.component.ts中返回undefined：

auth.service.ts

        const loggedInStatus = await this.auth.anonymousLogin();
        if(loggedInStatus){
            const user = await this.auth.getUser();
            console.log(user);
            // More stuff in here...
        }

checkout.component.ts

...
anonymousLogin() {
    console.log("anonymousLogin entered");
    // console.log('AuthIsStateResolved: ' + this.afAuth.auth.isStateResolved_);
    return this.afAuth.auth.signInAnonymously()
     .then((credential) => {
       console.log("success inside callback for signInAnonymously");
       console.log(credential.user);
       // this.authState = credential;
       this.updateUserData(credential.user);
       // return this.getUser();
     })
     .catch(error => console.log(error));
  }

...
const loggedInStatus = await this.auth.anonymousLogin();
        console.log("test user");
        console.log(loggedInStatus);
        const user = await this.auth.getUser();
        console.log(loggedInStatus);
        //below not updated yet
        if(user){
          const fun = this.functions.httpsCallable('stripeCreateCharge');
          this.confirmation = await fun({ source: source.id, uid: user.uid, amount: this.amount }).toPromise();
          console.log("this.confirmation");
          console.log(this.confirmation.outcome.seller_message);
          this.loading = false;
          if(this.confirmation.outcome.seller_message === "Payment complete."){
            this.paymentStatus = this.confirmation.outcome.seller_message + " Thank you!";
          } else{
            this.paymentStatus = this.confirmation.outcome.seller_message;
          }
        } else{
          console.log("ack never happened");
        }
...

Answer 1

为了创建正确的Promise链，您需要：