Svelte: Google 로그인/로그아웃

8596 단어 googlesveltewebdevauth
멋진 Svelte 앱을 얻었고 일부 인증 흐름을 통합할 때입니다. Google로 로그인은 많은 사용자가 앱에 로그인하도록 지원하는 한 가지 방법입니다.

Google은 모든 웹 프로젝트에 대해 기성품 Google 로그인 버튼을 간단하게 연결할 수 있습니다.

시작하자.

Google 전제조건



로그인을 통합하려면 Google의 클라이언트 ID가 필요합니다. 여기에서 프로젝트 구성: https://developers.google.com/identity/sign-in/web/sign-in#before_you_begin

Google API 대시보드를 탐색하고 클라이언트 ID가 있으면 루트 HTML 파일에 메타 태그를 추가합니다. 기본 구성으로 Svelte 앱을 생성한 경우 public/index.html 에 있어야 합니다.

<!doctype html>
<html>
<head>
  <meta name="google-signin-client_id" content="CLIENT_ID.apps.googleusercontent.com">
</head>
...
</html>


Google 로그인 버튼 설정



UI를 처리하고 로그인할 새 구성 요소GoogleSignInButton.svelte를 생성해 보겠습니다.

구성요소부터 시작하겠습니다. Google 플랫폼을 추가하고 버튼을 표시해야 합니다.

<svelte:head>
  <script src="https://apis.google.com/js/platform.js" async defer></script>
</svelte:head>

<div class="g-signin2" data-longtitle="true" data-onsuccess="onSignIn" />


성공! ✅ 버튼이 보여야 합니다.


div는 속성data-onsuccess="onSignIn"을 사용합니다. 함수window.onSignIn를 찾고 이를 온 사인 콜백으로 사용합니다.

<script>
  window.onSignIn = (googleUser) => {
     const profile = googleUser.getBasicProfile();
     console.log('ID: ' + profile.getId());
     console.log('Name: ' + profile.getName());
     console.log('Image URL: ' + profile.getImageUrl());
     console.log('Email: ' + profile.getEmail());
  };
</script>

<svelte:head>
  <script src="https://apis.google.com/js/platform.js" async defer></script>
</svelte:head>

<div class="g-signin2" data-longtitle="true" data-onsuccess="onSignIn" />


이제 사용자의 공개 정보에 액세스할 수 있습니다. 속성을 사용하여 고유한 사용자를 생성하면 앱에 계속 로그인할 수 있습니다.

로그 아웃하다



로그아웃하려면 Google API AuthInstance를 사용하여 로그아웃을 호출해야 하며 루트 HTML 파일에 이 API를 포함했습니다.
Logout.svelte 구성 요소를 생성해 보겠습니다.

<script>
  window.signOut = () => {
    const auth2 = gapi.auth2.getAuthInstance();
    auth2.signOut().then(() => {
      // User is now signed out
    });
  }
</script>

<a onclick="signOut">Sign out</a>

onclick 속성을 사용하여 signOut 로직을 참조합니다. 이제 로그아웃했습니다! ✅🎉

지속 세션



사용자가 귀하의 사이트에 액세스하려고 할 때마다 로그인해야 한다면 고통스러울 것입니다. 세션이 지속되는지 확인합시다.

액세스를 시도하기 전에 Google API가 언제 로드되었는지 알아야 합니다. onload URL 매개변수를 사용하여 로드 시 콜백을 추가할 수 있습니다.
GoogleSignInButton.svelte에서 ?onload=<NAME OF CALLBACK>로 플랫폼 URL을 추가합니다.

<script src="https://apis.google.com/js/platform.js?onload=onLoadCallback" async defer></script>

App.svelte에서는 사용자가 사이트에 액세스하는 경우를 처리할 수 있습니다. Google 사용자가 존재하는지 확인하고 그에 따라 조치를 취합니다.

<script>
  let userLoggedIn = false;
  window.onLoadCallback = () => {
    userLoggedIn = gapi.auth2.getAuthInstance().isSignedIn.get();
    if (userLoggedIn) {  
      // Handle login
    }
  }
</script>


이제 Google 인증을 통한 영구 세션이 있습니다! ✅🎉

도움이 되었거나 질문이 있으시면 댓글을 남겨주세요!


당신은 트위터에서 나를 찾을 수 있습니다

또는 유지 react-native-webview 및 @react-native-community/react-native-cookies .

계속 구축하세요!
Karabiner-Elements에서 듀얼 키보드 사용
날짜 및 파일 크기를 기반으로 한 Log4net 롤링 파일 로그

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage