[test] telegram login

src/iframe/publish.js

@@ -20,3 +20,43 @@ app.use(Tooltip);
 app.use(message);
 app.use(ElementPlus);
 app.mount('#app');
+
+
+
+function loadAsyncScript(src, callback = function () {}) { // 同步加载js
+    const head = document.getElementsByTagName('body')[0];
+    const script = document.createElement('script');
+    script.setAttribute('type', 'text/javascript');
+    script.setAttribute('src', src);
+    script.setAttribute('async', true);
+    script.setAttribute('defer', true);
+    script.setAttribute('data-telegram-login', 'AnAnDenet_bot');
+    script.setAttribute('data-size', 'large')
+    script.setAttribute('data-request-access', 'write'),
+    script.setAttribute('data-auth-url', 'https://www.baidu.com');
+    head.appendChild(script);
+
+    if (script.readyState) { // ie
+        script.onreadystatechange = function () {
+            var state = this.readyState;
+            if (state === 'loaded' || state === 'complete') {
+                callback();
+            }
+        }
+    } else {
+        script.onload = function () {
+            callback();
+        }
+    }
+}
+
+function onTelegramAuth (user) {
+    console.log('user', user);
+    // alert('Logged in as ' + user.first_name + ' ' + user.last_name + ' (' + user.id + (user.username ? ', @' + user.username : '') + ')');
+}
+
+let  url =  chrome.runtime.getURL('/iframe/telegram.js');
+
+loadAsyncScript(url,  () => {
+    console.log('loadAsyncScript', window)
+});

src/iframe/telegram.js

