Live connect on chrome extension

Question

Hello I am trying to use Microsoft OAuth in order to be able to login with Outlook credentials inside a chrome extension.

I am using the javascript Library (https://msdn.microsoft.com/en-us/library/hh550844.aspx) but i am not being able to do it. I am doing the following.

WL.init({
    client_id: "foo_bar",
    scope: "wl.signin",
    redirect_uri:"http://www.contoso.com/redirect",
    response_type: "token" });

and then

WL.login()

what is happening is that I am being redirected to http://www.contoso.com/redirect but when I close the popup I get the following message

[WL]WL.login: The popup is closed without receiving consent.

I think the problem is the redirect_uri but how can I do this with a chrome extension?

Answer 1

I finally made it. Just follow this guide

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

and you have the code here

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

High-level Steps

Here are the things you need to do at a high-level:

1. Create a Client ID and make sure the API settings are set correctly.
2. Set up your Chrome extension properly to use at least 1 content script. We will need it in #4 below.
3. Create the UI in your Chrome extension to sign in, making sure you are setting the redirect URL properly to “https://login.live.com/oauth20_desktop.srf” and response type set to “token”.
4. In your Chrome extension’s content script, watch for the popup window from the Microsoft Account sign in flow. At the right point in time, we will catch the auth_token, store it, and then close the popup window.

Manifest should be something like this

{
  "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'"
}

A few things to point out:

• We included js/script.js as a content script. These scripts load each time a document is loaded in a window or tab. We need this to perform #4 above. We also included lib/jquery.min.js as a content script because I wanted to be able to use jquery in my script.js file.
• We included “storage” in the permissions set because we will use Chrome storage later to store the auth_token.
• We included this line: "content_security_policy": "script-src 'self' https://js.live.net; object-src 'self'" so the LiveSDK JavaScript library can be successfully loaded from popup.html
• browser_action.default_popup is set to “./html/popup.html” – this specifies the HTML that will show up when user clicks the browser extension button. We will use this to show the login UI.

Login code

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

});

Content script

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