Home > Article > Web Front-end > How to use Vue+Jwt+SpringBoot+Ldap to complete login authentication

How to use Vue+Jwt+SpringBoot+Ldap to complete login authentication

php中世界最好的语言Original: 2018-05-28 14:56:264169browse

This time I will show you how to use Vue Jwt SpringBoot Ldap to complete login authentication, and what are the precautions for using Vue Jwt SpringBoot Ldap to complete login authentication. The following is a practical case, let's take a look.

The previous traditional login authentication method basically provided a login page on the server side. A form on the page inputted username and password and then POST to the server. The server compared this information with the user information in DB or Ldap. If successful, the user information will be recorded in the session.

Here I jumped into the first big pit. In the traditional way, the front and back ends are not separated, and the back end is responsible for page rendering. However, when the front and back ends are separated, the back end is only responsible for providing data through the exposed RestApi, and the rendering and routing of the page are completed by the front end. Because REST is stateless, there is no session recorded to the server.

I have been using SpringSecurity Cas Ldap to do SSO before, but after using Vue as the front end, I couldn't think of using the previous method to do SSO (it took me a long time to climb out of this pit). Later, I finally figured out the session problem mentioned above (I think so, but it may be wrong. CAS also has RestApi, but it failed to be configured according to the official website, so I gave up).

The first question is how to solve the SSO problem. Let’s talk about JWT. JWT is a specification, and various languages have implementations in various languages. You can check it on the official website. My superficial understanding is that there is an authentication service (written by yourself, Db or Ldap can be anything). This authentication service will judge whether the authentication is successful based on the user's submitted information. If successful, it will query some user information (user name, role) or something), and then JWT encrypts this information into a token and returns it to the client browser. The browser stores this information in localstorage. Every time it accesses the resource in the future, it will carry this information in the header. The server uses it after receiving the request. Decrypt the ciphertext with the same key as during encryption. If the decryption is successful, the user is deemed to have been authenticated (of course you can add an expiration time during encryption), and SSO is completed. Using the decrypted role information, you can determine whether this user has the authority to perform some services. After doing this, it feels like SpringSecurity and Cas have no effect on SSO in SPA applications. This is what I think at present (it may be wrong of course)

The first problem is almost solved, let’s talk about the second one question. Previously, due to the existence of sessions, if the server did not have the current user's session when accessing protected resources, it would be forced to jump to the login page. How to achieve this requirement when the front and rear are separated. The idea is this: use Vue-Router's global routing hook to first determine whether there is a JWT encrypted token in localStorage and whether the token has expired when accessing any page. If it exists and has not expired, it will jump to the requested page normally. If not, If it exists or expires, it will jump to the login page for re-authentication.

Now that I’ve finished talking about the ideas, here’s the code

1. First you need an Ldap, I use AD. Here I created a domain called minibox.com, and added an Employees OU, which has 2 sub-OUs, and created 2 users in the sub-OU.

Create new groups in Groups and add previously created users to the groups so that users have roles.

2. Build SpringBoot environment

2.1pom file

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
 <modelVersion>4.0.0</modelVersion>
 <groupId>minibox</groupId>
 <artifactId>an</artifactId>
 <version>0.0.1-SNAPSHOT</version>
  <!-- Inherit defaults from Spring Boot -->
  <parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>1.5.1.RELEASE</version>
  </parent>
  <!-- Add typical dependencies for a web application -->
  <dependencies>
    <!-- MVC -->
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <!-- Spring boot test -->
    <dependency> 
      <groupId>org.springframework.boot</groupId> 
      <artifactId>spring-boot-starter-test</artifactId> 
      <scope>test</scope> 
    </dependency> 
    <!-- spring-boot-starter-hateoas -->
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-hateoas</artifactId>
    </dependency>
    <!-- 热启动 -->
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-devtools</artifactId>
      <optional>true</optional>
    </dependency>
    <!-- JWT -->
    <dependency>
      <groupId>io.jsonwebtoken</groupId>
      <artifactId>jjwt</artifactId>
      <version>0.7.0</version>
    </dependency>
    <!-- Spring Ldap -->
    <dependency>
      <groupId>org.springframework.ldap</groupId>
      <artifactId>spring-ldap-core</artifactId>
      <version>2.3.1.RELEASE</version>
    </dependency>
    <!-- fastjson -->
    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>fastjson</artifactId>
      <version>1.2.24</version>
    </dependency>
  </dependencies>
  <!-- Package as an executable jar -->
  <build>
    <plugins>
      <plugin>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-maven-plugin</artifactId>
      </plugin>
      <!-- Hot swapping -->
      <plugin>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-maven-plugin</artifactId>
        <dependencies>
          <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>springloaded</artifactId>
            <version>1.2.0.RELEASE</version>
          </dependency>
        </dependencies>
      </plugin>
    </plugins>
  </build>
</project>

2.2ApplicationConfiguration file

