Add Comments to Your Firebase Application with Hyvor Talk (Single Sign-on)

Published by Supun Kavinda on

If you are using Firebase for authentication on your Web applications, you can add embedded comments to it using Hyvor Talk and its Single Sign-on feature.

Having a comment box and embedded comments is important. Hyvor Talk is an embedded commenting platform that allows users to leave comments on websites. By default, users need to have a Hyvor account to comment. However, by setting up Single Sign-on, you can allow users to comment using their account on your Firebase Application.

Setting up Hyvor Talk

First, go to the Hyvor Talk console (it requires you to create a Hyvor account).

Then, add your website to start the free trial.

Adding website to the Hyvor Talk console before Firebase configuration
Adding your website

Next, you’ll see the installation guide. Select Manual Installation.

Then, you’ll see the our embed code. For this particular use case, we’ll only need to copy the <div> part of the code. For our Firebase application, we will asynchronously add the scripts with SSO configuration.

Copy this code.

<div id="hyvor-talk-view"></div>

And, paste it in your webpage source code (where you want the comments section to load).

Ex:

Add the div element to the webpage configuration
Adding the <div> element (Comments section container)

Creating a Hyvor Talk Single Sign-on ID (SSO ID)

Next step is creating a SSO ID for your account. Navigate to the Console -> Account -> SSO section to create a new SSO ID.

Creating a new SSO ID for a firebase application to add comments section

Next, copy the Private Key (We’ll use that in the next step).

Connection Firebase Accounts

Here, I assume that you are already handling login and signup on your application using the Firebase Web Authentication. The next step is to add the comments section to your web page with Single Sign-on configuration.

Here I will provide you the full code, and I’ll explain it step by step later. One important thing here is that you have to include Firebase libraries and call firebase.initializeApp(firebaseConfig) before this code.

<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js"></script>
<script>
    var HYVOR_TALK_WEBSITE = YOUR_WEBSITE_ID,
        HYVOR_TALK_CONFIG = {
            url: false,
            id: false
        };
    firebase.auth().onAuthStateChanged(function(user) {
        var HYVOR_TALK_PRIVATE_KEY = 'YOUR_PRIVATE_KEY';
        // convert firebase user object to hyvor talk-friendly object
        var userData = user ? {
            id: user.uid,
            name: user.displayName || user.email.replace(/@.+/, ''),
            email: user.email,
            picture: user.photoURL
        } : {}
        userData = btoa( JSON.stringify( userData ) )
        var hash = CryptoJS.HmacSHA1(userData, HYVOR_TALK_PRIVATE_KEY).toString();
        HYVOR_TALK_CONFIG.sso = {
            hash: hash,
            userData: userData,
            loginURL: "https://example.com/login",
            signupURL: "https://example.com/signup"
        }
        var script = document.createElement("script");
        script.src = "//talk.hyvor.local/web-api/embed";
        script.async = true;
        document.body.appendChild(script);
    });
</script>

Make sure to replace YOUR_WEBSITE_ID with your actual website ID. You can get it from the General section of the console.

Copy website ID

If your website ID is 1, change the code like this:

var HYVOR_TALK_WEBSITE = 1,

And, make sure to replace YOUR_PRIVATE_KEY with the SSO Private Key you copied earlier.

 var HYVOR_TALK_PRIVATE_KEY = 'YOUR_PRIVATE_KEY';

Finally, replace https://example.com/login and https://example.com/signup with your login/signup URLs.

Code Explanation

  • First, we import the crypto-js library to use for hashing.
  • HYVOR_TALK_WEBSITE and HYVOR_TALK_CONFIG are global configuration variables that Hyvor Talk uses for all websites (You can see it in our normal installation code)
  • firebase.auth().onAuthStateChanged attaches an observer, which will be called when the authentication status changes. (The callback function will be called after the window loads)
  • Inside the callback function, we check user’s status and add the Hyvor Talk loading script to the page with Single Sign-on configuration.

That’s all you should do to set up Single Sign-on with Hyvor Talk on your Firebase application. Now, you will see the comments section loading inside the <div> element you added earlier.

Conclusion

Hyvor Talk makes it really easy to add a fully functional commenting system to your Firebase Application with Single Sign-on. There’s a lot of customization options provided by Hyvor Talk. You can visit our documentation to learn more about our service and other details. If you have any questions/issues, please feel free to comment below.

Security Note: Our SSO private keys and hashing is designed to be done in the server-side. However, in this article, we used a client-side approach which it not completely secure as server-side implementation. This implementation is best for websites that doesn’t have access to server-side code (Ex: Webflow). For server-side implementations, please check our SSO documentation.

Need a privacy-focused commenting platform for your website?

Subscribe to our Newsletter

We write a lot of blog posts to help you grow your audience on your website. Subscribe to get the best blog posts right into your inbox.

Categories: Uncategorized