Question

所以我尝试使用Durandal构建移动应用。但是，我在使用Google plus JS API集成时遇到了麻烦。我认为这是问题：gapi的javascript客户端带有异步加载，因此durandal初始化会因为gapi未定义而崩溃，因此，css组件也无法正常呈现。我已经尝试将以下脚本标记放在我的login.js视图的login.html文件中，甚至在main.js的require.js部分，但它仍然无法正常工作。用于链接到Google Api的脚本：

<script src="https://apis.google.com/js/client:platform.js" async defer>    </script>
<script src="https://apis.google.com/js/platform.js?onload=onLoadCallback" async defer></script>

//onSignInCallBack function to call in login.js after user signs in vis Google Plus
onSignInCallback: function(authResult) {
                    gapi.client.load('plus','v1').then(function() {

                        if (authResult['access_token']) {
                            $('#authOps').show('slow');
                            $('#gConnect').hide();
                            var user_access_token = authResult['access_token'];
                            var id_token = authResult['id_token'];
                        } else if (authResult['error']) {
                            // There was an error, which means the user is not signed in.
                            console.log('There was an error: ' + authResult['error']);
                            $('#authOps').hide('slow');
                            $('#gConnect').show();
                        }
                        console.log('authResult', authResult);
                    });
                },

这是我的main.js文件：

    requirejs.config({
    paths: {
        'text': '../Scripts/text',
        'durandal': '../Scripts/durandal',
        'plugins': '../Scripts/durandal/plugins',
        'transitions': '../Scripts/durandal/transitions',
        'knockout' : '../Scripts/knockout-3.1.0',
        'bootstrap': '../Scripts/bootstrap',
        'jquery':'../Scripts/jquery-1.9.1',
        'async':'../Scripts/async'
    }
});


define(['durandal/system',
        'durandal/app',
        'durandal/viewLocator',
        'durandal/binder',
        'utils/routines',
        'async!https://apis.google.com/js/platform.js?onload=onLoadCallback',
        'async!https://apis.google.com/js/client:platform.js'

], function (system, app, viewLocator, binder,routines,callback,gapi) {

    //>>excludeStart("build", true);
    system.debug(true);
    //>>excludeEnd("build");

    app.configurePlugins({
        router: true,
        dialog: true,
        widget: true
    });

    app.start().then(function() {
        //Replace 'viewmodels' in the moduleId with 'views' to locate the view.
        //Look for partial views in a 'views' folder in the root.
        viewLocator.useConvention();

        //Show the app by setting the root view model for our application with a transition.
        app.setRoot('shell/shell', 'entrance');

        // override bad route behavior to write to 
        // console log and show error toast
        /*
        router.handleInvalidRoute = function (route, params) {
            logger.logError('No route found', route, 'main', true);
        };
        */
    });
});

这是我的index.html：

   <!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="apple-touch-startup-image" href="/Content/images/ios-startup-image-    landscape.png" media="(orientation:landscape)" />
    <link rel="apple-touch-startup-image" href="/Content/images/ios-startup-image-portrait.png" media="(orientation:portrait)" />
    <link rel="apple-touch-icon" href="~/Content/images/icon.png" />
    <link href="/Content/ie10mobile.css" rel="stylesheet" />
    <link href="/Content/bootstrap.min.css" rel="stylesheet" />
    <link href="/Content/font-awesome.min.css" rel="stylesheet" />
    <link href="/Content/durandal.css" rel="stylesheet" />
    <link href="/Content/starterkit.css" rel="stylesheet" />   

    <script type="text/javascript">

        if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
            var msViewportStyle = document.createElement("style");
            var mq = "@@-ms-viewport{width:auto!important}";
            msViewportStyle.appendChild(document.createTextNode(mq));
            document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
        }
    </script>
</head>
<body>
    <div id="applicationHost">
        <div class="text-center">
            <br/><br/><br/><br/>
            <i class="fa fa-spinner fa-spin"></i>
            <div class="message">
                Loading....
            </div>
        </div>
    </div>
    <script type="text/javascript" src="Scripts/require.js" data-main="/App/main"></script>

</body>
</html>

有没有人试图将Google加上登录与Durandal集成并遇到同样的问题？非常感谢帮助和建议!!

Answer 1

对于Durandal下的远程异步加载（或者换句话说，在RequireJS下），您需要async，goog和propertyParser plugins。请参阅该链接的自述文件。

例如，以下是我们为Google地图所做的工作：

RequireJS的paths属性中的

（通常位于Durandal的main.js文件中），顺序如下：

'async': '../Scripts/plugins/async',
'propertyParser': '../Scripts/plugins/propertyParser',
'goog': '../Scripts/plugins/goog'

定义，也在Durandal的main.js文件中，就在启动应用程序的主函数之前：

define('jquery', function() { return jQuery; });
define('knockout', ko);
define('gmaps', ['async!http://maps.google.com/maps/api/js?sensor=false'],
    function () {            
        return window.google.maps;
    });

define(['durandal/system',
        'durandal/app',
        'durandal/viewLocator',
        'bindings',
        'extenders',
        'validations'],
    function (system, app, viewLocator, bindings, extenders, validations) {

请注意远程API URL之前的async!。另请注意，我们实际上并未为应用程序的主入口点定义gmaps。我们在主要入口点之前设置了一个全局定义。

如果有帮助，请告诉我。

Answer 2

所以我找到了将google plus登录集成到我的Durandal应用程序中的解决方案。您基本上需要包含asyncJS（不必包含googJS / propertyParserJS，goog仅适用于main.js的require部分中非常具体的google API - （https://developers.google.com/loader/?csw=1#AvailableAPIs）并定义google客户端api in main.js.但是，您不能使用以下URL来调用main.js中的定义中的api。

<script src="https://apis.google.com/js/client:platform.js" async defer>    </script>
<script src="https://apis.google.com/js/platform.js?onload=onLoadCallback" async defer></script>

在Google Plus登录Javascript API文档中，系统会要求您在html文件中包含上述脚本标记。但是，这不适用于requireJS和Async。相反，您需要调用Google Client API并在main.js中使用以下网址：

        define('gapi',['async!https://apis.google.com/js/client.js!onload'], function() {
        console.log('gapi loaded: ' + gapi);
        return window.gapi;
    });

然后，您可以通过将其包含在viewmodel的define部分中，在特定的viewmodel中调用gapi。要实施google plus登录，您可以在定义并传递Google Plus中的说明所指定的参数后调用以下函数登录Javascript API（https://developers.google.com/+/web/signin/javascript-flow）：

    define(['gapi'], function(gapi) {
    return {
        additionalParams : {
            'callback': "specify a callback function here",
            'clientid' :"your client_ID",
            'scope' : "scope for permissions",
            'cookiepolicy' : "single_host_origin"
            },


            googlelogin: function() {
                gapi.auth.signIn(this.additionalParams);
            }
    }
    });

然后我将googlelogin方法绑定到我的google登录按钮 data-bind="click:googlelogin"。这将允许您在单击按钮后使用Google Plus登录。但是，对于我的回调，这种方法似乎有问题。所以这是第二个适用于我的方法，当你点击登录按钮时，使用以下方法授权用户并执行回调（你必须定义它）：

gapi.auth.authorize(parameters,signinCallBack);

参数在此处指定：（https://developers.google.com/api-client-library/javascript/reference/referencedocs#gapiauthauthorize）。希望这有助于您将您的Durandal / RequireJS应用程序与Google Plus和Ouath2集成，以实现客户端JS的实施！谢谢@EricTaylor指导我！

Durandal JS和Google Plus登录Javascript API

2 个答案: