0

您好，我正在尝试使用 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：弹出窗口在未经同意的情况下关闭。

我认为问题出在 redirect_uri 但如何使用 chrome 扩展来做到这一点？

4

1 回答 1

0

我终于成功了。只需按照本指南

http://blogs.msdn.com/b/onenotedev/archive/2014/07/23/how-to-authenticate-with-microsoft-account-in-a-chrome-extension.aspx

你有代码在这里

https://github.com/jameslau-MSFT/MSAuthFromChromeExtSample

高级步骤

以下是您需要在高层次上做的事情：

  1. 创建客户端 ID 并确保 API 设置设置正确。
  2. 正确设置您的 Chrome 扩展程序以使用至少 1 个内容脚本。我们将在下面的#4 中需要它。
  3. 在 Chrome 扩展程序中创建用于登录的 UI，确保将重定向 URL 正确设置为“<a href="https://login.live.com/oauth20_desktop.srf" rel="nofollow">https:/ /login.live.com/oauth20_desktop.srf”，响应类型设置为“token”。
  4. 在您的 Chrome 扩展程序的内容脚本中，观察 Microsoft 帐户登录流程中的弹出窗口。在正确的时间点，我们将捕获 auth_token，将其存储，然后关闭弹出窗口。

清单应该是这样的

{
  "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 作为内容脚本包含在内。每次在窗口或选项卡中加载文档时都会加载这些脚本。我们需要它来执行上面的#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();
        }
    }
});
于 2015-03-27T19:36:51.453 回答