Durandal JS 和 Google 加号登录 Javascript API
Durandal JS and Google Plus Sign in Javascript API
所以我正在尝试使用 Durandal 构建移动应用程序。但是，我在使用 Google 加上 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 plus 登录到 Durandal 并遇到同样的问题？非常感谢您的帮助和建议！！
对于 Durandal 下的远程异步加载（或者换句话说，在 RequireJS 下），您将需要 async、goog 和 属性Parser plugins。请参阅 link.
处的自述文件
例如，这是我们为 Google 地图所做的：
在RequireJS的路径属性中（一般在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!。另请注意，我们实际上并未为应用程序的主要入口点定义 gmap。我们设置了一个全局定义 before 主入口点。
如果有帮助，请告诉我。
所以我找到了将 google 加号登录集成到我的 Durandal 应用程序中的解决方案。您基本上需要在 main.js 并在 main.js 中定义 google 客户端 api。但是，您不能使用以下 url 来调用您定义中的 api main.js.
<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 客户端 API 并在 main.js 中使用以下 url:
define('gapi',['async!https://apis.google.com/js/client.js!onload'], function() {
console.log('gapi loaded: ' + gapi);
return window.gapi;
});
然后，您可以在特定视图模型中调用 gapi，方法是将其包含在视图模型的定义部分中。要实现google加号登录，可以按照Google加号登录JavascriptAPI定义并传入参数后调用以下函数(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);
}
}
});
然后我将 google 登录方法绑定到我的 google 登录按钮使用
data-bind="click:googlelogin"。这将使您可以在单击按钮后使用 google 加号登录。但是，这个方法在我的回调中似乎有问题。所以这是对我有用的第二种选择，使用以下方法授权用户并在单击登录按钮时执行回调（你必须定义它）：
gapi.auth.authorize(parameters,signinCallBack);
此处指定参数：(https://developers.google.com/api-client-library/javascript/reference/referencedocs#gapiauthauthorize)。希望这可以帮助您将 Durandal/RequireJS 应用程序与 Google Plus 和 Ouath2 集成以实现客户端 JS 实现！谢谢@EricTaylor 指导我！
所以我正在尝试使用 Durandal 构建移动应用程序。但是，我在使用 Google 加上 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 plus 登录到 Durandal 并遇到同样的问题？非常感谢您的帮助和建议！！
对于 Durandal 下的远程异步加载（或者换句话说，在 RequireJS 下），您将需要 async、goog 和 属性Parser plugins。请参阅 link.
处的自述文件例如，这是我们为 Google 地图所做的：
在RequireJS的路径属性中（一般在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!。另请注意，我们实际上并未为应用程序的主要入口点定义 gmap。我们设置了一个全局定义 before 主入口点。
如果有帮助，请告诉我。
所以我找到了将 google 加号登录集成到我的 Durandal 应用程序中的解决方案。您基本上需要在 main.js 并在 main.js 中定义 google 客户端 api。但是，您不能使用以下 url 来调用您定义中的 api main.js.
<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 客户端 API 并在 main.js 中使用以下 url:
define('gapi',['async!https://apis.google.com/js/client.js!onload'], function() {
console.log('gapi loaded: ' + gapi);
return window.gapi;
});
然后，您可以在特定视图模型中调用 gapi，方法是将其包含在视图模型的定义部分中。要实现google加号登录，可以按照Google加号登录JavascriptAPI定义并传入参数后调用以下函数(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);
}
}
});
然后我将 google 登录方法绑定到我的 google 登录按钮使用
data-bind="click:googlelogin"。这将使您可以在单击按钮后使用 google 加号登录。但是，这个方法在我的回调中似乎有问题。所以这是对我有用的第二种选择，使用以下方法授权用户并在单击登录按钮时执行回调（你必须定义它）：
gapi.auth.authorize(parameters,signinCallBack);
此处指定参数：(https://developers.google.com/api-client-library/javascript/reference/referencedocs#gapiauthauthorize)。希望这可以帮助您将 Durandal/RequireJS 应用程序与 Google Plus 和 Ouath2 集成以实现客户端 JS 实现！谢谢@EricTaylor 指导我！