프로세스 순서
1. 크리덴셜 로그인 - 토큰 받기
2. 토큰(카카오)을 스프링 서버에 전달하기 (스프링 서버한테 나 인증했어!! 라고 알려주는 것!)
3. 스프링 서버의 토큰 응답 받기
4. 시큐어 스토리지에 저장
JavaScript
복사
크리덴셜 로그인 - kakaoLogin 함수화
카카오 로그인 버튼을 클릭했을 때, 함수가 호출이 되면 된다.
loginWithKakaoAccount 함수 호출해서 토큰을 받으면 된다.
통신이니까 await를 걸었다.
토큰 받은 거 확인
토큰 내용
사용자 정보를 반환하는 API 확인
https://kapi.kakao.com/v2/user/me
JavaScript
복사
Postman으로 요청할 때 헤더에 두 가지 정보를 실어야 된다.
"Authorization" : 여기에 토큰
"Content-type" : application/x-www-form-urlencoded;charset=utf-8
JavaScript
복사
이렇게 되면 된다. 스프링에서 토큰 검증 프로세스만 하면 된다.
UserController
토큰도 마찬가지로 민감한 정보는 Post 매핑을 사용하자.
플러터에서 요청해보자.
HTTP 설정 = lib >> _core > http.dart
import 'package:dio/dio.dart';
import 'package:flutter_secure_storage/flutter_secure_storage.dart';
final baseUrl = "http://192.168.0.23:8080";
// mac : ipconfig getifaddr en0
final dio = Dio(
BaseOptions(
baseUrl: baseUrl, // 내 IP 입력
contentType: "application/json; charset=utf-8",
validateStatus: (status) => true, // 200 이 아니어도 예외 발생안하게 설정
),
);
const secureStorage = FlutterSecureStorage();
JavaScript
복사
토큰을 스프링 서버에게 전달하기
스프링에서 토큰 확인 완료
스프링 서버 로직
프로세스 순서
1. 카카오에서 사용자 정보 요청하기
2. code 방식과 동일
3. jwt(스프링 서버) 생성해서 앱에게 전달.
JavaScript
복사
/oauth/callback 리디렉션 URL
두 가지 토큰을 핸들링 해야되니까, 이름을 정확하게 적어주자.
@RequestParam도 정확히 적어주고
DTO 만들기
package shop.mtcoding.blog.user;
import com.fasterxml.jackson.annotation.JsonProperty;
import lombok.Data;
import java.sql.Timestamp;
public class KakaoResponse {
@Data
public static class KakaoUserDTO {
private Long id;
@JsonProperty("connected_at")
private Timestamp connectedAt;
private Properties properties;
@Data
class Properties {
private String nickname;
}
}
}
JavaScript
복사
UserService에 카카오 로그인 만들기
user엔티티 수정
카카오도 매번 적지말고 provider를 만들어주자.
UserController 코드
UserService 코드
플러터 프로세스
// 순서
1. 토큰으로 사용자 정보 요청하기
2. 토큰(카카오)을 스프링 서버에 전달하기 (스프링 서버한테 나 인증했어! 라고 알려주는 것)
3. 토큰(스프링서버) 응답받기
4. 시큐어 스토리지에 저장
5. static, const 변수, riverpod 상태관리
JavaScript
복사
loginPage 코드
없으니 강제 가입까지 시켜줌