Skip to content

Commit 0287484

Browse files
dezhishenCopilotjyxjjj
authored
docs(sso): add Keycloak tutorial and split sso.md files (#292)
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: ShenLin <773933146@qq.com>
1 parent b4f194d commit 0287484

11 files changed

Lines changed: 694 additions & 487 deletions

File tree

‎pages/guide/advanced/sso.md‎

Lines changed: 7 additions & 487 deletions
Large diffs are not rendered by default.

‎pages/guide/advanced/sso/01-GitHub.md‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
### 3.1. Github { lang="en" }
2+
3+
::: en
4+
::: warning
5+
If you want to use GitHub to log in, you first need the machine you built OpenList to be able to connect to GitHub before you can call and use it, otherwise you cannot use it if the link is not connected
6+
:::
7+
::: en
8+
Open **https://github.com/settings/developers** Click **`New OAuth App`**
9+
:::
10+
11+
### 3.1. GitHub { lang="zh-CN" }
12+
13+
::: zh-CN
14+
::: warning
15+
若想使用GitHub登录，首选需要你搭建OpenList的机器能连接访问GitHub才可以调用使用，不然连接不上无法使用
16+
:::
17+
::: zh-CN
18+
打开 **https://github.com/settings/developers** 点击 **`New OAuth App`**
19+
:::
20+
21+
#### 3.1.1. Register OAuth Instructions { lang="en" }
22+
23+
#### 3.1.1. Register OAuth 填写说明 { lang="zh-CN" }
24+
25+
::: en
26+
27+
- Application name
28+
- Write whatever you want to call it
29+
- **Homepage URL**
30+
- home URL address
31+
- Both **http** and **https** can be used
32+
- Application description
33+
- write whatever you want
34+
- **Authorization callback URL**
35+
- Callback URL address
36+
- **https://your_domain/api/auth/sso_callback** - Both **http** and **https** can be used
37+
Remember to get **Client secrets** after filling it out, and then fill it in the OpenList background.
38+
Remember to write and save the background parameters of OpenList. After writing and saving, you have to go back to the bottom of the personal data and there will be a button that needs to be bound, otherwise it cannot be used
39+
40+
:::
41+
42+
::: zh-CN
43+
44+
- Application name
45+
- 随便写想叫什么叫什么
46+
- **Homepage URL**
47+
- 主页网址地址
48+
- 可以使用http https都可以
49+
- Application description
50+
- 随便写
51+
- **Authorization callback URL**
52+
- 回调URL地址
53+
- **https://你的域名/api/auth/sso_callback** - 可以使用http https都可以
54+
填写完毕后记得获取一下 **Client secrets**，然后填写到OpenList后台。
55+
56+
:::
57+
58+
#### 3.1.2. Completely fill in the reference schematic { lang="en" }
59+
60+
#### 3.1.2. 完整填写参考示意图 { lang="zh-CN" }
61+
62+
::: en
63+
![sso](/img/advanced/github.png)
64+
:::
65+
::: zh-CN
66+
![sso](/img/advanced/github.png)
67+
:::
68+
69+
#### 3.1.3. GitHub login Video Tutorials { lang="en" }
70+
71+
#### 3.1.3. GitHub视频教程 { lang="zh-CN" }
72+
73+
<BiliBili bvid="BV1KA41117m5" ratio="16:9" />

‎pages/guide/advanced/sso/02-Dingtalk.md‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
### 3.2.Dingtalk { lang="en" }
2+
3+
### 3.2.钉钉 { lang="zh-CN" }
4+
5+
::: en
6+
First open **https://open-dev.dingtalk.com/fe/app#/corp/app**
7+
8+
In the upper right corner, first select `New Application`, select `H5 Micro Application` as the type, fill in the content by yourself and click Confirm to create
9+
10+
Click on the new application and we will see the application credentials option, where `AppKey` is the client ID, and `AppSecret` is the client secret key
11+
12+
- Just fill in the corresponding parameters in the OpenList background single sign-on
13+
Go to the left column and find `Login and Share` \*\*Fill in the callback parameters `http://127.0.0.1:5234/api/auth/sso_callback`
14+
15+
```bash title="Callback" parameter example
16+
http://127.0.0.1:5244/api/auth/sso_callback
17+
```
18+
19+
- Note: I used the callback parameter here for local testing. http://127.x When you use it, Write **http(s):\//your own domain name/api/auth/sso_callback** when filling in and using it by yourself
20+
21+
Write the callback parameters well. Let’s go to the left column and find `Privilege Management`, find **`Personal Information Read Permission of Address Book`** and click to authorize
22+
23+
Remember to write and save the background parameters of OpenList. After writing and saving, you have to go back to the bottom of the personal data and there will be a button that needs to be bound, otherwise it cannot be used
24+
25+
:::
26+
27+
::: zh-CN
28+
29+
首先打开 **https://open-dev.dingtalk.com/fe/app#/corp/app**
30+
31+
右上角先 `新建应用`，类型选择 `H5微应用` ,内容自己填写点击确认创建
32+
33+
点击新建好好的应用我们就会看到应用凭证选项，里面的 `AppKey` 就是客户端ID，`AppSecret` 是客户端秘钥
34+
35+
- 填写到OpenList后台单点登录内对应的参数即可
36+
37+
来到左侧栏找到 `登录与分享` **填写回调参数 **`http://127.0.0.1:5234/api/auth/sso_callback`\*\*\*\*
38+
39+
```bash title="回调参数示例"
40+
http://127.0.0.1:5244/api/auth/sso_callback
41+
```
42+
43+
- 注：我这里回调参数是本地测试就使用了 http://127.x 大家使用的时候写 **http(s):\//自己域名/api/auth/sso_callback**
44+
45+
回调参数写好好我们来到左侧栏找到 `权限管理` 找到 **`通讯录个人信息读权限`** 然后点击进行授权
46+
47+
OpenList 后台参数也记得写好保存，写好保存后也要回到个人资料下方会有一个需要绑定的按钮进行绑定，否则无法使用
48+
49+
:::
50+
51+
#### 3.2.1. Completely fill in the reference schematic { lang="en" }
52+
53+
#### 3.2.1. 完整填写参考示意图 { lang="zh-CN" }
54+
55+
::: en
56+
![sso](/img/advanced/dingding.png)
57+
:::
58+
::: zh-CN
59+
![sso](/img/advanced/dingding.png)
60+
:::

‎pages/guide/advanced/sso/03-Microsoft.md‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
### 3.3. Microsoft { lang="en" }
2+
3+
### 3.3. 微软 { lang="zh-CN" }
4+
5+
::: en
6+
First open **https://portal.azure.com/#view/Microsoft_AAD_RegisteredApps/ApplicationsListBlade**
7+
8+
Then register to create an application, I won't say much here, you can see the complete schematic diagram
9+
10+
Account type must be selected: **Account in any organizational directory (any Azure AD directory - multi-tenant)**
11+
12+
Microsoft callback parameters: must start with "HTTPS" or "http://localhost (I used localhost here for local testing)
13+
14+
```bash title="Callback" parameter example
15+
http://localhost:5244/api/auth/sso_callback?method=sso_get_token
16+
http://localhost:5244/api/auth/sso_callback?method=get_sso_id
17+
```
18+
19+
- Write **http(s):\//your own domain name/api/auth/sso_callback?method=sso_get_token** when filling in and using it by yourself
20+
21+
- Write **http(s):\//your own domain name/api/auth/sso_callback?method=get_sso_id** when filling in and using it by yourself
22+
23+
- Note: When adding a redirect URL to a new application, only one can be added. After the application is registered and registered, click on the application to see the options behind the redirect URI
24+
25+
After filling it out, we click `Certificate and Password` on the left column to create a new `Client Password` to get our client secret key
26+
27+
- After the client password is created, the **`value`** parameter is our `client key`, remember to save it, it will not appear again if it appears once, if you don’t save it in time, just create a new client password
28+
29+
The client ID is in `Overview` at the top of the left column, find the application (client) ID, which is the client ID we need to fill in the OpenList
30+
31+
- We have got the client ID and secret key and fill them in the OpenList single sign-on configuration.
32+
Remember to write and save the background parameters of OpenList. After writing and saving, you have to go back to the bottom of the personal data and there will be a button that needs to be bound, otherwise it cannot be used
33+
34+
:::
35+
::: zh-CN
36+
首先打开 **https://portal.azure.com/#view/Microsoft_AAD_RegisteredApps/ApplicationsListBlade**
37+
然后注册创建应用，我这里就不多说了可以看完整示意图
38+
账户类型必须选择：**任何组织目录(任何 Azure AD 目录 - 多租户)中的帐户**
39+
微软回调参数：必须以"HTTPS"或"http://localhost开头 （我这里是本地测试就用了localhost）
40+
41+
```bash title="回调参数示例"
42+
http://localhost:5244/api/auth/sso_callback?method=sso_get_token
43+
http://localhost:5244/api/auth/sso_callback?method=get_sso_id
44+
```
45+
46+
- 大家使用的时候写 **http(s):\//自己域名/api/auth/sso_callback?method=sso_get_token**
47+
48+
- 大家使用的时候写 **http(s):\//自己域名/api/auth/sso_callback?method=get_sso_id**
49+
50+
- 注：在新建应用时添加重定向URL的时候只能添加一条，第二条等应用好注册好后点击应用看到 重定向 URI 后面的选项
51+
52+
填写好后我们点击左侧栏的 `证书和密码` 新建一个 `客户端密码`即可获得我们的客户端秘钥
53+
54+
- 客户端密码创建好后 **`值`** 参数是我们的`客户端秘钥`，记得保存，出现一次就不会在出现了，如果没有及时保存新建一个客户端密码即可
55+
56+
客户端ID在左侧栏顶部的 `概述`，找到 应用程序(客户端)ID 就是我们需要填写到OpenList里面的客户端ID
57+
58+
- 客户端ID和秘钥我们都拿到了填写到OpenList单点登录配置里面去即可
59+
60+
OpenList 后台参数也记得写好保存，写好保存后也要回到个人资料下方会有一个需要绑定的按钮进行绑定，否则无法使用
61+
62+
:::
63+
64+
#### 3.3.1. Completely fill in the reference schematic { lang="en" }
65+
66+
#### 3.3.1. 完整填写参考示意图 { lang="zh-CN" }
67+
68+
::: en
69+
![sso](/img/advanced/weiruan.png)
70+
:::
71+
::: zh-CN
72+
![sso](/img/advanced/weiruan.png)
73+
:::

‎pages/guide/advanced/sso/04-Google.md‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
### 3.4. Google { lang="en" }
2+
3+
### 3.4. 谷歌 { lang="zh-CN" }
4+
5+
::: en
6+
::: warning
7+
If you want to use Google to log in, you first need the machine you built OpenList to be able to connect to Google before you can call and use it, otherwise you cannot use it if the link is not connected
8+
:::
9+
10+
::: en
11+
12+
1. First open **https://console.cloud.google.com/projectselector2/apis/dashboard?hl=zh-cn**
13+
2. If you are using it for the first time, you need to create a new project first (just write whatever you want, skip it if it has already been created)
14+
3. Then configure the [consent screen](#agree-to-screen-configuration) (there is a separate instruction on how to configure the document, if it is already configured, skip it)
15+
4. After configuring the unified screen, we click the credentials on the left, create credentials, and select OAuth client ID
16+
17+
- Application Type Select Web Application, and write the name as you like
18+
- Then add our two callback parameters in the authorized redirect URI
19+
20+
```bash title="Callback" parameter example
21+
http://127.0.0.1:5244/api/auth/sso_callback?method=get_sso_id
22+
http://127.0.0.1:5244/api/auth/sso_callback?method=sso_get_token
23+
```
24+
25+
- Write **http(s):\//your own domain name/api/auth/sso_callback?method=get_sso_id** when filling in and using it by yourself
26+
- Write **http(s):\//your own domain name/api/auth/sso_callback?method=sso_get_token** when filling in and using it by yourself
27+
After filling it out, click Create to get the OAuth client ID and secret key
28+
- (It doesn't matter if you accidentally close it here, just click on the name of the application we created and enter it in the upper right position to see it)
29+
We have got the client ID and secret key and fill them in the OpenList single sign-on configuration.
30+
Remember to write and save the background parameters of OpenList. After writing and saving, you have to go back to the bottom of the personal data and there will be a button that needs to be bound, otherwise it cannot be used
31+
32+
:::
33+
34+
::: zh-CN
35+
::: warning
36+
若想使用Google登录，首选需要你搭建OpenList的机器能连接访问Google才可以调用使用，不然连接不上无法使用
37+
:::
38+
::: zh-CN
39+
40+
1. 首先打开 **https://console.cloud.google.com/projectselector2/apis/dashboard?hl=zh-cn**
41+
2. 如果是第一次使用需要先新建一个项目（随便写就行，如果已创建跳过）
42+
3. 然后配置[同意屏幕](#同意屏幕配置)（如何配置文档中有单独说明，如果已经配置好跳过）
43+
4. 配置好统一屏幕后我们点左侧的凭据，创建凭据，选择OAuth 客户端ID
44+
45+
- 应用类型 选择 Web 应用，名称随便写
46+
- 然后在 已获授权的重定向 URI 添加我们的两个回调参数
47+
48+
```bash title="回调参数示例"
49+
http://127.0.0.1:5244/api/auth/sso_callback?method=get_sso_id
50+
http://127.0.0.1:5244/api/auth/sso_callback?method=sso_get_token
51+
```
52+
53+
- 大家使用的时候写 **http(s):\//自己域名/api/auth/sso_callback?method=get_sso_id**
54+
- 大家使用的时候写 **http(s):\//自己域名/api/auth/sso_callback?method=sso_get_token**
55+
填写好后，点击创建就能拿到 OAuth的客户端ID和秘钥
56+
- （在这里如果你不小心关闭了也没关系，点击我们创建的应用名称进去在右上的位置就能看到）
57+
客户端ID和秘钥我们都拿到了填写到OpenList单点登录配置里面去即可
58+
OpenList 后台参数也记得写好保存，写好保存后也要回到个人资料下方会有一个需要绑定的按钮进行绑定，否则无法使用
59+
60+
:::
61+
62+
#### 3.4.1. Agree to screen configuration { lang="en" }
63+
64+
#### 3.4.1. 同意屏幕配置 { lang="zh-CN" }
65+
66+
::: en
67+
If it has been configured, just ignore this picture (you can zoom in if you can’t see it clearly)
68+
![google-oauth-00](/img/drivers/google/google-oauth-eng-00.png)
69+
![google-oauth-01](/img/drivers/google/google-oauth-eng-01.png)
70+
![google-oauth-02](/img/drivers/google/google-oauth-eng-02.png)
71+
:::
72+
::: zh-CN
73+
如已配置好 忽略本图即可(如果看不清楚可以放大)
74+
![google-oauth-00](/img/drivers/google/google-oauth-00.png)
75+
![google-oauth-01](/img/drivers/google/google-oauth-01.png)
76+
![google-oauth-02](/img/drivers/google/google-oauth-02.png)
77+
:::
78+
79+
#### 3.4.2. Completely fill in the reference schematic { lang="en" }
80+
81+
#### 3.4.2. 完整填写参考示意图 { lang="zh-CN" }
82+
83+
::: en
84+
![sso](/img/advanced/google.png)
85+
:::
86+
::: zh-CN
87+
![sso](/img/advanced/google.png)
88+
:::

‎pages/guide/advanced/sso/05-Casdoor.md‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
### 3.5. Casdoor { lang="en" }
2+
3+
### 3.5. Casdoor { lang="zh-CN" }
4+
5+
::: en
6+
What is `Casdoor`? Yes, you can use other OAuth applications to log in. [**Self-deployment**](https://casdoor.org/docs/basic/server-installation) is open source and free, and official hosting requires payment.
7+
8+
Now, Casdoor supports many OAuth application providers, as many as dozens of kinds, you have seen and not seen
9+
10+
**GitHub open source link: https://github.com/casdoor/casdoor**
11+
12+
After we enter `Casdoor`, we first create **Organization**<sup>1</sup>, **Token**<sup>2</sup>, **Application**<sup>3</sup>, **User**<sup>4</sup>
13+
14+
Do not use the default organization (**app-built-in**) directly, because all users in this organization are global administrator accounts
15+
16+
Then fill in the `OpenList` backstage single sign-on option one by one. The user’s parameters are ignored for the time being. They are filled in when the personal data is bound to the single sign-on.
17+
18+
![sso](/img/advanced/casdoor.png)
19+
20+
After filling in the above parameters, we come to the personal data and click `Bind point single sign-on platform` to bind
21+
22+
Then the `Casdoor` window will pop up, we can enter our registered user name
23+
24+
![sso](/img/advanced/casdoor-user.png)
25+
26+
:::
27+
28+
::: zh-CN
29+
`Casdoor` 是什么？ 是可以使用其他 OAuth 应用程序登录，[**自行部署**](https://casdoor.org/zh/docs/basic/server-installation)开源免费，使用他们官方托管是需要付费的。
30+
31+
现在，Casdoor 支持许多OAuth 应用程序提供者，多达几十种，你见过的没见过的都有
32+
33+
**GitHub开源链接：https://github.com/casdoor/casdoor**
34+
35+
我们进入`Casdoor`后，首先分别新建一下 **组织**<sup>1</sup>，**令牌**<sup>2</sup>，**应用**<sup>3</sup>，**用户**<sup>4</sup>
36+
37+
请勿直接使用默认组织(**app-built-in**),因为这个组织内的用户都是全局管理员帐号
38+
39+
然后依次填写到`OpenList`后台单点登录选项内，用户的参数暂时不用管，是在个人资料绑定单点登录的时候填写的
40+
41+
![sso](/img/advanced/casdoor.png)
42+
43+
以上参数填写好后，我们来到个人资料这里点击`绑定点单登录平台`，进行绑定
44+
45+
然后弹出`Casdoor`窗口，我们输入我们注册的用户名即可
46+
47+
![sso](/img/advanced/casdoor-user.png)
48+
49+
:::
50+
51+
#### 3.5.1. Access some other vendors on Casdoor { lang="en" }
52+
53+
#### 3.5.1. 在Casdoor接入一些其他的厂商 { lang="zh-CN" }
54+
55+
::: en
56+
In addition to the four that `OpenList` has already connected to `GitHub Dingding Google Microsoft`, it is also connected to `QQ Baidu Feishu WeChat/Enterprise WeChat Douyin Bilibili` and so on, all [**click Check out all the manufacturers that can be accessed here**](https://casdoor.org/docs/provider/oauth/overview), of course, the four that `OpenList` has already accessed can also be added to `Casdoor`
57+
58+
**View detailed tutorials on accessing other providers: [https://anwen-anyi.github.io/index/09-ssologin.html](https://anwen-anyi.github.io/index/09-ssologin.html)**
59+
:::
60+
::: en
61+
::: details Direct iframe viewing
62+
63+
<iframe src="https://anwen-anyi.github.io/index/09-ssologin.html#%E6%8E%A5%E5%85%A5" name="iframe_a" scrolling="ok" frameborder="0" width="100%" height="1000" style="scrolling: no;1px solid #ccc; border-radius: 16px;"></iframe>
64+
65+
:::
66+
67+
::: zh-CN
68+
除了现在`OpenList`已经接入的 `GitHub 钉钉 谷歌 微软 `这四个除外还接入`QQ 百度 飞书 微信/企业微信 抖音 哔哩哔哩`等等等个，全部的[**点击这里查看全部可以接入的厂商**](https://casdoor.org/zh/docs/provider/oauth/overview)，当然了`OpenList`已经接入的四个也是可以添加到`Casdoor`
69+
70+
**查看详细接入其它提供商教程: [https://anwen-anyi.github.io/index/09-ssologin.html](https://anwen-anyi.github.io/index/09-ssologin.html)**
71+
72+
::: zh-CN
73+
::: details 直接 iframe 查看
74+
75+
<iframe src="https://anwen-anyi.github.io/index/09-ssologin.html#%E6%8E%A5%E5%85%A5" name="iframe_a" scrolling="ok" frameborder="0" width="100%" height="1000" style="scrolling: no;1px solid #ccc; border-radius: 16px;"></iframe>
76+
77+
:::

0 commit comments

Comments
 (0)