locked
Are there any suggested login scenario in javascript api based app? RRS feed

  • Question

  • Hi,

     I am building an app basing on v5.0 javascript api, and encountering an problem with following flow:

    1. provide https://oauth.live.com/authorize page with redirect uri to user

    2. after user login in, page would be redirected to redirect uri defined in step 1, which is our page, let me call it "index.html" in the following

    3. call WL.init and WL.getSession for session message in current page.

    Now my problem comes:

     i need include "live.js" to call WL.init function. The WL.init function would call https://oauth.live.com/authorize page in iframe again which result in a redirection to index.html again. The "live.js" would be loaded second time and this cause a js loading error.

     

     My question is, it seems i cannot avoid from loading "live.js" second time. Do you have any suggestion for this scenario?

    Tuesday, March 6, 2012 10:01 AM

Answers

  • So first off, did you download http://DOMAIN/scripts/live.js from https://js.live.net/v5.0/wl.js? If you did, this is not supported. That is, it may work, but we do not test it. So I would suggest to switch over to using

    <script src="//js.live.net/v5.0/wl.js"></script>

    instead of

    <script src="http://DOMAIN/scripts/live.js"></script>

    Next, to make things clearer, let's call the page below index.html.

    <!DOCTYPE html>
                <html>
                    <head>
                        <title>skydrive test</title>
                        <script src="//js.live.net/v5.0/wl.js"></script>
                        <script>
    
                            WL.Event.subscribe("auth.login", onLoginComplete);
                            WL.init({
                                client_id: CLIENTID,
                                redirect_uri: REDIRECTURI,
                                response_type: "token"
                            });
                            var scopes = ["wl.signin"];
                            WL.ui({
                                name: "signin",
                                element: "signin",
                                scope: scopes
                            });
                            function onLoginComplete() {}
                      </script>
                    </head>
                    <body>
                    <div id="page">
                        <div id="signin"></div>
                     </div>
                      <div id="url"></div>
                    </body>
                </html>


    Now, did you define the variable REDIRECTURI in index.html? If you do not create and assign a REDIRECTURI, wl.init will try to redirect back to the same index.html, which would cause the wl.js (in your case live.js) to be loaded two times.

    It is NOT suggested to use the same page for the redirect_uri. Instead, we suggest creating something like callback.html (listed below). All callback.html has to do is load js.live.net/v5.0/wl.js.

    <html>
      <head>
        <script src="//js.live.net/v5.0/wl.js"></script>
      </head>
      <body></body>
    </html>

    So, a more complete and correct example of index.html should look like the following:

    <!DOCTYPE html>
    <html>
      <head>
        <title>skydrive test</title>
        <script src="//js.live.net/v5.0/wl.js"></script>
        <script>
          var CLIENTID = "YOUR_CLIENT_ID_HERE";
          var REDIRECTURI = "http://YOUR_DOMAIN_HERE/callback.html";
     
          WL.Event.subscribe("auth.login", onLoginComplete);
          WL.init({
            client_id: CLIENTID,
            redirect_uri: REDIRECTURI,
            response_type: "token"
          });
    
          var scopes = ["wl.signin"];
          WL.ui({
            name: "signin",
            element: "signin",
            scope: scopes
            });
    
          function onLoginComplete() {}
        </script>
      </head>
      <body>
        <div id="page">
          <div id="signin"></div>
        </div>
        <div id="url"></div>
      </body>
    </html>

    Please use this last index.html and the callback.html (listed above), and let me know if your issue still exists.

    Simon

    Friday, March 9, 2012 2:06 AM

