구글 로그인
- 구글 로그인 버튼 클릭
|
1
2
3
|
<a href="https://accounts.google.com/o/oauth2/v2/auth?scope=https://www.googleapis.com/auth/userinfo.email&response_type=code&client_id={client_id}&redirect_uri={redirect_uri}">
<img :src="require('@/assets/images/google-icon.png')"/>
</a>
|
cs |
- 구글 로그인 진행 후, 리다이렉트 페이지로 이동하면 url에 Authorization code 확인!
- Authorization code axios를 통해 백엔드에 전달
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
let googleCode = new URL(window.location.href).searchParams.get("code");
if(googleCode != null){
console.log("구글로그인 시도");
store.dispatch("auth/requestGoogleToken", googleCode)
.then(function(result){
console.log(result)
if (result.data.idToken) {
console.log("구글 result: ", result.data.idToken)
console.log("구글 email : ",result.data.email )
localStorage.setItem("jwt", result.data.idToken);
store.commit("auth/setToken", result.data.idToken);
store.commit("auth/setEmail", result.data.email);
store.commit("auth/setProvider","google"); // 로그아웃할때 방식 다 달라서 구분용
}
router.push({
path: "/"
});
}).catch(function(error){
console.log(error)
})
}
|
cs |
- Authorization code를 이용해 구글 access_token 및 id_token 발행
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
import com.google.gson.JsonElement;
import com.google.gson.JsonParser;
import org.springframework.stereotype.Service;
import java.io.*;
import java.net.HttpURLConnection;
import java.net.URL;
@Service
public class GoogleService {
public String getAccessToken (String authorize_code) {
String access_Token = "";
String id_Token = "";
String reqURL = "https://oauth2.googleapis.com/token";
try {
URL url = new URL(reqURL);
HttpURLConnection conn = (HttpURLConnection) url.openConnection();
conn.setRequestMethod("POST");
conn.setDoOutput(true);
BufferedWriter bw = new BufferedWriter(new OutputStreamWriter(conn.getOutputStream()));
StringBuilder sb = new StringBuilder();
sb.append("grant_type=authorization_code");
sb.append("&client_id="); //수정 할것
sb.append("&redirect_uri="); //수정 할것
sb.append("&client_secret="); //수정 할것
sb.append("&code=" + authorize_code);
bw.write(sb.toString());
bw.flush();
int responseCode = conn.getResponseCode();
System.out.println("responseCode : " + responseCode);
BufferedReader br = new BufferedReader(new InputStreamReader(conn.getInputStream()));
String line = "";
String result = "";
while ((line = br.readLine()) != null) {
result += line;
}
System.out.println("response body : " + result);
JsonParser parser = new JsonParser();
JsonElement element = parser.parse(result);
access_Token = element.getAsJsonObject().get("access_token").getAsString();
id_Token = element.getAsJsonObject().get("id_token").getAsString();
System.out.println("access_token : " + access_Token);
System.out.println(id_Token);
br.close();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return access_Token;
}
}
|
cs |
- 결과
|
1
2
3
4
|
responseCode : 200
response body : { "access_token": "ya29.a0ARrdaM-w7dZpSKr4865j6fZ4SQcAbyHw9B2jG0Rd7vLpjf45gHlmbJ8YSEg6klSy8ElFFW-JanHQxd2u8zs7aUKTPZdLY9K28mx1k7a4J0JXGjX-k6MYqd0GaiNN9EV5wvXa_gpS7i6M3R36dGOkyvky9Wje",
"expires_in": 3599, "scope": "https://www.googleapis.com/auth/userinfo.email openid", "token_type": "Bearer",
"id_token": "eyJhbGciOiJSUzI1NiIsImtpZCI6IjZlZjRiZDkwODU5MWY2OTdhOGE5Yjg5M2IwM2U2YTc3ZWIwNGU1MWYiLCJ0eXAiOiJKV1QifQ.eyJpc3MiOiJodHRwczovL2FjY291bnRzLmdvb2dsZS5jb20iLCJhenAiOiIyMjk1MTExNDAxMTgtMzFkNHZwMTYwYzdkZDFsZDRnMjcxODBmbXExcWVzZzguYXBwcy5nb29nbGV1c2VyY29udGVudC5jb20iLCJhdWQiOiIyMjk1MTExNDAxMTgtMzFkNHZwMTYwYzdkZDFsZDRnMjcxODBmbXExcWVzZzguYXBwcy5nb29nbGV1c2VyY29udGVudC5jb20iLCJzdWIiOiIxMTE3MjkxNDg1Mzc4Mzg3NTY3NTUiLCJlbWFpbCI6InduZHVzeDFAZ21haWwuY29tIiwiZW1haWxfdmVyaWZpZWQiOnRydWUsImF0X2hhc2giOiJBOE94NFhPa2oyblV0aU1VUmhUeFBnIiwiaWF0IjoxNjI5Mjk1Njk3LCJleHAiOjE2MjkyOTkyOTd9.gsTWNfzCEZYniwwI9a_CoDmn5Kd7SUbyJLYxG9GbdBFpeXiS7yR_Zl3J2kDtqieDUgbt2EMZP4MlDEGbB0kglYWJXbE54kmbVKlmzMKK41GoLvohNnSEQUJHgj0bPFkBqJm8Z3DLhmWQJmqDczinUbHmYSbvcHgflRSJs1_0xAM7-xtmVE55rJoR0JzBkIjKhXGsGue9791lP0M0fM9y6SJxmkLJLv-1c1eoKIgY4cTbIYVOs29TwKRSQGSwTqsVBq63WinYFrt0ECc_e4RB21wcmDZx2aQe_SDEw4iqayWdFEnSYiyyit6XIpkLYXdaa_3F4RWpxL1biuJgMqSBWA"}
|
cs |
구글 id_token으로 로그인한 유저 정보 얻기
- id_token을 이용해 구글 이메일, 프로필 사진 등 유저 정보 얻기
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
package com.babble.api.service;
import com.google.gson.JsonElement;
import com.google.gson.JsonParser;
import org.springframework.stereotype.Service;
import java.io.*;
import java.net.HttpURLConnection;
import java.net.URL;
@Service
public class GoogleService {
public String getUserInfo (String id_token) {
String reqURL = "https://oauth2.googleapis.com/tokeninfo?id_token="+id_token;
String email="";
try {
URL url = new URL(reqURL);
HttpURLConnection conn = (HttpURLConnection) url.openConnection();
conn.setRequestMethod("GET");
conn.setDoOutput(true);
int responseCode = conn.getResponseCode();
System.out.println("responseCode : " + responseCode);
BufferedReader br = new BufferedReader(new InputStreamReader(conn.getInputStream()));
String line = "";
String result = "";
while ((line = br.readLine()) != null) {
result += line;
}
System.out.println("response body : " + result);
JsonParser parser = new JsonParser();
JsonElement element = parser.parse(result);
email = element.getAsJsonObject().get("email").getAsString();
br.close();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return email;
}
}
|
cs |
- 결과 - reqURL 에 따라 이메일, 프로필, 토큰 만료시간 등 여러 유저 정보 확인 가능!
|
1
2
|
responseCode : 200
response body : { "iss": "https://accounts.google.com", "azp": "229511140118-31d4vp160c7dd1ld4g27180fmq1qesg8.apps.googleusercontent.com", "aud": "229511140118-31d4vp160c7dd1ld4g27180fmq1qesg8.apps.googleusercontent.com", "sub": "111729148537838756755", "email": "wndusx1@gmail.com", "email_verified": "true", "at_hash": "A8Ox4XOkj2nUtiMURhTxPg", "iat": "1629295697", "exp": "1629299297", "alg": "RS256", "kid": "6ef4bd908591f697a8a9b893b03e6a77eb04e51f", "typ": "JWT"}
|
cs |
'정리 > Spring' 카테고리의 다른 글
| [Spring] DI & AOP (0) | 2021.09.24 |
|---|---|
| [Spring] REST API (0) | 2021.09.09 |
| [Spring] Spring MVC (0) | 2021.09.09 |
| [Spring] Spring이란? (0) | 2021.09.09 |
| [Spring Boot] 이메일 인증 회원가입하기 구현 (2) | 2021.07.23 |
