add flarum guide

This commit is contained in:
Pig Fang 2020-06-17 16:45:13 +08:00
parent b2aba9925e
commit a7d39776c5
2 changed files with 190 additions and 0 deletions

95
man/en/flarum.md Normal file
View File

@ -0,0 +1,95 @@
# Working with Flarum
Blessing Skin provides an OAuth Server, so we've written a Flarum extension. Using with this extension, Flarum will be an OAuth client and fetch user data from Blessing Skin.
## Create an OAuth app
We need to create an OAuth app in Blessing Skin first. Click "Advanced" then click "OAuth2 Apps", and we can see a OAuth2 applications list.
::: tip Can't find this entry?
This menu item may be hidden by administrators, so you can contact with them. If you're an administrator, disable the "Hide 'Advanced' Menu" plugin temporarily. Once you've configured it, re-enable this plugin.
:::
![Screenshot_20200617_152742.png](https://i.loli.net/2020/06/17/XUfMYyp5rhoq3ZK.png)
Then, click the "Create New App" button:
![Screenshot_20200613_184527.png](https://i.loli.net/2020/06/17/ryNZIEPBHJcVFbw.png)
Fill in the form like below:
![Screenshot_20200617_113231.png](https://i.loli.net/2020/06/17/zfgrZ3OFG5Nkb6x.png)
The "App Name" will be shown when asking users to authorize. As for "Callback URL", please change it according to your domain name of your Blessing Skin, but its "pathname" must be `/auth/blessing`.
New app will be shown after you submitted it:
![Screenshot_20200617_113342.png](https://i.loli.net/2020/06/17/vOmqinGHV2IaSkd.png)
So far, we've finished for configuring Blessing Skin.
## Install and enable Flarum extension
Go to the root directory of Flaurm and run this command:
```shell
composer require blessing/flarum-oauth-client
```
Then, go to "Administration" and enable the "Blessing Skin Login" extension:
![Screenshot_20200613_184045.png](https://i.loli.net/2020/06/17/HNvyxn9h7WA2aU6.png)
![Screenshot_20200617_112707.png](https://i.loli.net/2020/06/17/ZQ21YfOyR4Kopbz.png)
## Configure Flarum extension
Once you enabled this extension, a modal dialog will be popped up:
![Screenshot_20200617_145311.png](https://i.loli.net/2020/06/17/pYuvfLwRK94BbCr.png)
Fill in this form. Here, we will state several items of the form above:
- "Blessing Skin root URL": The root URL of your Blessing Skin. For example, we're using `https://localhost/` in this tutorial.
- "OAuth client ID": The ID of the OAuth app you created in Blessing Skin. This ID can be found at OAuth applications list of Blessing Skin. For example, its value is `8` in this tutorial.
- "OAuth client secret": A randomly generated string of the OAuth app you created in Blessing Skin. This secret can be found at OAuth applications list of Blessing Skin.
- "Label for login button": This is optional. Its default value is "Login with Blessing Skin".
- "Icon for login button": This is optional. Its value must be the class name of a Font Awesome icon.
The form can be filled in like this:
![Screenshot_20200617_150802.png](https://i.loli.net/2020/06/17/mz8GBZW9ijlP6AY.png)
## Log in
When users are going to log in, there will be an additional button:
![Screenshot_20200617_150210.png](https://i.loli.net/2020/06/17/Jx1HkOQqZSCi5MX.png)
Click that button (text and icon of that button can be changed at settings), and users can use their existing accounts to log in Flarum.
If a user visits this for the first time, he/she will be asked for authorizing:
![Screenshot_20200617_150922.png](https://i.loli.net/2020/06/17/LDG5EJOSBTNwsg1.png)
Click "Authorize", and Flarum will be able to fetch user's email and nickname.
Note that after authorized, Flarum will not create a new user and log in for that user. Instead, user will be redirected to a simple "Sign Up" form:
![Screenshot_20200617_151050.png](https://i.loli.net/2020/06/17/IQTHk2ZuGDm6s8t.png)
::: warning
Nickname can be duplicated in Blessing Skin. However, username must be unique in Flarum, so you may need to change your username.
:::
Click the "Sign Up" button, you've logged in Flarum with your Blessing Skin account.
![Screenshot_20200617_151121.png](https://i.loli.net/2020/06/17/HtjRkbd6TxhsO8i.png)

95
man/flarum.md Normal file
View File

@ -0,0 +1,95 @@
# 与 Flarum 联动
由于 Blessing Skin 提供了 OAuth 服务器,因此我们为 Flarum 编写了一个扩展extension。利用这个扩展Flarum 将作为 OAuth 客户端并从 Blessing Skin 获取用户数据。
## 创建 OAuth 应用
我们首先需要在 Blessing Skin 中创建一个应用。在页面的左侧菜单栏中依次点击「高级功能」、「OAuth2 应用」,此时将出现 OAuth 应用列表。
::: tip 找不到这个入口?
这个菜单项很有可能是被管理员隐藏了,请联系他们开启。如果您是管理员,可暂时禁用「隐藏「高级功能」菜单」插件,在操作结束后再次启用即可。
:::
![Screenshot_20200617_152726.png](https://i.loli.net/2020/06/17/k3PphunZx1I9Hfa.png)
然后点击「创建应用」:
![Screenshot_20200617_113259.png](https://i.loli.net/2020/06/17/TlPN2KuJOfyzWVt.png)
在弹出的提示框中像这样填写信息:
![Screenshot_20200617_113320.png](https://i.loli.net/2020/06/17/KeInt6zGWojiApr.png)
其中「应用名」将在提示用户进行授权时显示;「回调 URL」中则请根据自己的实际情况修改域名注意是 Flarum 网站所对应的域名),但后面的 pathname 部分必须是 `/auth/blessing`
提交后,列表中会出现刚刚创建的应用的信息:
![Screenshot_20200617_113333.png](https://i.loli.net/2020/06/17/AkultyVjJZGqUHz.png)
至此,我们已经完成了在 Blessing Skin 中的设置。
## 安装并启用 Flarum 扩展
进入到 Flarum 的根目录,执行以下命令:
```shell
composer require blessing/flarum-oauth-client
```
然后进行「后台管理」并启用「Blessing Skin Login」扩展
![Screenshot_20200617_145434.png](https://i.loli.net/2020/06/17/uSA1FMfmwTdyxPV.png)
![Screenshot_20200617_112707.png](https://i.loli.net/2020/06/17/ZQ21YfOyR4Kopbz.png)
## 设置 Flarum 扩展
在启用「Blessing Skin Login」扩展后将弹出扩展设置界面
![Screenshot_20200617_145237.png](https://i.loli.net/2020/06/17/BDyscNdMGASV5gn.png)
表单的各项说明:
- 「Blessing Skin 根 URL」为您的 Blessing Skin 站点根 URL在本文中为 `https://localhost/`
- 「OAuth 客户端 ID」是在 Blessing Skin 中创建应用时生成的 ID这个 ID 可以在 Blessing Skin 的 OAuth 应用列表中被找到,例如本文中为 `8`
- 「OAuth 客户端 Secret」是在 Blessing Skin 中创建应用时生成的随机字符串,这个 secret 可以在 Blessing Skin 的 OAuth 应用列表中被找到;
- 「登录按钮的文本」这一项可以不填,默认为「使用 Blessing Skin 登录」;
- 「登录按钮的图标」这一项可以不填,此项的值必须 Font Awesome 图标的类名。
填写结果如下:
![Screenshot_20200617_150703.png](https://i.loli.net/2020/06/17/BqYxlytQVSLdi63.png)
## 登录
用户在登录时,可以看到登录表单中多出一个按钮:
![Screenshot_20200617_150233.png](https://i.loli.net/2020/06/17/xSLEFZmjPedvGVM.png)
点击「使用 Blessing Skin 登录」按钮(这个按钮的文本和图标可以在设置中被修改),就可以使用现有的 Blessing Skin 账号进行登录。
首次访问时Blessing Skin 将询问用户是否允许授权:
![Screenshot_20200617_150857.png](https://i.loli.net/2020/06/17/ZXPt8oBG7JI9cnQ.png)
点击「授权」Flarum 即可获取到用户的邮箱和昵称。
值得注意的是Flarum 在被授权后并不会自动创建用户并以该用户的身份登录,而是被引导到一个简单的「注册」表单:
![Screenshot_20200617_151030.png](https://i.loli.net/2020/06/17/QiGYojwRWPrxIgf.png)
::: warning
在 Blessing Skin 中,昵称是允许重复出现的,而 Flarum 不允许用户名重复。因此您可能需要根据实际情况修改用户名。
:::
点击「注册」,就实现了使用 Blessing Skin 账号来登录 Flarum 论坛了。
![Screenshot_20200617_151133.png](https://i.loli.net/2020/06/17/XP3awvGK5YFkqeH.png)