#Logging_config
logging.level.root=INFO
logging.level.org.springframework.web=WARN
logging.file=minibox.log
#server_config
#使用了SSL，并且在ldap配置中使用了ldaps，这里同时也需要把AD的证书导入到server.keystore中。具体的可以查看java的keytool工具
server.port=8443
server.ssl.key-store=classpath:server.keystore
server.ssl.key-store-password=minibox
server.ssl.key-password=minibox
#jwt
#jwt加解密时使用的key
jwt.key=minibox
#ldap_config
#ldap配置信息，注意这里的userDn一定要写这种形式。referral设置为follow，说不清用途，似乎只有连接AD时才需要配置
ldap.url=ldaps://192.168.227.128:636
ldap.base=ou=Employees,dc=minibox,dc=com
ldap.userDn=cn=Administrator,cn=Users,dc=minibox,dc=com
ldap.userPwd=qqq111!!!!
ldap.referral=follow
ldap.domainName=@minibox.com

3.Spring main configuration class

package an;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.Bean;
import org.springframework.ldap.core.LdapTemplate;
import org.springframework.ldap.core.support.LdapContextSource;
@SpringBootApplication//相当于@Configuration，@EnableAutoConfiguration，@ComponentScan
public class Application {
  /*
  * SpringLdap配置。通过@Value注解读取之前配置文件中的值
  */
  @Value("${ldap.url}")
  private String ldapUrl;
  @Value("${ldap.base}")
  private String ldapBase;
  @Value("${ldap.userDn}")
  private String ldapUserDn;
  @Value("${ldap.userPwd}")
  private String ldapUserPwd;
  @Value("${ldap.referral}")
  private String ldapReferral;
  /*
  *SpringLdap的javaConfig注入方式
  */
  @Bean
  public LdapTemplate ldapTemplate() {
    return new LdapTemplate(contextSourceTarget());
  }
  @Bean
  public LdapContextSource contextSourceTarget() {
    LdapContextSource ldapContextSource = new LdapContextSource();
    ldapContextSource.setUrl(ldapUrl);
    ldapContextSource.setBase(ldapBase);
    ldapContextSource.setUserDn(ldapUserDn);
    ldapContextSource.setPassword(ldapUserPwd);
    ldapContextSource.setReferral(ldapReferral);
    return ldapContextSource;
  }
  public static void main(String[] args) throws Exception {
    SpringApplication.run(Application.class, args);
  }
}

3.1 Class that provides authentication services

package an.auth;
import javax.naming.directory.Attributes;
import javax.naming.directory.DirContext;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.ldap.NamingException;
import org.springframework.ldap.core.AttributesMapper;
import org.springframework.ldap.core.LdapTemplate;
import org.springframework.ldap.support.LdapUtils;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.serializer.SerializerFeature;
import static org.springframework.ldap.query.LdapQueryBuilder.query;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
import an.entity.Employee;
import io.jsonwebtoken.Jwts;
import io.jsonwebtoken.SignatureAlgorithm;
@RestController
@RequestMapping("/auth")
public class JwtAuth {
  //jwt加密密匙
  @Value("${jwt.key}")
  private String jwtKey;
  //域名后缀
  @Value("${ldap.domainName}")
  private String ldapDomainName;
  //ldap模板
  @Autowired
  private LdapTemplate ldapTemplate;
  /**
   * 将域用户属性通过EmployeeAttributesMapper填充到Employee类中，返回一个填充信息的Employee实例
   */
  private class EmployeeAttributesMapper implements AttributesMapper<Employee> {
    public Employee mapFromAttributes(Attributes attrs) throws NamingException, javax.naming.NamingException {
      Employee employee = new Employee();
      employee.setName((String) attrs.get("sAMAccountName").get());
      employee.setDisplayName((String) attrs.get("displayName").get());
      employee.setRole((String) attrs.get("memberOf").toString());
      return employee;
    }
  }
  /**
   * @param username 用户提交的名称
   * @param password 用户提交的密码
   * @return 成功返回加密后的token信息，失败返回错误HTTP状态码
   */
  @CrossOrigin//因为需要跨域访问，所以要加这个注解
  @RequestMapping(method = RequestMethod.POST)
  public ResponseEntity<String> authByAd(
      @RequestParam(value = "username") String username,
      @RequestParam(value = "password") String password) {
    //这里注意用户名加域名后缀 userDn格式：anwx@minibox.com
    String userDn = username + ldapDomainName;
    //token过期时间 4小时
    Date tokenExpired = new Date(new Date().getTime() + 60*60*4*1000);
    DirContext ctx = null;
    try {
      //使用用户名、密码验证域用户
      ctx = ldapTemplate.getContextSource().getContext(userDn, password);
      //如果验证成功根据sAMAccountName属性查询用户名和用户所属的组
      Employee employee = ldapTemplate                            .search(query().where("objectclass").is("person").and("sAMAccountName").is(username),
              new EmployeeAttributesMapper())
          .get(0);
      //使用Jwt加密用户名和用户所属组信息
      String compactJws = Jwts.builder()
          .setSubject(employee.getName())
          .setAudience(employee.getRole())
          .setExpiration(tokenExpired)
          .signWith(SignatureAlgorithm.HS512, jwtKey).compact();
      //登录成功，返回客户端token信息。这里只加密了用户名和用户角色，而displayName和tokenExpired没有加密
      Map<String, Object> userInfo = new HashMap<String, Object>();
      userInfo.put("token", compactJws);
      userInfo.put("displayName", employee.getDisplayName());
      userInfo.put("tokenExpired", tokenExpired.getTime());
      return new ResponseEntity<String>(JSON.toJSONString(userInfo , SerializerFeature.DisableCircularReferenceDetect) , HttpStatus.OK);
    } catch (Exception e) {
      //登录失败，返回失败HTTP状态码
      return new ResponseEntity<String>(HttpStatus.UNAUTHORIZED);
    } finally {
      //关闭ldap连接
      LdapUtils.closeContext(ctx);
    }
  }
}

