ساخت API امن با Spring Boot و Angular 6 — از صفر تا صد

امنیت وب امروزه بسیار حائز اهمیت است. ایجاد و استفاده از سرویس‌ها بدون در نظر گرفتن بحث امنیت، امروزه امری کاملاً پر ریسک تلقی می‌شود. اگر می‌خواهید اطلاعات بسیار حساسی را انتقال دهید، باید از یک لایه امنیتی کامل برای حفاظت از داده‌های محرمانه استفاده کنید. چون امن ساختن سیستم‌ها کاملاً مهم است. API امن یکی از مهمترین اجزای این ساختار امنیتی را تشکیل می‌دهد.

بنابراین هر زمان که از فراخوانی API یا هر چیز دیگری استفاده می‌کنیم، باید ابتدا امنیت داده‌های حساس را در نظر بگریم. انواع بسیار مختلفی از روش‌های امنیتی برای امن سازی داده‌ها وجود دارند. در این نوشته نمونه جامعی از امنیت Spring را بررسی می‌کنیم. در این راهنما از Spring boot و angular برای نمایش چگونگی امن سازی اپلیکیشن‌های انگولار با استفاده از احراز هویت ساده از طریق Spring Security بهره می‌گیریم. در این راهنما با روش استفاده از Spring Boot برای ساخت سریع API وب آشنا می‌شویم و به طور خلاصه با استفاده از یک لایه بک‌اند جاوا، وابستگی maven امنیت Spring را برای امن سازی اپلیکیشن به خدمت می‌گیریم. همچنین از پلتفرم انگولار برای سهولت ساخت اپلیکیشن وب به کمک پایگاه داده خودمان استفاده می‌کنیم.

پیش از آغاز توسعه اپلیکیشن نمونه‌ای از آن چه قرار است در بخش‌های بعدی بسازیم را نشان می‌دهیم:

در تصویر فوق نمونه‌ای از اپلیکیشن به نام my heroes می‌بینید که فهرستی از نام‌های قهرمانان را نمایش می‌دهد. در ابتدا نقطه انتهایی را به صورت غیر امن ارائه می‌کنیم تا انگولار بتواند فهرست نام‌ها را نمایش دهد. سپس یک نقطه انتهایی REST امن ارائه می‌کنیم و تغییرات ضروری را در اپلیکیشن انگولار ایجاد می‌کنیم تا با استفاده از احراز هویت ساده به داده‌ها دسترسی یابد.

فناوری‌های مورد استفاده:

• Angular 6
• Spring Boot 2.0.6
• Java 1.8.0
• Apache Maven 3.5.3
• Visual Studio Code 1.28.2
• Spring Tool Suite 3.9.5
• Mysql 5.7.19

ساخت بک‌اند جاوا با استفاده از Spring Boot

روش‌های مختلفی برای ایجاد یک پروژه Spring Boot وجود دارد.

فیلم آموزش فریم ورک اسپرینگ Spring در جاوا در فرادرس

کلیک کنید

در ادامه فهرستی از این روش‌ها را می‌بینید:

• Spring Initializer website
• Spring Boot CLI
• Spring Tool Suite
• Curl Command

ما قصد نداریم تک تک این اجزا را به تفصیل بررسی کنیم و صرفاً از Spring Tool Suite برای ایجاد اپلیکیشن کمک می‌گیریم.

ایجاد یک پروژه مقدماتی

به مسیر File->New->Spring Starter Project بروید و جزییات مورد نیاز را وارد کرده، وابستگی‌ها را بر اساس تصویر زیر تعیین کنید:

شما باید این وابستگی‌ها را به ترتیب انتخاب کنید تا به فایل maven به نام POM.xml اضافه شوند، سپس دکمه finish را بزند تا پروژه با کتابخانه‌های مورد نیاز ایجاد شود.

ایجاد یک پایگاه داده

یک جدول در پایگاه داده ایجاد می‌کنیم و سپس داده‌های مورد نیاز را در آن وارد می‌نماییم. در ادامه کوئری لازم برای ایجاد و درج رکوردها در جدول را مشاهده می‌کنید:

