[エラー解決]反応-google-loginのidpiframe initiation failed

問題の状況

react-gogl-gogloginライブラリを使用してGoogleログインを実現する過程で、このエラーメッセージはコンソールに出力されます.

これは、次のコードをクリックして生成されたグーグルボタンをクリックするとエラーが発生し、ユーザーがデータを受信することを阻止します.
(ただしFirefoxでテストすると、ユーザーのデータを誤って返さない…なぜでしょうか…?🤔)

import GoogleLogin, { useGoogleLogin } from 'react-google-login';
import * as config from '../../config';

function Google() {
    const onSuccess = (response) => {
        console.log(response);
      // 받아온 데이터 처리하기
    }
    const onFailure = (error) => {
        console.log(error);
    }
    return (
        <div>
            <GoogleLogin
                clientId={config.GOOGLE_CLIENT}
                buttonText="Login with Google"
                onSuccess={onSuccess}
                onFailure={onFailure}
                cookiePolicy={'single_host_origin'}
            />
        </div>
    )
}

原因分析

正式な書類を確認しましたが、原因は以下の通りです.
Google Auth APIの初期化に失敗しました(クライアントがサードパーティCookieを有効にしていない場合)

Chrome(55.0.2883.95)は、個人情報を保護するために「サードパーティCookieとWebサイトのデータを遮断する」を設定します.私の場合、これはクライアントがサードパーティセッションストレージを有効にしていないためです.

解決策

Google Chromeブラウザ設定>プライバシーとセキュリティ>Cookieとその他のサイトデータ

すべてのCookie設定を許可する

またはサードパーティクッキーシールドを設定した後、下部にシールド例外サイトを設定します.下図のように[*.]google.com

を追加

これによりエラーが消え、ユーザーデータが正常に受信されます.🥳