programing

반응과 함께 구글 사인 버튼 사용

abcjava 2023. 4. 6. 20:42
반응형

반응과 함께 구글 사인 버튼 사용

리액트 어플리케이션에서 구글 사인인을 사용하려고 합니다.어플리케이션 외부에서 사인 버튼을 사용하는 것 자체는 정상적으로 동작하지만 커스텀 사인 컴포넌트 내에서 사용하는 경우 예상대로 동작하지 않습니다.사용자가 서명할 때 버튼 자체가 실행되어야 합니다.data-onsuccess방법.문제는 사인인이 작동해도 실행이 그 방법에 도달하지 않는다는 것입니다.

아마 리액션을 놓쳤겠지만 찾을 수가 없어요.도움이 필요하신가요?모든 항목과 컴포넌트 자체를 로드하는 html을 아래에서 찾을 수 있습니다.

<head>
    <meta name="google-signin-scope" content="profile email">
    <meta name="google-signin-client_id" content="1234-real-client-id.apps.googleusercontent.com">
    <script src="https://apis.google.com/js/platform.js" async defer></script>
</head>
<body>
    <!-- Here is where everything gets displayed -->
    <div id="app"></div>

    <!-- The file with the js code -->
    <script src="/js/main.js"></script>
</body>


var SignIn = React.createClass({
    onSignIn : function (google_user) {
        // I want this method to be executed
    },

    render : function() {
        return (
            <div className="g-signin2" data-onsuccess={this.onSignIn} data-theme="dark" />
        );
    }
});

여기에 관련 없는 코드를 붙여넣지 않았습니다;) 주의해 주세요.

에서 컴포넌트를 초기화할 때 onSuccess 콜백을 추가합니다.componentDidMount().

componentDidMount: function() {
  gapi.signin2.render('g-signin2', {
    'scope': 'https://www.googleapis.com/auth/plus.login',
    'width': 200,
    'height': 50,
    'longtitle': true,
    'theme': 'dark',
    'onsuccess': this. onSignIn
  });  
},
...

출처: https://developers.google.com/identity/sign-in/web/build-button, https://github.com/meta-meta/webapp-template/blob/6d3e9c86f5c274656ef799263c84a228bfbe1725/app/Application/signIn.jsx.

기능적인 컴포넌트에서 이 기능을 사용해야 하기 때문에 적응 방법을 공유하려고 componentDidMount 대신 사용할 수 있는useEffectHook을 사용해야 했습니다.

  useEffect(() => {
    window.gapi.signin2.render('g-signin2', {
      'scope': 'https://www.googleapis.com/auth/plus.login',
      'width': 200,
      'height': 50,
      'longtitle': true,
      'theme': 'dark',
      'onsuccess': onSignIn
    })
  })

이제 모든 설정 작업을 캡슐화한 React Google Login NPM 패키지를 사용할 수 있습니다.구성 요소에만 옵션을 전달할 수 있습니다.

import React from 'react';
import ReactDOM from 'react-dom';
import GoogleLogin from 'react-google-login';
// or
import { GoogleLogin } from 'react-google-login';
 
 
const responseGoogle = (response) => {
  console.log(response);
}
 
ReactDOM.render(
  <GoogleLogin
    clientId="658977310896-knrl3gka66fldh83dao2rhgbblmd4un9.apps.googleusercontent.com"
    buttonText="Login"
    onSuccess={responseGoogle}
    onFailure={responseGoogle}
    cookiePolicy={'single_host_origin'}
  />,
  document.getElementById('googleButton')
);

코드는 패키지의 설명서에 기재되어 있습니다.

조금 늦을지도 모르지만, 나는 구현에 대한 나의 노력을 공유하고 싶다.제 경우처럼 버튼을 완전히 커스터마이즈하고 로더 같은 것도 갖고 싶습니다.후크를 사용하여 다시 구현했습니다.

/* istanbul ignore file */
import { useState, useEffect, useCallback } from 'react';
import { APP_IDS } from 'utils/constants';

