소셜로그인 1. 실습환경 셋팅

제가 작성할 로그인 구현 설명은
백엔드로 Spring Boot, Spring Data JPA 를,
프론트엔드로 React.js를 사용합니다.

1. 백엔드

application.yml

DB와 JPA 사용을 위한 yml 설정을 해주었습니다.

spring:
  profiles:
    include: oauth
  datasource:
    driverClassName: org.h2.Driver
    password: password
    url: jdbc:h2:mem:testdb;MODE=Mysql;
    username: sa
  h2:
    console:
      enabled: true
      path: /h2-console
  jpa:
    database-platform: org.hibernate.dialect.MariaDB103Dialect
    hibernate:
      ddl-auto: create
    properties:
      hibernate:
        format_sql: true
    show-sql: true

 

CORS 설정

프론트엔드는 http://localhost:3000, 백엔드는 http://localhost:8080 을 사용할것이기 때문에

CORS 설정을 해주었습니다.

package com.yelim.security.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
            .allowedOrigins("http://localhost:3000")
            .allowedMethods("GET", "POST", "PUT", "DELETE")
            .exposedHeaders("location")
            .allowedHeaders("*")
            .allowCredentials(true);
    }
}

 

User

package com.yelim.security.domain;

import com.sun.istack.NotNull;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import lombok.Getter;

@Entity
@Getter
public class User {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    @Column(nullable = false, unique = true)
    private String email;

    @NotNull
    private String password;

    public User() {}

    public User(Long id, String email, String password) {
        this.id = id;
        this.email = email;
        this.password = password;
    }
}

 

AuthController

로그인과 회원가입 api 를 껍데기만 마련해뒀습니다.

@RestController
public class AuthController {

    @PostMapping("/sign-up")
    public ResponseEntity<String> signUp() {
        return ResponseEntity.ok("회원가입 완료");
    }

    @GetMapping("/sign-in")
    public ResponseEntity<String> signIn() {
        return ResponseEntity.ok("로그인 완료");
    }
}

 

UserController

내 정보 조회 기능을 껍데기만 마련해두었습니다.

package com.yelim.security.controller;

import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class UserController {

    @GetMapping("/users/me")
    public ResponseEntity<String> findMe() {
        return ResponseEntity.ok("me!");
    }
}

 

2. 프론트엔드

MyPage.js

내 정보 조회 결과를 보여줄 페이지입니다.

import React, {useEffect, useState} from 'react';
import findMe from "../api/FindMe";

const MyPage = () => {
  const [result, setResult] = useState("");

  useEffect(() => {
    findMe().then(resultPromise => setResult(resultPromise));
  }, []);

  return (
      <>
        {result}
      </>
  );
};

export default MyPage;

 

SignIn.js

로그인 페이지입니다.

import React from 'react';

const SignIn = () => {
  return (
      <div>
        <input type="text" placeholder="사용자이름"/>
        <input type="password" placeholder="비밀번호"/>
        <button>sign in</button>
      </div>
  );
};

export default SignIn;

 

App.js

import React from "react";
import {BrowserRouter as Router, Route, Switch} from "react-router-dom";
import SignIn from "./sign-in/SignIn";
import MyPage from "./my-page/MyPage";

const App = () => {
  return (
    <Router>
      <Switch>
        <Route path="/sign-in" exact component={SignIn}/>
        <Route path="/" exact component={MyPage}/>
      </Switch>
    </Router>
  );
}

export default App;