RuoYi

CasdoorはRuoYi-cloudと簡単に統合できます。

ステップ1：Casdoorをデプロイする

まず、Casdoorをデプロイします。

サーバーインストールについては、Casdoor公式ドキュメントを参照してください。

デプロイに成功したら、以下を確認してください：

Casdoorサーバーがhttp://localhost:8000で稼働しています。
お気に入りのブラウザを開いてhttp://localhost:7001にアクセスし、Casdoorのログインページにアクセスしてください。
adminと123を入力してログイン機能をテストしてください。

次に、これらのステップに従って、独自のアプリにCasdoorベースのログインページを迅速に実装できます。

ステップ2：Casdoorを設定する

Casdoorを設定するには、以下の手順に従ってください：

こちらをクリックしてブラウザでCasdoorを開きます。開発用ブラウザとは異なるブラウザを使用することをお勧めします。
Casdoorで組織、アプリケーション、およびSynchronizerを設定します。これについての詳細な手順はこちらで見つけることができます。

ここにいくつかの追加ポイントがあります：

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で再度無効にする必要があることに注意してください。また、sys.account.registerUserをtrueに設定することで、RuoYi-Cloudの登録機能を有効にする必要があります。
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：詳細な手順​