const initgAuth = () =>
  // eslint-disable-next-line no-unused-vars
  new Promise((resolve, _reject) => {
    // eslint-disable-next-line no-undef
    gapi.load('auth2', () => {
      // eslint-disable-next-line no-undef
      const auth = gapi.auth2.init({
        client_id: APP_IDS.Google,
      });
      resolve(auth);
    });
  });

const initializeGoogle = () =>
  // eslint-disable-next-line no-unused-vars
  new Promise((resolve, _reject) => {
    if (typeof gapi !== 'undefined') {
      window.googleAsyncInit().then(auth => {
        resolve(auth);
      });
    } else {
      // eslint-disable-next-line func-names
      window.googleAsyncInit = async function() {
        const auth = await initgAuth();
        resolve(auth);
        return auth;
      };

      // eslint-disable-next-line func-names
      (function(d, s, id) {
        let js;
        const gjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {
          return;
        }
        // eslint-disable-next-line prefer-const
        js = d.createElement(s);
        js.id = id;
        js.src = 'https://apis.google.com/js/platform.js';
        js.onload = window.googleAsyncInit;
        gjs.parentNode.insertBefore(js, gjs);
      })(document, 'script', 'google_api');
    }
  });

const useGoogle = () => {
  const [google, setGoogle] = useState([]);
  const [isReady, setReady] = useState(false);

  const initGoogle = useCallback(async () => {
    const auth = await initializeGoogle();
    if (auth !== 'undefined') {
      setGoogle(auth);
      setReady(true);
    }
  });

  useEffect(() => {
    initGoogle();
  }, [initGoogle]);

  return [google, isReady];
};

이렇게 어떤 컴포넌트에서도 사용할 수 있습니다.

  const [GoogleInstance, isGoogleReady] = useGoogle();

   GoogleInstance.signIn().then(response => {
      const authResponse = response.getAuthResponse(true);
      doGoogleLogin(authResponse);
    });

사용자가 버튼 자체를 조작하기 전에 SDK가 로딩되어 있는지 확인할 수 있기 때문에 매우 편리합니다.구글 로그인이 필요한 컴포넌트/페이지가 다른 경우에도 사용 가능

구글을 추가해 주세요.platform.jsReact 앱의 스크립트 태그index.html:

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

클라이언트 ID 가져오기:

https://console.developers.google.com/apis/credentials


편집 도입된 실가동 어플리케이션에서 사용하는 실장에서의 갱신 예

여기 샘플이 있습니다.SignInWithGoogleTypescript의 기능 컴포넌트 구현에 대해 설명합니다.

// window.ts
export {};

declare global {
  interface Window {
    gapi: any;
  }
}


// index.tsx
import './window';

import React, {
  useEffect,
  useState,
} from 'react';

const SignInWithGoogle = () => {
  const [loaded, setLoaded] = useState<boolean>(false);
  const [signedIn, setSignedIn] = useState<boolean>(false);

  const onSignIn = (googleUser: {[k: string]: any}) => {
    if (!signedIn) {
      setSignedIn(true);

      const token = googleUser.getAuthResponse().id_token;

      // do something with the token (like send it to your api)...
    }
  };

  const onFail = ({
    error,
  }: {
    error: string;
  }) => {
    // do something
  };

  useEffect(() => {
    const { gapi } = window;

    if (!loaded) {
      gapi.load('auth2', () => {
        gapi.auth2.init().then((auth: any) => {
          auth.signOut().then(() => {
            gapi.signin2.render('google-signin-button', {
              width: 232,
              height: 40,
              longtitle: true,
              onsuccess: onSignIn,
              onfailure: onFail,
            });
          });
        });

        setLoaded(true);
      });
    }
  });

  return (
    <div
      id="google-signin-button"
      className="google-signin-button"
    />
  );
};

export default SignInWithGoogle;

다른 답변은 하나도 통하지 않았다.마침내 작동한 것은 div의 식별자로 클래스 대신 id를 사용하는 것이었습니다.

<div id="g-signin2" />

대신

<div className="g-signin2" />

「 」의 에, 「 」의 사용도 합니다.window.gapi.signin2.render른른른른른 른른른른른른른

언급URL : https://stackoverflow.com/questions/31610461/using-google-sign-in-button-with-react

반응형