locked
Office app permission pop up not closing RRS feed

  • Question

  • Hello,

    I'm developping an Office App (Project task pane app), and I have an issue which prevent my app to be approved by the seller dashboard.

    I use OAuth, so I open a permission popup window using JavaScript and use a listener to get the code returned by OAuth. Then I close the popup window and redirect my task pane to the app content page with the code parameter.

    authWindow = window.open(oAuthUrl);
    setTimeout(function () { readCode(); }, 1000);
    
    function readCode() {
     //if we can actually reach the authCode field on PostOAuth.aspx
            authCode = authWindow.document.getElementById("authCode").value;  //pull the authCode value
            if (authCode != "") {
                authWindow.close(); //close the pop up window
                document.location.href = "/App.aspx?code=" + authCode; //redirect task pane to the app code with the authCode token
            }
    
    }
    

    I tested it with various environnements, different users, different permissions levels, and it works well !

    But when I submit my app to the seller dashboard and they test it : the popup is not closing and they are not redirected to my app...

    I don't understand what's happening and don't know how to solve this issue... If you have any idea, please let me know !

    Wednesday, July 2, 2014 8:42 AM

All replies

  • Hi lprost,

    Accessing DOM in another window which belongs to another domain is not allowed (cross-domain). In this case, I suggest you to use postMessage method (introduced in HTML5) to communicate with login window.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>OAuth Login iFrame</title>
        <meta charset="utf-8" />
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta name="Author" content="Wayne Ye" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge;Chrome=1;OtherUA=4" >
    </head>
    <body>
        <h4>Login</h4>
    	<input type="text" placeholder="User Name" />
    	<input type="password" placeholder="Password" />
        <input type="button" value="Login" onclick="login();" />
        <div id="d">
        </div>
        <script>
    		function login() {
    			// receive token and pass back to parent window
    			var token = 'fake_token_kjfkdljsukjklfds888fdsfds';
                parent.postMessage(token, '*');
            }
        </script>
    </body>
    </html>
    

    Regards,

    Jeffrey


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Monday, July 7, 2014 8:39 AM
  • Hi Jeffrey,

    Thank you for your answer, but I'm not sure to understand :

    Isn't there a way to use the default Microsoft login page ? Because I tryed to use the Postmessage method in a iframe but it is not possible to open Microsoft account login page in a iframe for security reasons...

    That's why I choose to open a popup window with the OAuth url as described here : http://msdn.microsoft.com/en-us/library/office/jj687470(v=office.15).aspx

    So with this method, the Microsoft login page is opened in the popup. Once logged in, I can trust the App, and I'm finally redirected by OAuth to my /PostOAuth.aspx page (in the pop up) with the token parameter (as specified in the OAuth url).

    Then I get this parameter and put it in a hidden field (named "authCode ") in my /PostOAuth.aspx page.

    My JavaScript listener see that the "authCode " field value changed, get this value, close the popup window, and redirect my task pane App to the App.aspx page with the code parameter.

    I also tryed to use Postmessage in my postOAuth.aspx page (in the popup) but I wasn't able to receive the message in my task pane app, is it normal ?


    • Edited by lprost Tuesday, July 8, 2014 2:35 PM
    Tuesday, July 8, 2014 2:33 PM
  • Hi,

    >> I also tryed to use Postmessage in my postOAuth.aspx page (in the popup) but I wasn't able to receive the message in my task pane app, is it normal?

    Yes, as far as I know, this is an IE limitation that only support postMessage in iframe.

    Since the CALLBACK_REDIRECT_URL will be the same domain as your app, so we could use the window.opener as a workaround.

    home.js:

    (function () {
        "use strict"
    
        // The initialize function must be run each time a new page is loaded
        Office.initialize = function (reason) {
            $(document).ready(function () {
                app.initialize();
    
                $('#login').click(Login);
            });
    
            window.callbackFunc = function (token) {
                app.showNotification('Token:', token);
            };
        };
    
        function Login()
        {
            var win = window.open('https://login.live.com/oauth20_authorize.srf?client_id=CLIENT_ID&scope=SCOPES&response_type=token&redirect_uri=REDIRECT_URI')
        }
    })();

    callback.js:

    (function () {
        var hash = document.location.hash;
    
        hash = hash.slice(1, hash.length);
    
        var kvs = hash.split('&'),
            cookies = [];
    
        for (var i = 0; i < kvs.length; i++)
        {
            var kv = kvs[i].split('=');
    
            cookies.push({ name: decodeURIComponent(kv[0]), value: decodeURIComponent(kv[1]) });
        }
    
        window.opener.callbackFunc(cookies[0].value);
    
        window.close();
    })();

    Regards,

    Jeffrey


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    • Marked as answer by lprost Wednesday, July 9, 2014 12:40 PM
    • Unmarked as answer by lprost Tuesday, July 15, 2014 7:24 AM
    Wednesday, July 9, 2014 7:41 AM
  • Hi,

    I got the result of my app submission and it failed again...

    It seems they found out 2 errors about the permission pop up :

    - the first one : "Apps may not open pop-up windows unless they are triggered by explicit user interaction"

     

    - And in the second one, they told me that when they enable the popup and they authenticate, they are not redirected to the trust permission page but to the PWA home page. I really don't understand because I open the popup in javascript with the redirection URL as parameter...

    Any idea ?

    Regards,

    Tuesday, July 15, 2014 7:36 AM