👋 들어가기전
최근 로그인을 할때, Kakao, Naver, Google, Facebook 등 portal 또는 SNS에서 제공하는 오픈 API를 사용하여 구현을 한 사이트를 종종 볼 수 있다.
보통 내노라하는 IT 회사에서는 다양한 오픈 API들을 제공한다.
1) 해당 사이트 아이디로 로그인 API
2) 검색 API
3) 지도/로컬 API
4) 내비 API
5) 인공지능 API
6) 카페/캘린더/회원정보 API
...🤔 API란 무엇인가?
Application Programming Interface의 약자로 운영체제와 응용프로그램 사이의 통신에 사용되는 언어나 메시지 형식을 말한다. 즉, 어플리캐이션의 프로그래밍을 위한 인터페이스라 할 수 있다. 여기에서 API는 사람을 위한 인터페이스가 아닌 프로그래밍을 위한 인터페이스라는 점이 중요하다.
API는 내부 API와 외부 API로 나눌 수 있다. 내부 API는 진동이나 플래시같은 디바이스 제어 기능들을 의미하며, 외부 API는 구글 번역을 이용하여 번역기능을 사용하거나, 네이버 지도 API를 이용하여 위치기반 기능을 사용하는 것을 말한다. 어플리케이션에서 사용되는 기능들을 다 구현하는 것이 아닌, 서비스하는 회사의 API를 통해 사용하게 되는 것이다.
📖 Open API란?
오픈 API는 웹을 통해 공개된 API로, 이를 이용하여 개발자가 모바일 어플리케이션등 다양한 컨텐츠를 용이하게 개발할 수 있게 하는 방식이다. 즉, 누구나 사용할 수 있도록 공개된 API라 할 수 있다. 예를 들어 우체국의 우편번호 API, 블로그에 접속하지 않고도 글을 올릴 수 있는 블로그 API 등이 있다.
오픈 API의 장점은 구현하는 데에 시간과 비용이 많이 드는 기능을 직접 구현하지 않아도 유용한 기능들은 오픈 API를 통해 구현할 수 있다는 점이다.
오픈 API는 더 좁게 정의를 하자면 공개가 되어있으면서 무료여야 하지만, API를 서비스하는 회사들의 대부분이 서비스 사용자에게 키를 발급하여 해당 키에 따라 할당량을 제한하거나, 할당량을 넘어서 사용하는 경우에만 과금을 하는 등의 정책을 펼치고 있기 때문에 오픈 API가 무료 API라는 말은 어울리지 않는다.
🏢 Open API 제공처
공공 데이터 센터
Kakao Developers 센터
Naver Developers 센터
Google Developers 센터
Facebook Developers 센터
이 밖에도 각 분야의 IT 센터에서 다양하게 제공하고 있다.
소셜 로그인 API
네이버와 카카오 로그인 API를 사용하여 구현하였습니다.
이 포스트는 네이버 로그인 API를 예시로 쭉~ 작성했습니다.
🎈 전체 로그인 인증 과정
◾ 기존 로그인
1) 회원가입
2) 로그인
◾ OPEN API 사용
1) 회원가입
2) 소셜 로그인 인증 API 호출 -> 인증 코드 받음
3) 접근 토큰(access_token) 요청 with 인증코드 -> 접근 토큰(access_token) 받음
4) 회원정보 API 호출 with access_token -> 회원 정보 받음
5) 로그인 with 회원정보
보통 회원가입 후 로그인 과정으로 인증이 이뤄지는데, OPEN API를 사용할 경우 소셜 플랫폼에 인증 과정을 요청하는 과정을 거쳐야 하기 때문에 3가지 과정이 추가된다.
🚩 OPEN API 이용 신청
전체적으로 소셜 로그인 인증 과정이 어떻게 진행되는지 이해를 했으면
본격적으로 OPEN API를 사용하기 위해 OPEN API 이용 신청을 하자.
등록하는 방법은 각 사이트 참고. (ex. 네이버 사전준비사항)
네이버 로그인 인증 요청
✔ 요청
| HTTP 메서드 | 요청 URL | 응답형식 | HTTP 결과 |
|---|---|---|---|
| GET/POST | https://nid.naver.com/oauth2.0/authorize | URL 리다이렉트 | HTTP 302 Redirect |
✔ 요청 파라메터
| 요청 변수명 | 타입 | 필수 여부 | 기본값 |
|---|---|---|---|
| response_type | String | Y | code |
| client_id | String | Y | - |
| state | String | Y | - |
| redirect_uri | String | Y | {REST API url 정보} |
| scope | String | N | - |
✔ 결과
http://{콜백 URL}/{custom URI}?code={code값}&state={state값}네이버 아이디, 패스워드로 로그인을 신청하면 다음과 같이 code, state와 함께 redirect_uri를 받게 된다. 이때, HTTP 302 Redirect되는 부분을 알고 넘어가자!
네이버 접근 토큰 요청
✔ 요청
| HTTP 메서드 | 요청 URL | 응답형식 | HTTP 결과 |
|---|---|---|---|
| GET/POST | https://nid.naver.com/oauth2.0/token | json | Success: 200 |
❗ Content-Type application/x-www-form-urlencoded;charset=utf-8
✔ 요청 파라메터
| 요청 변수명 | 타입 | 필수 여부 | 기본값 |
|---|---|---|---|
| grant_type | String | Y | authorization_code(발급) |
| client_id | String | Y | - |
| client_secret | String | Y | - |
| code | String | Y | {로그인 인증 code값} |
| state | String | Y | {로그인 인증 state값} |
grant_type 인증 과정에 대한 구분값
발급 - authorization_code 갱신 - refresh_token 삭제 - delete
✔ 결과
{
"access_token":"{access_token값}",
"refresh_token":"{refresh_token값}",
"token_type":"bearer ",
"expires_in":"3600"
}네이버 회원정보 요청
✔ 요청
| HTTP 메서드 | 요청 URL | 응답형식 | HTTP 결과 |
|---|---|---|---|
| GET/POST | https://openapi.naver.com/v1/nid/me | json | Success: 200 |
❗ Content-Type application/x-www-form-urlencoded;charset=utf-8
✔ 요청 헤더
| 요청 헤더명 | 타입 | 필수 여부 | 기본값 |
|---|---|---|---|
| Authorization | String | Y | {token_type} {access_token} |
token_type Bearer
access_token 접근 토큰 요청 결과로 받은 값
✔ 결과
{
"resultcode":"00",
"message":"success",
"response":{
"id":"{id값}",
"age":"{연령층}",
"email":"{email아이디}",
"name":"{이름}",
"birthday":"{생일- 월,일}"
}
}앞서
OPEN API 이용 신청후 애플리케이션에서 허용할 정보들을 선택하면 결과값을 더 많이 받을 수도 있다.
마무리
일단, 기본이 된다고 생각하는 네이버, 카카오 API를 사용해서 소셜 로그인을 구현해보았다.
아래 3단계를 거치면 기본적인 인증을 이루는 것까지 개발했다.
네이버 로그인 인증 요청네이버 접근 토큰 요청네이버 회원정보 요청
카카오 로그인 API도 네이버와 유사하기에 따로 작성하지 않았다.
하지만 카카오도 네이버와 같은 방식을 따르지만 요청 시 {state값}이 생략된다거나 접근 토큰 API 호출 결과, 프로필 정보 API 결과로 받는 값에 차이가 조금 있다는 것을 알고 있음 되겠다.
참고
로그인 API 인증과 관련된 더 자세한 내용은 아래 URL을 참고해주세요.
Intro부분 작성에 다음 블로그를 참고하였습니다.
