0

こんにちは、Chrome 拡張機能内で Outlook 資格情報を使用してログインできるようにするために、Microsoft OAuth を使用しようとしています。

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. リダイレクト URL を「<a href="https://login.live.com/oauth20_desktop.srf" rel="nofollow">https:/ /login.live.com/oauth20_desktop.srf」と「トークン」に設定された応答タイプ。
  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 を実行するために必要です。script.js ファイルで jquery を使用できるようにしたかったので、lib/jquery.min.js もコンテンツ スクリプトとして含めました。
  • 後で 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 に答える