Question

使用ReactJS网站和FirebaseUI Auth。

我正在尝试创建一个signInSuccessUrl，其中包含已登录用户的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;
        },
    },
});

可以在 here 中找到更多文档。

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的 config 对象中添加时（就像@Daniel DeLeó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;
}

firebaseui signInSuccess重定向回调

4 个答案: