Google Calendar custom widget

Not a valid origin for the client: http://192.168.1.13:5050 has not been whitelisted for client ID 951565782741-xxxxx.apps.googleusercontent.com. Please go to https://console.developers.google.com/ and whitelist this origin for your project's client ID."

Is what I get for the error in the console. My config is as follows,

calendar:
    widget_type: gcal
    colorpast: "#555555"
    calendars:
      xxxxx@xxxxxxxxx:
        color: "#dddddd"
    updateinterval: 120000
    apikey: "AIzaSxxxxxxx"
    clientid: "951565782741-xxxxxxxx.apps.googleusercontent.com"
    days: 7

I have blanked out the important bits, this is also my setup in the google api,

I have cleared my cache when making changes, but can’t seem to figure it out.

Any help is much appreciated,

with that error, then why do you use

http://192.168.1.13.xip.io:5050

in your whitelist??

google API wont accept an IP address as an entry, so as per @WazWaz in post 16, I added that entry.

but the widget sees the site as just the ip.
i guess in that case you need to use DNS for that widget.

or you could try to use that same link that you gave to google in your browser

I get that, but HADashboard is going to load the internal IP, unless I port forward my internet to :5050, and then use my ddns host, but I dont want HADashboard internet facing. So bit stuck, and wondering how @WazWaz managed to do it.

no you dont need to portforward 5050.
you can use a proxyserver that connects an outside dns to your proxyserver (with port 433 like ha uses)
and redirect it to 5050.

but i dont think you can use google api without opening up to the net.

other option is to install a local dns server to create a local name for your dashboard.

So bit stuck, and wondering how @WazWaz managed to do it.

i hope for you that he hasnt opened his dashboard up to the net.

So messed around a bit more and added in my ddns host to the google api, just added the host, not port forwarded anything, and now I get a different error, and I can click on the authorise button, but still brings up an 400 error.

I can’t add the straight IP into the Authorized redirect url’s, hence its only in there with the xip.io address.

i did some reading on xip.io
but to get that to work you need to edit your local dns and add http://192.168.1.13.xip.io:5050 somewhere so that you can use that in your browser.

the xip.io site itselve is down, so i cant read up there, and i cant find out how to use xip.io

You are a superstar @ReneTode So I added this line to my HOSTS file on windows in the Windows/System32/Drivers/etc folder,

192.168.1.13 192.168.1.13.xip.io

and it now lets me authorise it, and it works, but obviously now I have to use the address, http://192.168.1.13.xip.io:5050 to access HADashboard, and I can easily edit my host file on my windows PC, but on my iPad, which is where I will mainly be using HADashboard, I can’t edit host files, so I am kinda still back at square one :joy::joy:

I tried going back to just http://192.168.1.13:5050 after authorising it, but it went back to the please login page.

1 Like

i found this

i think it needs to be installed on the device that you run d on and then activated.
from that moment on you should be able to use the xip.io on every device in your system.

but i cant find much documentation about it.

i think you need to google a bit more about xip.io (usage, install, doc, example, etc)

1 Like

Thank you again, this seems to be getting super complicated for a simple calendar display, i’ll keep at it though :slight_smile:

there are easier ways :wink:
i have an app in AD that creates a html file.
that file i show in an iframe in the dashboard.

the nice part is that i could reuse the auth files that were already generated for using the calender in homeassistant :wink:

but i never took the time to make it general enough to share and i just use text on a blank page.

1 Like

I like the concept @WazWaz has come up with, its exactly what I would be after. But unfortunately I am not a coder, I can hack together other peoples code, and change around to my preference, but thats as far as my skills go unfortunately :frowning:

Like the look of it, shame I can’t get it work without the .xip.io bit, and it seems to bleed into the control panel as well, but we are getting somewhere :joy: :joy:

1 Like

Sorry, I wasn’t clear - you also have to open the page via the http://192.168.1.13.xip.io:5050 too (i.e. open your dashboard in your browser). Alternatively, if your router serves DNS (usually as a “home” domain), you can use http://hassio.home:5050, and add that to the permitted domains.

1 Like

Ideally, everyone would be honest and we could all just use one public APIKEY etc., and there would be no setup required. Tragedy of the commons.

Probably another thing this HASS.IO Cloud could help with - have an account on HASS.IO cloud and get keys from there. If it gets abused, we change the keys.

1 Like

As above, thats fine on something I can redirect my host on, but on my ipad, which is what I am setting all this up for I can’t do it, I guess I might be able to setup a redirect in router. Just waiting for a new one to be delivered hopefully, then I am going to re-setup my network.

Invalid Redirect: http://hassbian.home:5050 must end with a public top-level domain

Is what I get when I try and add in my host. Close, but no cigar :frowning:

You shouldn’t need a redirect at all. 192.168.1.13.xip.io is 192.168.1.13 in the xip DNS.

I guess as their website is down, that maybe their DNS is down too, as it doesn’t work on my ipad currently, and only way to get it to work on the PC was to edit the host’s file, which wasn’t ideal.

Ok, so worked it out.

I needed to change my DNS setting on my LAN to an internet DNS server first, so changed it to 4.2.2.2 and then my secondary DNS to my routers IP, and then it resolved 192.168.1.13.xip.io to 192.168.1.13. And on the iPad, changed the DNS to manual and set the server to 4.2.2.2 and that again caused 192.168.1.13.xip.io to work. Yay, finally got there.

Thank you @WazWaz and @ReneTode for your help.

So final question, any idea how to stop it running into the control panel at the bottom, it seems to exceed its size limits a little bit.

1 Like

I couldn’t find any way to make it work automatically, you’ll just have to change the “400px” in the .css file manually. I’m no css wizard, as you can see.

1 Like