Đăng nhập bằng người dùng google trong ứng dụng AngularJS

Question

Tôi đã đọc this tutorial để kết nối ứng dụng AngularJS của tôi với đăng nhập bằng google. Tôi đã thêm nút google như sau (chỉ cần sao chép-dán hướng dẫn):

Trong đầu tôi đã thêm thẻ meta:

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

Và sau đó thêm vào các nút riêng của mình:

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

Lúc đầu, tôi chỉ cần sao chép các phương pháp onSignIn (đó chỉ là một xử lý chung chung vì vậy tôi không sao chép nó vào câu hỏi) từ hướng dẫn và đặt nó trong một thẻ <script>...</script> và nó làm việc. Bây giờ tôi muốn đặt phương pháp này trong một bộ điều khiển góc. Vì vậy, tôi đã tạo ra một bộ điều khiển như sau:

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()); 
    } 
} 

Và bọc nút với một div:

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

Mã của tôi không đến được với các phương pháp onSignIn nay và tôi đang cố gắng để tìm ra những gì tôi có thể làm không.

Answer 1

Nếu bạn làm theo các hướng dẫn những gì bạn sẽ kết thúc với là window. onSignIn - cố gắng chạy nó trong trình duyệt JS console của bạn, bây giờ có hành vi tương tự, bạn sẽ cần đến thùng có chức năng từ điều khiển của bạn

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; 
} 

nhớ rằng mã thực hiện bởi bên thứ 3 như onSignIn sẽ cần phải gọi $scope.$digest nên góc cạnh nhận thức được mô hình thay đổi

Answer 2

Nhìn vào mã của bạn, có vẻ như bạn có thể phải thêm người nghe cho chức năng của mình. Để đơn giản hóa mọi thứ, bạn có thể dễ dàng tích hợp đăng nhập google trong ứng dụng của mình bằng plugin này. https://github.com/sahat/satellizer