배포_OAUTH2 + Security
back과 front가 분리되기 전에는
1
<a href="/oauth2/authorization/kakao">Kakao</a>
위와 같이 설정만 해도 소셜 로그인을 하는데 문제가 없었다.
문제는 back과 front를 분리하면서 해당 url을 페이지로 변환하려고 하면서 에러가 발생했다.
그래서 href로 하게 되면 자꾸 페이지로 변환하려고 해서 다르게 작성하려고 했다.
참고로 github의 repo와 blog를 많이 찾아봤으나 localhost에서 끝나는 경우와
배포를 해도 back과 front를 분리 하지 않아서 위와 같은 코드로 작성되어있었다.
ajax 시도
1
2
3
4
5
6
7
8
9
10
11
function oauth_kakao_login(){
$.ajax({
type: "GET",
url: host + `/oauth2/authorization/kakao`,
contentType: false,
processData: false,
success: function (response) {
console.log("response : " + response)
}
})
}
→ 검색 결과 : 프론트에서 로그인 요청을 ajax로 요청하면 안된다. 탈락!
kakao developers
kakao developers에 들어가서 javascript 코드를 보며 내 코드를 수정했다.
아래 코드는 demo로 작성된 것을 내 코드에 맞게 일부 제거한 것이다.
1
2
3
4
5
6
7
<head>
<script src="https://t1.kakaocdn.net/kakao_js_sdk/2.6.0/kakao.min.js"
integrity="sha384-6MFdIr0zOira1CHQkedUqJVql0YtcZA1P0nbPrQYJXVJZUkTk/oX4U9GhUIs3/z8" crossorigin="anonymous"></script>
</head>
<body>
<a onclick="oauth2()">Kakao</a>
</body>
1
2
3
4
5
6
7
Kakao.init('c089c8172def97eb00c07217cae17495'); // 사용하려는 앱의 JavaScript 키 입력
function oauth2(){
Kakao.Auth.authorize({
redirectUri: 'https://developers.kakao.com/tool/demo/oauth',
});
}
실행을 하니 로그인 페이지로 넘어갔다.
그래서 <a href="/oauth2/authorization/kakao">Kakao</a>가 적용되었던 이유는 spring에서 인식을 했기 때문인데
지금은 back과 front를 분리하면서 back에서 확인을 할 수 없으니 거기에 맞게 front도 다시 작성해야하는 것 같았다.
환경변수
위에서 실행한 대로 한다면 여러 정보들을 입력해야한다.
front에서 환경변수를 저장해야했는데 node랑 react말고
순수 javascript에서는 환경변수를 적용할 방법이 마땅한게 보이지 않았다.
그래서 조금 복잡하지만 back에서 적용한 환경변수를 front에서 받아오는걸로 했다.
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function oauth(){
let userInfoUrl
let kakakokEY
$.ajax({
type: "GET",
url: host + `/kakao/login`,
contentType: false,
success: function (response) {
userInfoUrl = response[0];
kakakokEY = response[1];
Kakao.init(kakakokEY);
Kakao.Auth.authorize({
redirectUri: userInfoUrl,
});
}
})
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@RestController
public class SignController {
@Value("${KAKAO_REDIRECT}")
private String REDIRECTION_URL;
@Value("${KAKAO_JAVASCRIPT}")
private String JAVASCRIPT;
@GetMapping("/kakao/login")
public List<String> kakao(){
List<String> list = new ArrayList<>();
list.add(REDIRECTION_URL);
list.add(JAVASCRIPT);
return list;
}
이렇게 실행했더니 아래와 같이 동작했다.
여기서 로그인을 시도 했더니 이번엔 redirectURL이 not found가 떴다.
redirectURL을 로그인 후에 보여지는 페이지로 수정했더니 제대로 동작했다.
그러나 내가 참고한 코드는 오직 js 코드라서 back의 로직은 하나도 거치지 않았다.
따라서 REST API 코드를 참고했으나 여전히 back 로직을 타고 있지 않았다.
그러다가 이 글을 보게 되었는데
나랑 비슷한 상황은 아니었지만 답글을 보고 힌트를 얻게 되었다.
Backend 주소
“정상적인 리디렉션 주소는 백엔드측 주소가 되어야 합니다.”
내가 back과 front를 분리하면서 동작이 되지 않았다고 했었다.
그 말은 back과 front 주소가 동일했다는 뜻이다.
현재는 back과 front 주소가 다르다.
그래서 나는 front 주소를 입력해서 oauth2를 구현하려고 했고 그래서 oauth2를 통해 db에 저장되지 않았던 것이다.
수정한 코드는 아래와 같이 href 되는 url만 변경하면 끝나는 것이었다.
ex) back 주소 : haedal.domain.com
1
<a href= "https://haedal.domain.com/oauth2/authorization/kakao">Kakao</a>
위와 같이 실행한 후에는 security가 잘 적용이 되어서 db에 저장이 되었다.