Переадресация на экран входа в Google Gmail со страницы входа в систему с расширением chrome

Question

Я начал изучать chrome расширения и создал страницу приветствия. Я добавил простой экран входа в систему, который содержит имя пользователя и пароль и получает значения в моем веб-API. Сейчас я пытаюсь использовать API Gmail, который перенаправляет пользователей на экран входа в Gmail и позволяет им войти через него.

Я не могу решить, как использовать chrome .identity для то же. Прежде чем опубликовать это, я искал сайт и запутался в ответах. Некоторые из них говорят о Firebase , а некоторые говорят о oauth .

Вот мой манифест. 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#O@v.apps.googleusercontent.com",
"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 - мертв сейчас

Answer 1

Итак, наконец-то Сам понял, что делать дальше. Обмен здесь на случай, если кому-то или даже мне понадобится в будущем:)

Шаг 1) Создайте файл входа в систему. js и добавьте следующий код:

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

Шаг 2) Создать Авторизацию . 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: я буду продолжать обновлять эту ветку с большим количеством шагов.