Live Connect на расширение Chrome

Question

Здравствуйте, я пытаюсь использовать Microsoft OAuth, чтобы иметь возможность войти в систему с учетными данными Outlook внутри расширения Chrome.

Я использую библиотеку 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?

Answer 1

Я наконец сделал это. Просто следуйте этому руководству

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. Создайте идентификатор клиента и убедитесь, что настройки API установлены правильно.
2. Правильно настройте расширение Chrome, чтобы использовать как минимум 1 скрипт содержимого. Нам понадобится это в #4 ниже.
3. Создайте пользовательский интерфейс в расширении Chrome для входа, убедившись, что для URL-адреса перенаправления правильно задано значение " 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 в качестве скрипта контента, потому что я хотел иметь возможность использовать jquery в моем файле script.js.
• Мы включили "хранилище" в набор разрешений, потому что позже мы будем использовать хранилище Chrome для хранения auth_token.
• Мы включили эту строку: "content_security_policy": "script-src 'self' https://js.live.net/; object-src 'self'", чтобы библиотека JavaScript LiveSDK могла быть успешно загружена из popup.html.
• Для browser_action.default_popup задано значение "./html/popup.html" - здесь указывается HTML-код, который будет отображаться, когда пользователь нажимает кнопку расширения браузера. Мы будем использовать это, чтобы показать интерфейс входа в систему.

Код входа

$('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();
        }
    }
});