使用React进行Twitter的Firebase Auth

I have been working to create an authentication process where users can log-in via Twitter using Firebase's authentication. After logging in, I am trying to store the user's token and secret so that I can perform Twitter actions on behalf of the users. So far, this is what my login looks like:

我一直在努力创建一个身份验证过程，用户可以使用Firebase的身份验证通过Twitter登录。登录后，我试图存储用户的令牌和秘密，以便我可以代表用户执行Twitter操作。到目前为止，这是我的登录看起来像：

export function loginWithTwitter() {
   return auth.signInWithPopup(provider)
}

and inside my main file, I have implemented a button that calls a function that in turn calls the function above to authenticate the user. It looks like this:

在我的主文件中，我实现了一个调用函数的按钮，该函数又调用上面的函数来验证用户。它看起来像这样：

login() {
loginWithTwitter()
.then((result) => {
 const user = result.user;
   accessToken = result.credential.accessToken;
   accessTokenSecret = result.credential.secret;
  this.setState({
    user
  });
});
localStorage.setItem(firebaseAuthKey, "1");
}

This code properly pulls up the window and authenticates the app with the user but when testing the accessToken and accessTokenSecret values it appears that they are not ever receiving input since printing them out to the console for testing returns values of undefined. Is there anything obvious I am doing wrong that is causing this? Thanks!

此代码正确地拉起窗口并向用户验证应用程序，但在测试accessToken和accessTokenSecret值时，似乎他们从未接收输入，因为将它们打印到控制台以测试undefined的返回值。有什么明显的我做错了导致这个吗？谢谢！

The initial resource I used on how to do authentication is here: https://firebase.google.com/docs/auth/web/twitter-login

我在此处使用的初始资源如下：https：//firebase.google.com/docs/auth/web/twitter-login

EDIT: For further testing, I set the values of accessToken and accessTokenSecret to random integers and added the line of code

编辑：为了进一步测试，我将accessToken和accessTokenSecret的值设置为随机整数并添加了代码行

accessToken = 'changed';

in the second block of code right below where I set accessTokenSecret = result.credential.secret. When I ran through the program, the console printed out the initial values assigned to the variables, never changing them. It seems to me that for some reason the code in the second block is never run through, but I am still not sure why.

在我设置accessTokenSecret = result.credential.secret的第二个代码块中。当我运行程序时，控制台打印出分配给变量的初始值，从不更改它们。在我看来，由于某种原因，第二个块中的代码永远不会运行，但我仍然不确定原因。

1 个解决方案

#1

try this way with handling error message

尝试这种方式处理错误消息

export function loginWithTwitter() {
// make sure your Firebase OAuth redirect URI (e.g. my-app-12345.firebaseapp.com/__/auth/handler) is set as your Callback URL in your app's settings page on your Twitter app's config in firebase console. You have to sign in for API and secret
   return provider; 
}
//import the function loginwithTwiter
//bind this if required.
login=()=> {
var provider = loginWithTwitter();
firebase.auth().signInWithPopup(provider).then(function (result){
  var token = result.credential.accessToken;
  var secret = result.credential.secret;
  // The signed-in user info.
  var user = result.user;
  //set this data in your state or anywhere.
  this.setState({ user : user, tok: token })
}).catch(err => {
  console.log(err.message);
});