在AngularJS應用中使用Google用戶登錄

Question

我閱讀本教程是為了將我的AngularJS應用程序與谷歌登錄連接起來。 我添加了google按鈕，如下所示（只需復制粘貼教程）：

在頭部我添加了元標記：

<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">

然后添加按鈕本身：

<div class="g-signin2" data-onsuccess="onSignIn"></div>

起初我只是從onSignIn復制了onSignIn方法（這只是一個通用處理程序，所以我沒有將它復制到問題中）並將其放在<script>...</script>標記中並且它有效。 我現在想把這個方法放在一個Angular控制器中。 所以我創建了一個控制器如下：

app.controller('GoogleCtrl', function() {
  function onSignIn(googleUser) {
    var profile = googleUser.getBasicProfile();
    console.log('ID: ' + profile.getId());
    console.log('Name: ' + profile.getName());
    console.log('Image URL: ' + profile.getImageUrl());
    console.log('Email: ' + profile.getEmail());
   }
}

並用div包裹按鈕：

<div ng-controller="GoogleCtrl">
    <div class="g-signin2" data-onsuccess="onSignIn"></div>
</div>

我的代碼現在沒有進入onSignIn方法，我正在試圖弄清楚我能做些什么。

Answer 1

如果您按照說明操作，最終會得到的是window. onSignIn window. onSignIn - 嘗試在瀏覽器JS控制台中運行它，現在具有從控制器創建該功能所需的相同行為。

app.controller('GoogleCtrl', function() {
  function onSignIn(googleUser) {
    var profile = googleUser.getBasicProfile();
    console.log('ID: ' + profile.getId());
    console.log('Name: ' + profile.getName());
    console.log('Image URL: ' + profile.getImageUrl());
    console.log('Email: ' + profile.getEmail());
   }
  window.onSignIn = onSignIn;
}

請記住，第三方執行的代碼（如onSignIn需要調用$scope.$digest ，因此angular可以onSignIn模型更改。

Answer 2

查看您的代碼，您似乎可能需要為您的函數添加偵聽器。 為了簡單起見，您可以輕松地將Android應用中的google登錄與此插件集成。 https://github.com/sahat/satellizer

Answer 3

您沒有指定AngularJS的版本，但它無關緊要。 我為AngularJS 1.x解決了這個問題，如下所示：

 allControllers.controller('authenticateController', ['$rootScope', $scope', function($rootScope, $scope) { // do whatever you're doing on this page... // initialize The GoogleAuth API explicitly // The load an init below can be placed in your app.js in you feel like you want to implement the whole lifecycle Google provides. gapi.load('auth2', function() { // Loads the auth2 component of gapi gapi.auth2.init({ // initialize the auth2 using your credentials client_id: $GOOGLE_API_CLIENT_ID }).then(function onInit() { // on complete of init gapi.signin2.render("g-signin2", { // render the HTML button on the screen providing the ID of the element (g-signin2) onsuccess: function(googleUser) { // This executes when a user successfully authorizes you to their data by clicking the button and selecting their account. var profile = googleUser.getBasicProfile(); console.log('ID: ' + profile.getId()); console.log('Name: ' + profile.getName()); console.log('Image URL: ' + profile.getImageUrl()); console.log('Email: ' + profile.getEmail()); // Do whatever you need to do to authenticate on your site. } }); }); }); }]); 

 // In your index.html <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script> <script type="text/javascript" src="https://apis.google.com/js/platform.js" async defer></script> // In your login fragment <div id="g-signin2" style="width: 200px; margin: 20px auto 20px auto;"></div>