수업소개
API를 사용하는데 큰 걸림돌은 인증입니다. 사용자에게 최적화된 서비스를 제공하기 위해서는 그 사용자의 정보에 접근할 수 있어야 합니다. 많은 서비스가 인증을 위한 방법으로 oauth 2.0을 사용하고 있습니다. 여기서는 oauth 2.0의 원리를 알아보고, 인증에 대해서 좀 더 자신감을 가질 수 있도록 도와드립니다.
사용기술
- html
- css
- javascript
- oauth
주요개념
API의 사용, SDK의 이용, oauth 2.0을 이용한 인증
참고
- 구글 클라우드 콘솔
- oauth 공식홈페이지
수업
수업소개
동작 메커니즘
API 접속하기
oauth 사용하기
code 획득 절차
token 받기
access token 사용하기
refresh token 사용하기
SDK 사용
예제
login.html
사용자를 Resource Server의 인증 페이지로 보내는 URL 생성
1 2 3 4 5 | < html > < body > </ body > </ html > |
receiveCode.php
Resource Server가 전달해준 Authorization code를 받아서 Access Token과 교환하기 위한 정보를 생성하는 페이지
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html> <html> <body> <style> input{ width:300px; } </style> <a href= "login.html" >login</a> <form action= "https://www.googleapis.com/oauth2/v4/token" method= "post" enctype= "application/x-www-form-urlencoded" > code : <input type= "text" name= "code" value= "<?=$_GET['code']?>" ><br> client_id : <input type= "text" name= "client_id" value= "3870214908-3fur6lisge1riduu6bfncvgq15abs0k2n.apps.googleusercontent.com" ><br> client_secret : <input type= "text" name= "client_secret" value= "teUYcbqLdUq13UTwd90J6feK" ><br> redirect_uri : <input type= "text" name= "redirect_uri" value= "http://localhost:8888/receiveCode.php" ><br> grant_type : <input type= "text" name= "grant_type" value= "authorization_code" ><br> <input type= "submit" > </form> </body> </html> |
refreshToken.php
access token 값을 새로 발급 받기 위한 방법
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html> <html> <body> <form action= "https://www.googleapis.com/oauth2/v4/token" method= "post" enctype= "application/x-www-form-urlencoded" > <input type= "text" name= "client_id" value= "3870214908-3fur6lisge1riduu6bfncvgq15bs0k1n.apps.googleusercontent.com" ><br> <input type= "text" name= "client_secret" value= "teUYcbqLdUqg3UTwd90J4feK" ><br> <input type= "text" name= "refresh_token" value= "1/Eatu7T-ge3I1ekgK3E5rv24cbZdRIH84H00W14MYZbY" ><br> <input type= "text" name= "grant_type" value= "refresh_token" ><br> <input type= "submit" > </form> </body> </html> |