当我单击“使用Google按钮登录时，没有任何反应

Question

我想通过Google身份验证实现Firebase身份验证。因此，我使用了以下代码：

从'firebase / app'导入firebase；导入“ firebase / firestore”；导入“ firebase / auth”；

const config = {
  apiKey: "REDACTED",
  authDomain: "crwn-33842.firebaseapp.com",
  databaseURL: "https://crwn-33842.firebaseio.com",
  projectId: "crwn-33842",
  storageBucket: "crwn-33842.appspot.com",
  messagingSenderId: "479080549871",
  appId: "1:479080549871:web:1b08546056e621651eba1a"
}

firebase.initializeApp(config);

export const auth = firebase.auth();
export const firestore = firebase.firestore();
const provider = new firebase.auth.GoogleAuthProvider();
provider.setCustomParameters({ prompt:'select_account' })
export const signInGoogle = () => auth.signInWithPopup();

export default firebase;   Also have this component code:

import React, { Component } from 'react';
import FormInput from './../form-input.component/form-input.component';
import CustomButton from './../CustomButton/customButton.component';
import { signInGoogle } from './../../firebase/firebase.utils';

class SignIn extends Component {
  state = { 
    login:'',
    password: '',
  }

  handleChange = event =>{
    const {name, value} = event.target;

    this.setState({ [name]: value });
  }

  handleSubmit = event =>{
    event.preventDefault();

    this.setState({ login:'', password:'' })
  }

  render() { 
    return ( 
      <div>
        <form onSubmit={this.handleSubmit}>
          <FormInput
            handleChange={this.handleChange}
            value={this.state.login}
            name='login'
            label='Login'
            required
          />
          <FormInput
            handleChange={this.handleChange}
            value={this.state.password}
            name='password'
            label='Password'
            required
          />
          <CustomButton type='submit' label='Sign In'/>
          <CustomButton onClick={signInGoogle} label='Sign In with Google'/>
        </form>
      </div>
    );
  }
}

export default SignIn;

所以，当我单击

<CustomButton onClick={signInGoogle} label='Sign In with Google'/>

我得到[！[在此处输入图像描述] [1]] [1]

[1]：https://i.stack.imgur.com/EeGr7.png

Answer 1

您没有在provider方法中传递auth.signInWithPopup()。

signInWithPopup方法必须这样，

firebase.auth().signInWithPopup(provider);

用代码中的以下行修改signInWithPopup行的调用，

export const signInGoogle = () => auth.signInWithPopup(provider);

供参考，请转到此链接

https://firebase.google.com/docs/auth/web/google-signin#handle_the_sign-in_flow_with_the_firebase_sdk