config_service: Add authentication to the UI.

appengine/config_service/ui/common/auth-signin.html

+<!--
+  Copyright 2017 The LUCI Authors. All rights reserved.
+  Use of this source code is governed under the Apache License, Version 2.0
+  that can be found in the LICENSE file.
+
+  The `auth-signin` element displays sign-in/sign-out button, user email and
+  avatar.
+  It has a google-signin/google-signin-aware element under the hood that handles
+  the actual OAuth logic.
+
+  Usage:
+
+    <auth-signin></auth-signin>
+
+  Properties:
+    auth_headers: Object, Use this as an argument to sk.request to set oauth2 headers.
+    auth_response: Object, The raw gapi.auth2.AuthResponse object.
+    client_id: String, The client id to authenticate
+    profile: Object, Read Only, The email address and imageurl of the logged in user.
+    signed_in: Boolean, Read Only, if the user is logged in.
+
+  Methods:
+    signIn(): Signs the user in by popping up the authorization dialog.
+    signOut(): Signs the user out.
+
+  Events:
+    auth-signin: Fired when the oauth handshake has completed and a user has logged in.
+-->
+
+<link rel="import" href="../../common/third_party/google-signin/google-signin-aware.html">
+<link rel="import" href="../../bower_components/polymer/polymer.html">
+
+
+<dom-module id="auth-signin">
+  <template>
+    <style>
+      #avatar {
+        border-radius: 5px;
+      }
+
+      a {
+        color: white;
+      }
+
+      .center {
+        vertical-align: middle;
+      }
+
+      .sign-in-font {
+        color: black;
+      }
+    </style>
+
+    <google-signin-aware id="aware"
+      client-id="[[client_id]]"
+      scopes="email"
+      on-google-signin-aware-success="_onSignin"
+      on-google-signin-aware-signed-out="_onSignout">
+    </google-signin-aware>
+
+    <template is="dom-if" if="[[!signed_in]]">
+      <div id="signinContainer">
+        <!-- TODO(cwpayton): Before official deployment, change href to "/#/" -->
+        <a class="sign-in-font" on-tap="signIn" href="/newui#/">Sign in</a>
+      </div>
+    </template>
+
+    <template is="dom-if" if="[[signed_in]]">
+      <img class="center" id="avatar" src="[[profile.imageUrl]]" width="30" height="30">
+      <span class="center">[[profile.email]]</span>
+      <span class="center">|</span>
+      <!-- TODO(cwpayton): Before official deployment, change href to "/#/" -->
+      <a class="center sign-in-font" on-tap="signOut" href="/newui#/">Sign out</a>
+    </template>
+  </template>
+  <script>
+    'use strict';
+    Polymer({
+      is: 'auth-signin',
+      properties: {
+        auth_headers: {
+          type: Object,
+          value: () => {},
+          notify: true
+        },
+
+        auth_response: {
+          type: Object,
+          notify: true,
+          observer: '_makeHeader'
+        },
+
+        client_id: {
+          type: String
+        },
+
+        profile: {
+          type: Object,
+          notify: true
+        },
+
+        signed_in: {
+          type: Boolean,
+          value: false,
+          notify: true
+        }
+      },
+
+      ready: function() {
+        if (!this.client_id) {
+          return;
+        }
+        // If a page is opened in a new tab, we are (likely) already logged in
+        // so we wait for the gapi and auth2 to be loaded and re-extract our
+        // access_token.
+        window.setTimeout(function(){
+          // The 'gapi' checks are the same that signin-aware does. We do them
+          // to avoid extraneous errors in the console.
+          if (!this.signed_in && !this._signingIn){
+            if (('gapi' in window) && ('auth2' in window.gapi)) {
+              var user = gapi.auth2.getAuthInstance().currentUser.get();
+              if (user && user.getAuthResponse().access_token) {
+                // User is already logged in, can use the access_token.
+                this._onSignin();
+              } else {
+                window.setTimeout(this.ready.bind(this), 50);
+              }
+            } else {
+              window.setTimeout(this.ready.bind(this), 50);
+            }
+          }
+        }.bind(this), 50);
+      },
+
+      _onSignin: function() {
+        this._signingIn = true;
+        var user = gapi.auth2.getAuthInstance().currentUser.get();
+        var profile = { email: user.getBasicProfile().getEmail(),
+                        imageUrl: user.getBasicProfile().getImageUrl() };
+        this.set('profile', {});
+        this.set('profile', profile);
+        this.set('auth_response', user.getAuthResponse());
+        this.signed_in = true;
+        // The credential will expire after a while (usually an hour)
+        // so we need to reload it.
+        this.async(function(){
+          console.log("reloading credentials");
+          user.reloadAuthResponse();
+          this._onSignin();
+        }, this.auth_response.expires_in * 1000);  // convert seconds to ms
+        this._signingIn = false;
+      },
+
+      _onSignout: function(e) {
+        this.signed_in = false;
+        this.set('profile', null);
+      },
+
+      _makeHeader: function() {
+        if (!this.auth_response) {
+          this.set('auth_headers', {});
+        }
+        this.set('auth_headers', 
+            {
+              "authorization": this.auth_response.token_type + " " +
+                               this.auth_response.access_token
+            });
+      },
+
+      signIn: function() {
+        this.$.aware.signIn();
+      },
+
+      signOut: function() {
+        this.$.aware.signOut();
+        window.location.reload();
+      }
+    });
+  </script>
+</dom-module>