본문 바로가기

컴퓨터공학/Boot & Angular

Angular> 거래완료 이메일 송신 기능 2022. 4. 16. 이메일 송신 기능 개발순서 1. Angular 1) email 필드를 payment-info.ts에 추가한다. 2) onSubmit() 함수에서 email필드를 customer 이메일 주소에 배정한다. 2. Spring Boot 1) PaymentInfo.java에 email 필드를 넣는다. 2) createPaymentIntent()에 email address를 배정한다. 1. receiptEmail 추가 submit 버튼에서 고객 이메일을 이메일 필드에 넣는다. 2. 이렇게 보내면 Stripe에서 이메일을 보내는데 TEST API keys는 메일을 자동으로 보내지 않아서 수동으로 보내면 됨
Angular> Payment Frontend 2 2022. 4. 16. Customer detail 추가 onSubmit 함수에 billing_details 내용을 넣는다. 설명 부분 추가 구매 버튼 비활성화 중복구입을 막는 기능을 넣는다. 개발 순서 1. checkout.component.ts 업데이트 1) boolean 필드 isDisabled 을 추가한다. 2) REST API 콜을 부르기 전에는 isDisabled를 true로 설정 3) REST API 콜을 부르면 isDisabled를 false로 설정 2. checkout.component.html 업데이트 1) isDisabled 필드에 disabled attribute 넣기 1. 필드 추가 REST API call 하기 전 true로 설정 부르고 나서 다시 false로 변경 onSubmit(): void { i..
Angular> Payment Frontend 2022. 4. 16. 개발순서 1. StripeAPI 설치하기 2. TypeScript declaration file 생성 3. Stripe Publishable key 추가 4. PaymentInfo DTO 생성 5. PaymentIntent 생성하는 CheckoutService 수정 6. index.html에서 Stripe JavaScript 라이브러리 불러오기 7. Checkout form에 Stripe Elements를 추가 1. npm install stripe 2. 자바스크립트 라이브러리를 위해 자료형 정보를 전달한다. TypeScripit application 에서 이걸 사용하게 허락한다. 3. Publishable key는 Stripe에 계정을 확인하는 키이다. 4. 5. paymentIntentUrl과 cre..
Angular> Payment Backend 2022. 4. 13. 백엔드 개발 순서 1. 개발자 개정을 Stripe에서 만든다. 2. Maven Dependency에 Stripe를 추가한다. 3. Stripe API Key를 설정한다. 4. PaymentInfo DTO를 생성한다. 5. PaymentIntent를 생성할 수 있는 CheckoutService 수정 6. PaymentIntent endpoint를 노출시키는 ChekcoutController를 수정 1. 자세한 설명은 생략 2. 아래 링크에서 가져와서 pom.xml에 추가한다. Maven Repository: com.stripe » stripe-java (mvnrepository.com) 3. 스트라이프 대시보드에서 developers -> API keys에 가면 Secret key가 있다. 그걸 appli..
Angular> Payment 시작 전 2022. 4. 10. Stripe API를 사용한다. Stripe Documentation Documentation Explore our guides and examples to integrate Stripe. stripe.com PCI DSS(Payment Card Industry Data Security Standard) PCI Compliance : 방화벽 사용, 패스워드 보호, 카드 정보 보호, 데이터 암호화, 안티바이러스, 적절한 소프트웨어 업데이트, 데이터 접속 제한, 접속 아이디, 물리적 접속 제한, 로그 접속 생성과 유지, 취약성 검사 및 테스트, 문서 정책 등 Security | Stripe Documentation Security Strengthen your integration security and le..
Angular> Environments 2022. 4. 10. Angular에서 지원하는 기능으로 Angular 하나에서 다양한 환경 설정을 추가할 수 있다. 이걸로 포트 별 다양한 백엔드에 지정할 수 있다. 개발 순서 1. environment 파일에서 config 설정 2. 앱에서 envrionment 파일 사용 3. environment configuration 구동 1. 2. 기존 하드 코딩되어 있는 걸 바꿔준다. 3. npm start는 environment.ts를 사용하는 것 npm start -- --configuration=production 은 environment.prod.ts를 사용하는 것이다. 새로운 Environments 추가하는 법 Environment configuration은 angular.json에서 정의 개발 순서 1. environ..
Angular> HTTPS 2022. 4. 9. HTTPS(Hypertext Transfer Protocol Secure) 웹브라우저와 서버간 암호화 데이터를 위한 프로토콜이다. HTTPS는 TLS(Transport Layer Security) 프로토콜을 사용한다. TLS는 SSL보다 보안이 좋다. 개발 순서 1. 키와 self signed certificate 생성 2. Angular에서 키와 self signed certificate 실행 3. 새로운 URL와 Spring Boot app 수정 1. localhost.key와 localhost.crt 만들기 fullstack-angular-and-springboot/openssl-setup.md at master · darbyluv2code/fullstack-angular-and-springboot..
Angular> 주문내역2 2022. 4. 3. 로그인한 이용자만 주문내역을 볼 수 있어야 한다. /api/orders 접근은 로그인한 이용자만 접근 가능. 백엔드 1. Okta Spring Boot Starter를 Maven pom.xml에 추가 2. Okta developer 사이트에서 App 생성 3. application properties를 수정 4. Spring security configuration class에서 엔드포인트 보호 1. pom.xml에 추가하가 Maven Update를 한다. Okta는 OAuth2와 OpenID Connect를 위해 Spring Boot Starter를 제공한다. Spring security 와 Okta의 설정과 통합을 단순화한 것이다. 2. Application에서 생성할 때 OIDC와 Web Appli..

티스토리툴바