Added Google Analytics/reCAPTCHA services complete opt-out

.env

@@ -1,17 +1,27 @@
+# NextJS parameters
 NEXT_PUBLIC_ENV=development
+
+# Website public data
 NEXT_PUBLIC_URL=http://localhost:3000/
 NEXT_PUBLIC_TAGS=serious, game, construction, educational
 NEXT_PUBLIC_TITLE=Domego
 NEXT_PUBLIC_AUTHOR=Florian Trayon
-NEXT_PUBLIC_BANNER=https://opengraph.githubassets.com/9694355db18d9b48687cf1656a2f5c4921fa5a98aee3fed92f93da4dd2bfead2/FlorianLeChat/Domego
+NEXT_PUBLIC_BANNER=https://opengraph.githubassets.com/master/FlorianLeChat/Domego
 NEXT_PUBLIC_TWITTER=@FlorianTrayon
 NEXT_PUBLIC_DESCRIPTION=Domego is a serious educational game in which each player takes the role of an actor in a construction operation.
-NEXT_PUBLIC_CAPTCHA_PUBLIC_KEY=
-NEXT_PUBLIC_ANALYTICS_IDENTIFIER=
 
+# Google Analytics and reCAPTCHA keys
+NEXT_PUBLIC_RECAPTCHA_ENABLED=false
+NEXT_PUBLIC_RECAPTCHA_PUBLIC_KEY=6Lxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+
+NEXT_PUBLIC_ANALYTICS_ENABLED=false
+NEXT_PUBLIC_ANALYTICS_TAG=G-XXXXXXXXXX
+
+RECAPTCHA_SECRET_KEY=6Lxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+
+# MongoDB credentials
 MONGODB_HOST=localhost
 MONGODB_PORT=27017
 MONGODB_DATABASE=domego
 MONGODB_USERNAME=username
-MONGODB_PASSWORD=password
-CAPTCHA_SECRET_KEY=
+MONGODB_PASSWORD=password

pages/_app.tsx

@@ -40,11 +40,12 @@ function Domego( { Component, pageProps }: AppProps )
 	const recaptchaUrl = new URL( "https://www.google.com/recaptcha/api.js" );
 	const favicons = `${ basePath }/assets/favicons`;
 
-	analyticsUrl.searchParams.append( "id", process.env.NEXT_PUBLIC_ANALYTICS_IDENTIFIER ?? "" );
-	recaptchaUrl.searchParams.append( "render", process.env.NEXT_PUBLIC_CAPTCHA_PUBLIC_KEY ?? "" );
+	analyticsUrl.searchParams.append( "id", process.env.NEXT_PUBLIC_ANALYTICS_TAG ?? "" );
+	recaptchaUrl.searchParams.append( "render", process.env.NEXT_PUBLIC_RECAPTCHA_PUBLIC_KEY ?? "" );
 
 	// Déclaration des variables d'état.
 	const [ analytics, setAnalytics ] = useState( false );
+	const [ recaptcha, setRecaptcha ] = useState( false );
 
 	// Création du socket de communication avec le serveur.
 	//  Source : https://github.com/vercel/next.js/discussions/15341
@@ -119,14 +120,20 @@ function Domego( { Component, pageProps }: AppProps )
 				},
 
 				// Exécution des actions de consentement.
-				onConsent: ( { cookie } ) => (
-					cookie.categories.find( ( category: string ) => category === "analytics" ) && setAnalytics( true )
-				),
-
-				// Exécution des actions de changement.
-				onChange: ( { cookie } ) => (
-					cookie.categories.find( ( category: string ) => category === "analytics" ) && setAnalytics( true )
-				)
+				onConsent: ( { cookie } ) =>
+				{
+					cookie.categories.forEach( ( category: string ) =>
+					{
+						if ( category === "analytics" )
+						{
+							setAnalytics( process.env.NEXT_PUBLIC_ANALYTICS_ENABLED === "true" );
+						}
+						else if ( category === "security" )
+						{
+							setRecaptcha( process.env.NEXT_PUBLIC_RECAPTCHA_ENABLED === "true" );
+						}
+					} );
+				}
 			}
 		);
 	}, [ basePath ] );
