scone-lemon

2022 01 11 화요일 공부 (카카오, 구글 로그인 API) 본문

PROJECT/2학기 공통

2022 01 11 화요일 공부 (카카오, 구글 로그인 API)

lemon-scone 2022. 1. 11. 18:25

카카오 로그인 API

 

로그인 API 처음 써봤는데 잘 되서 너무 기뻤다!

참고한 글은 여기! https://tyrannocoding.tistory.com/49

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

<!-- 카카오 스크립트 -->
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
<script>
Kakao.init('2fb7264abe68d46402a35dc3b4ce2d05'); //발급받은 키 중 javascript키를 사용해준다.
console.log(Kakao.isInitialized()); // sdk초기화여부판단
//카카오로그인
function kakaoLogin() {
    Kakao.Auth.login({
      success: function (response) {
        Kakao.API.request({
          url: '/v2/user/me',
          success: function (response) {
        	  console.log(response)
          },
          fail: function (error) {
            console.log(error)
          },
        })
      },
      fail: function (error) {
        console.log(error)
      },
    })
  }
//카카오로그아웃
function kakaoLogout() {
    if (Kakao.Auth.getAccessToken()) {
      Kakao.API.request({
        url: '/v1/user/unlink',
        success: function (response) {
        	console.log(response)
        },
        fail: function (error) {
          console.log(error)
        },
      })
      Kakao.Auth.setAccessToken(undefined)
    }
  }
</script>

</head>
<body>
  <ul>
    <li onclick="kakaoLogin();">
        <a href="javascript:void(0)">
            <span>카카오 로그인</span>
        </a>
    </li>
    <li onclick="kakaoLogout();">
        <a href="javascript:void(0)">
            <span>카카오 로그아웃</span>
        </a>
    </li>
  </ul>
</body>
</html>

 

구글 로그인 API

 

구글 로그인도 해보려고 했는데 자꾸 에러가 떠서 해결하려고 하다가

지금 이게 중요한게 아니고 프로젝트랑 스프링 공부가 우선순위가 높은 것 같아서 일단 접었다.

오늘 공부가 끝나고 여유가 생기거나(?) 내일 아침에 시간이 나면 해결해 봐야겠다!

참고한 글은 여기! https://tyrannocoding.tistory.com/51

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- content에 자신의 OAuth2.0 클라이언트ID를 넣습니다. -->
  <meta name ="google-signin-client_id" content="141912527149-r7odfhj5oaucim7l7m4jooefa124u44p.apps.googleusercontent.com">
  <!-- 구글 api 사용을 위한 스크립트 -->
  <script src="https://apis.google.com/js/platform.js?onload=init" async defer></script>
  <script>
    //처음 실행하는 함수
    function init() {
      gapi.load('auth2', function() {
        gapi.auth2.init();
        options = new gapi.auth2.SigninOptionsBuilder();
        options.setPrompt('select_account');
            // 추가는 Oauth 승인 권한 추가 후 띄어쓰기 기준으로 추가
        options.setScope('email profile openid https://www.googleapis.com/auth/user.birthday.read');
            // 인스턴스의 함수 호출 - element에 로그인 기능 추가
            // GgCustomLogin은 li태그안에 있는 ID, 위에 설정한 options와 아래 성공,실패시 실행하는 함수들
        gapi.auth2.getAuthInstance().attachClickHandler('GgCustomLogin', options, onSignIn, onSignInFailure);
      })
    }

    function onSignIn(googleUser) {
      var access_token = googleUser.getAuthResponse().access_token
      $.ajax({
          // people api를 이용하여 프로필 및 생년월일에 대한 선택동의후 가져온다.
        url: 'https://people.googleapis.com/v1/people/me'
            // key에 자신의 API 키를 넣습니다.
        , data: {personFields:'birthdays', key:'AIzaSyBdo1qsDOYw9yeXwROUW4obmUeiTRRLutM', 'access_token': access_token}
        , method:'GET'
      })
      .done(function(e){
            //프로필을 가져온다.
        var profile = googleUser.getBasicProfile();
        console.log(profile)
      })
      .fail(function(e){
        console.log(e);
      })
    }
    function onSignInFailure(t){
      console.log(t);
    }
    </script>
  <title>Document</title>

</head>
<body>
  <ul>
    <li id="GgCustomLogin">
     <a href="javascript:void(0)">
      <span>Login with Google</span>
     </a>
    </li>
   </ul>
</body>
</html>

'PROJECT > 2학기 공통' 카테고리의 다른 글

2022 01 12 수요일 회의 (각 페이지별 와이어프레임 제작)  (0) 2022.01.12
2022 01 12 수요일 공부 (Git 명령어 정리)  (0) 2022.01.12
2022 01 11 화요일 공부 (김영한 스프링 입문 day5 : 스프링 DB 접근기술, AOP, 다음으로)  (0) 2022.01.11
2022 01 11 화요일 회의 (회의 기법 확정 : 3-Room, 6색 모자)  (0) 2022.01.11
2022 01 10 월요일 회의 (기획리뷰 및 컨설팅, 회의 기법 조사)  (0) 2022.01.10
'PROJECT/2학기 공통' Related Articles more