Spring Security

Casdoor can use OIDC protocol as IDP to connect various applications. Here we will use Spring Security as an example to show you how to use OIDC to connect to your applications.

Step1. Deploy Casdoor

Firstly, the Casdoor should be deployed.

You can refer to the Casdoor official documentation for the Server Installation.

After a successful deployment, you need to ensure:

  • The Casdoor server is successfully running on http://localhost:8000.
  • Open your favorite browser and visit http://localhost:7001, you will see the login page of Casdoor.
  • Input admin and 123 to test login functionality is working fine.

Then you can quickly implement a casdoor based login page in your own app with the following steps.

Step2. Configure Casdoor application

  1. Create or use an existing Casdoor application.
  2. Add Your redirect url Casdoor Application Setting
  3. Add provider you want and supplement other settings.

Not surprisingly, you can get two values ​​on the application settings page: Client ID and Client secret like the picture above, we will use them in next step.

Open your favorite browser and visit: http://`CASDOOR_HOSTNAME`/.well-known/openid-configuration, you will see the OIDC configure of Casdoor.

Step3. Configure Spring Security

Spring Security natively support OIDC.

You can customize the settings of Spring Security OAuth2 Client:

caution

You should replace the configuration with your own Casdoor instance especially the <Client ID> and others.

  • application.yml
  • application.properties
  1. spring:
  2.   security:
  3.     oauth2:
  4.       client:
  5.         registration:
  6.           casdoor:
  7.             client-id: <Client ID>
  8.             client-secret: <Client Secret>
  9.             scope: <Scope>
  10.             authorization-grant-type: authorization_code
  11.             redirect-uri: <Redirect URL>
  12.         provider:
  13.           casdoor:
  14.             authorization-uri: http://CASDOOR_HOSTNAME:7001/login/oauth/authorize
  15.             token-uri: http://CASDOOR_HOSTNAME:8000/api/login/oauth/access_token
  16.             user-info-uri: http://CASDOOR_HOSTNAME:8000/api/get-account
  17.             user-name-attribute: name
  1. spring.security.oauth2.client.registration.casdoor.client-id=<Client ID>
  2. spring.security.oauth2.client.registration.casdoor.client-secret=<Client Secret>
  3. spring.security.oauth2.client.registration.casdoor.scope=<Scope>
  4. spring.security.oauth2.client.registration.casdoor.authorization-grant-type=authorization_code
  5. spring.security.oauth2.client.registration.casdoor.redirect-uri=<Redirect URL>
  7. spring.security.oauth2.client.provider.casdoor.authorization-uri=http://CASDOOR_HOSTNAME:7001/login/oauth/authorize
  8. spring.security.oauth2.client.provider.casdoor.token-uri=http://CASDOOR_HOSTNAME:8000/api/login/oauth/access_token
  9. spring.security.oauth2.client.provider.casdoor.user-info-uri=http://CASDOOR_HOSTNAME:8000/api/get-account
  10. spring.security.oauth2.client.provider.casdoor.user-name-attribute=name

You can also customize the settings by ClientRegistration in your code. You can find the mapping here

Step4. Get Started with A Demo

  1. We can create a Spring Boot application.

  2. We can add a configuration which protects all endpoints except / and /login** for users to log in.

  1. @EnableWebSecurity
  2. public class UiSecurityConfig extends WebSecurityConfigurerAdapter {
  4.     @Override
  5.     protected void configure(HttpSecurity http) throws Exception {
  6.         http.authorizeRequests().antMatchers("/", "/login**").permitAll().anyRequest().authenticated().and()
  7.                 .oauth2Login();
  9.     }
  10. }
  1. We can add a naive page for user to log in.
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Spring OAuth Client Thymeleaf - 1</title>
  6. <link rel="stylesheet"
  7.     href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
  8. </head>
  9. <body>
  10.     <nav
  11.         class="navbar navbar-expand-lg navbar-light bg-light shadow-sm p-3 mb-5">
  12.         <a class="navbar-brand" th:href="@{/foos/}">Spring OAuth Client
  13.             Thymeleaf - 1</a>
  14.     </nav>
  15.     <div class="container">
  16.         <label>Welcome ! </label> <br /> <a th:href="@{/foos/}"
  17.             class="btn btn-primary">Login</a>
  18.     </div>
  19. </body>
  20. </html>

When user clicks the login button, he will be redirected to casdoor.

  1. Next, we can define our protected resource. We can export an endpoint called /foos and a web page for display.

Data Model

  1. public class FooModel {
  2.     private Long id;
  3.     private String name;
  5.     public FooModel(Long id, String name) {
  6.         super();
  7.         this.id = id;
  8.         this.name = name;
  9.     }
  10.     public Long getId() {
  11.         return id;
  12.     }
  13.     public void setId(Long id) {
  14.         this.id = id;
  15.     }
  16.     public String getName() {
  17.         return name;
  18.     }
  19.     public void setName(String name) {
  20.         this.name = name;
  21.     }
  22. }

Controller

  1. @Controller
  2. public class FooClientController {
  3.     @GetMapping("/foos")
  4.     public String getFoos(Model model) {
  5.         List<FooModel> foos = new ArrayList<>();
  6.         foos.add(new FooModel(1L, "a"));
  7.         foos.add(new FooModel(2L, "b"));
  8.         foos.add(new FooModel(3L, "c"));
  9.         model.addAttribute("foos", foos);
  10.         return "foos";
  11.     }
  12. }

Web page

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Spring OAuth Client Thymeleaf - 1</title>
  6. <link rel="stylesheet"
  7.     href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
  8. </head>
  9. <body>
  10.     <nav
  11.         class="navbar navbar-expand-lg navbar-light bg-light shadow-sm p-3 mb-5">
  12.         <a class="navbar-brand" th:href="@{/foos/}">Spring OAuth Client
  13.             Thymeleaf -1</a>
  14.         <ul class="navbar-nav ml-auto">
  15.             <li class="navbar-text">Hi, <span sec:authentication="name">preferred_username</span>&nbsp;&nbsp;&nbsp;
  16.             </li>
  17.         </ul>
  18.     </nav>
  19.     <div class="container">
  20.         <h1>All Foos:</h1>
  21.         <table class="table table-bordered table-striped">
  22.             <thead>
  23.                 <tr>
  24.                     <td>ID</td>
  25.                     <td>Name</td>
  26.                 </tr>
  27.             </thead>
  28.             <tbody>
  29.                 <tr th:if="${foos.empty}">
  30.                     <td colspan="4">No foos</td>
  31.                 </tr>
  32.                 <tr th:each="foo : ${foos}">
  33.                     <td><span th:text="${foo.id}"> ID </span></td>
  34.                     <td><span th:text="${foo.name}"> Name </span></td>
  35.                 </tr>
  36.             </tbody>
  37.         </table>
  38.     </div>
  39. </body>
  40. </html>
caution

All the web page template should be put under resources/templates.

Step5. Try the demo!

Firstly, you can try to open your favorite browser and directly visit /foos. It will automatically redirect to casdoor’s login page. You can log in here or from the root page.

If you visit your root page, Casdoor Application Setting

Click the login button and the page will redirect to casdoor’s login page. Casdoor Application Setting

After you log in, the page will redirect to /foos. Casdoor Application Setting