AngularJS: Google+ Sign In Integration

1<span id="googleSignIn">
2    <span id="signInButton">
3    </span>
4</span>

1<script>// <![CDATA[
2    (function() {
3        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
4        po.src = 'https://apis.google.com/js/client:plusone.js';
5        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
6    })();
7// ]]></script>

1<!-- Define controller for body. In this example we use only one controller for the scope of entire body. --><!-- Place a span that is going to act as a container for button rendering through script code. -->
2        <span id="googleSignIn">
3            <span id="signInButton">
4            </span>
5        </span>
6 
7        <!-- Don't forget to place the script that does the asynchronous loading of Google+ JavaScript API.
8             Because it is loaded asynchronously, it might take some time to load. 
9             Place some loading notification, so user won't get confused. 
10             You can use ng-show and ng-hide to show or hide your notification and accomplish best user experience. --><script>// <![CDATA[
11            (function() {
12                var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
13                po.src = 'https://apis.google.com/js/client:plusone.js';
14                var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
15            })();
16 
17// ]]></script><!-- Second script needed for accessing Google API (gapi.*) . It's usage will be described in controller. --><script src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script>

1function SignInController($scope) {
2    // This flag we use to show or hide the button in our HTML.
3    $scope.signedIn = false;
4 
5    // Here we do the authentication processing and error handling.
6    // Note that authResult is a JSON object.
7    $scope.processAuth = function(authResult) {
8        // Do a check if authentication has been successful.
9        if(authResult['access_token']) {
10            // Successful sign in.
11            $scope.signedIn = true;
12 
13            //     ...
14            // Do some work [1].
15            //     ...
16        } else if(authResult['error']) {
17            // Error while signing in.
18            $scope.signedIn = false;
19 
20            // Report error.
21        }
22    };
23 
24    // When callback is received, we need to process authentication.
25    $scope.signInCallback = function(authResult) {
26        $scope.$apply(function() {
27            $scope.processAuth(authResult);
28        });
29    };
30 
31    // Render the sign in button.
32    $scope.renderSignInButton = function() {
33        gapi.signin.render('signInButton',
34            {
35                'callback': $scope.signInCallback, // Function handling the callback.
36                'clientid': '[CLIENT_ID from Google developer console]', // CLIENT_ID from developer console which has been explained earlier.
37                'requestvisibleactions': 'http://schemas.google.com/AddActivity', // Visible actions, scope and cookie policy wont be described now,
38                                                                                  // as their explanation is available in Google+ API Documentation.
39                'scope': 'https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email',
40                'cookiepolicy': 'single_host_origin'
41            }
42        );
43    }
44 
45    // Start function in this example only renders the sign in button.
46    $scope.start = function() {
47        $scope.renderSignInButton();
48    };
49 
50    // Call start function on load.
51    $scope.start();
52}

1GET https://www.googleapis.com/plus/v1/people/{userId}

1// Process user info.
2// userInfo is a JSON object.
3$scope.processUserInfo = function(userInfo) {
4    // You can check user info for domain.
5    if(userInfo['domain'] == 'mycompanydomain.com') {
6        // Hello colleague!
7    }
8 
9    // Or use his email address to send e-mails to his primary e-mail address.
10    sendEMail(userInfo['emails'][0]['value']);
11}
12 
13// When callback is received, process user info.
14$scope.userInfoCallback = function(userInfo) {
15    $scope.$apply(function() {
16        $scope.processUserInfo(userInfo);
17    });
18};
19 
20// Request user info.
21$scope.getUserInfo = function() {
22    gapi.client.request(
23        {
24            'path':'/plus/v1/people/me',
25            'method':'GET',
26            'callback': $scope.userInfoCallback
27        }
28    );
29};

1gapi.auth.signOut();