如何使用 Firebase 在您的 Web 应用中实现 Google 登录？

Firebase 提供了大量选项来在您的应用中实现登录。其中一些是：

• 使用电子邮件。
• 使用电话号码。
• 使用谷歌。
• 使用 Facebook 等

最好的部分是您不必担心处理登录流程，Firebase 会处理它。

方法：

首先，按照以下步骤创建一个 Firebase 项目：

• 转到 https://console.firebase.google.com/ 并使用您的谷歌帐户登录。
• 在 Firebase 上创建一个项目。
• 将 Firebase SDK 添加到您的应用。

• 现在我们已经在我们的应用程序中添加了这些脚本，我们现在将在我们的应用程序中初始化 Firebase。
• 在 Firebase 控制台中转到应用设置，从那里复制应用配置对象并将其粘贴到您的代码中。
• 应用配置对象如下所示。

var firebaseConfig = {
  apiKey: "your-api-key",
  authDomain: "your-project-id.firebaseapp.com",
  databaseURL: "https://your-project-id.firebaseio.com",
  projectId: "your-project-id",
  storageBucket: "your-project-id.appspot.com",
  messagingSenderId: "the-sender-id",
  appId: "the-app-id",
  measurementId: "G-measurement-id",
};

• 如果您正确执行了这些步骤，您的应用将在 Firebase 中注册。

现在，我们将按照以下步骤在我们的应用中启用谷歌登录：

• 转到 Firebase 控制台并打开 Auth 部分
• 在登录方法选项卡上启用谷歌登录并保存设置。
• 在您的应用程序中创建一个 google 提供程序对象来处理登录流程。

const GoogleAuth = new firebase.auth.GoogleAuthProvider();

• 使用您使用 Firebase 创建的对象实例对用户进行身份验证。
• 您可以将用户重定向到登录页面或打开一个弹出窗口。

//To sign in with pop-up.
firebase.auth().signInWithPopup(googleAuth);

//To sign in with redirect. 
firebase.auth().signInWithRedirect(googleAuth);

• Google 登录方法已在您的应用中实现，现在您可以开始了。

例子：

我们将创建一个简单的基于 React 的 Web 应用程序，只需要登录按钮。

按钮组件的代码：

Javascript

import React, { Component } from "react";
import firebase from 'firebase';
  
class tutorial extends Component{
render(){
return(

    {
           
     // Google provider object is created here.
    const googleAuth = 
          new firebase.auth.GoogleAuthProvider();
               
    // using the object we will authenticate the user.
    firebase.auth().signInWithPopup(googleAuth);
                    }} >
          Sign in with Google
    
 
   );
  }
 }
 export default tutorial;

Firebase.ts 文件的代码：

Javascript

import * as firebase from 'firebase';
const firebaseConfig = {
  apiKey: "****",
    authDomain: "****.firebaseapp.com",
    databaseURL: "https://*****.firebaseio.com",
    projectId: "****",
    storageBucket: "****.appspot.com",
    messagingSenderId: "****",
    appId: "****",
    measurementId: "****"
};
class Firebase {
  constructor() {
    firebase.initializeApp(firebaseConfig);
  }
}
  
export default Firebase;

输出：