[Improvement] Added support for authorizing using the Phone

MMM-GoogleCalendar.js

@@ -120,9 +120,17 @@ Module.register("MMM-GoogleCalendar", {
     }
 
     if (notification === "AUTH_NEEDED") {
+      // relay the notification to the node_helper
+      this.sendSocketNotification(notification, payload);
+    } else {
+      // reset error URL
+      this.errorUrl = null;
+    }
+
+    if (notification === "AUTH_NEEDED_QR") {
       this.error = "ERROR_AUTH_NEEDED";
       if (payload.credentialType === "web") {
-        this.errorUrl = payload.url;
+        this.errorPayload = payload;
       }
       this.updateDom(this.config.animationSpeed);
       return;
@@ -177,8 +185,13 @@ Module.register("MMM-GoogleCalendar", {
 
     if (this.error) {
       // web credentials will have a WEB url
-      if (this.error === "ERROR_AUTH_NEEDED" && this.errorUrl) {
-        wrapper.innerHTML = `Please <a href=${this.errorUrl}>click here</a> to authorize this module.`;
+      if (this.error === "ERROR_AUTH_NEEDED" && this.errorPayload) {
+        if (this.errorPayload.qrUrl) {
+          wrapper.innerHTML = `Please click or scan this QR code on your phone in order to authorize this module:<br><br>
+                              <a href=${this.errorPayload.url}><img src="${this.errorPayload.qrUrl}"/></a>`;
+        } else {
+          wrapper.innerHTML = `Please <a href=${this.errorPayload.url}>click here</a> to authorize this module.`;
+        }
       } else {
         // default to generic error
         wrapper.innerHTML = this.error;

README.md

@@ -4,7 +4,7 @@ This module is a customization from MagicMirror's default calendar module to dis
 
 ### Dependencies
 
-1. The [Google Node.js client library](https://github.com/google/google-api-nodejs-client/): This dependency is required for authenticating to Google and using the Google Calendar API (v3). See Installation for instructions.
+1. The [Google Node.js client library](https://github.com/google/google-api-nodejs-client/): This dependency is required for authenticating to Google and using the Google Calendar API (v3). See Installation for instructions
 
 ## Installation
 
@@ -19,14 +19,16 @@ To install the module, use your terminal to:
 Before you can add your calendar you need to setup the Google Calendar API and OAuth2 client from the Google Cloud Platform:
 
 1. Go [here](https://developers.google.com/calendar/api/quickstart/nodejs), and follow the instructions found in the `prerequisites` section to create the Google Cloud project (you could also use an existing project if you wish).
-2. Once you have enabled setup the project and created your OAuth ID client, download the client ID as `json` (look for the download option) and rename it `credentials.json`. NOTE: When creating the OAuth ID client you should see a list of diffrent credential types, this module is currently only supporting `Desktop app`.
+2. Once you have enabled setup the project and created your OAuth ID client, download the client ID as `json` (look for the download option) and rename it `credentials.json`. NOTE: When creating the OAuth ID client you should see a list of diffrent credential types, this module is currently only supporting `Desktop app` and `Web`, being the latter the most recommendable for mirrors without mouse and keyboard. If you select `Web`, you **must** use your private IP from your mirror including the port (e.g. `192.168.0.20:8080`). Don't use `localhost` or any other loopback like `127.0.0.1`.
 3. Move `credentials.json` to your MMM-GoogleCalendar directory (MagicMirror/modules/MMM-GoogleCalendar/)
 4. [Enable Google Calendar API](https://console.cloud.google.com/apis/library/calendar-json.googleapis.com). Select the same project as in step 1.
-5. Run this command from the MMM-GoogleCalendar directory: `node authorize.js` and follow the instructions that will display in the console. NOTE: After completing the `authorize.js` script it should print your calendar ID and most recent entries, you can copy the calendar ID to use later in the config file. (If you can't find your ID, check the troubleshooting section for help). If you run the script but don't see anything happening, check the troubleshooting section below, you may need to connect through VNC rather than SSH.
+5. For authorize, you have two options:
+   1. If you've selected `Desktop app` at the step 1, then run this command from the MMM-GoogleCalendar directory: `node authorize.js` and follow the instructions that will display in the console. NOTE: After completing the `authorize.js` script it should print your calendar ID and most recent entries, you can copy the calendar ID to use later in the config file. (If you can't find your ID, check the troubleshooting section for help). If you run the script but don't see anything happening, check the troubleshooting section below, you may need to connect through VNC rather than SSH.
+   2. If you've selected `Web`, then you'll need to scan the QR Code with your phone. Ensure that your phone is connected to the same WiFi network as your Magic Mirror. After scanning the QR code, your phone will open a URL. Grant access to your calendar at this URL. Once access is granted, your phone should display the Magic Mirror interface. Note: You may need to temporarily allow your phone to access the Magic Mirror by setting `ipWhitelist: []` in your Magic Mirror's configuration file (`~/MagicMirror/config/config.js`).
 
 ### Supported OAuth Credentials Type
 
-As mentioned in the second step above, when creating your OAuth client ID you'll have to choose between a different set of options. This module only supports the `Desktop app` credential type. The main difference between credential types is the authentication flow. If you think you need support for a different flow, feel free to open an issue, merge requests are also welcome.
+As mentioned in the second step above, when creating your OAuth client ID you'll have to choose between a different set of options. This module only supports the `Desktop app` and `Web` credential types. The main difference between credential types is the authentication flow. If you think you need support for a different flow, feel free to open an issue, merge requests are also welcome.
 
 ## Using the module
 

node_helper.js

@@ -3,6 +3,7 @@ const { google } = require("googleapis");
 const { encodeQueryData } = require("./helpers");
 const fs = require("fs");
 const Log = require("logger");
+const qr = require('qrcode')
 
 const TOKEN_PATH = "/token.json";
 
@@ -22,6 +23,26 @@ module.exports = NodeHelper.create({
 
   // Override socketNotificationReceived method.
   socketNotificationReceived: function (notification, payload) {
+    if (notification === "AUTH_NEEDED") {
+      qr.toDataURL(payload.url, {
+        type: "image/png",
+        width: 320,
+        height: 320,
+        margin: 5,
+        errorCorrectionLevel: 'H',
+        quality: 0.95,
+      }, (err, qrUrl) => 
+      {
+        if (err) {
+          Log.warn(this.name + ": " + err);
+          payload.qrUrl = false;
+        } else {
+          payload.qrUrl = qrUrl;
+        }
+        this.sendSocketNotification("AUTH_NEEDED_QR", payload)
+      });
+    }
+
     if (notification === "MODULE_READY") {
       if (!this.calendarService) {
         if (payload.queryParams) {