在离子电容器 ios 平台中出现错误：RecaptchaVerifier 仅在浏览器 HTTP/HTTPS 环境中受支持

Question

我正在开发ionic capacitor具有 firebase 电话身份验证功能的应用程序。我已遵循 firebase 文档，并将代码设置为身份验证电话，并使用 firebase 发送 otp 和验证。它在浏览器和 Android 设备中运行良好。我正在获取 otp，我也可以验证它，但现在我正在创建 ios 构建并发现我遇到了一些错误

code: "auth/operation-not-supported-in-this-environment"

message: "RecaptchaVerifier is only supported in a browser HTTP/HTTPS environment."

请在下面找到我的代码

recaptchaVerifier: firebase.auth.RecaptchaVerifier;    
ionViewDidLoad() {
        this.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-in-button', {
        size: 'invisible',
        callback: (response) => {
    
       },
       'expired-callback': () => {
       }
     });
}

signInWithPhoneNumber() {
 this.authService.signInWithPhoneNumber(this.recaptchaVerifier, +19898989898).then(
   success => {
     this.verifyPhone();
   }).catch(error => this.afterLoginError(error));
}

所以问题只出在ios上

Answer 1

在 Android 和 iOS 上，您应该使用 Firebase Android SDK 和 Firebase Apple SDK。对于 Capacitor，已经有一个Capacitor Firebase 身份验证插件可以实现这些 SDK 并支持电话身份验证。

这是一个例子：

import { FirebaseAuthentication } from '@capacitor-firebase/authentication';

const signInWithPhoneNumber = async () => {
  return new Promise(async resolve => {
    // Attach `phoneCodeSent` listener to be notified as soon as the SMS is sent
    await FirebaseAuthentication.addListener('phoneCodeSent', async event => {
      // Ask the user for the SMS code
      const verificationCode = window.prompt(
        'Please enter the verification code that was sent to your mobile device.',
      );
      // Confirm the verification code
      const result = await FirebaseAuthentication.confirmVerificationCode({
        verificationId: event.verificationId,
        verificationCode,
      });
      resolve(result.user);
    });
    // Attach `phoneVerificationCompleted` listener to be notified if phone verification could be finished automatically
    await FirebaseAuthentication.addListener(
      'phoneVerificationCompleted',
      async event => {
        resolve(event.result.user);
      },
    );
    // Start sign in with phone number and send the SMS
    await FirebaseAuthentication.signInWithPhoneNumber({
      phoneNumber: '123456789',
    });
  });
};

如果您之后还想让用户登录 Firebase JS SDK，请另外查看本指南： https: //github.com/capawesome-team/capacitor-firebase/blob/main/packages/authentication/docs/firebase- js-sdk.md