RuoYi

Casdoor สามารถรวมเข้ากับ RuoYi-cloud ได้อย่างง่ายดาย

ขั้นตอนที่ 1: ติดตั้ง Casdoor

ขั้นแรก, ติดตั้ง Casdoor

คุณสามารถอ้างอิงเอกสารอย่างเป็นทางการของ Casdoor สำหรับ การติดตั้งเซิร์ฟเวอร์.

หลังจากติดตั้งเสร็จสิ้น, ตรวจสอบให้แน่ใจว่าต่อไปนี้:

เซิร์ฟเวอร์ Casdoor กำลังทำงานที่ http://localhost:8000.
เปิดเบราว์เซอร์ที่คุณชื่นชอบและเยี่ยมชม http://localhost:7001 เพื่อเข้าถึงหน้าเข้าสู่ระบบ Casdoor
ทดสอบฟังก์ชันการเข้าสู่ระบบโดยการป้อน admin และ 123.

ต่อไป, คุณสามารถรวดเร็วในการทำหน้าเข้าสู่ระบบที่ใช้ Casdoor ในแอปของคุณโดยทำตามขั้นตอนเหล่านี้

ขั้นตอนที่ 2: ตั้งค่า Casdoor

เพื่อตั้งค่า Casdoor, โปรดทำตามขั้นตอนเหล่านี้:

เปิด Casdoor ในเบราว์เซอร์โดยคลิก ที่นี่. แนะนำให้ใช้เบราว์เซอร์ที่แตกต่างจากเบราว์เซอร์การพัฒนาของคุณ
ตั้งค่าองค์กร, แอปพลิเคชัน และ Synchronizer ใน Casdoor คุณสามารถหาคำแนะนำอย่างละเอียดเกี่ยวกับวิธีทำนี้ ที่นี่.

นี่คือบางสิ่งที่ควรจำไว้:

เมื่อแก้ไข syncer, ตรวจสอบให้แน่ใจว่าได้ตรวจสอบคอลัมน์ตาราง: .
เมื่อแก้ไของค์กร, ตรวจสอบให้แน่ใจว่าได้เลือกประเภทรหัสผ่านที่ถูกต้อง: .
สุดท้าย, ตรวจสอบให้แน่ใจว่าคุณได้เปิดใช้งานการลบอย่างอ่อนโยน

โปรดตรวจสอบให้แน่ใจว่าคุณได้ทำตามคำแนะนำเหล่านี้อย่างระมัดระวังเพื่อตั้งค่า Casdoor อย่างถูกต้อง

ขั้นตอนที่ 3. ปรับปรุงส่วนหน้าของคุณ

3.1 ไปยังหน้าเข้าสู่ระบบของ Casdoor

เราสามารถใช้ SDK ส่วนหน้า, ใช้ vue-sdk เป็นตัวอย่างที่นี่ หลังจากที่คุณเริ่มต้น vue-sdk, คุณสามารถรับ URL หน้าเข้าสู่ระบบ Casdoor โดยใช้ฟังก์ชัน getSigninUrl()

คุณสามารถเชื่อมโยงมันในวิธีที่คุณต้องการ, และอย่าลังเลที่จะลบโค้ดเดิมจาก Ruoyi-Cloud ที่ไม่จำเป็นอีกต่อไป, เช่น บัญชีเดิมและรหัสผ่าน el-input

3.2 รับรหัสและสถานะที่ Casdoor ส่งกลับมา

หลังจากเข้าสู่ระบบผ่าน Casdoor สำเร็จ, Casdoor จะส่งรหัสและสถานะไปยังหน้าที่เราตั้งค่าไว้ เราสามารถเรียกคืนรหัสและสถานะโดยใช้ฟังก์ชัน create()

created() {
    let url = window.document.location.href; // get URL
    let u = new URL(url);
    this.loginForm.code = u.searchParams.get('code'); // get code and state
    this.loginForm.state = u.searchParams.get('state');
    if (this.loginForm.code != null && this.loginForm.state != null) { // if code and state are not null, execute handleLogin
      this.handleLogin();
    }  
}

สำหรับ RuoYi-Cloud, เราเพียงแค่ปรับเปลี่ยนวิธีเดิมของการส่งบัญชีและรหัสผ่านเป็นการส่งรหัสและสถานะแทน ดังนั้น, การเปลี่ยนแปลงนั้นอยู่ที่สิ่งที่ส่งไปยังแบ็กเอนด์เท่านั้น, เกี่ยวข้องกับการเข้าสู่ระบบเดิม

ขั้นตอนที่ 4: ปรับโครงสร้างแบ็กเอนด์ของคุณ

4.1 รับรหัสและสถานะที่ส่วนหน้าส่งกลับมา

