When I try sign in, the login window pops up as expected but it gives me this error.
Error: invalid_request
Realm didn't match redirect_uri/origin. Error code: 2
Request Details:
openid.realm=localhost:8080/oauth2callback
scope=email profile openid https://www.googleapis.com/auth/userinfo.email
response_type=permission
redirect_uri=storagerelay://http/localhost:8080?id=auth435566
ss_domain=http://localhost:8080
client_id=SOME_STRING_ID.apps.googleusercontent.com
fetch_basic_profile=true
I read through the Open ID 2.0 documentation and from my understanding of it, the property openid.realm, should be the same as one of my redirect uri's.
Here are my "Authorized redirect URIs" from the developer console in the credentials section:
https://myapp-1234.appspot.com/oauth2callback
http://myapp-1234.appspot.com/oauth2callback
http://localhost:8080/oauth2callback
I set openid.realm to localhost:8080/oauth2callback because at the moment I'm only testing my application but I have tried the other ones in deployment and I still got the same result but with different error codes.
Here is where I invoke the signIn() method:
var authConfig = {
client_id: 'SOME_STRING_ID.apps.googleusercontent.com',
cookie_policy: 'single_host_origin',
scope: 'https://www.googleapis.com/auth/userinfo.email profile',
openid_realm: 'localhost:8080/oauth2callback'
}
window.handleGoogleClientLoad = function () {
gapi.client.load('myapp_endpoints', 'v1', null, '//' + window.location.host + '/_ah/api');
console.log('API LOADED');
}
//=====================================================================================
function authorizeUser() {
gapi.load('auth2', function() {
gapi.auth2.init(authConfig)
.then(function() {
var auth2 = gapi.auth2.getAuthInstance();
var user = auth2.signIn();
console.log(user);
});
});
}
module.exports = {
login: authorizeUser
}
Here is index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>My App</title>
</head>
<body>
<div id="root"></div>
<script src="lib/vendors.js"></script>
<script src="build/bundle.js"></script>
</body>
The problem was that I was using the wrong Google APIs library. I was using the library that you get from npm. I then imported the module.
import GoogleApis from 'googleapis'
What I was meant to do instead was use the library that can be downloaded from their own website. Integrating this is handy enough. All you have to do is add the line of code below to your index.html.
<script src="https://apis.google.com/js/platform.js" async defer></script>
The file should then look like this
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Welcome to MyApp</title>
</head>
<body>
<div id="root"></div>
<script src="lib/vendors.js"></script>
<script src="build/bundle.js"></script>
<script src="https://apis.google.com/js/platform.js?onload=init" async defer></script>
<!-- init is the function that will get invoked when the page loads. -->
</body>
I then changed around my javascript. You can find references of these changes from their code examples.
const authConfig = {
client_id: 'my_app.apps.googleusercontent.com',
cookie_policy: 'single_host_origin',
scope: 'https://www.googleapis.com/auth/userinfo.email profile',
fetch_basic_profile: true
}
window.init = function() {
gapi.load('auth2', function() {
var auth2 = gapi.auth2.init(authConfig);
auth2.signIn().then(function() {
if(auth2.isSignedIn.get()) {
var profile = auth2.currentUser.get().getBasicProfile();
console.log('ID: ' + profile.getId());
console.log('Full Name: ' + profile.getName());
console.log('Email: ' + profile.getEmail());
}
});
});
}