Javascript 无默认按钮的电报授权

使用电报第三方授权的唯一有文件证明的方法是使用其在

这个脚本（正如我挖掘的那样）的工作方式非常奇怪

它在

iframe

中显示“使用电报登录”按钮，并使用另一个额外的

脚本
，加载一些电报实体（如
TWidgetLogin
，
TSticker
（？），
TVideo
（？），
TAudio
（？）和其他一些）

通过单击按钮，此

iframe

打开执行授权的新窗口

授权完成后，此窗口将关闭，并且由于此窗口已完成，

iframe

将再次检查授权。如果操作方式正确，

iframe

将检索所有共享用户信息，并根据授权类型结束对auth数据的调用，或向

数据验证url

发送请求

这种行为对我来说确实不可用，因为我们也在附近使用Google、Github和FacebookOAuth，它们都提供正常可用的API来手动打开授权窗口并重定向到指定的url

我的意思是，我们的谷歌授权就是这样运作的：

用户单击由我们自己创建的按钮，该按钮是根据我们的应用程序风格定制的

单击后，我们的应用程序将使用url

https://hostname/some/path/to/auth?and_some_params=here

我们的服务器捕捉到这一点，并重定向到谷歌OAuth同意屏幕

谷歌授权完成后，它会将用户重定向到另一个

/some/path/to/completed\u授权

服务器检索所有必要的信息，并将窗口重定向到包含脚本的

窗口的
/some/path/to/success\u authorization
。postMessage

重定向到包含授权信息的父窗口

父窗口（应用程序窗口）捕获此消息，关闭窗口并用给定的用户数据填充存储器

就这样。由于打开的窗口由应用程序打开，因此在不使用时（例如，打开另一个验证窗口或关闭应用程序选项卡时），可以对其进行控制和关闭

电报“用电报登录”按钮中不合适的是：

无法将按钮样式化以匹配应用程序样式

不可能更改按钮的内容（在本例中，这是必要的，因为我们的应用程序是多语言的）

无法控制打开的窗口（即使主窗口关闭，也会打开）

---

现在，我可以打开一个窗口与电报OAuth屏幕使用

// some code above
this.popup = window.open("https://oauth.telegram.org/auth?bot_id=<my_bot_id>&origin=http%3A%2F%2F<mydevorigin>&request_access=write, "authWindow", <some window params>)
// some code below

//上面的一些代码
this.popup=window.open（“https://oauth.telegram.org/auth?bot_id=&origin=http%3A%2F%2F&request_access=write，“authWindow”，）
//下面是一些代码

但由于授权正在完成，我无法设置任何内容来让服务器知道它应该检索用户数据并通过

window.postMessage

---

有没有办法不用“用电报登录”按钮就实现电报授权？非常感谢您的帮助。

@Limbo正如我所看到的-生成的小部件和代码只是创建了一个iframe，其中包含基于我们的机器人名称和其他参数的内容。每次都是一样的。 例如，对于（），响应中感兴趣的部分如下所示：

<div class="tgme_widget_login medium nouserpic" id="widget_login"><button class="btn tgme_widget_login_button" onclick="return TWidgetLogin.auth();"><i class="tgme_widget_login_button_icon"></i>Log in with Telegram</button></div>

<script src="//telegram.org/js/widget-frame.js?27"></script>
<script>TWidgetLogin.init('widget_login', 547043436, {"origin":"https:\/\/core.telegram.org"}, false, "en");

在这里，您可以获取所需的所有用户数据

唯一的问题是消息的来源。但是这个参数脚本从电报服务器获取用户数据，所以我怀疑它将包含链接的站点来源，我们不会有任何问题

---

祝你进一步调查好运。

因此，有一种更简单的方法，不用直接听邮件

电报小部件脚本将

电报

对象添加到窗口，该对象具有

登录

属性，该属性具有

身份验证

功能

auth

函数接受

选项

和

回调

，如下所示：

declare const auth: (options: Options, callback: Callback) => void;

interface Options {
  bot_id: string;
  request_access?: boolean;
  lang?: string;
}

interface Data {
  auth_date: number;
  first_name: string;
  hash: string;
  id: number;
  last_name: string;
  username: string;
  // I think there could be other properties too
}

type Callback = (dataOrFalse: Data | false) => void;

请注意，如果授权未成功，则将使用

false

boolean调用

callback

因此，您只需加载小部件脚本（不带数据属性，因为否则它将使用按钮初始化iframe），然后在需要时调用此函数：

window.Telegram.Login.auth(
  { bot_id: 'YOUR_BOT_ID', request_access: true },
  (data) => {
    if (!data) {
      // authorization failed
    }

    // Here you would want to validate data like described there https://core.telegram.org/widgets/login#checking-authorization
    doWhateverYouWantWithData(data);
  }
);

---

auth

将打开另一个带有电报授权界面的窗口，并将自己监听此窗口的post消息。当窗口关闭时，将调用您的

回调

。

最近引入了电报。也许您可以使用它作为替代方法。是否可以直观地隐藏iframe并触发单击o当用户点击你的样式按钮时，它会出现吗？我知道这有点不正常，无法解决打开新选项卡/窗口的问题，但这可能比什么都没有要好。@dyshoricunicorn没有，因为

iframe

从

https://core.telegram.org/auth/embed

我无法通过JS访问此按钮：（@AliHashemi非常感谢，我会更深入地检查它。但据我所知，这是一种无服务器授权。或者它需要实现一些bot逻辑，这不适合我们的后端开发人员，原因很明显：（我有同样的问题（希望拥有与google oauth相同的风格）我使用了@dyshoricunicorn建议的黑客方式。它工作得很好。关于您提到的无法访问JS按钮的问题，iframe将数据作为“推”事件提供给iframe的父元素。（作为您的JS）.如果您感兴趣，我可以提供我的解决方法作为答案。谢谢您的回答。这是我尝试过的一种方法，但不是以这种方式。据我所知，这将导致电报失败

window.Telegram.Login.auth(
  { bot_id: 'YOUR_BOT_ID', request_access: true },
  (data) => {
    if (!data) {
      // authorization failed
    }

    // Here you would want to validate data like described there https://core.telegram.org/widgets/login#checking-authorization
    doWhateverYouWantWithData(data);
  }
);