All replies

  • I think the issue is that you are using the WL.init function incorrectly because you are using it in the redirect page. You should either do the authorization flow yourself and not use the javascript library OR you should just be using the javascript library to do the authorization flow.

    If you want to use the live.js, you should only need to call WL.init and/or WL.login from your initial page and our library will handle the authorization flow (i.e., going to https://oauth.live.com/authorize). An example can be found at http://msdn.microsoft.com/en-us/live/hh561315/.

    Otherwise, you'll have to code the authorization flow yourself. More details can be found at http://msdn.microsoft.com/en-us/library/hh243647.aspx.

    Let me know if this helps.

    Simon

    Tuesday, March 6, 2012 9:12 PM
  • Hi,

    When I used this case:

                <!DOCTYPE html>
                <html>
                    <head>
                        <title>skydrive test</title>
                        <script src="http://DOMAIN/scripts/live.js"></script>
                        <script>

                            WL.Event.subscribe("auth.login", onLoginComplete);
                            WL.init({
                                client_id: CLIENTID,
                                redirect_uri: REDIRECTURI,
                                response_type: "token"
                            });
                            var scopes = ["wl.signin"];
                            WL.ui({
                                name: "signin",
                                element: "signin",
                                scope: scopes
                            });
                            function onLoginComplete() {}
    </script>


                    </head>
                    <body>
                    <div id="page">
                        <div id="signin"></div>
    </div>
               <div id="url"></div>
                    </body>
                </html>

    When I clicked the login button,the console panel displayed "

    SCRIPT70: Permission denied 
    live.js, line 1609 character 13

    ".the information of network panel means "live.js" was loaded two times.

    The debugging environment is IE7.

    My problem looks like Ballian Chen's.Do you have any suggestion?

    Thursday, March 8, 2012 4:07 AM
  •  This is sample in live documentation, and it has same problem as my scenario.

     

    Thursday, March 8, 2012 6:51 AM
  • So first off, did you download http://DOMAIN/scripts/live.js from https://js.live.net/v5.0/wl.js? If you did, this is not supported. That is, it may work, but we do not test it. So I would suggest to switch over to using

    <script src="//js.live.net/v5.0/wl.js"></script>

    instead of

    <script src="http://DOMAIN/scripts/live.js"></script>

    Next, to make things clearer, let's call the page below index.html.

    <!DOCTYPE html>
                <html>
                    <head>
                        <title>skydrive test</title>
                        <script src="//js.live.net/v5.0/wl.js"></script>
                        <script>
    
                            WL.Event.subscribe("auth.login", onLoginComplete);
                            WL.init({
                                client_id: CLIENTID,
                                redirect_uri: REDIRECTURI,
                                response_type: "token"
                            });
                            var scopes = ["wl.signin"];
                            WL.ui({
                                name: "signin",
                                element: "signin",
                                scope: scopes
                            });
                            function onLoginComplete() {}
                      </script>
                    </head>
                    <body>
                    <div id="page">
                        <div id="signin"></div>
                     </div>
                      <div id="url"></div>
                    </body>
                </html>


    Now, did you define the variable REDIRECTURI in index.html? If you do not create and assign a REDIRECTURI, wl.init will try to redirect back to the same index.html, which would cause the wl.js (in your case live.js) to be loaded two times.

    It is NOT suggested to use the same page for the redirect_uri. Instead, we suggest creating something like callback.html (listed below). All callback.html has to do is load js.live.net/v5.0/wl.js.

    <html>
      <head>
        <script src="//js.live.net/v5.0/wl.js"></script>
      </head>
      <body></body>
    </html>

    So, a more complete and correct example of index.html should look like the following:

    <!DOCTYPE html>
    <html>
      <head>
        <title>skydrive test</title>
        <script src="//js.live.net/v5.0/wl.js"></script>
        <script>
          var CLIENTID = "YOUR_CLIENT_ID_HERE";
          var REDIRECTURI = "http://YOUR_DOMAIN_HERE/callback.html";
     
          WL.Event.subscribe("auth.login", onLoginComplete);
          WL.init({
            client_id: CLIENTID,
            redirect_uri: REDIRECTURI,
            response_type: "token"
          });
    
          var scopes = ["wl.signin"];
          WL.ui({
            name: "signin",
            element: "signin",
            scope: scopes
            });
    
          function onLoginComplete() {}
        </script>
      </head>
      <body>
        <div id="page">
          <div id="signin"></div>
        </div>
        <div id="url"></div>
      </body>
    </html>

    Please use this last index.html and the callback.html (listed above), and let me know if your issue still exists.

    Simon

    Friday, March 9, 2012 2:06 AM
  • Thanks for your reply,I‘ll check the problem by using callback.html
    Friday, March 9, 2012 9:32 AM