@PostMapping("login")
public R<?> callback(@RequestBody CodeBody code) {
    String token = casdoorAuthService.getOAuthToken(code.getCode(), code.getState());
    CasdoorUser casdoorUser = casdoorAuthService.parseJwtToken(token);
    if (casdoorUser.getName() != null) {
        String casdoorUserName = casdoorUser.getName();
        if (sysLoginService.getUserByCasdoorName(casdoorUserName) == null) {
            sysLoginService.casdoorRegister(casdoorUserName); // Add this user to the database if they don't exist
        }
    }
    LoginUser userInfo = sysLoginService.casdoorLogin(casdoorUser.getName()); // Get the user's information from the database
    return R.ok(tokenService.createToken(userInfo));
}

ในวิธีนี้, เรากำลังใช้วิธี casdoor-SpringBoot-sdk และทำการปรับเปลี่ยนเล็กน้อยกับวิธี RuoYi-Cloud

ตัวอย่างเช่น, วิธีเดิมของ RuoYi-Cloud ลงทะเบียนบัญชีด้วยรหัสผ่าน ฉันได้เปลี่ยนมันเป็นการลงทะเบียนบัญชีโดยใช้วิธี casdoorRegister

ฉันยังได้เพิ่มวิธี getUserByCasdoorName เพื่อตรวจสอบว่าบัญชีมีอยู่หรือไม่, และเปลี่ยนวิธี executeUserInfo เป็น executeWithAccount เพื่อสะท้อนการเปลี่ยนแปลงนี้

นี่เป็นการปรับเปลี่ยนที่ง่าย, เนื่องจากเราเพียงแค่ต้องลบส่วนที่ตรวจสอบรหัสผ่าน

ขั้นตอนที่ 5: สรุป

5.1 ส่วนหน้า

หน้าเข้าสู่ระบบและลงทะเบียนที่มีอยู่ต้องถูกลบออก
นอกจากนี้, ส่วนหน้าต้องรับพารามิเตอร์รหัสและสถานะและส่งมันไปยังแบ็กเอนด์

5.2 แบ็กเอนด์

แบ็กเอนด์ RuoYi มีฟังก์ชันการเข้าสู่ระบบและการลงทะเบียนที่ดำเนินการได้ดีแล้ว เราเพียงแค่ต้องทำการปรับเปลี่ยนเล็กน้อย, ซึ่งทำให้กระบวนการนี้สะดวกมาก

ขั้นตอนที่ 6: ขั้นตอนอย่างละเอียด

ติดตั้งและตั้งค่า Casdoor ตรวจสอบให้แน่ใจว่าเลือกประเภทรหัสผ่าน bcrypt สำหรับองค์กร, เนื่องจาก RuoYi-Cloud ก็ใช้ bcrypt สำหรับรหัสผ่านเช่นกัน
ใช้ Casdoor syncers เพื่อคัดลอกผู้ใช้ฐานข้อมูลไปยังองค์กร Casdoor ของคุณ นี่จะนำเข้าบัญชีเดิมไปยัง Casdoor
หลังจากติดตั้ง Casdoor, ทำการเปลี่ยนแปลงส่วนหน้า ปิดใช้งาน check code ของ RuoYi
โปรดทราบว่าต้องปิดใช้งาน captcha ของ RuoYi-Cloud ใน Nacos อีกครั้ง นอกจากนี้, ฟังก์ชันการลงทะเบียนของ RuoYi-Cloud ต้องเปิดใช้งานโดยการตั้งค่า sys.account.registerUser เป็น true
เพิ่มปุ่มให้ผู้ใช้เข้าสู่ระบบด้วย Casdoor, และปรับเปลี่ยนข้อมูล loginForm
ที่นี่, ฉันได้เขียน URL, แต่คุณสามารถรับมันโดยใช้ Casdoor-Vue-SDK หรือ Casdoor-SpringBoot-SDK

เนื่องจากเราไม่ได้ใช้วิธีการเข้าสู่ระบบเดิมอีกต่อไป, ลบวิธีการ cookie และ checkcode

ฟังก์ชัน created ใหม่ควรมีลักษณะดังนี้:

created() {
    let url = window.document.location.href; // Get the URL
    let u = new URL(url);
    this.loginForm.code = u.searchParams.get('code'); // Get the code and state
    this.loginForm.state = u.searchParams.get('state');
    if (this.loginForm.code != null && this.loginForm.state != null) { // If code and state are not null, execute handleLogin
        this.handleLogin();
    }  
}

จริงๆ แล้วเราเพียงแค่ต้องเปลี่ยนพารามิเตอร์ที่เราส่งไปยังแบ็กเอนด์และลบฟังก์ชันที่ไม่จำเป็น ไม่จำเป็นต้องมีการเปลี่ยนแปลงอื่นๆ
นำเข้าการพึ่งพาที่จำเป็นในแบ็กเอนด์
pom.xml
```
<dependency>
    <groupId>org.casbin</groupId>
    <artifactId>casdoor-spring-boot-starter</artifactId>
    <version>1.2.0</version>
</dependency>
```
คุณยังต้องตั้งค่า Casdoor ในไฟล์ทรัพยากร

