반응과 함께 구글 사인 버튼 사용
리액트 어플리케이션에서 구글 사인인을 사용하려고 합니다.어플리케이션 외부에서 사인 버튼을 사용하는 것 자체는 정상적으로 동작하지만 커스텀 사인 컴포넌트 내에서 사용하는 경우 예상대로 동작하지 않습니다.사용자가 서명할 때 버튼 자체가 실행되어야 합니다.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.js
React 앱의 스크립트 태그index.html
:
<script src="https://apis.google.com/js/platform.js" async defer></script>
클라이언트 ID 가져오기:
https://console.developers.google.com/apis/credentials
편집 도입된 실가동 어플리케이션에서 사용하는 실장에서의 갱신 예
여기 샘플이 있습니다.SignInWithGoogle
Typescript의 기능 컴포넌트 구현에 대해 설명합니다.
// 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
'programing' 카테고리의 다른 글
슬라이더가 표시되지 않음: setREVStartSize가 정의되지 않았습니다. (0) | 2023.04.06 |
---|---|
React/React Native에서 컨스트럭터를 사용하는 것과 getInitialState를 사용하는 것의 차이점은 무엇입니까? (0) | 2023.04.06 |
Ajax를 사용하여 Select2를 사용하여 로드 시 초기 값 설정 (0) | 2023.04.06 |
JQuery - 글로벌 변수에 Ajax 응답 저장 (0) | 2023.04.06 |
기존 Spring Boot App에서 OpenApi 3.0 사양을 생성하는 방법 (0) | 2023.04.06 |