@@ -161,7 +168,6 @@ function Domego( { Component, pageProps }: AppProps )
 			{analytics && (
 				<>
 					<Script src={analyticsUrl.href} strategy="lazyOnload" />
-					<Script src={recaptchaUrl.href} strategy="lazyOnload" />
 					<Script id="google-analytics" strategy="lazyOnload">
 						{`
 							window.dataLayer = window.dataLayer || [];
@@ -172,12 +178,15 @@ function Domego( { Component, pageProps }: AppProps )
 							}
 
 							gtag( "js", new Date() );
-							gtag( "config", "${ process.env.NEXT_PUBLIC_ANALYTICS_IDENTIFIER ?? "" }" );
+							gtag( "config", "${ process.env.NEXT_PUBLIC_ANALYTICS_TAG ?? "" }" );
 						`}
 					</Script>
 				</>
 			)}
 
+			{/* Google reCAPTCHA */}
+			{recaptcha && <Script src={recaptchaUrl.href} strategy="lazyOnload" />}
+
 			{/* Avertissement page sans JavaScript */}
 			<noscript>
 				<h1>Your browser does not support or refuses to load JavaScript.</h1>

pages/index.tsx

@@ -44,7 +44,7 @@ export default function GameHome()
 		//  Google reCAPTCHA pour déterminer si l'utilisateur est un humain.
 		const Swal = ( await import( "sweetalert2" ) ).default;
 
-		if ( process.env.NEXT_PUBLIC_CAPTCHA_PUBLIC_KEY && process.env.NEXT_PUBLIC_ENV === "production" )
+		if ( process.env.NEXT_PUBLIC_RECAPTCHA_ENABLED === "true" )
 		{
 			await Swal.fire( {
 				icon: "info",
@@ -79,7 +79,7 @@ export default function GameHome()
 						{
 							// Récupération et vérification du jeton d'authentification généré
 							//  par l'API de Google reCAPTCHA.
-							const key = process.env.NEXT_PUBLIC_CAPTCHA_PUBLIC_KEY ?? "";
+							const key = process.env.NEXT_PUBLIC_RECAPTCHA_PUBLIC_KEY ?? "";
 							const token = await window.grecaptcha.execute( key, { action: "create" } );
 
 							socket?.emit( "GameRecaptcha", token, ( icon: SweetAlertIcon, title: string, message: string ) =>
@@ -259,15 +259,21 @@ export default function GameHome()
 
 			{/* Avertissement de Google reCAPTCHA */}
 			<small>
-				<Trans
-					i18nKey="pages.index.google_recaptcha"
-					components={{
-						a1: <a href="https://policies.google.com/privacy">...</a>,
-						a2: <a href="https://policies.google.com/terms">...</a>
-					}}
-				/>
-
-				<br />
+				{
+					( process.env.NEXT_PUBLIC_RECAPTCHA_ENABLED === "true" ) && (
+						<>
+							<Trans
+								i18nKey="pages.index.google_recaptcha"
+								components={{
+									a1: <a href="https://policies.google.com/privacy">...</a>,
+									a2: <a href="https://policies.google.com/terms">...</a>
+								}}
+							/>
+
+							<br />
+						</>
+					)
+				}
 
 				<Trans
 					i18nKey="pages.index.cookies_preferences"

routes/recaptcha.ts

@@ -8,9 +8,8 @@ export function Recaptcha( _io: Server, socket: Socket )
 {
 	socket.on( "GameRecaptcha", async ( token, callback ) =>
 	{
-		// On vérifie d'abord si la clé secrète de l'API de Google reCAPTCHA
-		//  a été définie ou non.
-		if ( !process.env.CAPTCHA_SECRET_KEY || process.env.NEXT_PUBLIC_ENV === "development" )
+		// On vérifie d'abord si le service est activé ou non.
+		if ( process.env.NEXT_PUBLIC_RECAPTCHA_ENABLED === "false" )
 		{
 			callback( "success", "🤖", "🤖" );
 			return;
@@ -27,7 +26,7 @@ export function Recaptcha( _io: Server, socket: Socket )
 		// On effectue alors une requête à l'API de Google reCAPTCHA
 		//  afin de vérifier si le jeton d'authentification envoyé par le client
 		//  est valide ou non.
-		const secret = process.env.CAPTCHA_SECRET_KEY;
+		const secret = process.env.RECAPTCHA_SECRET_KEY;
 		const endpoint = `https://www.google.com/recaptcha/api/siteverify?secret=${ secret }&response=${ token }`;
 		const response = await fetch( endpoint );