时间戳

首页 > 解决方案 > 如何使用 rnfirebase 动态链接和身份验证模块 v6 在 React Native 中实现 signInWithEmailLink

javascript - 如何使用 rnfirebase 动态链接和身份验证模块 v6 在 React Native 中实现 signInWithEmailLink

问题描述

我想要做的：
在重置密码按钮上单击发送一封信给用户的电子邮件使用auth().sendSignInLinkToEmail(<user email>, actionCodeSettings);

用户单击收到的链接后，他将导航到应用程序并使用dynamicLinks().getInitialLink()获取电子邮件链接，他将使用auth().signInWithEmailLink()方法登录。

这是我的实现：

重置密码屏幕

const handleContinue = async () => {
    await FirebaseAuth.resetPassword(email);
    await AsyncStorage.setItem('@email', email); 
};

FirebaseAuth.js

const actionCodeSettings = {
  handleCodeInApp: true,
  // URL must be whitelisted in the Firebase Console.
  url: 'https://examplemoxie.page.link/password_reset',
  iOS: {
    bundleId: '<my bundle id>',
  },
  android: {
    bundleId: '<my bundle id>',
    installApp: true,
  },
};

class FirebaseAuthApp {
  constructor(firebase) {
    this.firebase = firebase;
  }

  resetPassword = emailAddress =>
    auth()
      .sendSignInLinkToEmail(emailAddress, actionCodeSettings)
      .catch(error => logger(error));

 ...
}

此时一切正常，我收到了一封电子邮件，通过单击它，我可以导航到我的应用程序，甚至可以通过这段代码读取初始链接：

应用程序.js

const App = () => {
  const user = useAuthStatus();
  useEffect(() => {
    const handleDynamicLink = async link => {
      // Check and handle if the link is a email login link
      alert(JSON.stringify(link));
      if (auth().isSignInWithEmailLink(link.url)) {
        try {
          // use the email we saved earlier
          const email = await AsyncStorage.getItem('@email');
          await auth().signInWithEmailLink(email, link.url);
          /* You can now navigate to your initial authenticated screen
            You can also parse the `link.url` and use the `continueurl` param to go to another screen
            The `continueurl` would be the `url` passed to the action code settings */
        } catch (e) {
          alert(e);
        }
      }
    };
    const unsubscribe = dynamicLinks().onLink(handleDynamicLink);
    /* When the app is not running and is launched by a magic link the `onLink`
        method won't fire, we can handle the app being launched by a magic link like this */
    dynamicLinks()
      .getInitialLink()
      .then(link => link && handleDynamicLink(link));

    // When the component is unmounted, remove the listener
    return () => unsubscribe();
  }, []);

关联

https://testmoxiegirl.firebaseapp.com/__/auth/action?apiKey=<api key>&mode=signIn&oobCode=<oob code>&continueUrl=https://examplemoxie.page.link/password_reset&lang=en

我的动态链接设置

问题来了，我从getInitialLink()方法中获取的 App.js 文件中的链接与我在 firebase 动态链接设置中的动态链接相同，并且将其用于 signInWithEmailLink 将失败并Invalid email link出现错误。为此，我需要将链接发送到电子邮件，但我不知道我做错了什么。

我的环境：

"react-native": "0.64.2",
"@react-native-firebase/app": "^12.4.0",
"@react-native-firebase/auth": "^12.4.0",
"@react-native-firebase/dynamic-links": "^12.4.0",

标签： javascriptfirebase-authenticationreact-native-firebasefirebase-dynamic-links

解决方案

所以，在发布这个问题之前，我决定再次检查所有内容，我发现了一个问题。

就我而言，我没有packageName在我的 FirebaseAuth.js中使用，而是bundleId在 Android 设置中使用，假设对于 Android 和 iOS，它应该是相同的键。

前：

const actionCodeSettings = {
  ...
  android: {
    bundleId: '<my bundle id>',
    installApp: true,
  },
};

后：

const actionCodeSettings = {
  ...
  android: {
    packageName: '<my bundle id>',
    installApp: true,
  },
};

推荐阅读