4. Front-end Vue

4.1 Use Vue-cli to build the project and use vue -router and vue-resource, if you don’t know about it, you can search it

4.2main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
import store from './store/store'
import 'bootstrap/dist/css/bootstrap.css'
import App from './App'
import Login from './components/login'
import Hello from './components/hello'
Vue.use(VueRouter)
Vue.use(VueResource)
//Vue-resource默认以payload方式提交数据，这样设置之后以formData方式提交
Vue.http.options.emulateJSON = true;
const routes = [
 {
  path: '/login',
  component : Login
 },{
  path: '/hello',
  component: Hello
 }
]
const router = new VueRouter({
 routes
})
//默认导航到登录页
router.push('/login')
/*
全局路由钩子
访问资源时需要验证localStorage中是否存在token
以及token是否过期
验证成功可以继续跳转
失败返回登录页重新登录
 */
router.beforeEach((to, from, next) => {
 if(localStorage.token && new Date().getTime() < localStorage.tokenExpired){
  next()
 }
 else{
  next(&#39;/login&#39;)
 }
})
new Vue({
 el: &#39;#app&#39;,
 template: &#39;<App/>',
 components: { App },
 router,
 store
})

4.3App.vue

<template>
 <p id="app">
  <router-view></router-view>
 </p>
</template>
<script>
 export default {
  name: 'app',
 }
</script>
<style scoped>
</style>

4.4login.vue

<template>
  <p class="login-box">
    <p class="login-logo">
      <b>Admin</b>LTE
    </p>
    <p class="login-box-body">
      <p class="input-group form-group has-feedback">
        <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
        <input v-model="username" type="text" class="form-control" placeholder="username">
        <span class="input-group-addon">@minibox.com</span>
      </p>
      <p class="input-group form-group has-feedback">
        <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
        <input v-model="password" type="password" class="form-control" placeholder="Password">
      </p>
      <p class="row">
        <p class="col-sm-6 col-sm-offset-3 col-md-6 col-md-offset-3">
          <transition name="slide-fade">
            <p v-if="show">用户名或密码错误</p>
          </transition>
        </p>
      </p>
      <p class="row">
        <p class="col-sm-6 col-sm-offset-3 col-md-6 col-md-offset-3">
          <button v-on:click="auth" class="btn btn-primary btn-block btn-flat">Sign In</button>
        </p>
      </p>
    </p>
  </p>
</template>
<script>
  //提供认证服务的restApi
  var authUrl = 'https://192.168.227.1:8443/auth'
  export default {
    name: 'app',
    data() {
      return {
        username: '',
        password: '',
        show: false
      }
    },
    methods: {
      auth: function(){
        var credentials = {
          username:this.username,
          password:this.password
        }
        /*
        post方法提交username和password
        认证成功将返回的用户信息写入到localStorage，并跳转到下一页面
        失败提示认证错误
        */
        this.$http.post(authUrl, credentials).then(response => {
          localStorage.token = response.data.token
          localStorage.tokenExpired = response.data.tokenExpired
          localStorage.userDisplayName = response.data.displayName
          this.$router.push('hello')
        }, response => {
          this.show = true
        })
      }
    }
  }
</script>
<style scoped>
  p{
    text-align: center
  }
  .slide-fade-enter-active {
    transition: all .8s ease;
  }
  .slide-fade-leave-active {
    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }
  .slide-fade-enter, .slide-fade-leave-to
  /* .slide-fade-leave-active for <2.1.8 */ {
    transform: translateX(10px);
    opacity: 0;
  }
  @import '../assets/css/AdminLTE.min.css'
</style>

5 Effect

5.1 When accessing http://localhost:8000, you are navigated to the login page

5.2 Submit login information and obtain token, jump Next page

# I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

How to use Vue+Jwt+SpringBoot+Ldap to complete login authentication

Related articles