在 chrome 分机上实时连接
Live connect on chrome extension
您好,我正在尝试使用 Microsoft OAuth,以便能够在 chrome 扩展程序中使用 Outlook 凭据登录。
我正在使用 javascript 库 (https://msdn.microsoft.com/en-us/library/hh550844.aspx),但我做不到。我正在做以下事情。
WL.init({
client_id: "foo_bar",
scope: "wl.signin",
redirect_uri:"http://www.contoso.com/redirect",
response_type: "token" });
然后
WL.login()
发生的事情是我被重定向到 http://www.contoso.com/redirect
但是当我关闭弹出窗口时,我收到以下消息
[WL]WL.login: The popup is closed without receiving consent.
我认为问题出在 redirect_uri 但我如何使用 chrome 扩展来做到这一点?
我终于做到了。只需遵循本指南
你在这里有代码
https://github.com/jameslau-MSFT/MSAuthFromChromeExtSample
高级步骤
以下是您需要在较高级别执行的操作:
- 创建客户端 ID 并确保 API 设置正确。
- 正确设置您的 Chrome 扩展程序以使用至少 1 个内容脚本。我们将在下面的#4 中需要它。
- 在 Chrome 扩展中创建 UI 以登录,确保将重定向 URL 正确设置为“https://login.live.com/oauth20_desktop.srf”并将响应类型设置为“令牌”。
- 在您的 Chrome 扩展程序的内容脚本中,注意 Microsoft 帐户登录流程中的弹出窗口 window。在正确的时间点,我们将捕获 auth_token,存储它,然后关闭弹出窗口 window.
清单应该是这样的
{
"name": "MSAuthFromChromeExtSample",
"short_name": "MSAChromeExt",
"version": "1.0.0",
"description": "Chrome extension that demonstrates how to authenticate against Microsoft Account.",
/*"background":{
"page": "background.html"
},*/
"browser_action": {
/* "default_icon": {
"19": "./assets/icons/icon-19.png",
"38": "./assets/icons/icon-38.png"
},*/
"default_title": "MSA Auth Sample",
"default_popup": "./html/popup.html"
},
"content_scripts": [
{
"matches": ["*://*/*"],
"js": ["lib/jquery.min.js", "js/script.js"],
"run_at" : "document_end"
}
],
"permissions": ["history","tabs","storage", "webRequest", "notifications", "<all_urls>"],
"manifest_version": 2,
"update_url": "http://clients2.google.com/service/update2/crx",
"content_security_policy": "script-src 'self' https://js.live.net; object-src 'self'"
}
需要指出的几点:
- 我们包含 js/script.js 作为内容脚本。每次在 window 或选项卡中加载文档时都会加载这些脚本。我们需要它来执行上面的#4。我们还包括 lib/jquery.min.js 作为内容脚本,因为我希望能够在我的 script.js 文件中使用 jquery。
- 我们在权限集中包含了“存储”,因为稍后我们将使用 Chrome 存储来存储 auth_token。
- 我们包含了这一行:"content_security_policy": "script-src 'self' https://js.live.net; object-src 'self'" 所以 LiveSDK JavaScript 库可以从 popup.html
成功加载
- browser_action.default_popup 设置为“./html/popup.html”——这指定了当用户单击浏览器扩展按钮时将显示的 HTML。我们将使用它来显示登录 UI.
登录码
$('a#signin').click(function() {
$('div#signin_status').text('');
WL.init({
client_id: "000000004410CD1A", // replace with your own Client ID!!
redirect_uri: "https://login.live.com/oauth20_desktop.srf",
response_type: "token"
});
WL.login({
scope: ["wl.signin", "office.onenote_create"]
});
return false;
});
内容脚本
$(window).load(function() {
if (window.location.origin == "https://login.live.com") {
var hash = window.location.hash;
// get access token
var start = hash.indexOf("#access_token=");
if ( start >= 0 ) {
start = start + "#access_token=".length;
var end = hash.indexOf("&token_type");
var access_token = hash.substring(start, end);
// Store it
chrome.storage.local.set({"access_token":access_token});
// Close the window
window.close();
}
}
});
您好,我正在尝试使用 Microsoft OAuth,以便能够在 chrome 扩展程序中使用 Outlook 凭据登录。
我正在使用 javascript 库 (https://msdn.microsoft.com/en-us/library/hh550844.aspx),但我做不到。我正在做以下事情。
WL.init({
client_id: "foo_bar",
scope: "wl.signin",
redirect_uri:"http://www.contoso.com/redirect",
response_type: "token" });
然后
WL.login()
发生的事情是我被重定向到 http://www.contoso.com/redirect 但是当我关闭弹出窗口时,我收到以下消息
[WL]WL.login: The popup is closed without receiving consent.
我认为问题出在 redirect_uri 但我如何使用 chrome 扩展来做到这一点?
我终于做到了。只需遵循本指南
你在这里有代码
https://github.com/jameslau-MSFT/MSAuthFromChromeExtSample
高级步骤
以下是您需要在较高级别执行的操作:
- 创建客户端 ID 并确保 API 设置正确。
- 正确设置您的 Chrome 扩展程序以使用至少 1 个内容脚本。我们将在下面的#4 中需要它。
- 在 Chrome 扩展中创建 UI 以登录,确保将重定向 URL 正确设置为“https://login.live.com/oauth20_desktop.srf”并将响应类型设置为“令牌”。
- 在您的 Chrome 扩展程序的内容脚本中,注意 Microsoft 帐户登录流程中的弹出窗口 window。在正确的时间点,我们将捕获 auth_token,存储它,然后关闭弹出窗口 window.
清单应该是这样的
{
"name": "MSAuthFromChromeExtSample",
"short_name": "MSAChromeExt",
"version": "1.0.0",
"description": "Chrome extension that demonstrates how to authenticate against Microsoft Account.",
/*"background":{
"page": "background.html"
},*/
"browser_action": {
/* "default_icon": {
"19": "./assets/icons/icon-19.png",
"38": "./assets/icons/icon-38.png"
},*/
"default_title": "MSA Auth Sample",
"default_popup": "./html/popup.html"
},
"content_scripts": [
{
"matches": ["*://*/*"],
"js": ["lib/jquery.min.js", "js/script.js"],
"run_at" : "document_end"
}
],
"permissions": ["history","tabs","storage", "webRequest", "notifications", "<all_urls>"],
"manifest_version": 2,
"update_url": "http://clients2.google.com/service/update2/crx",
"content_security_policy": "script-src 'self' https://js.live.net; object-src 'self'"
}
需要指出的几点:
- 我们包含 js/script.js 作为内容脚本。每次在 window 或选项卡中加载文档时都会加载这些脚本。我们需要它来执行上面的#4。我们还包括 lib/jquery.min.js 作为内容脚本,因为我希望能够在我的 script.js 文件中使用 jquery。
- 我们在权限集中包含了“存储”,因为稍后我们将使用 Chrome 存储来存储 auth_token。
- 我们包含了这一行:"content_security_policy": "script-src 'self' https://js.live.net; object-src 'self'" 所以 LiveSDK JavaScript 库可以从 popup.html 成功加载
- browser_action.default_popup 设置为“./html/popup.html”——这指定了当用户单击浏览器扩展按钮时将显示的 HTML。我们将使用它来显示登录 UI.
登录码
$('a#signin').click(function() {
$('div#signin_status').text('');
WL.init({
client_id: "000000004410CD1A", // replace with your own Client ID!!
redirect_uri: "https://login.live.com/oauth20_desktop.srf",
response_type: "token"
});
WL.login({
scope: ["wl.signin", "office.onenote_create"]
});
return false;
});
内容脚本
$(window).load(function() {
if (window.location.origin == "https://login.live.com") {
var hash = window.location.hash;
// get access token
var start = hash.indexOf("#access_token=");
if ( start >= 0 ) {
start = start + "#access_token=".length;
var end = hash.indexOf("&token_type");
var access_token = hash.substring(start, end);
// Store it
chrome.storage.local.set({"access_token":access_token});
// Close the window
window.close();
}
}
});