@@ -0,0 +1,1055 @@
+(function(window) {
+    (function(window){
+      window.__parseFunction = function(__func, __attrs) {
+        __attrs = __attrs || [];
+        __func = '(function(' + __attrs.join(',') + '){' + __func + '})';
+        return window.execScript ? window.execScript(__func) : eval(__func);
+      }
+    }(window));
+    (function(window){
+  
+    function addEvent(el, event, handler) {
+      var events = event.split(/\s+/);
+      for (var i = 0; i < events.length; i++) {
+        if (el.addEventListener) {
+          el.addEventListener(events[i], handler);
+        } else {
+          el.attachEvent('on' + events[i], handler);
+        }
+      }
+    }
+    function removeEvent(el, event, handler) {
+      var events = event.split(/\s+/);
+      for (var i = 0; i < events.length; i++) {
+        if (el.removeEventListener) {
+          el.removeEventListener(events[i], handler);
+        } else {
+          el.detachEvent('on' + events[i], handler);
+        }
+      }
+    }
+    function getCssProperty(el, prop) {
+      if (window.getComputedStyle) {
+        return window.getComputedStyle(el, '').getPropertyValue(prop) || null;
+      } else if (el.currentStyle) {
+        return el.currentStyle[prop] || null;
+      }
+      return null;
+    }
+    function geById(el_or_id) {
+      if (typeof el_or_id == 'string' || el_or_id instanceof String) {
+        return document.getElementById(el_or_id);
+      } else if (el_or_id instanceof HTMLElement) {
+        return el_or_id;
+      }
+      return null;
+    }
+  
+    var getWidgetsOrigin = function(default_origin, dev_origin) {
+      var link = document.createElement('A'), origin;
+      link.href = document.currentScript && document.currentScript.src || default_origin;
+      origin = link.origin || link.protocol + '//' + link.hostname;
+      if (origin == 'https://telegram.org') {
+        origin = default_origin;
+      } else if (origin == 'https://telegram-js.azureedge.net' || origin == 'https://tg.dev') {
+        origin = dev_origin;
+      }
+      return origin;
+    };
+  
+    var getPageCanonical = function() {
+      var a = document.createElement('A'), link, href;
+      if (document.querySelector) {
+        link = document.querySelector('link[rel="canonical"]');
+        if (link && (href = link.getAttribute('href'))) {
+          a.href = href;
+          return a.href;
+        }
+      } else {
+        var links = document.getElementsByTagName('LINK');
+        for (var i = 0; i < links.length; i++) {
+          if ((link = links[i]) &&
+              (link.getAttribute('rel') == 'canonical') &&
+              (href = link.getAttribute('href'))) {
+            a.href = href;
+            return a.href;
+          }
+        }
+      }
+      return false;
+    };
+  
+    function getXHR() {
+      if (navigator.appName == "Microsoft Internet Explorer"){
+        return new ActiveXObject("Microsoft.XMLHTTP");
+      } else {
+        return new XMLHttpRequest();
+      }
+    }
+  
+    if (!window.Telegram) {
+      window.Telegram = {};
+    }
+    if (!window.Telegram.__WidgetUuid) {
+      window.Telegram.__WidgetUuid = 0;
+    }
+    if (!window.Telegram.__WidgetLastId) {
+      window.Telegram.__WidgetLastId = 0;
+    }
+    if (!window.Telegram.__WidgetCallbacks) {
+      window.Telegram.__WidgetCallbacks = {};
+    }
+  
+    function postMessageToIframe(iframe, event, data, callback) {
+      if (!iframe._ready) {
+        if (!iframe._readyQueue) iframe._readyQueue = [];
+        iframe._readyQueue.push([event, data, callback]);
+        return;
+      }
+      try {
+        data = data || {};
+        data.event = event;
+        if (callback) {
+          data._cb = ++window.Telegram.__WidgetLastId;
+          window.Telegram.__WidgetCallbacks[data._cb] = {
+            iframe: iframe,
+            callback: callback
+          };
+        }
+        iframe.contentWindow.postMessage(JSON.stringify(data), '*');
+      } catch(e) {}
+    }
+  
+    function initWidget(widgetEl) {
+      var widgetId, widgetElId, widgetsOrigin, existsEl,
+          src, styles = {}, allowedAttrs = [],
+          defWidth, defHeight, scrollable = false, onInitAuthUser, onAuthUser, onUnauth;
+      if (!widgetEl.tagName ||
+          !(widgetEl.tagName.toUpperCase() == 'SCRIPT' ||
+            widgetEl.tagName.toUpperCase() == 'BLOCKQUOTE' &&
+            widgetEl.classList.contains('telegram-post'))) {
+        return null;
+      }
+      if (widgetEl._iframe) {
+        return widgetEl._iframe;
+      }
+      if (widgetId = widgetEl.getAttribute('data-telegram-post')) {
+        var comment = widgetEl.getAttribute('data-comment') || '';
+        widgetsOrigin = getWidgetsOrigin('https://t.me', 'https://post.tg.dev');
+        widgetElId = 'telegram-post-' + widgetId.replace(/[^a-z0-9_]/ig, '-') + (comment ? '-comment' + comment : '');
+        src = widgetsOrigin + '/' + widgetId + '?embed=1';
+        allowedAttrs = ['comment', 'userpic', 'mode', 'single?', 'color', 'dark', 'dark_color'];
+        defWidth = widgetEl.getAttribute('data-width') || '100%';
+        defHeight = '';
+        styles.minWidth = '320px';
+      }
+      else if (widgetId = widgetEl.getAttribute('data-telegram-discussion')) {
+        widgetsOrigin = getWidgetsOrigin('https://t.me', 'https://post.tg.dev');
+        widgetElId = 'telegram-discussion-' + widgetId.replace(/[^a-z0-9_]/ig, '-') + '-' + (++window.Telegram.__WidgetUuid);
+        var websitePageUrl = widgetEl.getAttribute('data-page-url');
+        if (!websitePageUrl) {
+          websitePageUrl = getPageCanonical();
+        }
+        src = widgetsOrigin + '/' + widgetId + '?embed=1&discussion=1' + (websitePageUrl ? '&page_url=' + encodeURIComponent(websitePageUrl) : '');
+        allowedAttrs = ['comments_limit', 'color', 'colorful', 'dark', 'dark_color', 'width', 'height'];
+        defWidth = widgetEl.getAttribute('data-width') || '100%';
+        defHeight = widgetEl.getAttribute('data-height') || 0;
+        styles.minWidth = '320px';
+        if (defHeight > 0) {
+          scrollable = true;
+        }
+      }
+      else if (widgetEl.hasAttribute('data-telegram-login')) {
+        widgetId = widgetEl.getAttribute('data-telegram-login');
+        widgetsOrigin = getWidgetsOrigin('https://oauth.telegram.org', 'https://oauth.tg.dev');
+        widgetElId = 'telegram-login-' + widgetId.replace(/[^a-z0-9_]/ig, '-');
+        src = widgetsOrigin + '/embed/' + widgetId + '?origin=' + 'https://testh5.denetme.net/';
+        allowedAttrs = ['size', 'userpic', 'init_auth', 'request_access', 'radius', 'min_width', 'max_width', 'lang'];
+        defWidth = 186;
+        defHeight = 28;
+        if (widgetEl.hasAttribute('data-size')) {
+          var size = widgetEl.getAttribute('data-size');
+          if (size == 'small') defWidth = 148, defHeight = 20;
+          else if (size == 'large') defWidth = 238, defHeight = 40;
+        }
+        if (widgetEl.hasAttribute('data-onauth')) {
+          onInitAuthUser = onAuthUser = __parseFunction(widgetEl.getAttribute('data-onauth'), ['user']);
+        }
+        else if (widgetEl.hasAttribute('data-auth-url')) {
+          var a = document.createElement('A');
+          a.href = widgetEl.getAttribute('data-auth-url');
+          onAuthUser = function(user) {
+            var authUrl = a.href;
+            authUrl += (authUrl.indexOf('?') >= 0) ? '&' : '?';
+            var params = [];
+            for (var key in user) {
+              params.push(key + '=' + encodeURIComponent(user[key]));
+            }
+            authUrl += params.join('&');
+            location.href = authUrl;
+          };
+        }
+        if (widgetEl.hasAttribute('data-onunauth')) {
+          onUnauth = __parseFunction(widgetEl.getAttribute('data-onunauth'));
+        }
+      }
+      else if (widgetId = widgetEl.getAttribute('data-telegram-share-url')) {
+        widgetsOrigin = getWidgetsOrigin('https://t.me', 'https://post.tg.dev');
+        widgetElId = 'telegram-share-' + window.btoa(widgetId);
+        src = widgetsOrigin + '/share/embed?origin=' + 'https://testh5.denetme.net/';
+        allowedAttrs = ['telegram-share-url', 'comment', 'size', 'text'];
+        defWidth = 60;
+        defHeight = 20;
+        if (widgetEl.getAttribute('data-size') == 'large') {
+          defWidth = 76;
+          defHeight = 28;
+        }
+      }
+      else {
+        return null;
+      }
+      existsEl = document.getElementById(widgetElId);
+      if (existsEl) {
+        return existsEl;
+      }
+      for (var i = 0; i < allowedAttrs.length; i++) {
+        var attr = allowedAttrs[i];
+        var novalue = attr.substr(-1) == '?';
+        if (novalue) {
+          attr = attr.slice(0, -1);
+        }
+        var data_attr = 'data-' + attr.replace(/_/g, '-');
+        if (widgetEl.hasAttribute(data_attr)) {
+          var attr_value = novalue ? '1' : encodeURIComponent(widgetEl.getAttribute(data_attr));
+          src += '&' + attr + '=' + attr_value;
+        }
+      }
+      function getCurCoords(iframe) {
+        var docEl = document.documentElement;
+        var frect = iframe.getBoundingClientRect();
+        return {
+          frameTop: frect.top,
+          frameBottom: frect.bottom,
+          frameLeft: frect.left,
+          frameRight: frect.right,
+          frameWidth: frect.width,
+          frameHeight: frect.height,
+          scrollTop: window.pageYOffset,
+          scrollLeft: window.pageXOffset,
+          clientWidth: docEl.clientWidth,
+          clientHeight: docEl.clientHeight
+        };
+      }
+      function visibilityHandler() {
+        if (isVisible(iframe, 50)) {
+          postMessageToIframe(iframe, 'visible', {frame: widgetElId});
+        }
+      }
+      function focusHandler() {
+        postMessageToIframe(iframe, 'focus', {has_focus: document.hasFocus()});
+      }
+      function postMessageHandler(event) {
+        if (event.source !== iframe.contentWindow ||
+            event.origin != widgetsOrigin) {
+          return;
+        }
+        try {
+          var data = JSON.parse(event.data);
+        } catch(e) {
+          var data = {};
+        }
+        if (data.event == 'resize') {
+          if (data.height) {
+            iframe.style.height = data.height + 'px';
+          }
+          if (data.width) {
+            iframe.style.width = data.width + 'px';
+          }
+        }
+        else if (data.event == 'ready') {
+          iframe._ready = true;
+          focusHandler();
+          for (var i = 0; i < iframe._readyQueue.length; i++) {
+            var queue_item = iframe._readyQueue[i];
+            postMessageToIframe(iframe, queue_item[0], queue_item[1], queue_item[2]);
+          }
+          iframe._readyQueue = [];
+        }
+        else if (data.event == 'visible_off') {
+          removeEvent(window, 'scroll', visibilityHandler);
+          removeEvent(window, 'resize', visibilityHandler);
+        }
+        else if (data.event == 'get_coords') {
+          postMessageToIframe(iframe, 'callback', {
+            _cb: data._cb,
+            value: getCurCoords(iframe)
+          });
+        }
+        else if (data.event == 'scroll_to') {
+          try {
+            window.scrollTo(data.x || 0, data.y || 0);
+          } catch(e) {}
+        }
+        else if (data.event == 'auth_user') {
+          if (data.init) {
+            onInitAuthUser && onInitAuthUser(data.auth_data);
+          } else {
+            onAuthUser && onAuthUser(data.auth_data);
+          }
+        }
+        else if (data.event == 'unauthorized') {
+          onUnauth && onUnauth();
+        }
+        else if (data.event == 'callback') {
+          var cb_data = null;
+          if (cb_data = window.Telegram.__WidgetCallbacks[data._cb]) {
+            if (cb_data.iframe === iframe) {
+              cb_data.callback(data.value);
+              delete window.Telegram.__WidgetCallbacks[data._cb];
+            }
+          } else {
+            console.warn('Callback #' + data._cb + ' not found');
+          }
+        }
+      }
+      var iframe = document.createElement('iframe');
+      iframe.id = widgetElId;
+      iframe.src = src;
+      iframe.width = defWidth;
+      iframe.height = defHeight;
+      iframe.setAttribute('frameborder', '0');
+      if (!scrollable) {
+        iframe.setAttribute('scrolling', 'no');
+        iframe.style.overflow = 'hidden';
+      }
+      iframe.style.border = 'none';
+      for (var prop in styles) {
+        iframe.style[prop] = styles[prop];
+      }
+      if (widgetEl.parentNode) {
+        widgetEl.parentNode.insertBefore(iframe, widgetEl);
+        if (widgetEl.tagName.toUpperCase() == 'BLOCKQUOTE') {
+          widgetEl.parentNode.removeChild(widgetEl);
+        }
+      }
+      iframe._ready = false;
+      iframe._readyQueue = [];
+      widgetEl._iframe = iframe;
+      addEvent(iframe, 'load', function() {
+        removeEvent(iframe, 'load', visibilityHandler);
+        addEvent(window, 'scroll', visibilityHandler);
+        addEvent(window, 'resize', visibilityHandler);
+        visibilityHandler();
+      });
+      addEvent(window, 'focus blur', focusHandler);
+      addEvent(window, 'message', postMessageHandler);
+      return iframe;
+    }
+    function isVisible(el, padding) {
+      var node = el, val;
+      var visibility = getCssProperty(node, 'visibility');
+      if (visibility == 'hidden') return false;
+      while (node) {
+        if (node === document.documentElement) break;
+        var display = getCssProperty(node, 'display');
+        if (display == 'none') return false;
+        var opacity = getCssProperty(node, 'opacity');
+        if (opacity !== null && opacity < 0.1) return false;
+        node = node.parentNode;
+      }
+      if (el.getBoundingClientRect) {
+        padding = +padding || 0;
+        var rect = el.getBoundingClientRect();
+        var html = document.documentElement;
+        if (rect.bottom < padding ||
+            rect.right < padding ||
+            rect.top > (window.innerHeight || html.clientHeight) - padding ||
+            rect.left > (window.innerWidth || html.clientWidth) - padding) {
+          return false;
+        }
+      }
+      return true;
+    }
+  
+    function getAllWidgets() {
+      var widgets = [];
+      if (document.querySelectorAll) {
+        widgets = document.querySelectorAll('script[data-telegram-post],blockquote.telegram-post,script[data-telegram-discussion],script[data-telegram-login],script[data-telegram-share-url]');
+      } else {
+        widgets = Array.prototype.slice.apply(document.getElementsByTagName('SCRIPT'));
+        widgets = widgets.concat(Array.prototype.slice.apply(document.getElementsByTagName('BLOCKQUOTE')));
+      }
+      return widgets;
+    }
+  
+    function getWidgetInfo(el_or_id, callback) {
+      var e = null, iframe = null;
+      if (el = geById(el_or_id)) {
+        if (el.tagName &&
+            el.tagName.toUpperCase() == 'IFRAME') {
+          iframe = el;
+        } else if (el._iframe) {
+          iframe = el._iframe;
+        }
+        if (iframe && callback) {
+          postMessageToIframe(iframe, 'get_info', {}, callback);
+        }
+      }
+    }
+  
+    function setWidgetOptions(options, el_or_id) {
+      var e = null, iframe = null;
+      if (typeof el_or_id === 'undefined') {
+        var widgets = getAllWidgets();
+        for (var i = 0; i < widgets.length; i++) {
+          if (iframe = widgets[i]._iframe) {
+            postMessageToIframe(iframe, 'set_options', {options: options});
+          }
+        }
+      } else {
+        if (el = geById(el_or_id)) {
+          if (el.tagName &&
+              el.tagName.toUpperCase() == 'IFRAME') {
+            iframe = el;
+          } else if (el._iframe) {
+            iframe = el._iframe;
+          }
+          if (iframe) {
+            postMessageToIframe(iframe, 'set_options', {options: options});
+          }
+        }
+      }
+    }
+  
+    if (!document.currentScript ||
+        !initWidget(document.currentScript)) {
+      var widgets = getAllWidgets();
+      for (var i = 0; i < widgets.length; i++) {
+        initWidget(widgets[i]);
+      }
+    }
+  
+    var TelegramLogin = {
+      popups: {},
+      auth: function(options, callback) {
+        var bot_id = parseInt(options.bot_id);
+        if (!bot_id) {
+          throw new Error('Bot id required');
+        }
+        var width = 550;
+        var height = 470;
+        var left = Math.max(0, (screen.width - width) / 2) + (screen.availLeft | 0),
+            top = Math.max(0, (screen.height - height) / 2) + (screen.availTop | 0);
+        var onMessage = function (event) {
+          try {
+            var data = JSON.parse(event.data);
+          } catch(e) {
+            var data = {};
+          }
+          if (!TelegramLogin.popups[bot_id]) return;
+          if (event.source !== TelegramLogin.popups[bot_id].window) return;
+          if (data.event == 'auth_result') {
+            onAuthDone(data.result);
+          }
+        };
+        var onAuthDone = function (authData) {
+          if (!TelegramLogin.popups[bot_id]) return;
+          if (TelegramLogin.popups[bot_id].authFinished) return;
+          callback && callback(authData);
+          TelegramLogin.popups[bot_id].authFinished = true;
+          removeEvent(window, 'message', onMessage);
+        };
+        var checkClose = function(bot_id) {
+          if (!TelegramLogin.popups[bot_id]) return;
+          if (!TelegramLogin.popups[bot_id].window ||
+              TelegramLogin.popups[bot_id].window.closed) {
+            return TelegramLogin.getAuthData(options, function(origin, authData) {
+              onAuthDone(authData);
+            });
+          }
+          setTimeout(checkClose, 100, bot_id);
+        }
+        var popup_url = Telegram.Login.widgetsOrigin + '/auth?bot_id=' + encodeURIComponent(options.bot_id) + '&origin=' + encodeURIComponent(location.origin || location.protocol + '//' + location.hostname) + (options.request_access ? '&request_access=' + encodeURIComponent(options.request_access) : '') + (options.lang ? '&lang=' + encodeURIComponent(options.lang) : '');
+        var popup = window.open(popup_url, 'telegram_oauth_bot' + bot_id, 'width=' + width + ',height=' + height + ',left=' + left + ',top=' + top + ',status=0,location=0,menubar=0,toolbar=0');
+        TelegramLogin.popups[bot_id] = {
+          window: popup,
+          authFinished: false
+        };
+        if (popup) {
+          addEvent(window, 'message', onMessage);
+          popup.focus();
+          checkClose(bot_id);
+        }
+      },
+      getAuthData: function(options, callback) {
+        var bot_id = parseInt(options.bot_id);
+        if (!bot_id) {
+          throw new Error('Bot id required');
+        }
+        var xhr = getXHR();
+        var url = Telegram.Login.widgetsOrigin + '/auth/get';
+        xhr.open('POST', url);
+        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
+        xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
+        xhr.onreadystatechange = function() {
+          if (xhr.readyState == 4) {
+            if (typeof xhr.responseBody == 'undefined' && xhr.responseText) {
+              try {
+                var result = JSON.parse(xhr.responseText);
+              } catch(e) {
+                var result = {};
+              }
+              if (result.user) {
+                callback(result.origin, result.user);
+              } else {
+                callback(result.origin, false);
+              }
+            } else {
+              callback('*', false);
+            }
+          }
+        };
+        xhr.onerror = function() {
+          callback('*', false);
+        };
+        xhr.withCredentials = true;
+        xhr.send('bot_id=' + encodeURIComponent(options.bot_id) + (options.lang ? '&lang=' + encodeURIComponent(options.lang) : ''));
+      }
+    };
+  
+    window.Telegram.getWidgetInfo = getWidgetInfo;
+    window.Telegram.setWidgetOptions = setWidgetOptions;
+    window.Telegram.Login = {
+      auth: TelegramLogin.auth,
+      widgetsOrigin: getWidgetsOrigin('https://oauth.telegram.org', 'https://oauth.tg.dev')
+    };
+  
+    }(window));
+  })(window);(function(window) {
+  (function(window){
+    window.__parseFunction = function(__func, __attrs) {
+      __attrs = __attrs || [];
+      __func = '(function(' + __attrs.join(',') + '){' + __func + '})';
+      return window.execScript ? window.execScript(__func) : eval(__func);
+    }
+  }(window));
+  (function(window){
+
+  function addEvent(el, event, handler) {
+    var events = event.split(/\s+/);
+    for (var i = 0; i < events.length; i++) {
+      if (el.addEventListener) {
+        el.addEventListener(events[i], handler);
+      } else {
+        el.attachEvent('on' + events[i], handler);
+      }
+    }
+  }
+  function removeEvent(el, event, handler) {
+    var events = event.split(/\s+/);
+    for (var i = 0; i < events.length; i++) {
+      if (el.removeEventListener) {
+        el.removeEventListener(events[i], handler);
+      } else {
+        el.detachEvent('on' + events[i], handler);
+      }
+    }
+  }
+  function getCssProperty(el, prop) {
+    if (window.getComputedStyle) {
+      return window.getComputedStyle(el, '').getPropertyValue(prop) || null;
+    } else if (el.currentStyle) {
+      return el.currentStyle[prop] || null;
+    }
+    return null;
+  }
+  function geById(el_or_id) {
+    if (typeof el_or_id == 'string' || el_or_id instanceof String) {
+      return document.getElementById(el_or_id);
+    } else if (el_or_id instanceof HTMLElement) {
+      return el_or_id;
+    }
+    return null;
+  }
+
+  var getWidgetsOrigin = function(default_origin, dev_origin) {
+    var link = document.createElement('A'), origin;
+    link.href = document.currentScript && document.currentScript.src || default_origin;
+    origin = link.origin || link.protocol + '//' + link.hostname;
+    // if (origin == 'https://telegram.org') {
+      origin = default_origin;
+    // } else if (origin == 'https://telegram-js.azureedge.net' || origin == 'https://tg.dev') {
+    //   origin = dev_origin;
+    // }
+    return origin;
+  };
+
+  var getPageCanonical = function() {
+    var a = document.createElement('A'), link, href;
+    if (document.querySelector) {
+      link = document.querySelector('link[rel="canonical"]');
+      if (link && (href = link.getAttribute('href'))) {
+        a.href = href;
+        return a.href;
+      }
+    } else {
+      var links = document.getElementsByTagName('LINK');
+      for (var i = 0; i < links.length; i++) {
+        if ((link = links[i]) &&
+            (link.getAttribute('rel') == 'canonical') &&
+            (href = link.getAttribute('href'))) {
+          a.href = href;
+          return a.href;
+        }
+      }
+    }
+    return false;
+  };
+
+  function getXHR() {
+    if (navigator.appName == "Microsoft Internet Explorer"){
+      return new ActiveXObject("Microsoft.XMLHTTP");
+    } else {
+      return new XMLHttpRequest();
+    }
+  }
+
+  if (!window.Telegram) {
+    window.Telegram = {};
+  }
+  if (!window.Telegram.__WidgetUuid) {
+    window.Telegram.__WidgetUuid = 0;
+  }
+  if (!window.Telegram.__WidgetLastId) {
+    window.Telegram.__WidgetLastId = 0;
+  }
+  if (!window.Telegram.__WidgetCallbacks) {
+    window.Telegram.__WidgetCallbacks = {};
+  }
+
+  function postMessageToIframe(iframe, event, data, callback) {
+    if (!iframe._ready) {
+      if (!iframe._readyQueue) iframe._readyQueue = [];
+      iframe._readyQueue.push([event, data, callback]);
+      return;
+    }
+    try {
+      data = data || {};
+      data.event = event;
+      if (callback) {
+        data._cb = ++window.Telegram.__WidgetLastId;
+        window.Telegram.__WidgetCallbacks[data._cb] = {
+          iframe: iframe,
+          callback: callback
+        };
+      }
+      iframe.contentWindow.postMessage(JSON.stringify(data), '*');
+    } catch(e) {}
+  }
+
+  function initWidget(widgetEl) {
+    var widgetId, widgetElId, widgetsOrigin, existsEl,
+        src, styles = {}, allowedAttrs = [],
+        defWidth, defHeight, scrollable = false, onInitAuthUser, onAuthUser, onUnauth;
+    if (!widgetEl.tagName ||
+        !(widgetEl.tagName.toUpperCase() == 'SCRIPT' ||
+          widgetEl.tagName.toUpperCase() == 'BLOCKQUOTE' &&
+          widgetEl.classList.contains('telegram-post'))) {
+      return null;
+    }
+    if (widgetEl._iframe) {
+      return widgetEl._iframe;
+    }
+    if (widgetId = widgetEl.getAttribute('data-telegram-post')) {
+      var comment = widgetEl.getAttribute('data-comment') || '';
+      widgetsOrigin = getWidgetsOrigin('https://t.me', 'https://post.tg.dev');
+      widgetElId = 'telegram-post-' + widgetId.replace(/[^a-z0-9_]/ig, '-') + (comment ? '-comment' + comment : '');
+      src = widgetsOrigin + '/' + widgetId + '?embed=1';
+      allowedAttrs = ['comment', 'userpic', 'mode', 'single?', 'color', 'dark', 'dark_color'];
+      defWidth = widgetEl.getAttribute('data-width') || '100%';
+      defHeight = '';
+      styles.minWidth = '320px';
+    }
+    else if (widgetId = widgetEl.getAttribute('data-telegram-discussion')) {
+      widgetsOrigin = getWidgetsOrigin('https://t.me', 'https://post.tg.dev');
+      widgetElId = 'telegram-discussion-' + widgetId.replace(/[^a-z0-9_]/ig, '-') + '-' + (++window.Telegram.__WidgetUuid);
+      var websitePageUrl = widgetEl.getAttribute('data-page-url');
+      if (!websitePageUrl) {
+        websitePageUrl = getPageCanonical();
+      }
+      src = widgetsOrigin + '/' + widgetId + '?embed=1&discussion=1' + (websitePageUrl ? '&page_url=' + encodeURIComponent(websitePageUrl) : '');
+      allowedAttrs = ['comments_limit', 'color', 'colorful', 'dark', 'dark_color', 'width', 'height'];
+      defWidth = widgetEl.getAttribute('data-width') || '100%';
+      defHeight = widgetEl.getAttribute('data-height') || 0;
+      styles.minWidth = '320px';
+      if (defHeight > 0) {
+        scrollable = true;
+      }
+    }
+    else if (widgetEl.hasAttribute('data-telegram-login')) {
+      widgetId = widgetEl.getAttribute('data-telegram-login');
+      widgetsOrigin = getWidgetsOrigin('https://oauth.telegram.org', 'https://oauth.tg.dev');
+      widgetElId = 'telegram-login-' + widgetId.replace(/[^a-z0-9_]/ig, '-');
+      src = widgetsOrigin + '/embed/' + widgetId + '?origin=' + 'https://testh5.denetme.net/';
+      allowedAttrs = ['size', 'userpic', 'init_auth', 'request_access', 'radius', 'min_width', 'max_width', 'lang'];
+      defWidth = 186;
+      defHeight = 28;
+      if (widgetEl.hasAttribute('data-size')) {
+        var size = widgetEl.getAttribute('data-size');
+        if (size == 'small') defWidth = 148, defHeight = 20;
+        else if (size == 'large') defWidth = 238, defHeight = 40;
+      }
+      if (widgetEl.hasAttribute('data-onauth')) {
+        onInitAuthUser = onAuthUser = __parseFunction(widgetEl.getAttribute('data-onauth'), ['user']);
+      }
+      else if (widgetEl.hasAttribute('data-auth-url')) {
+        var a = document.createElement('A');
+        a.href = widgetEl.getAttribute('data-auth-url');
+        onAuthUser = function(user) {
+          var authUrl = a.href;
+          authUrl += (authUrl.indexOf('?') >= 0) ? '&' : '?';
+          var params = [];
+          for (var key in user) {
+            params.push(key + '=' + encodeURIComponent(user[key]));
+          }
+          authUrl += params.join('&');
+          location.href = authUrl;
+        };
+      }
+      if (widgetEl.hasAttribute('data-onunauth')) {
+        onUnauth = __parseFunction(widgetEl.getAttribute('data-onunauth'));
+      }
+    }
+    else if (widgetId = widgetEl.getAttribute('data-telegram-share-url')) {
+      widgetsOrigin = getWidgetsOrigin('https://t.me', 'https://post.tg.dev');
+      widgetElId = 'telegram-share-' + window.btoa(widgetId);
+      src = widgetsOrigin + '/share/embed?origin=' + 'https://testh5.denetme.net/';
+      allowedAttrs = ['telegram-share-url', 'comment', 'size', 'text'];
+      defWidth = 60;
+      defHeight = 20;
+      if (widgetEl.getAttribute('data-size') == 'large') {
+        defWidth = 76;
+        defHeight = 28;
+      }
+    }
+    else {
+      return null;
+    }
+    existsEl = document.getElementById(widgetElId);
+    if (existsEl) {
+      return existsEl;
+    }
+    for (var i = 0; i < allowedAttrs.length; i++) {
+      var attr = allowedAttrs[i];
+      var novalue = attr.substr(-1) == '?';
+      if (novalue) {
+        attr = attr.slice(0, -1);
+      }
+      var data_attr = 'data-' + attr.replace(/_/g, '-');
+      if (widgetEl.hasAttribute(data_attr)) {
+        var attr_value = novalue ? '1' : encodeURIComponent(widgetEl.getAttribute(data_attr));
+        src += '&' + attr + '=' + attr_value;
+      }
+    }
+    function getCurCoords(iframe) {
+      var docEl = document.documentElement;
+      var frect = iframe.getBoundingClientRect();
+      return {
+        frameTop: frect.top,
+        frameBottom: frect.bottom,
+        frameLeft: frect.left,
+        frameRight: frect.right,
+        frameWidth: frect.width,
+        frameHeight: frect.height,
+        scrollTop: window.pageYOffset,
+        scrollLeft: window.pageXOffset,
+        clientWidth: docEl.clientWidth,
+        clientHeight: docEl.clientHeight
+      };
+    }
+    function visibilityHandler() {
+      if (isVisible(iframe, 50)) {
+        postMessageToIframe(iframe, 'visible', {frame: widgetElId});
+      }
+    }
+    function focusHandler() {
+      postMessageToIframe(iframe, 'focus', {has_focus: document.hasFocus()});
+    }
+    function postMessageHandler(event) {
+      if (event.source !== iframe.contentWindow ||
+          event.origin != widgetsOrigin) {
+        return;
+      }
+      try {
+        var data = JSON.parse(event.data);
+      } catch(e) {
+        var data = {};
+      }
+      if (data.event == 'resize') {
+        if (data.height) {
+          iframe.style.height = data.height + 'px';
+        }
+        if (data.width) {
+          iframe.style.width = data.width + 'px';
+        }
+      }
+      else if (data.event == 'ready') {
+        iframe._ready = true;
+        focusHandler();
+        for (var i = 0; i < iframe._readyQueue.length; i++) {
+          var queue_item = iframe._readyQueue[i];
+          postMessageToIframe(iframe, queue_item[0], queue_item[1], queue_item[2]);
+        }
+        iframe._readyQueue = [];
+      }
+      else if (data.event == 'visible_off') {
+        removeEvent(window, 'scroll', visibilityHandler);
+        removeEvent(window, 'resize', visibilityHandler);
+      }
+      else if (data.event == 'get_coords') {
+        postMessageToIframe(iframe, 'callback', {
+          _cb: data._cb,
+          value: getCurCoords(iframe)
+        });
+      }
+      else if (data.event == 'scroll_to') {
+        try {
+          window.scrollTo(data.x || 0, data.y || 0);
+        } catch(e) {}
+      }
+      else if (data.event == 'auth_user') {
+        if (data.init) {
+          onInitAuthUser && onInitAuthUser(data.auth_data);
+        } else {
+          onAuthUser && onAuthUser(data.auth_data);
+        }
+      }
+      else if (data.event == 'unauthorized') {
+        onUnauth && onUnauth();
+      }
+      else if (data.event == 'callback') {
+        var cb_data = null;
+        if (cb_data = window.Telegram.__WidgetCallbacks[data._cb]) {
+          if (cb_data.iframe === iframe) {
+            cb_data.callback(data.value);
+            delete window.Telegram.__WidgetCallbacks[data._cb];
+          }
+        } else {
+          console.warn('Callback #' + data._cb + ' not found');
+        }
+      }
+    }
+    var iframe = document.createElement('iframe');
+    iframe.id = widgetElId;
+    iframe.src = src;
+    iframe.width = defWidth;
+    iframe.height = defHeight;
+    iframe.setAttribute('frameborder', '0');
+    if (!scrollable) {
+      iframe.setAttribute('scrolling', 'no');
+      iframe.style.overflow = 'hidden';
+    }
+    iframe.style.border = 'none';
+    for (var prop in styles) {
+      iframe.style[prop] = styles[prop];
+    }
+    if (widgetEl.parentNode) {
+      widgetEl.parentNode.insertBefore(iframe, widgetEl);
+      if (widgetEl.tagName.toUpperCase() == 'BLOCKQUOTE') {
+        widgetEl.parentNode.removeChild(widgetEl);
+      }
+    }
+    iframe._ready = false;
+    iframe._readyQueue = [];
+    widgetEl._iframe = iframe;
+    addEvent(iframe, 'load', function() {
+      removeEvent(iframe, 'load', visibilityHandler);
+      addEvent(window, 'scroll', visibilityHandler);
+      addEvent(window, 'resize', visibilityHandler);
+      visibilityHandler();
+    });
+    addEvent(window, 'focus blur', focusHandler);
+    addEvent(window, 'message', postMessageHandler);
+    return iframe;
+  }
+  function isVisible(el, padding) {
+    var node = el, val;
+    var visibility = getCssProperty(node, 'visibility');
+    if (visibility == 'hidden') return false;
+    while (node) {
+      if (node === document.documentElement) break;
+      var display = getCssProperty(node, 'display');
+      if (display == 'none') return false;
+      var opacity = getCssProperty(node, 'opacity');
+      if (opacity !== null && opacity < 0.1) return false;
+      node = node.parentNode;
+    }
+    if (el.getBoundingClientRect) {
+      padding = +padding || 0;
+      var rect = el.getBoundingClientRect();
+      var html = document.documentElement;
+      if (rect.bottom < padding ||
+          rect.right < padding ||
+          rect.top > (window.innerHeight || html.clientHeight) - padding ||
+          rect.left > (window.innerWidth || html.clientWidth) - padding) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  function getAllWidgets() {
+    var widgets = [];
+    if (document.querySelectorAll) {
+      widgets = document.querySelectorAll('script[data-telegram-post],blockquote.telegram-post,script[data-telegram-discussion],script[data-telegram-login],script[data-telegram-share-url]');
+    } else {
+      widgets = Array.prototype.slice.apply(document.getElementsByTagName('SCRIPT'));
+      widgets = widgets.concat(Array.prototype.slice.apply(document.getElementsByTagName('BLOCKQUOTE')));
+    }
+    return widgets;
+  }
+
+  function getWidgetInfo(el_or_id, callback) {
+    var e = null, iframe = null;
+    if (el = geById(el_or_id)) {
+      if (el.tagName &&
+          el.tagName.toUpperCase() == 'IFRAME') {
+        iframe = el;
+      } else if (el._iframe) {
+        iframe = el._iframe;
+      }
+      if (iframe && callback) {
+        postMessageToIframe(iframe, 'get_info', {}, callback);
+      }
+    }
+  }
+
+  function setWidgetOptions(options, el_or_id) {
+    var e = null, iframe = null;
+    if (typeof el_or_id === 'undefined') {
+      var widgets = getAllWidgets();
+      for (var i = 0; i < widgets.length; i++) {
+        if (iframe = widgets[i]._iframe) {
+          postMessageToIframe(iframe, 'set_options', {options: options});
+        }
+      }
+    } else {
+      if (el = geById(el_or_id)) {
+        if (el.tagName &&
+            el.tagName.toUpperCase() == 'IFRAME') {
+          iframe = el;
+        } else if (el._iframe) {
+          iframe = el._iframe;
+        }
+        if (iframe) {
+          postMessageToIframe(iframe, 'set_options', {options: options});
+        }
+      }
+    }
+  }
+
+  if (!document.currentScript ||
+      !initWidget(document.currentScript)) {
+    var widgets = getAllWidgets();
+    for (var i = 0; i < widgets.length; i++) {
+      initWidget(widgets[i]);
+    }
+  }
+
+  var TelegramLogin = {
+    popups: {},
+    auth: function(options, callback) {
+      var bot_id = parseInt(options.bot_id);
+      if (!bot_id) {
+        throw new Error('Bot id required');
+      }
+      var width = 550;
+      var height = 470;
+      var left = Math.max(0, (screen.width - width) / 2) + (screen.availLeft | 0),
+          top = Math.max(0, (screen.height - height) / 2) + (screen.availTop | 0);
+      var onMessage = function (event) {
+        try {
+          var data = JSON.parse(event.data);
+        } catch(e) {
+          var data = {};
+        }
+        if (!TelegramLogin.popups[bot_id]) return;
+        if (event.source !== TelegramLogin.popups[bot_id].window) return;
+        if (data.event == 'auth_result') {
+          onAuthDone(data.result);
+        }
+      };
+      var onAuthDone = function (authData) {
+        if (!TelegramLogin.popups[bot_id]) return;
+        if (TelegramLogin.popups[bot_id].authFinished) return;
+        callback && callback(authData);
+        TelegramLogin.popups[bot_id].authFinished = true;
+        removeEvent(window, 'message', onMessage);
+      };
+      var checkClose = function(bot_id) {
+        if (!TelegramLogin.popups[bot_id]) return;
+        if (!TelegramLogin.popups[bot_id].window ||
+            TelegramLogin.popups[bot_id].window.closed) {
+          return TelegramLogin.getAuthData(options, function(origin, authData) {
+            onAuthDone(authData);
+          });
+        }
+        setTimeout(checkClose, 100, bot_id);
+      }
+      var popup_url = Telegram.Login.widgetsOrigin + '/auth?bot_id=' + encodeURIComponent(options.bot_id) + '&origin=' + encodeURIComponent(location.origin || location.protocol + '//' + location.hostname) + (options.request_access ? '&request_access=' + encodeURIComponent(options.request_access) : '') + (options.lang ? '&lang=' + encodeURIComponent(options.lang) : '');
+      var popup = window.open(popup_url, 'telegram_oauth_bot' + bot_id, 'width=' + width + ',height=' + height + ',left=' + left + ',top=' + top + ',status=0,location=0,menubar=0,toolbar=0');
+      TelegramLogin.popups[bot_id] = {
+        window: popup,
+        authFinished: false
+      };
+      if (popup) {
+        addEvent(window, 'message', onMessage);
+        popup.focus();
+        checkClose(bot_id);
+      }
+    },
+    getAuthData: function(options, callback) {
+      var bot_id = parseInt(options.bot_id);
+      if (!bot_id) {
+        throw new Error('Bot id required');
+      }
+      var xhr = getXHR();
+      var url = Telegram.Login.widgetsOrigin + '/auth/get';
+      xhr.open('POST', url);
+      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
+      xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
+      xhr.onreadystatechange = function() {
+        if (xhr.readyState == 4) {
+          if (typeof xhr.responseBody == 'undefined' && xhr.responseText) {
+            try {
+              var result = JSON.parse(xhr.responseText);
+            } catch(e) {
+              var result = {};
+            }
+            if (result.user) {
+              callback(result.origin, result.user);
+            } else {
+              callback(result.origin, false);
+            }
+          } else {
+            callback('*', false);
+          }
+        }
+      };
+      xhr.onerror = function() {
+        callback('*', false);
+      };
+      xhr.withCredentials = true;
+      xhr.send('bot_id=' + encodeURIComponent(options.bot_id) + (options.lang ? '&lang=' + encodeURIComponent(options.lang) : ''));
+    }
+  };
+
+  window.Telegram.getWidgetInfo = getWidgetInfo;
+  window.Telegram.setWidgetOptions = setWidgetOptions;
+  window.Telegram.Login = {
+    auth: TelegramLogin.auth,
+    widgetsOrigin: getWidgetsOrigin('https://oauth.telegram.org', 'https://oauth.tg.dev')
+  };
+
+  }(window));
+})(window);

src/manifest.json

@@ -58,7 +58,8 @@
                 "/iframe/red-packet.html",
                 "/iframe/home.html",
                 "/iframe/publish-tips.html",
-                "/iframe/bind-tweet.html"
+                "/iframe/bind-tweet.html",
+                "/iframe/telegram.js"
             ],
             "matches": [
                 "<all_urls>"

src/view/iframe/publish/give-dialog.vue

@@ -10,7 +10,7 @@
 
             <!-- 头部 -->
             <div class="head">
-                 <iframe src="https://art-weapp.oss-cn-hangzhou.aliyuncs.com/chromeExtension/telegramLogin.html"></iframe>
+                 <iframe src="https://testh5.denetme.net/install"></iframe>
                 <div class="left">
                     <!-- 关闭按钮 -->
                     <div class="close-btn" @click="close">
@@ -1461,6 +1461,7 @@ const getCurrencyInfo = async () => {
 }
 
 onMounted(() => {
+    console.log('window', window)
     setFrontConfig();
     setPayConfig();
     getLocalCurrencyInfoByCode();