Skip to content
Last update: August 26, 2024

Messaging via Firebase Cloud

Firebase Cloud Messaging (FCM) is a cross-platform messaging solution that lets you reliably send messages at no cost. The Virto Commerce Push Messages module uses FCM to notify a client across platforms, including web, Android, and iOS that a new notification is available:

Regular notification

Android notification

White labeled notification

Send messages

To start sending push messages via FCM:

  1. Create a project in Firebase console.
  2. Configure sender settings.
  3. Configure receiver settings.
  4. Configure the appsettings.json file.
  5. Configure the environments.yml file.

Create project in Firebase console

To begin setting up FCM for Virto Commerce:

  1. Open Firebase Console.
  2. Click Add project.
  3. Enter project name, then click Continue.
  4. Enable or disable Google Analytics for the project, then click Continue.
  5. Click Create project.
  6. Click Continue once the project is created.

Configure sender settings

To configure the sender settings:

  1. In the left menu, click Project Overview → Project settings:
  2. In the Project settings field, click on the Service accounts tab.

  3. Click Generate new private key.

    Project settings

  4. In the popup window, click Generate key.

  5. Open the downloaded JSON file and copy all fields to the corresponding fields in the appssettings.json file.

Warning

When using a YAML file for settings, remove all \n characters from the private_key field and place the resulting value in the Key Vault:

Delete /n characters

Configure receiver settings

To configure the receiver settings:

  1. In the left menu, click Project Overview → Web.

    Web app

  2. Enter application name, then click Register app.

  3. In the Add Firebase SDK section, locate settings to paste to the PushMessages.FcmReceiverOptions section in the appsettings.json file.
  4. Click Continue to console.
  5. In the left menu, click Project Overview → Project settings.
  6. In the Cloud Messaging tab, find Web Push certificates section, and click Generate key pair.
  7. Copy the generated key value and paste it to PushMessages.FcmReceiverOptions.VapidKey section in the appSettings.json file.

Configure appsettings.json

To integrate FCM with Virto Commerce, configure the appSettings.json file as follows:

{
  "PushMessages": {
    "UseFirebaseCloudMessaging": true,
    "FcmSenderOptions": {
      "Type": "service_account",
      "ProjectId": "vc-push-86046",
      "PrivateKeyId": "956335b2eeccd3b37ef8f6871b406a6a31e1b29a",
      "PrivateKey": "-----BEGIN PRIVATE KEY-----\n…-----END PRIVATE KEY-----\n",
      "ClientEmail": "[email protected]",
      "ClientId": "117271734888260111772",
      "AuthUri": "https://accounts.google.com/o/oauth2/auth",
      "TokenUri": "https://oauth2.googleapis.com/token",
      "AuthProviderX509CertUrl": "https://www.googleapis.com/oauth2/v1/certs",
      "ClientX509CertUrl": "https://www.googleapis.com/robot/v1/metadata/x509/firebase-adminsdk-5gw7s%40vc-push-86046.iam.gserviceaccount.com",
      "UniverseDomain": "googleapis.com"
    },
    "FcmReceiverOptions": {
      "ApiKey": "AIzaSyCy9gsvKM1e77GRYw6M9rKRRSekZNAgRnI",
      "AuthDomain": "vc-push-86046.firebaseapp.com",
      "ProjectId": "vc-push-86046",
      "StorageBucket": "vc-push-86046.appspot.com",
      "MessagingSenderId": "647691501458",
      "AppId": "1:647691501458:web:2b18fc3a864469ac378b4b",
      "VapidKey": "BJyVagnZqcHI6_vwxILEfxpbVAq0F-ASE5k3WwX_F72WaQr_ysHKqhH5-8yWfUhNs9oecGcOy8kJ_m4b-OXrNFs"
    }
  }
}

Configure environments.yml

To ensure proper configuration across different environments, update the environments.yml file as follows:

- name: vcst-dev
  platform:
    config:
      PushMessages__UseFirebaseCloudMessaging: true
      PushMessages__FcmSenderOptions__Type: service_account
      PushMessages__FcmSenderOptions__ProjectId: test-97e05
      PushMessages__FcmSenderOptions__PrivateKeyId: c97aff16d81e599cd48bdb63d5f7700a4daa1e99
      PushMessages__FcmSenderOptions__ClientEmail: [email protected]
      PushMessages__FcmSenderOptions__ClientId: 117937666492085292599
      PushMessages__FcmSenderOptions__AuthUri: https://accounts.google.com/o/oauth2/auth
      PushMessages__FcmSenderOptions__TokenUri: https://oauth2.googleapis.com/token
      PushMessages__FcmSenderOptions__AuthProviderX509CertUrl: https://www.googleapis.com/oauth2/v1/certs
      PushMessages__FcmSenderOptions__ClientX509CertUrl: https://www.googleapis.com/robot/v1/metadata/x509/firebase-adminsdk-ekgb8%40test-97e05.iam.gserviceaccount.com
      PushMessages__FcmSenderOptions__UniverseDomain: googleapis.com
      PushMessages__FcmReceiverOptions__ApiKey: AIzaSyAh1GH8SFIx4ULiaZUNZRnxNNM2jFLGdaE
      PushMessages__FcmReceiverOptions__AuthDomain: test-97e05.firebaseapp.com
      PushMessages__FcmReceiverOptions__ProjectId: test-97e05
      PushMessages__FcmReceiverOptions__StorageBucket: test-97e05.appspot.com
      PushMessages__FcmReceiverOptions__MessagingSenderId: 518395609520
      PushMessages__FcmReceiverOptions__AppId: 1:518395609520:web:53952423cba605aa771675
      PushMessages__FcmReceiverOptions__VapidKey: BE1iGYmRsbdI1FB-qTiIUvGrWvC91GCfnXSHtfzcPLgXfQ28fbpKFlD8YlbI7w-aHVepW3Ih17oRB53ceYNaM6k
    secretConfig:
      PushMessages__FcmSenderOptions__PrivateKey: fcm-private-key

Receive messages

You will start receiving push messages as soon as you approve them:

Approval

Browser notifications appear in the lower right corner of your screen:

Browser notifications

Clicking on it redirects user to the frontend application.

If you block messages in your browser, you will still be able to see them in the Frontend Application.

You can change your decision at any time:

Change decision