[Flutter]Cafe24 Oauth2 - 1

Cafe24 쪽 Oauth를 구현해야 할 일이 생겨서 작업하는 도중에 원활히 되지 않아서 작업 내용을 기록합니다.

 

일단 Cafe24 쇼핑몰을 개설하고 앱을 개별적으로 만들는 작업을 진행중입니다.

Flutter를 이용해서 앱을 만들 예정인데 API 가 모두 공개 되어 있어서 비교적 수월합니다.

Cafe24 가입 후 개발자 센터도 가입합니다.

 

 

Android로 앱을 등록합니다.

중복등록이 안되기 떄문에 Android 와 IOS 따로 생성해야 합니다.

 

Redirect URI 등록을 해야 하는데 이 개념이 없어서 고생했습니다.

인증코드 요청 후 해당 URI Scheme으로 인증코드가 날라옵니다.

모든 앱은 고유 패키지명을 가지고 있기 때문에 패키지명://경로 와 같이 설정 합니다.

예를들면 패키지명이 com.testapp 이라면

com.testapp://oauth2redirect

와 같은 식으로 뒷 경로는 적당히 정의 해 주면 됩니다.

다만 호출할때 Scheme 이 Cafe24 개발자 센터에 등록 되어 있어야 합니다.

 

사용 패키지

  http: ^1.2.2
  flutter_web_auth_2: ^3.1.2

 

 

Oauth 인증을 받기 위해서 URL을 구성해 줍니다.

final url = Uri.https("{mall_id}.cafe24api.com", "/api/v2/oauth/authorize",
    {
      "response_type":"code",
      "client_id":"{client_id}",
      "state":"test",
      "redirect_uri":"com.testapp://oauth2redirect",
      "scope":"mall.read_application,mall.write_application",
      "code_challenge":"jWJS7olsI78LF-hcNHO1QBMqVX06iN5Z837vD6UXO3g",
      "code_challenge_method":"S256",
    });

print("####");
print(result);

 

호출하는 주소는 개발자 센터에 예제가 있습니다.

flutter http 패키지 형식에 맞춰서 등록되어 있습니다.

scope 역시 Cafe24 개발자 센터에 선언 된 것이랑 실제 호출 해야 하는것이랑 일치 해야 합니다.

code_challenge 는 Native 호출일 경우 해줘야 합니다.

위에 써있는 형식은 테스트용으로 예제에 있는것을 그대로 사용 했습니다.

 

호출 하게 되면 다음과 같이 로그인 페이지가 뜨게 됩니다.

로그인을 정상적으로 거치게 되면 코드상으로 ####을 화면에 띄우고 result내용을 띄우게 됩니다.

 

로그상을 보게 되면 붉은색의 앱 패키지명이 있고 oauth2redirect 와 같이 경로를 반환하게 됩니다.

이후 code 파라미터로 녹색의 파라미터가 나오고 state 는 호출할때 보냈던 test가 나오게 됩니다.

state는 검증용 입니다.

 

아직 진행중인 내용이기 때문에 추가적인 진행이 된다면 이어서 쓰도록 하겠습니다.