相关疑难解决方法(0)

我正在构建一个具有非常标准的RESTful Web服务的站点来处理持久性和复杂的业务逻辑.我正在构建以使用此服务的UI使用Angular 2和使用TypeScript编写的组件.

我希望依靠谷歌登录网站,而不是建立我自己的身份验证系统.想法是用户将访问该站点,通过其中提供的框架登录,然后发送生成的ID令牌,托管RESTful服务的服务器可以验证.

在Google登录文档中,有关于通过JavaScript创建登录按钮的说明,这是因为登录按钮是在Angular模板中动态呈现的.模板的相关部分:

<div class="login-wrapper">
  <p>You need to log in.</p>
  <div id="{{googleLoginButtonId}}"></div>
</div>
<div class="main-application">
  <p>Hello, {{userDisplayName}}!</p>
</div>

和Typescript中的Angular 2组件定义:

import {Component} from "angular2/core";

// Google's login API namespace
declare var gapi:any;

@Component({
    selector: "sous-app",
    templateUrl: "templates/sous-app-template.html"
})
export class SousAppComponent {
  googleLoginButtonId = "google-login-button";
  userAuthToken = null;
  userDisplayName = "empty";

  constructor() {
    console.log(this);
  }

  // Angular hook that allows for interaction with elements inserted by the
  // rendering of a view.
  ngAfterViewInit() { …

我花了一天的时间才使它成功,所以我认为我的经验可能对某人有用.也许其他一些人会找到改进.

所以我两天前开始使用angularJS.我希望它可以与Google Cloud Endpoints一起使用来创建后端界面.这给我带来了麻烦.

gapi的javascript客户端带有异步加载,因此角度初始化会因为gapi未定义而崩溃.

所以你需要在初始化gapi时引导角度:

1. 删除ng-app ="myApp"
2. 加 <script src="https://apis.google.com/js/client.js?onload=googleOnLoadCallback"></script>

3. 添加回调:

   function googleOnLoadCallback(){  
       var apisToLoad = 1; // must match number of calls to gapi.client.load()  
       var gCallback = function() {  
           if (--apisToLoad == 0) {  
               //Manual bootstraping of the application  
               var $injector = angular.bootstrap(document, ['myApp']);  
               console.log('Angular bootstrap complete ' + gapi);  
           };  
       };  
       gapi.client.load('helloWorld', 'v1', gCallback, '//' + window.location.host + '/_ah/api');  
   }
   

   Run Code Online (Sandbox Code Playgroud)

感觉很好,但电话怎么样？

所以这是控制器:

angular.module('myApp.controllers', []).  
    .controller('MyCtrl', ['$scope' ,'helloWorldService',  
        function($scope,greetingsService) {
          helloWorldService.loadData($scope);  
    }]);

这是服务:

angular.module('myApp.services', [])
service('helloWorldService', [function() { …

我正在尝试实施Google登录并检索用户的个人资料信息.错误是:未捕获的ReferenceError:未定义gapi.这是为什么？

<!doctype html>
<html>
<head>      
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
    <script type="text/javascript">
    $(function(){
        gapi.auth2.init({
            client_id: 'filler_text_for_client_id.apps.googleusercontent.com'
        });
    });
</head>
<body>
</body>
</html>