CREATE TABLE `heroes` (
`id` int(3) NOT NULL AUTO_INCREMENT,
`name` varchar(20) DEFAULT NULL,
KEY `id` (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=17 DEFAULT CHARSET=utf8;
insert  into `heroes`(`id`,`name`) values (1,'Aung San Suu Kyi'),(2,'Nelson Mandela'),(3,'Tony Blair'),(4,'Dr. Abdul Kalam'),(5,'Srinivas Ramanujan'),(6,'Stephen Hawking'),(7,'Bob Geldof'),(8,'Margaret Thatcher'),(9,'Winston Churchill'),(10,'Bob Dylan'),(11,'Bill Gates'),(12,'Steve Jobs'),(13,'Dalai Lama'),(14,'David Attenborough'),(15,'Mary Robinson'),(16,'Tim Berners-Lee')ک;

افزودن نقطه انتهایی REST غیر امن

در این مرحله کافی است کد زیر را در هر فایل اضافه کنید:

1. فایل Application.properties

server.port=7070
spring.datasource.url=jdbc:mysql://localhost:3306/test
spring.datasource.username=root
spring.datasource.password=root
spring.jpa.generate-ddl=true

2. فایل SecureRestServiceApplication.java

package com.example.app;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.autoconfigure.domain.EntityScan;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.data.jpa.repository.config.EnableJpaRepositories;
@SpringBootApplication
@EntityScan(basePackages = "com.example.model")
@EnableJpaRepositories(basePackages = {"com.example.repository"})
@ComponentScan(basePackages = "com.example.controller")
public class SecureRestServiceApplication {
public static void main(String[] args) {
SpringApplication.run(SecureRestServiceApplication.class, args);
}
}

3. فایل HeroesController.java

package com.example.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import com.example.model.Heroes;
import com.example.repository.HeroesRepository;

@RestController
@RequestMapping("/api/")
public class HeroesController {
	@Autowired
	HeroesRepository heroesRepository;
	
	@RequestMapping("/heroes")	
	@CrossOrigin("http://localhost:4200")
	public List<Heroes> getHeroes(){
		return heroesRepository.findAll();
	}
}

4. فایل Heroes.java

package com.example.model;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;
@Entity
@Table(name = "heroes")
public class Heroes {
@Id
@GeneratedValue(strategy = GenerationType.AUTO)
@Column(name = "id")
private int id;
@Column(name = "name")
private String name;
public Heroes() {}
public Heroes(int id, String name) {
super();
this.name = name;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}

5. فایل HeroesRepository.java

package com.example.repository;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.rest.core.annotation.RepositoryRestResource;
import com.example.model.Heroes;
public interface HeroesRepository extends JpaRepository<Heroes, Integer> {}

6. اینک اپلیکیشن را در postman یا هر مرورگر دیگر اجرا کنید

اکنون می‌توانید اپلیکیشن را ری‌استارت کنید و مرورگر یا postman را باز کرده و به آدرس http://localhost:7070/api/heroes بروید. در این زمان باید اطلاعات قهرمانان را در قالب JSON به صورت زیر ببینید:

ساخت اپلیکیشن فرانت‌اند با استفاده از انگولار

در این مرحله یک فرانت‌اند برای اپلیکیشن خود می‌سازیم. بدین منظور از Angular CLI برای ساخت اپلیکیشن خود استفاده خواهیم کرد.

فیلم آموزش فریم ورک انگولار جی اس – ساخت اپلیکیشن با AngularJS در فرادرس

کلیک کنید

دستور زیر را در اعلان فرمان خود وارد نمایید:

ng new secure-hero-app

این دستور ممکن است چند دقیقه برای ساخت فایل‌های پیکربندی و گرد هم آوردن همه وابستگی‌ها طول بکشد. دستور فوق یک اپلیکیشن بسیار ساده برای شما ایجاد می‌کند. زمانی که دستور فوق اجرا شد، دستور زیر را اجرا کنید:

ng serve –open

این دستور اپلیکیشن را آغاز می‌کند و مرورگر پیش‌فرض شما را به طور خودکار روی آدرس http://localhost:4200 باز می‌کند تا بتوانید صفحه پیش‌فرض انگولار را ببینید.