使用 Wordpress 用户或数据库验证 Firebase/Firechat

Posted 2023-02-24

【中文标题】使用 Wordpress 用户或数据库验证 Firebase/Firechat

【英文标题】：Authenticate Firebase/Firechat with Wordpress user or database

【发布时间】：2015-08-16 16:50:39

【问题描述】：

我正在尝试使用我的 Wordpress 用户通过 Firebase/Firechat 自动进行身份验证。

您可以在文档中看到 Firebase 可以通过使用安全的 Json Web 令牌来使用自定义身份验证： https://firechat.firebaseapp.com/docs/

他们还参考了这个 Firebase 页面，该页面详细描述了生成和使用这些令牌： https://www.firebase.com/docs/web/guide/login/custom.html?utm_source=docs&utm_medium=site&utm_campaign=firechat

所以我想要完成的是这些事情：

如果用户已登录，让 Firechat 识别他们的用户登录名并将其聊天别名设置为。

如果他们没有登录，他们仍然可以看到聊天，但是当他们开始聊天时，它应该提示他们注册或登录（如果您使用 Twitter 查看 Firechat 文档中的主要示例要登录，您可以使用它查看它。他们主页上的 Firechat 示例也是这样做的）。

如果用户是页面的作者，则将用户设置为版主。这不是那么重要，因为我宁愿专注于让聊天先工作，然后再担心。

据我了解，这是 Firechat 中已有的所有功能，而且 Firebase 显然能够通过任何服务器/系统进行身份验证，前提是它可以生成正确的凭据。我似乎无法让任何工作，我必须阅读该文档大约一百遍。

说了这么多，这是我得到的最远距离：

<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Firebase -->
<script src="https://cdn.firebase.com/js/client/2.0.2/firebase.js"></script>

<!-- Firechat -->
<link rel="stylesheet" href="https://cdn.firebase.com/libs/firechat/2.0.1/firechat.min.css" />
<script src="https://cdn.firebase.com/libs/firechat/2.0.1/firechat.min.js"></script>

<?php 
include('./wp-blog-header.php');
include( './wp-load.php' );

//wordpress global variables
global $user_login;
global $post;
global $wpdb;
global $user_login;
global $current_user; 
?>    
    <div id="firechat-wrapper"></div>

    <script type="text/javascript">
var FirebaseTokenGenerator = require("firebase-token-generator");
var tokenGenerator = new FirebaseTokenGenerator("firebase-secret");
var caToken = tokenGenerator.createToken( uid: $user_login );

var chatRef = new Firebase("https://yourfirebase.firebaseio.com/chat");
chatRef.authWithCustomToken(caToken, function(authData) 
    if (authData) 
        var chat = new FirechatUI(chatRef, document.getElementById('firechat-wrapper'));
        chat.setUser(authData.uid, authData[authData.provider].displayName);
    
);
    </script>

问题在于它实际上根本没有生成令牌，因为没有调用“FirebaseTokenGenerator”（它不包含在 CDN afaik 中）。我不知道如何用 Javascript 调用它，但我知道有一个 PHP 助手库可以做到这一点。

很简单：

<?php
  include_once "FirebaseToken.php";
  $tokenGen = new Services_FirebaseTokenGenerator("<YOUR_FIREBASE_SECRET>");
  $token = $tokenGen->createToken(array("uid" => "custom:1"));
?>

但问题是我不知道如何将这些信息从 PHP 传递到 Javascript。我也很困惑这一切是如何运作的。我必须为每个用户生成一个新令牌吗？还是给服务器做一次，让我的登录系统处理认证？

希望我没有遗漏任何内容，但如果您需要更多信息，请询问！感谢阅读。

【参考方案1】：

恭喜！

Firebase 和 Firechat 真是太有趣了！

将 javascript 放在脚本文件中，并使用令牌作为数据对其进行本地化。然后使用该令牌初始化聊天。

我正在使用 composer 将 php 文件放在后端。您需要 php-jwt 和令牌生成器。看看 Packagist 浏览器吧！

"firebase/php-jwt": "^2.1",
"firebase/token-generator": "^2.0"

https://packagist.org/packages/firebase/php-jwt

https://packagist.org/packages/firebase/token-generator

如果不使用 composer，请将下载的源代码包含在项目内的固定位置并包含库。

实现示例

从后端初始化与登录用户聊天的 PHP 文件：

/* firechat-example.php */
$userdata = get_userdata( get_current_user_id() );
$tokenGen = new \Services_FirebaseTokenGenerator( "#your-token-from-firebase#" );
$token    = $tokenGen->createToken( array( "uid" => 'custom:'.$userdata->ID ), array( "admin" => true ) );
wp_enqueue_script( 'your-chat-js', get_stylesheet_directory_uri() . '/firechat-example.js', [ 'jquery' ], null, true );

$data = [
            'token' => $token,
            'user_id'   => $userdata->ID,
            'user_name' => $userdata->display_name,
        ];

wp_localize_script( 'your-chat-js', 'firechat_backend', $data );
echo '<div class="firechat-wrapper"></div>'

还有被 WordPress 本地化的 js 文件，例如你的主题或插件：

/* firechat-example.js */
jQuery( document ).ready(function($) 
    var firechatRef = new Firebase('https://your-firebase-app-name.firebaseio.com/chat');
    firechatRef.authWithCustomToken( firechat_backend.token, function(error, authData) 
    if (error) 
        console.log(error);
    
    else 
        var chat = new FirechatUI(firechatRef, document.getElementById('firechat-wrapper'));
        chat.setUser( firechat_backend.user_id, firechat_backend.user_name, function(user) 
                chat.resumeSession();
            );
        
    );
);

困难的部分是自定义聊天，但使用 firechat github repo 中的源代码然后“咕哝”更改为您的 WordPress 聊天的新发行版 :-)

【讨论】：

哇，先生，非常感谢您的回复。我担心没有人会回答。我需要一些时间来完全实施和完成所有事情，但是本地化更有意义。有点令人困惑的是wpip_chat 位，这是 wp_localize_script 函数的结果还是 JS 固有的东西？

对不起，我会更新本地化数据参数:-)

哦，好吧，现在说得通了，太棒了！

嘿，伙计，我只是想再次感谢您——整个过程运行良好。现在感谢您，我拥有了一个超快速、可扩展且免提的聊天解决方案。我之前使用的是 IRC + 网络聊天，所以这令人难以置信的好。 +1 给你！

听起来很棒！ :-)