iPhone上的Google帐户链接操作

按照这里描述的文档，我设置了隐式授权的帐户链接，并发现它在使用浏览器/操作控制台进行testing时效果很好，并且也适用于Android版Google Home应用。 不幸的是，在iPhone版本的应用程序，用户身份validation挂起大部分时间。 谷歌支持的行动反馈是，问题是谷歌loginstream程是在单独的浏览器选项卡（窗口）中实现的。 在iPhone上，您不能在SfariViewController中打开2个窗口，因此他们正在重写第一页的地址，无法完成loginstream程。 这是已知的问题，他们不打算改变这一点。 解决scheme是在一个浏览器窗口中实现loginstream程。 我不清楚如何做到这一点，我正在寻找一个人共享代码背后的授权URL，你设置的iPhone一直工作。 以下是我正在使用的核心：

.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>

.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); }

@dana你有没有尝试添加元标记？ 

 <meta name="google-signin-ux_mode" content="redirect">

在Google支持和工程的帮助下，现在已经解决了：

  1. 如上所述，我不得不包括这个元标记： <meta name="google-signin-ux_mode" content="redirect">
  2. 我需要在我的项目的授权redirectURI中拥有https://my-auth-endpoint.com/ 。 只有在授权的javascript源文件中才有足够的权限。 另一个关键是要包括最后的斜线，我原本不是，没有它也不行。

以下是您可以用来获取Google帐户关联操作授权端点工作版本的简单代码基础：

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"> <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"> <script> sessionStorage['jsonData'] == null ? storeQueryVariables() : void 0 </script> </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>

.js文件： 

 // Retrieve user data, store to DynamoDB and complete the redirect process to finish account linking function onSignIn(googleUser) { let profile = googleUser.getBasicProfile(), id = profile.getId(), name = profile.getName(), email = profile.getEmail(), token = googleUser.getAuthResponse().id_token, redirect_uri = 'https://oauth-redirect.googleusercontent.com/r/vital-code-16xxxx', jsonData = JSON.parse(sessionStorage['jsonData']), redirectURL = redirect_uri + '#access_token=' + token + '&token_type=bearer&state=' + jsonData.state // store the user's name, ID and access token storeUserData(email, name, id, token, function() { // sign out of google for this app let auth2 = gapi.auth2.getAuthInstance(); auth2.signOut() // if this page was loaded by Actions On Google, redirect to complete authorization flow typeof redirect_uri != 'undefined' ? window.location = redirectURL : void 0 }) } // Store the user data to db function storeUserData (email, name, id, token, callback) { // removed for simplicity } // Store URI query variable 'state' to browser cache function storeQueryVariables() { let qvar = { 'state': getQueryVariable('state') } storeLocally(qvar) } // Get any variable from incoming URI 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); } // Store JSON object input to local browser cache function storeLocally (jsonData) { if (typeof(Storage) !== 'undefined') { sessionStorage['jsonData'] = JSON.stringify(jsonData) } else { console.log('Problem: local web storage not available') } }
Interesting Posts