将 Chrome 扩展连接到 StackExchange oAuth API答案

【问题标题】：Connecting Chrome Extension to StackExchange oAuth API将 Chrome 扩展连接到 StackExchange oAuth API
【发布时间】：2015-09-18 21:45:57
【问题描述】：

TL;DR -- 我正在尝试构建一个 Chrome 扩展程序，以显示来自 StackOverflow 的用户当前通知的数量。

我正在关注Chrome Extension tutorial 创建使用 oAuth 的扩展程序。将 Google oAuth 位换成（我认为是）StackExchange API 位，我最终在我的background.js 文件中得到以下内容：

var oauth = ChromeExOAuth.initBackgroundPage({
    //ES6 template strings!
    'request_url'   : `https://stackexchange.com/oauth?client_id=${STACK_APP.id}&scope=read_inbox,no_expiry`, 

    'authorize_url' : 'https://stackexchange.com/oauth/login_success',
    'access_url'    : 'https://stackexchange.com/oauth/access_token',

    'consumer_key'    : STACK_APP.key,
    'consumer_secret' : STACK_APP.secret,

    //'scope'    : '', //not sure I need this...

    'app_name' : 'StackOverflow Notifications (Chrome Extension)'
});

oauth.authorize(function () {
    console.log('authorize...');
});

当我在本地运行扩展程序时，它会尝试打开一个新的浏览器选项卡来完成 oAuth 握手——这很好，除了我最终到达以下 URL： https://stackexchange.com/oauth/login_success?oauth_token=undefined

浏览器标签卡在这里。

我不太确定问题出在哪里 - 我不知道我的 initBackgroundPage() 调用中是否列出了错误的 URL，或者我的 StackApp 是否有错误的 oAuth 域（因为它是 Chrome 扩展程序.. .this question 并没有真正为我回答问题）。

任何想法都将不胜感激！

【问题讨论】：

指向一个现有的开源项目会不会不合适？
我可能最终会将我的代码放在 GitHub 上......当我这样做时，我会发布链接以供参考。
不，不，给 you 一个指向另一个已经存在的扩展程序的链接是不是很不礼貌？你想在不被别人的想法玷污的情况下做你自己的吗？当然，现在我重新阅读了您的问题，我想到的是一个不显示计数器的通知器。
哈，谢谢你的提议。我更愿意为此奋斗，目前进展顺利:-)
仅供参考：github.com/arthurakay/StackOverflow-Notifications

标签： javascript google-chrome google-chrome-extension oauth

【解决方案1】：

据我所知，我在 OP 中提到的 oAuth 教程已经过时 - 您不再需要任何这些，您可以改用 chrome.identity。

明确地说，我必须做几件事：

STACK_APP = {
    id           : 1234,
    scope        : 'read_inbox,no_expiry',

    request_uri  : 'https://stackexchange.com/oauth/dialog',
    redirect_uri : chrome.identity.getRedirectURL("oauth2")
};

//ES6 template string!
var requestUrl = `${STACK_APP.request_uri}?client_id=${STACK_APP.id}&scope=${STACK_APP.scope}&redirect_uri=${STACK_APP.redirect_uri}`;


//https://developer.chrome.com/extensions/identity
//https://developer.chrome.com/extensions/app_identity#update_manifest
chrome.identity.launchWebAuthFlow({
    url         : requestUrl,
    interactive : true
}, function (url) {
    console.log('redirected to: ' + url);
});

注意redirect_uri——这最终成为 chromiumapp.org 的子域，因此您需要在 StackApps 中将其列为您的应用的域（允许 oAuth 继续）。

【讨论】：