firebaseui signInSuccess redirect in callback

Question

using ReactJS web， and FirebaseUI Auth.

我正在尝试创建一个登录成功网址，其中包含登录用户的 uid：/users/${userId} 。

我的假设是这需要在回调中定义，但我似乎无法使其工作。

目前，它默认重定向到signInSuccessUrl，而不是使用回调...

任何帮助都非常感谢！

const uiConfig = {
  signInFlow: 'popup',
  signInSuccessUrl: '/',
  signInOptions: [
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    firebase.auth.FacebookAuthProvider.PROVIDER_ID,
    { provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
      requireDisplayName: true
    },
  ],
  // the area where i assume something is going wrong...
  callbacks: {
    signInSuccess: function(currentUser, credential, redirectUrl) {
      const userId = currentUser.uid;
      redirectUrl = `/users/${userId}`;
      return false
    },
  }
};

Answer 1

redirectUrl不是你想的那样。如果查询参数追加到当前页signInSuccessUrl则填充该参数的内容。它提供了一种在登录流结束时获取该 URL 的简单方法，如果使用 accountchooser.com 则不容易获得该 URL。

若要获取所需的行为，请将代码更改为以下内容：

signInSuccess: function(currentUser, credential, redirectUrl) {
  const userId = currentUser.uid; 
  // Manually redirect.
  window.location.assign(`/users/${userId}`);
  // Do not automatically redirect.
  return false;
},

Answer 2

signInSuccess已被弃用，取而代之的是signInSuccessWithAuthResult。如果您使用它，您将在控制台中看到以下消息：

signInSuccess 回调已弃用。请改用 signInSuccessWithAuthResult 回调。

所以你需要做这样的事情：

ui.start("#signin", {
    callbacks: {
        signInSuccessWithAuthResult: function (authResult, redirectUrl) {
            // Handle the result
            return false;
        },
    },
});

可在此处找到更多文档。

Answer 3

另一种方法是在使用 AuthUI 时将 URL 设置为配置对象。

 var uiConfig = {
    signInSuccessUrl: window.location.href,
    signInOptions: [ ... ]
 }
var ui = new firebaseui.auth.AuthUI(firebase.auth());
ui.start('#firebaseui-auth-container', uiConfig);

Answer 4

当从FirebaseAuthUI的配置对象添加时(如@Daniel De León的答案(，你可以提供函数作为对signInSuccess或signInSuccessWithAuthResult的回调，在这种情况下，redirectUrl的值不是你想的那样。它是一个空值。

若要获取所需的行为，请将代码更改为以下内容：

signInSuccessWithAuthResult: (currentUser, credential, redirectUrl) => {
 //credential and redirectUrl are both null
 // currentUser has structure like
 // currentUser : {
 //     user: { 
 //       uid: 'asdasd',
 //       .....
 //    },
 //    additionalUserInfo: {
 //      isNewUser: false
 //    }
 // }  

  // Force not to redirect
  return false;
}

或

signInSuccess: (currentUser, credential, redirectUrl) => {
 //credential and redirectUrl are both null
 // currentUser has structure like
 //   currentUser: { 
 //     uid: 'asdasd',
 //     .....
 //   }

  // Force not to redirect
  return false;
}