RuoYi

Casdoor는 RuoYi-cloud와 쉽게 통합할 수 있습니다.

1단계: Casdoor 배포

먼저, Casdoor를 배포합니다.

서버 설치에 대해서는 Casdoor 공식 문서를 참조하실 수 있습니다. Server Installation.

성공적인 배포 후, 다음을 확인하십시오:

Casdoor 서버는 http://localhost:8000에서 실행 중입니다.
선호하는 브라우저를 열고 http://localhost:7001을 방문하여 Casdoor 로그인 페이지에 접속하십시오.
admin과 123을 입력하여 로그인 기능을 테스트하십시오.

다음으로, 이 단계를 따라 자신의 앱에서 Casdoor 기반 로그인 페이지를 빠르게 구현할 수 있습니다.

2단계: Casdoor 설정

Casdoor를 설정하려면 다음 단계를 따르십시오:

여기를 클릭하여 브라우저에서 Casdoor를 엽니다. 개발 브라우저와 다른 브라우저를 사용하는 것이 좋습니다.
Casdoor에서 조직, 애플리케이션, 동기화 도구를 설정하십시오. 이 작업을 어떻게 수행하는지에 대한 자세한 지침은 여기에서 찾을 수 있습니다.

다음은 몇 가지 추가적으로 유의해야 할 사항입니다:

syncer를 편집할 때 테이블 열을 확인하십시오: .
조직을 편집할 때 올바른 비밀번호 유형을 선택하십시오: .
마지막으로, 소프트 삭제를 활성화했는지 확인하십시오.

Casdoor를 올바르게 설정하기 위해 이 지침을 정확히 따르십시오.

3단계. 프론트엔드를 개편하십시오

3.1 Casdoor의 로그인 페이지로 이동

우리는 프론트엔드 SDK를 사용할 수 있으며, 여기서는 vue-sdk를 예로 들겠습니다. vue-sdk를 초기화한 후에는 getSigninUrl() 함수를 사용하여 Casdoor 로그인 페이지 URL을 얻을 수 있습니다.

원하는 방식으로 연결할 수 있으며, 더 이상 필요하지 않은 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 동기화 도구를 사용하여 데이터베이스 사용자를 Casdoor 조직으로 복사합니다. 이렇게 하면 원래 계정이 Casdoor로 가져옵니다.
Casdoor를 배포한 후에는 프론트엔드에 변경 사항을 적용합니다. RuoYi 체크 코드를 비활성화합니다.
RuoYi-Cloud 캡차가 Nacos에서 다시 비활성화되어야 한다는 점에 유의하십시오. 또한, RuoYi-Cloud 등록 기능은 sys.account.registerUser를 true로 설정함으로써 활성화해야 합니다.
Casdoor로 로그인 할 수 있는 버튼을 추가하고, 데이터의 loginForm을 수정하세요.
여기에서 URL을 작성했지만, Casdoor-Vue-SDK 또는 Casdoor-SpringBoot-SDK를 사용하여 얻을 수 있습니다.

기존의 로그인 방법을 더 이상 사용하지 않으므로, 쿠키와 체크코드 방법을 삭제하세요.

새로운 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: 자세한 단계​