กำหนดฟังก์ชันย้อนกลับเป็นฟังก์ชันเปลี่ยนทิศทาง ทำการเปลี่ยนแปลงบางวิธีใน sysLoginService ลบขั้นตอนการตรวจสอบรหัสผ่านเพราะไม่จำเป็นอีกต่อไป

@PostMapping("login")
public R<?> callback(@RequestBody CodeBody code) {
    // Define a CodeBody entity with code and state
    String token = casdoorAuthService.getOAuthToken(code.getCode(), code.getState());
    CasdoorUser casdoorUser = casdoorAuthService.parseJwtToken(token);
    if (casdoorUser.getName() != null) {
        String casdoorUserName = casdoorUser.getName();
        if (sysLoginService.getUserByCasdoorName(casdoorUserName) == null) {
            // If the user is not in the RuoYi-Cloud database but exists in Casdoor, create the user in the database
            sysLoginService.casdoorRegister(casdoorUserName);
        }
    }
    LoginUser userInfo = sysLoginService.casdoorLogin(casdoorUser.getName());
    // Get the user's information from the database
    return R.ok(tokenService.createToken(userInfo));
}

เพิ่มวิธีใหม่ใน SysLoginService

public LoginUser casdoorLogin(String username) {
    R<LoginUser> userResult = remoteUserService.getUserInfo(username, SecurityConstants.INNER);
    // Execute the user
    if (R.FAIL == userResult.getCode()) {
        throw new ServiceException(userResult.getMsg());
    }

    if (StringUtils.isNull(userResult) || StringUtils.isNull(userResult.getData())) {
        recordLogService.recordLogininfor(username, Constants.LOGIN_FAIL, "This user does not exist");
        throw new ServiceException("User " + username + " does not exist");
    }
    LoginUser userInfo = userResult.getData();
    SysUser user = userResult.getData().getSysUser();
    if (UserStatus.DELETED.getCode().equals(user.getDelFlag())) {
        recordLogService.recordLogininfor(username, Constants.LOGIN_FAIL, "Sorry, your account has been deleted");
        throw new ServiceException("Sorry, your account " + username + " has been deleted");
    }
    if (UserStatus.DISABLE.getCode().equals(user.getStatus())) {
        recordLogService.recordLogininfor(username, Constants.LOGIN_FAIL, "Your account is disabled. Please contact the administrator");
        throw new ServiceException("Sorry, your account " + username + " is disabled");
    }
    recordLogService.recordLogininfor(username, Constants.LOGIN_SUCCESS, "Login successful");
    return userInfo;
}

public String getUserByCasdoorName(String casdoorUsername) {
    R<LoginUser> userResult = remoteUserService.getUserInfo(casdoorUsername, SecurityConstants.INNER);
    if (StringUtils.isNull(userResult) || StringUtils.isNull(userResult.getData())) {
        // If the user is not in the RuoYi-Cloud database but exists in Casdoor, create the user in the database
        return null;
    }
    String username = userResult.getData().getSysUser().getUserName();
    return username;
}

public void casdoorRegister(String username) {
    if (StringUtils.isAnyBlank(username)) {
        throw new ServiceException("User must provide a username");
    }
    SysUser sysUser = new SysUser();
    sysUser.setUserName(username);
    sysUser.setNickName(username);
    R<?> registerResult = remoteUserService.registerUserInfo(sysUser, SecurityConstants.INNER);
    System.out.println(registerResult);
    if (R.FAIL == registerResult.getCode()) {
        throw new ServiceException(registerResult.getMsg());
    }
    recordLogService.recordLogininfor(username, Constants.REGISTER, "Registration successful");
}

ขั้นตอนที่ 1: ติดตั้ง Casdoor​

ขั้นตอนที่ 2: ตั้งค่า Casdoor​

ขั้นตอนที่ 3. ปรับปรุงส่วนหน้าของคุณ​

3.1 ไปยังหน้าเข้าสู่ระบบของ Casdoor​

3.2 รับรหัสและสถานะที่ Casdoor ส่งกลับมา​

ขั้นตอนที่ 4: ปรับโครงสร้างแบ็กเอนด์ของคุณ​

4.1 รับรหัสและสถานะที่ส่วนหน้าส่งกลับมา​

ขั้นตอนที่ 5: สรุป​

5.1 ส่วนหน้า​

5.2 แบ็กเอนด์​

ขั้นตอนที่ 6: ขั้นตอนอย่างละเอียด​