diff --git a/docs/INSTALLATION.md b/docs/INSTALLATION.md index b139a65..27d7560 100644 --- a/docs/INSTALLATION.md +++ b/docs/INSTALLATION.md @@ -1,28 +1,65 @@ -Installation -============ - -1. Create a Google Firebase Account [Google Firebase Messaging](https://firebase.google.com/) -2. Add a new project in the Firebase Console -3. Go to: `Project Overview` -> `Project settings` -> `General` -4. Click the "Add app" button and select the "" icon (Web platform) (create a new one even if you already have one) -5. Give your app a nickname and click the "Register app" button -6. Firebase will provide you with a configuration object -7. Copy the `messagingSenderId` into the `Sender ID` field in HumHub -8. Copy the `projectId` into the `Project ID` field in HumHub -9. Copy the `apiKey` into the `API Key` field in HumHub -10. Copy the `appId` into the `Project ID` field in HumHub -11. Go to: `Cloud Messaging` tab -> `Web configuration` section -12. Generate a new key pair if you haven't already and copy the `Key pair` into the `VAPID key` field in HumHub -13. Click on `Manage Service Accounts` and select the `firebase` Service Account or create a new one -14. In the Service Acccount, click on the `Keys` tab, Click `Add Key` -> `Create New Key` -> `Key type: JSON` -15. Download the created JSON key file, open it, copy it and paste the file content into the `Service Account (JSON file)` file in the HumHub module configuration +# Installation + +**1.** Create a [Google Firebase](https://console.firebase.google.com/) account and start a new project. + +![Firebase Setup - Step 1](images/firebase-step-1.png) + +**2.** Navigate to **Project Overview > Project Settings**. + +![Firebase Setup - Step 2](images/firebase-step-2.png) + +**3.1.** Under the **General** tab, select the option to create a **Web App**. + +![Firebase Setup - Step 3.1](images/firebase-step-3-1.png) + +**3.2.** Name your app and click **Register App**. + +![Firebase Setup - Step 3.2](images/firebase-step-3-2.png) + +**3.3.** Copy the highlighted information from your **App’s Firebase Configuration** and paste it into the **Modules Configuration** as follows: `apiKey` = `Web API Key`, `messagingSenderId` = `Sender ID`, and `appId` = `Web App ID`. + +![Firebase Setup - Step 3.3](images/firebase-step-3-3.png) + +**4.1.** In the **Cloud Messaging** tab, select "**Generate Key Pair**". + +![Firebase Setup - Step 4.1](images/firebase-step-4-1.png) + +**4.2.** Copy the highlighted information from your **Web Push Certificates** and paste it into the **Modules Configuration** as follows: `Key pair` = `Key Pair from the Web Push certificates` + +![Firebase Setup - Step 4.2](images/firebase-step-4-2.png) + +**5.1.** In the **Cloud Messaging** tab, under **Firebase Cloud Messaging API**, click on "**Manage Service Accounts**". + +![Firebase Setup - Step 5.1](images/firebase-step-5-1.png) + +**5.2.** Under **Service Accounts**, select your account.\ +_**Note:** In some instances, it may take longer for Google to generate the account automatically. In rare cases where the account is not generated, please create one by clicking on "Create Service Account"._ + +![Firebase Setup - Step 5.2](images/firebase-step-5-2.png) + +**5.3.** Switch to the **Keys** tab and click **Create New Key**. + +![Firebase Setup - Step 5.3](images/firebase-step-5-3.png) + +**5.4.** Choose **JSON** as the Key type and click **Create**. + +![Firebase Setup - Step 5.4](images/firebase-step-5-4.png) + +**6.** Open your Service Account key JSON file, and copy its contents into the `Service Account (JSON file)` field in the **Modules Configuration**. + +![Firebase Setup - Step 6](images/firebase-step-6.png) + +**7.** When you are finished, click **Save** on the **Modules Configuration** page. + +![Firebase Setup - Step 7](images/firebase-step-7.png) + +---- ## Custom CSP Configuration -In case you have customized your [csp header](https://docs.humhub.org/docs/admin/security#web-security-configuration). -Make sure to allow the following urls: +If you have customized your [CSP header](https://docs.humhub.org/docs/admin/security#web-security-configuration), make sure to allow the following URLs: -``` +```PHP "script-src" => [ "self" => true, "allow" => [ diff --git a/docs/images/firebase-step-1.png b/docs/images/firebase-step-1.png new file mode 100644 index 0000000..5600db6 Binary files /dev/null and b/docs/images/firebase-step-1.png differ diff --git a/docs/images/firebase-step-2.png b/docs/images/firebase-step-2.png new file mode 100644 index 0000000..c4c73e8 Binary files /dev/null and b/docs/images/firebase-step-2.png differ diff --git a/docs/images/firebase-step-3-1.png b/docs/images/firebase-step-3-1.png new file mode 100644 index 0000000..6060ca7 Binary files /dev/null and b/docs/images/firebase-step-3-1.png differ diff --git a/docs/images/firebase-step-3-2.png b/docs/images/firebase-step-3-2.png new file mode 100644 index 0000000..85ad47a Binary files /dev/null and b/docs/images/firebase-step-3-2.png differ diff --git a/docs/images/firebase-step-3-3.png b/docs/images/firebase-step-3-3.png new file mode 100644 index 0000000..6b85e44 Binary files /dev/null and b/docs/images/firebase-step-3-3.png differ diff --git a/docs/images/firebase-step-4-1.png b/docs/images/firebase-step-4-1.png new file mode 100644 index 0000000..e4cbca0 Binary files /dev/null and b/docs/images/firebase-step-4-1.png differ diff --git a/docs/images/firebase-step-4-2.png b/docs/images/firebase-step-4-2.png new file mode 100644 index 0000000..3a3a77b Binary files /dev/null and b/docs/images/firebase-step-4-2.png differ diff --git a/docs/images/firebase-step-5-1.png b/docs/images/firebase-step-5-1.png new file mode 100644 index 0000000..199309f Binary files /dev/null and b/docs/images/firebase-step-5-1.png differ diff --git a/docs/images/firebase-step-5-2.png b/docs/images/firebase-step-5-2.png new file mode 100644 index 0000000..a180d53 Binary files /dev/null and b/docs/images/firebase-step-5-2.png differ diff --git a/docs/images/firebase-step-5-3.png b/docs/images/firebase-step-5-3.png new file mode 100644 index 0000000..2507513 Binary files /dev/null and b/docs/images/firebase-step-5-3.png differ diff --git a/docs/images/firebase-step-5-4.png b/docs/images/firebase-step-5-4.png new file mode 100644 index 0000000..1fd6f48 Binary files /dev/null and b/docs/images/firebase-step-5-4.png differ diff --git a/docs/images/firebase-step-6.png b/docs/images/firebase-step-6.png new file mode 100644 index 0000000..5f99204 Binary files /dev/null and b/docs/images/firebase-step-6.png differ diff --git a/docs/images/firebase-step-7.png b/docs/images/firebase-step-7.png new file mode 100644 index 0000000..f16f4e8 Binary files /dev/null and b/docs/images/firebase-step-7.png differ