docs: add document about oauth login

server/test/demo/openapi-client-simple/index.ts

@@ -3,9 +3,9 @@ import path from 'path';
 import axios from 'axios';
 import fs from 'fs-extra';
 const app = express();
-const port = 8080;
+const port = process.env.PORT || 8080;
 
-const API = process.env.API || 'http://localhost:11001';
+const API = process.env.API || 'https://tailchat-nightly.moonrailgun.com'; // dev environment is 'http://localhost:11001'
 const clientUrl = `http://localhost:${port}`;
 const clientId = process.env.ID || 'tc_649aa2179e97b8b3b2d1004f';
 const clientSecret = process.env.SECRET || '4Pt4lccOaztJROs-VhmQf8XBU89-z8rr';
@@ -54,7 +54,6 @@ app.get('/cb', async (req, res, next) => {
 
     // 根据获取到的code获取授权码
     const { data: tokenInfo } = await request.post('/open/token', {
-      // client_id: 'foo',
       client_id: clientId,
       client_secret: clientSecret,
       redirect_uri: `${clientUrl}/cb`,

website/docs/advanced-usage/openapp/about.md

@@ -17,6 +17,8 @@ In Tailchat. At present, it mainly provides two forms of open platform applicati
 The difference from the `com.msgbyte.iam` plugin: `iam` plugin provides a way to log in to `Tailchat` with an external account, such as using a `Github` account to log in to `Tailchat`, while the OAuth capability of the open platform is based on `Tailchat` account to log in to other platforms.
 :::
 
+[Learn more](./oauth)
+
 ### Bot
 
 `Bot` endows chatbots with interactive application capabilities, which means that Tailchat can not only passively receive external messages, but also actively forward internal chat requests to external applications for processing.

website/docs/advanced-usage/openapp/oauth.md

@@ -0,0 +1,94 @@
+---
+sidebar_position: 5
+title: OAuth
+---
+
+The `Tailchat` open platform supports the `OAuth` login protocol, and you can easily integrate the `Tailchat` account system into your system. Just like our common `Github Login`, `Google Login`, `Apple Login`
+
+Now, you can use `Tailchat` to implement a unified account management system for your multiple platforms.
+
+## Create a new open platform application in Tailchat
+
+You need to create an open platform application and enable **OAuth** service.
+
+Fill in the address that is allowed to be redirected in **callback address**.
+
+![](/img/advanced-usage/openapp/3.png)
+
+## Create a stand-alone application that initiates and accepts callbacks
+
+First of all, we need to have a general understanding of the basic process of **OAuth** before we officially start
+
+![](/img/advanced-usage/openapp/4.png)
+
+Simply put, it is divided into three steps:
+
+- The first step: access authorization, you need to pass client_id: client id, redirect_uri: redirect uri, response_type is code, scope is the scope of authorization, fill in `openid profile` by default, and state is other custom parameters
+- Step 2: After the authorization is passed, it will be redirected to redirect_uri, and the code will be used as its parameter
+- Step 3: After getting the code, you can exchange it for an access token, and then you can directly access resources through the token
+
+You can refer to [https://github.com/msgbyte/tailchat/blob/master/server/test/demo/openapi-client-simple/index.ts](https://github.com/msgbyte/tailchat/blob /master/server/test/demo/openapi-client-simple/index.ts) to implement your own OAuth application
+
+### Main process
+
+Here is a brief overview of the process:
+
+First construct a request address, like:
+```
+<API>/open/auth?client_id=<clientId>&redirect_uri=<redirect_uri>&scope=openid profile&response_type=code&state=123456789
+```
+
+in:
+- `API` is your tailchat backend address, if you use the default deployment scheme, it is your access address.
+- `clientId` is the address of the open platform you applied for in the first step.
+- `redirect_uri` is your callback address, you need to make sure it has been added to the whitelist of allowed callback addresses
+- `scope` is the scope of application authorization, currently fill in `openid profile` fixedly
+- `response_type` is the response type, just fill in `code`
+- `state` and other custom parameters will be called with redirection and `code` parameters.
+
+After the user visits this address, it will jump to the Tailchat platform for login authorization. If the authorization is passed, it will be redirected to the address specified by `redirect_uri`. At this time, the receiving address can get `code` and `state` in the query string.
+
+In the next step, we need to exchange `code` for `token` by sending a POST request. Next, we need to use `token` to obtain user information
+
+```
+POST <API>/open/token
+{
+  "client_id": clientId,
+  "client_secret": clientSecret,
+  "redirect_uri": redirect_uri,
+  "code": code,
+  "grant_type": 'authorization_code',
+}
+```
+
+return value:
+```
+{
+  access_token,
+  expires_in,
+  id_token,
+  scope,
+  token_type
+}
+```
+
+At this point we got the `access_token`, which we can use to request user information:
+
+```
+POST <API>/open/me
+{
+  "access_token": access_token,
+}
+```
+
+return value:
+```
+{
+  sub,
+  nickname,
+  discriminator,
+  avatar,
+}
+```
+
+Among them, `sub` can be understood as the user's id, which is the unique identifier of the user

website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/advanced-usage/openapp/about.md

@@ -17,6 +17,8 @@ title: 关于开放平台
 与 `com.msgbyte.iam` 插件的区别: `iam`插件是提供外部账号登录`Tailchat`的方式，如使用`Github`账号登录`Tailchat`, 而开放平台的OAuth能力则是以`Tailchat`账号登录其他平台。
 :::
 
+[了解更多](./oauth)
+
 ### Bot
 
 `Bot` 赋予聊天机器人可交互的应用能力，这意味着 Tailchat 不仅仅可以被动接收来自外部的消息，也可以主动将内部聊天的请求转发到外部应用代为处理。

website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/advanced-usage/openapp/oauth.md

@@ -0,0 +1,94 @@
+---
+sidebar_position: 5
+title: OAuth 第三方登录
+---
+
+`Tailchat` 开放平台支持 `OAuth` 登录协议, 你可以很方便的将 `Tailchat` 账号体系接入到你的系统中。正如我们常见的 `Github 登录`、`Google 登录`、`Apple 登录` 一样
+
+而现在，你可以通过 `Tailchat` 对你的多个平台做统一的账号管理体系。
+
+## 在 Tailchat 中新建开放平台应用
+
+你需要创建一个开放平台应用并开启 **OAuth** 服务。
+
+在**回调地址**处填入允许被重定向的地址。
+
+![](/img/advanced-usage/openapp/3.png)
+
+## 创建独立 应用发起并接受回调
+
+首先我们在正式开始之前要大概了解一下 **OAuth** 的基本流程
+
+![](/img/advanced-usage/openapp/4.png)
+
+简单的来说，就是分为三步:
+
+- 第一步：访问授权，要传client_id:客户端id，redirect_uri:重定向uri，response_type为code，scope是授权范围，默认填`openid profile`即可，state是其它自定义参数
+- 第二步：授权通过，会重定向到redirect_uri，code码会作为它的参数
+- 第三步：拿到code后可以换取 access token, 之后就可以通过token直接访问资源
+
+你可以参考 [https://github.com/msgbyte/tailchat/blob/master/server/test/demo/openapi-client-simple/index.ts](https://github.com/msgbyte/tailchat/blob/master/server/test/demo/openapi-client-simple/index.ts) 来实现你自己的 OAuth 应用
+
+### 主要流程
+
+这里简单简述一下过程:
+
+首先构建一个请求地址，形如:
+```
+<API>/open/auth?client_id=<clientId>&redirect_uri=<redirect_uri>&scope=openid profile&response_type=code&state=123456789
+```
+
+其中:
+- `API` 是你的tailchat后端地址，如果是使用默认部署方案的话就是你的访问地址。
+- `clientId` 是你第一步申请到的开放平台的地址。
+- `redirect_uri` 为你的回调地址，你需要确保其已经被添加到允许回调地址的白名单中
+- `scope` 是申请授权范围，目前固定填入 `openid profile` 即可
+- `response_type` 是响应类型，固定填入 `code` 即可
+- `state` 其他的自定义参数，会随着重定向和`code`参数一起调用.
+
+用户访问该地址后，会跳转到 Tailchat 平台进行登录授权，如果授权通过的话会重定向到 `redirect_uri` 规定的地址. 此时接收地址可以在query string 中获取到 `code` 和 `state`.
+
+下一步我们需要通过发送 POST 请求使用 `code` 换取 `token`. 后续我们需要通过 `token` 来获取用户信息
+
+```
+POST <API>/open/token
+{
+  "client_id": clientId,
+  "client_secret": clientSecret,
+  "redirect_uri": redirect_uri,
+  "code": code,
+  "grant_type": 'authorization_code',
+}
+```
+
+返回值:
+```
+{
+  access_token, 
+  expires_in, 
+  id_token, 
+  scope, 
+  token_type
+}
+```
+
+此时我们拿到了 `access_token`, 我们可以用来请求用户信息:
+
+```
+POST <API>/open/me
+{
+  "access_token": access_token,
+}
+```
+
+返回值:
+```
+{
+  sub,
+  nickname, 
+  discriminator, 
+  avatar,
+}
+```
+
+其中`sub`可以理解为用户的id，是用户的唯一标识