merge

ampproject · Aug 28, 2020 · 50dfd01 · 50dfd01
1 parent 084be74
commit 50dfd01
Show file tree

Hide file tree

Showing 12 changed files with 3,747 additions and 1 deletion.
diff --git a/amp.iml b/amp.iml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+ <component name="NewModuleRootManager" inherit-compiler-output="true">
+ <exclude-output />
+ <content url="file://$MODULE_DIR$" />
+ <orderEntry type="sourceFolder" forTests="false" />
+ </component>
+</module>
diff --git a/build-system/compile/bundles.config.js b/build-system/compile/bundles.config.js
@@ -784,6 +784,13 @@ exports.extensionBundles = [
  latestVersion: '0.1',
  type: TYPES.MEDIA,
  },
+ {
+ name: 'amp-onetap-google',
+ version: '0.1',
+ latestVersion: '0.1',
+ options: {hasCss: true},
+ type: TYPES.MISC,
+ },
  {
  name: 'amp-ooyala-player',
  version: '0.1',

diff --git a/build-system/global-configs/prod-config.json b/build-system/global-configs/prod-config.json
@@ -2,7 +2,8 @@
  "allow-doc-opt-in": [
  "amp-next-page",
  "analytics-chunks",
- "analytics-chunks-inabox"
+ "analytics-chunks-inabox",
+ "amp-onetap-google"
  ],
  "allow-url-opt-in": ["pump-early-frame"],
  "canary": 0,

diff --git a/examples/amp-onetap-google/iframe.html b/examples/amp-onetap-google/iframe.html
@@ -0,0 +1,204 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <script src="https://accounts.google.com/gsi/client"></script>
+ <style>
+ #credential_picker_container {
+ position: fixed !important;
+ right: 0 !important;
+ top: 0 !important;
+ }
+ </style>
+ <script>
+ /** @const {string} */
+ const ATTRIBUTE_DONE_CALLBACK = 'data-done-callback';
+ const ALLOWED_ORIGINS = [
+ 'http://localhost:8000',
+ 'https://gis-pay.appspot.com'
+ ];
+ let messageListenerRegistered = false;
+ let pendingNonce = null;
+ let domainVerifiedCallback = null;
+ let responseReturned = false;
+
+ function generateRandom() {
+ return btoa((Math.floor(Math.random() * 100000) + 1) + '-nonce');
+ }
+
+ function notifyParent(message) {
+ window.parent && window.parent.postMessage(message, '*');
+ }
+
+ function registerDomainVerifier(done) {
+ if (!window.parent) {
+ return;
+ }
+ domainVerifiedCallback = done;
+ if (!messageListenerRegistered) {
+ window.addEventListener('message', (event) => {
+
+ if (event.source != window.parent || !event.data) {
+ return;
+ }
+ if (!pendingNonce || !domainVerifiedCallback) {
+ return;
+ }
+ if (event.data['sentinel'] != 'onetap_google' || event.data['command'] != 'parent_frame_ready') {
+ return;
+ }
+ if (!event.data['nonce'] || event.data['nonce'] != pendingNonce) {
+ return;
+ }
+ pendingNonce = null;
+ if (ALLOWED_ORIGINS.includes(event.origin)) {
+ let callback = /** typeof {function} */ (domainVerifiedCallback);
+ domainVerifiedCallback = null;
+ callback();
+ }
+ });
+ }
+ }
+
+ function requestDomainVerification() {
+ pendingNonce = generateRandom();
+ notifyParent({
+ sentinel: 'onetap_google',
+ command: 'intermediate_iframe_ready',
+ nonce: pendingNonce
+ });
+ }
+
+ function notifyParentResize(height) {
+ notifyParent({
+ sentinel: 'onetap_google',
+ command: 'intermediate_iframe_resize',
+ height: height
+ });
+ }
+
+ function notifyParentClose() {
+ notifyParent({
+ sentinel: 'onetap_google',
+ command: 'intermediate_iframe_close'
+ });
+ }
+
+ function notifyParentDone() {
+ notifyParent({
+ sentinel: 'onetap_google',
+ command: 'intermediate_iframe_done'
+ });
+ }
+
+ function notifyParentUiMode(mode) {
+ notifyParent({
+ sentinel: 'onetap_google',
+ command: 'set_ui_mode',
+ mode: mode
+ });
+ }
+
+ function notifyParentTapOutsideMode(cancel) {
+ notifyParent({
+ sentinel: 'onetap_google',
+ command: 'set_tap_outside_mode',
+ cancel: !!cancel
+ });
+ }
+
+ function getHeight(detail) {
+ for (let p in detail) {
+ if (p == 'oldHeight') continue;
+ let height = detail[p];
+ if (typeof height === 'number' && !isNaN(height) && height > 0) {
+ return height;
+ }
+ }
+ return -1;
+ }
+
+
+ function formPost(url, data) {
+ const form = /** @type {!HTMLFormElement} */ (document.createElement('form'));
+ document.body.appendChild(form);
+ form.method = 'post';
+ form.action = url;
+ if (data) {
+ Object.keys(data).map(function (name) {
+ let input = /** @type {!HTMLInputElement} */ (
+ document.createElement('input'));
+ input.type = 'hidden';
+ input.name = name;
+ input.value = data[name];
+ form.appendChild(input);
+ });
+ }
+ form.submit();
+ }
+
+ function notifyParentHideOrClose() {
+ if (responseReturned) {
+ notifyParentResize(0);
+ } else {
+ notifyParentClose();
+ }
+ }
+
+ function resizeHandler(activity) {
+ if (activity.type == 'ui_change') {
+ let uiActivityType = /** @type {string} */ (activity['uiActivityType']);
+ if (!uiActivityType) {
+ return;
+ }
+ switch (uiActivityType) {
+ case 'prompt_closed':
+ notifyParentHideOrClose();
+ break;
+ case 'prompt_resized':
+ let height = activity['detail'] && getHeight(activity['detail']);
+ if (typeof height === 'number' && !isNaN(height) && height > 0) {
+ // resize
+ notifyParentResize(height);
+ }
+ break;
+ default:
+ // Do nothing.
+ }
+ }
+ }
+
+ function loginDemo(response) {
+ if (!response || !response['credential']) return;
+ responseReturned = true;
+ formPost('https://gis-pay.appspot.com/login', response);
+ }
+
+ let displayOneTap = () => {
+ let isMobile = /iPhone|Android/i.test(navigator.userAgent);
+ let mode = isMobile ? 'bottom_sheet' : 'card';
+ notifyParentUiMode(mode);
+
+ let cancelOnTapOutside = true;
+ notifyParentTapOutsideMode(cancelOnTapOutside);
+ // notifyParentTapOutsideMode(false) after User interaction.
+
+ google.accounts.id.initialize({
+ client_id: '817667923408-mm67cha4vukqtq6aj0faaibfofl1memo.apps.googleusercontent.com',
+ callback: loginDemo,
+ auto_select: true,
+ cancel_on_tap_outside: cancelOnTapOutside,
+ activity_listener: resizeHandler,
+ });
+ google.accounts.id.prompt();
+ };
+
+ window.onload = () => {
+ registerDomainVerifier(displayOneTap);
+ requestDomainVerification();
+ };
+ </script>
+</head>
+<body style="margin: 0; border: 0;">
+</body>
+</html>
diff --git a/examples/onetap.amp.html b/examples/onetap.amp.html
@@ -0,0 +1,60 @@
+<!doctype html>
+<html ⚡>
+<head>
+ <meta charset="utf-8">
+ <title>Google One Tap Example</title>
+ <link rel="canonical" href="amps.html" >
+ <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+ <meta name="amp-experiments-opt-in" content="amp-onetap-google">
+ <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
+ <script async custom-element="amp-onetap-google" src="https://cdn.ampproject.org/v0/amp-onetap-google-0.1.js"></script>
+ <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
+ <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
+ <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
+ <script async custom-element="amp-access" src="https://cdn.ampproject.org/v0/amp-access-0.1.js"></script>
+ <script async src="https://cdn.ampproject.org/v0.js"></script>
+ <style type="text/css">
+ body {
+ font-family: sans-serif;
+ min-height: 100vh;
+ padding: 0;
+ margin: 0;
+ }
+ .main-lightbox {
+ background: #000;
+ color: #ccc;
+ }
+ .intermediate-iframe-card-mode {
+ border: none;
+ bottom: auto;
+ left: auto;
+ margin: 0;
+ padding: 0;
+ position: fixed;
+ right: 0;
+ top: 0;
+ width: 391px;
+ }
+ </style>
+</head>
+<body>
+
+<h2>Google One Tap</h2>
+
+<div on="tap:main-lightbox"
+ role="button"
+ class="button button-secondary play"
+ tabindex="0">
+ <amp-img src="https://lh3.googleusercontent.com/5rcQ32ml8E5ONp9f9-Rf78IofLb9QjS5_0mqsY1zEFc=w400-h300-no-n"
+ width="400"
+ height="300"
+ layout="responsive">
+ </amp-img>
+</div>
+
+<amp-onetap-google
+ layout="nodisplay"
+ data-iframe-url = "https://gis-pay.appspot.com/onetap_iframe.html">
+</amp-onetap-google>
+</body>
+</html>
diff --git a/extensions/amp-onetap-google/0.1/amp-onetap-google.css b/extensions/amp-onetap-google/0.1/amp-onetap-google.css
@@ -0,0 +1,21 @@
+/**
+ * Copyright 2020 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+amp-onetap-google.intermediate-iframe-card-mode {
+ position: fixed;
+ right: 20px;
+ top: 20px;
+}