Autenticar Firebase/Firechat con usuario o base de datos de WordPress

4 minutos de lectura

Estoy tratando de usar mis usuarios de WordPress para autenticarme automáticamente con Firebase/Firechat.

Puede ver aquí en la documentación que Firebase puede usar la autenticación personalizada mediante el uso de tokens web Json seguros:
https://firechat.firebaseapp.com/docs/

También se refieren a esta página de Firebase que describe la generación y el uso de estos tokens en profundidad:
https://www.firebase.com/docs/web/guide/login/custom.html?utm_source=docs&utm_medium=site&utm_campaign=firechat

Entonces, lo que estoy tratando de lograr son estas cosas:

  1. Si el usuario ha iniciado sesión, haga que Firechat reconozca su inicio de sesión de usuario y establezca su alias de chat así.

  2. Si no han iniciado sesión, aún pueden ver el chat, pero cuando van a hablar, debería solicitarles que se registren o inicien sesión (si observa el ejemplo principal en la documentación de Firechat usando Twitter para iniciar sesión, puede ver usando esto. También el ejemplo de Firechat en su página de inicio también hace esto).

  3. Establecer al usuario como moderador si es el autor de la página. Esto no es tan importante, ya que prefiero concentrarme en hacer que el chat funcione primero y preocuparme por eso más tarde.

Por lo que entiendo, esta es toda la funcionalidad que ya está en Firechat, y Firebase aparentemente puede autenticarse con cualquier servidor/sistema siempre que pueda generar las credenciales adecuadas. Parece que no puedo hacer que nada funcione y debo haber leído esa documentación unas cien veces.

Con todo lo dicho, esto es lo más lejos que he llegado:

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

El problema con eso es que en realidad no está generando el token en absoluto, ya que no se está llamando a “FirebaseTokenGenerator” (no está incluido en el CDN afaik). No estoy seguro de cómo llamarlo con Javascript, pero sé que hay una biblioteca auxiliar de PHP que lo hace.

Es tan simple como:

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

Pero el problema es que no tengo idea de cómo pasar esa información de PHP a Javascript. También estoy bastante confundido por cómo funciona todo. ¿Tengo que generar un nuevo token para cada usuario? ¿O hacerlo una vez para el servidor y dejar que mi sistema de inicio de sesión maneje la autenticación?

Espero no haber dejado nada fuera, pero si necesita más información, ¡solo pregunte! Gracias por leer.

  • Wow señor, muchas gracias por la respuesta. Me preocupaba que nadie respondiera. Me llevará un poco de tiempo implementarlo por completo y revisarlo todo, pero tiene más sentido con la localización. Una cosa que es un poco confusa es la wpip_chat bit, ¿es eso un resultado de la función wp_localize_script o algo inherente a JS?

    – Cielo Davis

    02/06/2015 a las 20:32


  • Lo siento, actualizaré el parámetro de datos de localización 🙂

    – Andreas Eck

    2 jun 2015 a las 20:52

  • Oh, está bien, eso tiene mucho sentido ahora, ¡increíble!

    – Cielo Davis

    2 jun 2015 a las 21:15

  • Hola amigo, solo quería agradecerte nuevamente: todo está funcionando maravillosamente. Ahora, gracias a ti, tengo una solución de chat súper rápida, escalable y manos libres. Estaba usando IRC + webchat antes, así que esto es increíblemente mejor. +1 para ti!

    – Cielo Davis

    3 de junio de 2015 a las 2:48

  • ¡Suena genial! 🙂

    – Andreas Eck

    10 de junio de 2015 a las 12:51

¿Ha sido útil esta solución?