docs: Complete installation documentation for casibase (#11)

* docs: Complete installation documentation for casibase * docs: Complete installation documentation for casibase
casbin · Sep 11, 2023 · 887dec8 · 887dec8
1 parent 8bbe667
commit 887dec8
Show file tree

Hide file tree

Showing 12 changed files with 63 additions and 34 deletions.
diff --git a/docs/basic/casdoor-sso.md b/docs/basic/casdoor-sso.md
@@ -1,41 +1,45 @@
 ---
 title: Casdoor-SSO
-description: Introduction of casdoor in casibase
+description: Setup Casdoor for casibase
 keywords: [Casdoor, SSO, Security, Authentication, Authorization]
-authors: [kv-chiu]
+authors: [uestc-wxy]
 ---
 
 ```mdx-code-block
 import styles from '.././styles.module.css';
 import CasdoorCard from "@site/src/components/CasdoorCard";
 ```
 
-## Introduction
+Casibase uses Casdoor as its backend service,so make sure to deploy it in advance.
 
-Casdoor is a powerful and lightweight open-source [Identity Access Management (IAM)](https://en.wikipedia.org/wiki/Identity_management) / [Single-Sign-On (SSO)](https://en.wikipedia.org/wiki/Single_sign-on) server. It's developed and maintained by [**Casbin**](https://casbin.org).
+Please refer to: <https://casdoor.org/docs/basic/server-installation> to install and configure Casdoor.
 
-```mdx-code-block
-<div className={styles.gradientborder}>
-  <CasdoorCard src="https://door.casdoor.com/login" />
-</div>
-```
+Follow these steps to setup Casdoor for casibase:
+
+- Create an Organization
+
+![create-organization](/img/create-organization.png)
+
+- Configure information about the Organization
+
+![configure-organization](/img/configure-organization.png)
+
+- Create a new Application
+
+![create-application](/img/create-application.png)
 
-Casdoor serves both the web UI and the login requests from the application users.
+- Configuring Application Information (Remember Name, ClientID and ClientSecret)
 
-## Features
+![configure-application](/img/configure-application.png)
 
-- **Single-Sign-On (SSO)**: Sign in to multiple applications with one set of login credentials.
-- **Social Login**: Sign in with GitHub, Google, etc.
-- **Integrated Provider Management**: Manage all your providers in one place.
-- **Authentication**: Verify the identity of your users.
+- Add a member to the newly created organization
 
-![Principle](/img/principles.gif)
+![add-user](/img/add-user-1.png)
 
-:::tip
+![add-user](/img/add-user-2.png)
 
-Casibase manages third-party service providers through Casdoor:
+- Configure member information (remember its Name as well as Password)
 
-- **Storage**: Manage your storage providers, such as AWS, Azure, etc.
-- **AI**: Manage your chat providers, such as OpenAI, ChatGLM, etc.
+![configure-user](/img/configure-user-1.png)
 
-:::
+![configure-user](/img/configure-user-2.png)
diff --git a/docs/basic/server-installation.md b/docs/basic/server-installation.md
@@ -2,7 +2,7 @@
 title: Server Installation
 description: Install and configure Casdoor server
 keywords: [Casibase server, installation, configuration]
-authors: [kv-chiu]
+authors: [kv-chiu, uestc-wxy]
 ---
 
 ## Requirements
@@ -65,6 +65,12 @@ git clone https://github.com/casbin/casibase
 
 ## Configuration
 
+### Configure Casdoor
+
+Please refer to: <https://casibase.org/docs/basic/casdoor-sso> to configure Casdoor.
+
+Remember your `clientId`、`clientSecret`、`organization`、`application` and so on in Casdoor configuration, we will use them later.
+
 ### Configure Database
 
 Casibase supports mysql, mssql, sqlite3, postgres. Casibase uses mysql by default.
@@ -123,6 +129,29 @@ dataSourceName = "file:casibase.db?cache=shared"
 dbName = casibase
 ```
 
+### Custom configuration
+
+Casibase supports custom configuration, you can modify the configuration file `conf/app.conf` to change the configuration.
+
+- Backend (casibase\conf\app.conf)
+
+```ini
+casdoorEndpoint =  http://localhost:8000
+clientId = <Your_clientId_in_Casdoor_configuration>
+clientSecret = <Your_clientSecret_in_Casdoor_configuration>
+casdoorOrganization = casibase
+casdoorApplication = app-casibase
+```
+
+- Frontend (casibase\web\src\Conf.js)
+
+```js
+serverUrl: "http://localhost:7001"
+clientId: "<Your_clientId_in_Casdoor_configuration>" 
+appName: "app-casibase"
+organizationName: "casibase"
+```
+
 ## Run
 
 There are currently two methods to start, you can choose one according to your own situation.
@@ -159,13 +188,6 @@ yarn install
 yarn start
 ```
 
-Visit: `http://localhost:13001` in your browser. Log into Casibase dashboard with the default global admin account: `built-in/admin`
-
-```bash
-admin
-123
-```
-
 ### Production mode
 
 #### Backend
@@ -196,12 +218,15 @@ yarn install
 yarn build
 ```
 
-Visit: `http://localhost:14000` in your browser. Log into Casibase dashboard with the default global admin account: `built-in/admin`
+## Preview
 
-```bash
-admin
-123
-```
+Visit: `http://localhost:13001` in your browser. Login into Casibase dashboard with the user account you have just registered in Casdoor:
+
+![login](/img/login-casibase.png)
+
+Then you will go to the home page of Casibase:
+
+![home](/img/casibase-home.png)
 
 :::tip
 

diff --git a/static/img/add-user-1.png b/static/img/add-user-1.png
diff --git a/static/img/add-user-2.png b/static/img/add-user-2.png
diff --git a/static/img/casibase-home.png b/static/img/casibase-home.png
diff --git a/static/img/configure-application.png b/static/img/configure-application.png
diff --git a/static/img/configure-organization.png b/static/img/configure-organization.png
diff --git a/static/img/configure-user-1.png b/static/img/configure-user-1.png
diff --git a/static/img/configure-user-2.png b/static/img/configure-user-2.png
diff --git a/static/img/create-application.png b/static/img/create-application.png
diff --git a/static/img/create-organization.png b/static/img/create-organization.png
diff --git a/static/img/login-casibase.png b/static/img/login-casibase.png