Acciones en el enlace de la cuenta de Google
Siguiente documentación descritaaquí, Tengo un enlace de cuenta configurado con subvenciones implícitas y descubro que funciona bien cuando se prueba con el navegador / consola de acciones, y también con la aplicación Google Home para Android. Lamentablemente, en la versión para iPhone de la aplicación, la autenticación del usuario se bloquea la mayor parte del tiempo. La retroalimentación de las acciones en el soporte de Google es que el problema es que el flujo de inicio de sesión de Google se implementa en una pestaña (ventana) separada del navegador. En el iPhone no puede abrir 2 ventanas en SfariViewController, por lo tanto, reescriben la dirección de la primera página y no pueden finalizar el flujo de inicio de sesión. Este es un problema conocido y no planean cambiarlo. La solución es implementar el flujo de inicio de sesión en una sola ventana del navegador. No tengo claro cómo hacer esto y estoy buscando a alguien que comparta el código detrás de la URL de autorización que configura que funciona de manera consistente en el iPhone. A continuación se muestra el núcleo de lo que estoy usando:
Fragmento .html:
<!DOCTYPE html>
<html>
<head>
<title>Authorization Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="google-signin-client_id" content="948762963734-2kbegoe3i9ieqc6vjmabh0rqqkmxxxxx.apps.googleusercontent.com">
<!-- <meta name="google-signin-ux_mode" content="redirect"> INCLUDING THIS META TAG BREAKS THE AUTH FLOW -->
<script src="js/googleAuth.js"></script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<link rel="stylesheet" href="css/googleAuth.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header class="bgimg-1 w3-display-container w3-grayscale-min" id="loginScreen">
<div class="w3-display-topleft w3-padding-xxlarge w3-text-yellow" style="top:5px">
<span class="w3-text-white">Google Sign In</span><br>
<span class="w3-large">Sign in with your Google account</span><br><br>
<div class="g-signin2" data-onsuccess="onSignIn"></div><br><br>
</div>
</header>
</body>
</html>
Fragmento de código .js:
function onSignIn(googleUser) {
var profile = googleUser.getBasicProfile();
var id = profile.getId()
var name = profile.getName()
var email = profile.getEmail()
var token = googleUser.getAuthResponse().id_token;
var client_id = getQueryVariable('client_id')
// vital-code-16xxx1 is the project ID of the google app
var redirect_uri = 'https://oauth-redirect.googleusercontent.com/r/vital-code-16xxx1'
var state = getQueryVariable('state')
var response_type = getQueryVariable('response_type')
// store the user's name, ID and access token and then sign out
storeOwnerID (email, name, id, token, function() {
// sign out
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
console.log('signed out')
});
// if this page was loaded by Actions On Google, redirect to complete authorization flow
typeof redirect_uri != 'undefined' ? window.location = redirectURL : void 0
})
}
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split('&');
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split('=');
if (decodeURIComponent(pair[0]) == variable) {
return decodeURIComponent(pair[1]);
}
}
console.log('Query variable %s not found', variable);
}