Google Authentication resulting in origin_mismatch error. - javascript

I have done code for getting list of google analytics accounts
and its works fine with a static clientid
I have used this tutorial: Hello Analytics API: JavaScript quickstart for web applications
The problem is:
I want this functionality for all users means my users logged in from their Google Accounts and they all can see their Google Analytics accounts list.
However I am seeing an error: "origin_mismatch"
I want this without set origin because I can not set origin for all users.

Origin mismatch is normally caused by the Javascript origins incorect in the project on google developers console. Check and make sure that the Javascript origins match the domain from which your requests are coming and to which you are returning the user after login in.
Creating a Google API Console project and client ID
In the Authorized JavaScript origins field, enter the origin for your
app. You can enter multiple origins to allow for your app to run on
different protocols, domains, or subdomains. You cannot use wildcards.
In the example below, the second URL could be a production URL.
http://localhost:8080 https://myproductionurl.example.com
Answer: If you are using JavaScript you need to set the origin for the server that you are returning authentication to. There is no way around this. Just add your server and your users will be able to access it. There is no need to set it for each user. The origin is to your server hosting the script.

Related

Page indexing problem with Google search console

Recently, I created my first website and registered at Google search console.
The address is https://www.chemjix.com. However, as I always landed on the insecure http address when entering just www.chemjix.com in the address bar, I use the index.html to forward to https and directly to the correct language (English or German). After adding the website to Google search console, I got the message for the http that it is not indexed because of "Soft 404 Website" and "Page with redirect".
Is that a problem and does Google therefore rank my website lower or something like that? And what would be the alternative, do I need to get rid of that redirection?
Thanks a lot
celdri
You should use your hosting provider's tools to setup your domain correctly. You should use only https, as these days this is a must have for websites.
Most providers have some kind SSL or integrated the free Let's Encrypt solution for a real free for life SSL.
If you have a working site in https, you may use the hosting provider's own solution (like in Cloudways for example we have a swith) to redirect every URL to https, or you should use .htaccess redirect rules.
You also can additionally take advantage of Cloudflare not just to domain managament and caching, but to setup, and handle and check full SSL route from user to server.

Unable to use Google SSO on server react

I am trying to use Google SSO on a server but the popup for Google SSO doesn't display the google accounts to select for logging in. It works when I test it in my local and am able to login too.
I am using the package react-oauth/google
I have added server details in Credentials via Google Cloud Console. Following are URLs in configurations in Authorized JavaScript origins and Authorized redirect URIs:
http://localhost
http://localhost:9998 ## React app is running on this port
http://example.com:9998 ## Server url can be accessed using domain and port
I am getting 403 error when following url is called https://accounts.google.com/gsi/button:
Following is the error that is shown in cosole
[GSI_LOGGER]: The given origin is not allowed for the given client
Tried clearing cache and hard reload. It doesn't work either.
Does it have something to do with using ports along with domain name?
EDIT: I have also tried creating new credentials.. but that doesn't work either
I had the same issue at work. Does your website have ssl certificate? If not try adding ssl certicate (otherwise google sso won't work without it) and then change the urls in the Authorized JavaScript origins and Authorized redirect URIs with the https url. This should fix the issue. Let me know if it worked :)

Error: origin_mismatch when authorizing embed API for Google Analytics

I'm trying to implement a statistics dashboard from google analytics in a 3rd party CMS and I'm running into some problems. I'm trying to use googles embed API to build my dashboard and run into this error when I try to authenticate my account:
Error: origin_mismatch
I have looked around for a solution and found out it was because of a missing www. pretty quick. The thing is that I filled out the right URL in googles developer console and still have no luck. Does anyone know how I can fix this to work properly?
Error: origin_mismatch
Application: CMEZ Analytics
You can email the developer of this application at: email#email.com
Request Details
=
from_login=1
response_type=code token id_token gsession
scope=https://www.googleapis.com/auth/analytics.readonly https://www.googleapis.com/auth/userinfo.email
redirect_uri=postmessage
cookie_policy=single_host_origin
proxy=oauth2relay482041337
include_granted_scopes=true
origin=http://cmez.eu
state=458516662|0.59538506
as=1d7def2550073266
client_id=[censored]
authuser=1
hl=nl
That’s all we know.
The origin_mismatch errror is probably caused by the Javascript origins not being set correctly in the Google Developer console for your project. The Javascript origins must match the domain from which your requests are coming and to which you are returning the user after sign in.
Note: A common mistake here is to add javascript origins for http:// but not https:// (or vice versa). You must also include the port number of your server in the javascript origins if a port number appears in the url.
Documentation info
In the Authorized JavaScript origins field, enter the origin for your
app. You can enter multiple origins to allow for your app to run on
different protocols, domains, or subdomains. Wildcards are not
allowed. In the example below, the second URL could be a production
URL.
http://localhost:4567
https://myproductionurl.example.com

Configuring server cert with Keychain for use with Google APIs Client Library for JavaScript

I am just getting started experimenting with the Google APIs Client Library for JavaScript. Implementing the code at this link, substituting my own credentials (API Key and Client ID):
https://developers.google.com/api-client-library/javascript/start/start-js
The console in Chrome Developer Tools is showing errors like the following:
Uncaught SecurityError: Blocked a frame with origin
"https://accounts.google.com" from accessing a frame with origin
"http://mydomain.com". The frame requesting access has a protocol of
"https", the frame being accessed has a protocol of "http". Protocols
must match.
I am thinking I can correct this by implementing SSL on my site, which I have never done before. I want to use a self-signed SSL certificate , which Google says is OK:
https://developers.google.com/api-client-library/javascript/dev/dev_jscript
I would like to create the cert with Keychain on my Mac. In the process of doing this, I have the opportunity to set extensions, such as Signature, Nonrepudiation, Key Encipherment, Data Encipherment and Key Agreement (More info on the extensions offered within Keychain: http://goo.gl/huaEpf .)
Only Signature is selected by default. Which extensions do I want to select for a server cert for use with Google APIs Client Library for JavaScript?
Based on this:
http://siber-sonic.com/mac/MailSMIME/setupMtLion.html
I think the best choice is not to set any extensions, just leave the "Include Key Usage Extension" checkbox unchecked.

Iframes cannot display https on http site, breaks Google API

Information
I am writing a piece of code that will be going up on a web server that I do not have control over. This webserver does not have https. In this code I use the Google Javascript API. When I put in the example code with all the correct API keys and client ID's and whatnot I get a Protocols must match error on an iframe it tries to create to get OAth2 information.
This Protocols must match error is of course caused by the fact that the webserver is http and the OAth2 url it is using is https.
Main Question
Is there any way to use Google API's on a server that does not have https? Is it possible to shut off this Security feature and make the https OAth2 iframe work on a http server?
Note:
The Google API is creating the iframe that is giving me problems.
You shouldn't be creating your own iframe. The Google JS library takes care of this for you.

Categories