Firebase-Facebook身份验证(1)

📌 相关文章

📜 Firebase-Facebook身份验证(1)

📅 最后修改于: 2023-12-03 15:15:04.978000 🧑 作者: Mango

Firebase-Facebook身份验证

Firebase 是一个由 Google 提供的移动和 Web 应用程序开发平台，其中包括实时数据库，身份验证，云存储，云函数等众多功能。Firebase 集成了 Facebook 帐户身份验证，并提供了一些简单易用的方法，使开发人员能够轻松实现 Facebook 帐户身份验证。

步骤一：创建 Firebase 项目

首先，我们需要在 Firebase 控制台中创建一个项目。

前往 Firebase 控制台。
点击“添加项目”按钮，输入项目名称，选择所在国家或地区，然后单击“创建项目”按钮。
在项目设置中，单击“添加应用程序”按钮，并选择 “Web” 应用程序。输入应用程序名称，然后单击“注册应用程序”按钮。Firebase 将在稍后将生成凭据代码片段的同一位置提供您需要的信息。

步骤二：启用 Facebook 登录

在 Firebase 控制台中启用 Facebook 登录，以便系统能够使用 Facebook 身份验证登录应用程序。

在 Firebase 控制台中，单击“身份验证”选项卡，然后在“Facebook”部分中单击“开始设置”按钮。
设置 Facebook 应用程序 ID 和应用程序机密。
在“授权设置”部分中，将“你的应用程序需要的 Facebook 权限”设置为项目所需的权限。
在“客户端 OAuth 设置”部分中，将“重定向 URI”设置为“https://.firebaseapp.com/__/auth/handler”。

步骤三：设置 Firebase SDK

设置 Firebase SDK，以便您可以为应用程序配置 Facebook 登录。

<!-- Firebase 先决条件 CDN -->
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-auth.js"></script>

<script>
  // Firebase 已初始化：
  // 取得 Firebase 配置
  var firebaseConfig = {
    apiKey: "API_KEY",
    authDomain: "PROJECT_ID.firebaseapp.com",
    projectId: "PROJECT_ID",
    storageBucket: "PROJECT_ID.appspot.com",
    messagingSenderId: "SENDER_ID",
    appId: "APP_ID",
    measurementId: "G-MEASUREMENT_ID",
  };

  // 初始化 Firebase
  firebase.initializeApp(firebaseConfig);

  // 初始化 Facebook 登录
  var provider = new firebase.auth.FacebookAuthProvider();
  provider.addScope('user_birthday');
  provider.setCustomParameters({
    'display': 'popup'
  });
</script>

步骤四：添加 Facebook 登录按钮

在应用程序中添加 Facebook 登录按钮。在按钮单击事件中使用 Firebase SDK 进行身份验证。

<button onclick="signInWithFacebook()">使用 Facebook 登录</button>

<script>
  function signInWithFacebook() {
    firebase.auth().signInWithPopup(provider)
      .then((result) => {
        var user = result.user;
        console.log(user);
      })
      .catch((error) => {
        console.log(error);
      });
  }
</script>

步骤五：完整示例

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>使用 Firebase 和 Facebook 登录</title>

    <!-- Firebase 先决条件 CDN -->
    <script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-auth.js"></script>

    <script>
      // Firebase 已初始化：
      // 取得 Firebase 配置
      var firebaseConfig = {
        apiKey: "API_KEY",
        authDomain: "PROJECT_ID.firebaseapp.com",
        projectId: "PROJECT_ID",
        storageBucket: "PROJECT_ID.appspot.com",
        messagingSenderId: "SENDER_ID",
        appId: "APP_ID",
        measurementId: "G-MEASUREMENT_ID",
      };

      // 初始化 Firebase
      firebase.initializeApp(firebaseConfig);

      // 初始化 Facebook 登录
      var provider = new firebase.auth.FacebookAuthProvider();
      provider.addScope('user_birthday');
      provider.setCustomParameters({
        'display': 'popup'
      });

      function signInWithFacebook() {
        firebase.auth().signInWithPopup(provider)
          .then((result) => {
            var user = result.user;
            console.log(user);
          })
          .catch((error) => {
            console.log(error);
          });
      }
    </script>
  </head>
  <body>
    <button onclick="signInWithFacebook()">使用 Facebook 登录</button>
  </body>
</html>

结论

Firebase 的 Facebook 登录使得应用程序的用户身份验证过程变得更为简单。通过几个简单的步骤，开发人员可以集成 Facebook 登录，并使用 Firebase SDK 实现快速身份验证。