Аутентификация Firebase/Firechat с помощью пользователя или базы данных Wordpress

Я пытаюсь использовать своих пользователей Wordpress для автоматической аутентификации с помощью Firebase/Firechat.

Вы можете увидеть здесь, в документации, что Firebase может использовать пользовательскую аутентификацию, используя безопасные Json Web Tokens: 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 распознает свой логин и задает свой псевдоним чата.
Если они не вошли в систему, они все равно могут видеть чат, но когда они идут поговорить, они должны попросить их зарегистрироваться или войти в систему (если вы посмотрите на основной пример в документации Firechat, используя Twitter для входа в систему вы можете увидеть это, используя это. Также пример 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="#" onclick="location.href='https://cdn.firebase.com/libs/firechat/2.0.1/firechat.min.css'; return false;" />
<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 в файл сценария и локализуйте его с помощью токена в качестве данных. Затем инициализируйте чат с помощью этого токена.

Я использую композитор для размещения php файлов внутри back-end. Вам нужны как 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

Если вы не используете композитор, включите загруженный источник в фиксированное место внутри вашего проекта и включите библиотеки.

Пример реализации

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>'

И поэтому js файл, который локализуется WordPress, например, ваша тема или плагин:

/* 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-чата: -)