Javascript OAuth 2.0身份验证屏幕保持打开状态_Javascript_Google Chrome Extension_Oauth 2.0_Google Oauth

Javascript OAuth 2.0身份验证屏幕保持打开状态

javascript google-chrome-extension oauth-2.0

Javascript OAuth 2.0身份验证屏幕保持打开状态,javascript,google-chrome-extension,oauth-2.0,google-oauth,Javascript,Google Chrome Extension,Oauth 2.0,Google Oauth,一个令人困惑的快速问题我正在遵循I/O'12（）中的示例，我让它工作了，但由于某种原因，在我授予访问权限后，窗口会变成一个白色屏幕，标题是“连接…”并保持不变。控制台中没有错误，就OAuth身份验证而言，我很乐意这样做我想指出，我是在Chrome扩展的弹出窗口中使用。我不知道这是否有什么区别该示例的演示效果非常好，因此我认为它与chrome扩展内部有关。我只是不知道会是什么我使用的代码与示例几乎相同： js/oauth/oauth.js: var clientId = '[MY_CL

一个令人困惑的快速问题

我正在遵循I/O'12（）中的示例，我让它工作了，但由于某种原因，在我授予访问权限后，窗口会变成一个白色屏幕，标题是“连接…”并保持不变。控制台中没有错误，就OAuth身份验证而言，我很乐意这样做

我想指出，我是在Chrome扩展的弹出窗口中使用。我不知道这是否有什么区别

该示例的演示效果非常好，因此我认为它与chrome扩展内部有关。我只是不知道会是什么

我使用的代码与示例几乎相同：

js/oauth/oauth.js:

  var clientId = '[MY_CLIENTID]';
  var apiKey = '[MY_API_KEY]';
  var scopes = 'https://www.googleapis.com/auth/plus.me';

  // Use a button to handle authentication the first time.
  function handleClientLoad() {
    gapi.client.setApiKey(apiKey);
    window.setTimeout(checkAuth,1);
  }
  function checkAuth() {
    gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: true}, handleAuthResult);
  }
  function handleAuthResult(authResult) {
    var authorizeButton = document.getElementById('authorize-button');
    var flows = document.getElementById('flows');
    var welcome = document.getElementById('welcome');

    if (authResult && !authResult.error) {
      flows.style.display = 'none';
      welcome.style.display = '';
      makeApiCall();
    } else {
      flows.style.display = '';
      welcome.style.display = 'none';
      authorizeButton.onclick = handleAuthClick;
    }
  }
  function handleAuthClick(event) {
    gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: false}, handleAuthResult);
    return false;
  }
  // Load the API and make an API call.  Display the results on the screen.
  function makeApiCall() {
    gapi.client.load('plus', 'v1', function() {
      var request = gapi.client.plus.people.get({
        'userId': 'me'
      });
      request.execute(function(resp) {
        var heading = document.createElement('p');
        var image = document.createElement('img');
        image.src = resp.image.url;

        var welcometext = document.createTextNode("Welcome ");
        var welcometextend = document.createTextNode(", you are now logged in!");

        heading.appendChild(welcometext);
        heading.appendChild(document.createTextNode(resp.displayName));
        heading.appendChild(welcometextend);

        document.getElementById('content').appendChild(heading);

        document.getElementById('avatar').appendChild(image);
      });
    });
  }

<html>
    <head>
        <script src="js/oauth/oauth.js"></script>
        <script src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script>
    </head>


<body style="width: 500px">

<div id="flows" style="display: none;" >
  <h2>Please log in before starting</h2>
    <button id="authorize-button">Log in</button>

</div>  

<div id="welcome" style="display: none;">
<div id="avatar"></div>
<div id="content"></div>

</div>


 </body>
</html>

popup.html:

  var clientId = '[MY_CLIENTID]';
  var apiKey = '[MY_API_KEY]';
  var scopes = 'https://www.googleapis.com/auth/plus.me';

  // Use a button to handle authentication the first time.
  function handleClientLoad() {
    gapi.client.setApiKey(apiKey);
    window.setTimeout(checkAuth,1);
  }
  function checkAuth() {
    gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: true}, handleAuthResult);
  }
  function handleAuthResult(authResult) {
    var authorizeButton = document.getElementById('authorize-button');
    var flows = document.getElementById('flows');
    var welcome = document.getElementById('welcome');

    if (authResult && !authResult.error) {
      flows.style.display = 'none';
      welcome.style.display = '';
      makeApiCall();
    } else {
      flows.style.display = '';
      welcome.style.display = 'none';
      authorizeButton.onclick = handleAuthClick;
    }
  }
  function handleAuthClick(event) {
    gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: false}, handleAuthResult);
    return false;
  }
  // Load the API and make an API call.  Display the results on the screen.
  function makeApiCall() {
    gapi.client.load('plus', 'v1', function() {
      var request = gapi.client.plus.people.get({
        'userId': 'me'
      });
      request.execute(function(resp) {
        var heading = document.createElement('p');
        var image = document.createElement('img');
        image.src = resp.image.url;

        var welcometext = document.createTextNode("Welcome ");
        var welcometextend = document.createTextNode(", you are now logged in!");

        heading.appendChild(welcometext);
        heading.appendChild(document.createTextNode(resp.displayName));
        heading.appendChild(welcometextend);

        document.getElementById('content').appendChild(heading);

        document.getElementById('avatar').appendChild(image);
      });
    });
  }

<html>
    <head>
        <script src="js/oauth/oauth.js"></script>
        <script src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script>
    </head>


<body style="width: 500px">

<div id="flows" style="display: none;" >
  <h2>Please log in before starting</h2>
    <button id="authorize-button">Log in</button>

</div>  

<div id="welcome" style="display: none;">
<div id="avatar"></div>
<div id="content"></div>

</div>


 </body>
</html>


请在开始前登录
登录

sdlkfad

这就是它看起来的样子：

“在Chrome扩展插件的弹出窗口中，使用内容脚本”抱歉，什么？@Xan抱歉，我混淆了这一部分。它实际上是一个Chrome扩展的页面操作，加载一个popup.html文件来执行OAuth。你应该在问题本身中包含相关的代码，而不是一个非常，呃，信息丰富的屏幕截图。@Xan我编辑了这篇文章以包含我的代码。谢谢你迄今为止的帮助！