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?

I don't know what I can tell you more. As I told in the question I receive the message [WL]WL.login: The popup is closed without receiving consent. I suspect is from the redirect_uri but I am not sure. — Lopes, Mar 27 '15 at 15:50
But if you look at the oauth extension sample (the library not identity) you will see the tricks it does to read back the token, thou they might not work in your particular case. Has worked well for me when doing rhe oauths i needed (google and trello so far) — Zig Mandel, Mar 27 '15 at 16:02
When you talk about the oauth extension sample are you talking about this https://developer.chrome.com/extensions/tut_oauth? — Lopes, Mar 27 '15 at 18:57

Lopes · Accepted Answer · 2015-03-28T16:52:47.947

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:

Create a Client ID and make sure the API settings are set correctly.
Set up your Chrome extension properly to use at least 1 content script. We will need it in #4 below.
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”.
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();
        }
    }
});

Link-only answers are not welcome on Stack Overflow. Include relevant parts of the solution here. — Xan, Mar 27 '15 at 23:08

Live connect on chrome extension

1 Answers1