从Chrome扩展程序中的“登录页面”按钮重定向到Google Gmail登录屏幕

Question

我已经开始学习chrome扩展，并创建了一个欢迎页面。我添加了一个简单的登录屏幕，该屏幕具有用户名和密码并在我的Web API中接收值。现在，我尝试使用Gmail api，它将用户重定向到Gmail登录屏幕，并让他们通过它登录。

我无法决定如何使用chrome.identity。在发布此内容之前，我已经搜索了该网站并被答案弄糊涂了。他们中有些人谈论Firebase，而另一些人谈论oauth。

这是我的manifest.json示例：

{

"manifest_version": 2,
"name": "Sample Web api Extension",        
"version": "1.5.2",       
"permissions": [
"storage",    
"tabs",   
"management",
"identity",
"https://accounts.google.com/*",
"https://www.googleapis.com/*"
],
"oauth2": {   
"client_id": "XXXccsdfdsfDWOQU#[email protected]",
"scopes": [ "https://www.googleapis.com/auth/userinfo.profile" ]
},

"icons": {
"48": "img/logo.png"
},

"background": {
"page": "background.html",
"persistent": true
},  
"content_security_policy": "script-src 'self' https://apis.google.com; object-src 'self'",
"browser_action": {
"default_icon": "img/off.png"
},

}

具有按钮的着陆页：

<div class="buttons">
            <button id="login-btn" class="btn btn-block btn-social btn-google btn-flat" tabindex="3"><i class="fa fa-gmail"></i>Sign in Using Google</button>
            <!--<button id="cancel-btn" class="btn btn-default" tabindex="4">Cancel</button>-->
            <button class="btn-link" id="help-link" tabindex="5">Need help</button>
        </div>

所以我可以知道下一步该怎么做吗？抱歉，如果我听起来像是脚本小子，但无法决定下一件事。任何示例代码也将有所帮助。

谢谢

google extension sample link--dead now

Answer 1

所以，最后我自己弄清楚了下一步该怎么做。在这里分享，以防万一将来有人甚至我需要：）

步骤1）创建一个Login.js文件并添加以下代码：

 var listenBtnClick = function () {
    console.log("Hello, going to authorize user js");
    authorizeMethod.getAccessToken();
}

[步骤2）创建Authorize.js文件和下面的代码：

  var REDIRECT_URL = chrome.identity.getRedirectURL("oauth2");

  var CLIENT_ID = "RandomNumber.apps.googleusercontent.com"; // grab this from console.developers.google.com

  var SCOPES = ["openid", "email", "profile"]; //take one or array of properties. 
var joinedScopes = SCOPES.join('');

var AUTH_URL = "https://accounts.google.com/o/oauth2/auth?client_id=" + CLIENT_ID + "&redirect_uri=" + encodeURIComponent(REDIRECT_URL) + "&scope=" + encodeURIComponent(joinedScopes) + "&response_type=token";

[步骤3）获取访问令牌，然后使用返回的访问令牌对其进行验证：

var getAccessToken = function () {
    console.log("getAccessToken")
    return authorize().then(validate);
};  

PS：我将通过更多步骤继续更新此线程。