https://developers.google.com/identity/gsi/web/guides/offerings

위에 나오는 Google One Tap 로그인 기능을 사이트에 추가해보았습니다.

 

 

화면 캡처 2023-01-11 202847.png.jpg

 

위에처럼 라이믹스 사이트에 Google 계정으로 로그인 메뉴가 생기고요

 

화면 캡처 2023-01-11 202848.png

로그인 이후에는 이렇게 계정이 생성됩니다.

 

소셜로그인 모듈을 개조해서 만들어보았는데, 소셜로그인 모듈의 로그인 플로우가 원탭 로그인의 플로우와 다르다보니 끼워넣기가 좀 곤란했습니다..

 

모듈 소스코드 : https://github.com/Waterticket/rhymix-sociallogin

 

<script src="https://accounts.google.com/gsi/client" async defer></script>
<[email protected](!$this->user->isMember())-->
<div id="g_id_onload"
     data-client_id="클라이언트 id"
     data-auto_select="true"
     data-callback="googleLoginEndpoint">
</div>
<div class="g_id_signin"
    data-type="standard"
    data-size="large"
    data-theme="outline"
    data-text="sign_in_with"
    data-shape="rectangular"
    data-logo_alignment="left">
</div>
<script>
  function googleLoginEndpoint(e)
  {
    $.get('/index.php?module=sociallogin&act=dispSocialloginConnectSns&service=googleone&type=login', function(data) {
      exec_json('sociallogin.procSocialloginCallback', {service:'googleone', credential: e.credential}, function(ret_obj) {
        if (ret_obj.error == 0) {
          if (ret_obj.redirect_url)
          {
            location.href = ret_obj.redirect_url;
          }
          location.reload();
        } else {
          alert(ret_obj.message);
        }
      });
    });
  }
</script>
<[email protected]>

 

로그인 버튼 위치에는 이렇게 코드 넣어주시고, 로그아웃 버튼에 아래와 같이 g_id_signout class를 추가해주세요

<div class="g_id_signout">Sign Out</div>

https://developers.google.com/identity/gsi/web/guides/automatic-sign-in-sign-out

 

 

 

대충 끼워넣기로 제작한거라 원본 레포에 넣지는 못하겠습니다만, 혹시나 필요하신분이 있을까 싶어서 올려봅니다

 

구글 로그인 "만" 지원하고자 하시는 분들은 이 모듈 적용해보시는것도 좋을거 같네요

 

PHP 8.2에서 개발 및 테스트 하였으며, PHP 7.4 미만 환경에서는 동작을 보장하지 않습니다.

 

+) 계속 버그 잡는중이라 버그 있으면 댓글 부탁드립니다

+) 구글 PHP 라이브러리가 상당히 무겁네요;;

글쓴이 리버스

profile
모듈 제작하는 현역 대학생 리버스입니다!

== 판매중인 모듈 ==
미션] https://xetown.com/thirdparties/1511787
길드] https://xetown.com/thirdparties/1387146
  • profile
    아름다운 기능입니다. 소셜 로그인을 사용하다 말다 그러고 있는데 이거 보니 급땡기네요. 멋진 팁 감사합니다!!
  • profile
    수고하셨습니다. 추천 드립니다!
  • profile
    크... 대단하십니다!! 팁 감사합니다!